The next step is to extend the app from the last instructables with a HTML-Table that shows the whole calculation directly on page with pointing horizontal, vertical bars and the info of the binary operation (e.g. 9x13=117).
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: CSS + Additional HTML Lines
The most important lines of the css (autoCalcGUI.html) part is the table that gets once framed when the first row and column is appearing. tr: hover is when you mark horizontally the pointing row with the cursor. The odd thing is that the pointing vertical bar with col tag does not work with CSS, so I solved with a workaround in JS. (is shown later) Probably there is a better solution in the web.
In the html file there are also few lines added, a checkbox to enable, disable html table output and avoid clearing input text when pushing enter.
Step 2: Diagramm With Additional Entities
We create an additional worker that is responsible for the HTML Table output. Some changes in the code are also necessary.
Step 3: Seperate Scriptfiles
The 2 workers have similar functions that we have to avoid code duplication. The swap and mode selection methods are saved now in seperate scriptfiles, so that these 2 workers can use them simultaneously. Rename workerCalc to workerCSV.js
Step 4: Import New Scriptfiles
Like mentioned before, some methods are in seperate files like shown in image. So importScripts contains these necessary methods.
Step 5: Changes in Controller.js: Selected Workers
If the HTML-Table checkbox is checked both workers will be enabled, otherwise only one that generates the csv spreadsheet.
Step 6: Changes in Controller.js: Use Workers Simultaneously
Start up to 2 workers for generating the csv file and creating the HTML-Table.
Step 7: Changes in Controller.js: Vertical Pointing Bar
This method is for the vertical marking bar of columns, it's a workaround, because I didn't get it work only with CSS.
Step 8: New Workerfile
This worker creates a string containing the whole html code + calculations for table, rows and columns. It's similar to the another worker, it contains the necessary tags with appended values and results. If you point on a result you will get the calculation as info it's embedded in the td title="" tag.
Step 9: The Finished App
I realized that the app blocks when using huge values, because of the DOM Access for the table output. Probably there is a better solution for that. But I think it's inevitable, somehow you have to access to DOM if you create a HTML-Table.
App is provided as zip.