About this stage
Now that we can track the infection rate using our dynamic table, we want to make that table a bit nicer in appearance and have a less clunky way of stopping the app to collect the data.
There's some nice tabular formatting in our HailStone app (check it out!) so we will 'borrow' ideas from there.
Ponder Points (Simulitis ~ Stage 8)
- Looking at the Hailstone app source code mentioned above, we noticed that the styling for the table was in an external file: hailstoneStyles.css Although we have plenty of styles within this page in the 'style' block, we decided (kinda arbitrarily) to put the table styles in an external file: simulitiusStyles.css. Mimicing the command that placed the hailstone table styles in that app, what command do you think we used here to bring in our table styles?
- Run the app with default settings for a bit and notice that the table stops growing after a bit. Is the information still being generated? How can you see it? Looking at the CSS for the table, what statement do you think is causing this scrolling behavior?
- Run the app with all sliders to the far right. Stop when the infection percentage is less than 5. Can you still copy all the data even though the information scolls? If so, paste it into Excel and create a ScatterPlot graph to show the results. Save it as a spreadsheet in the same area where you are storing your Ponder Points.
- In the updateStats function, there is a variable called rowParity. Study the code and form an opinion on what you think it does? What does the word 'parity' often mean in computing circles?
- Visually, the rowParity has an effect on the table's appearance? How would you describe that effect?
- Look at Stage 7 and find the HTML code that makes the 'Go!' button. Without looking at this page's HTML source code, what code do you think we wrote to create the 'End' button, knowing that it had an id of 'stopBtn' and was going to call the 'stopSim' function?
- sketch8.js currently has over 500 lines of code! How many functions are represented? Processing requires us to have the draw and setup functions. We included an init function to do stuff once the page loaded. Run the app and without hitting the 'Go!' button, look at the console in the Developer Tools area. Of the 3 functions: draw, init and setup...what order are they called in? In particular, what specific line of code created the phrase: '==>Beginning function 'init''
- We at the labs call statements like: '==>Beginning function 'init'' breadcrumbs because they help us identify the flow of logic as a program runs, and might help us find our way (breadcrumbs, get it?!) if we get lost in the logic. These breadcrumbs are usually removed in the final version. How many function 'breadcrumb' type statements exist in sketch8.js so far?
Last update: 03/17/20
Stats:
Elapsed time:
Healthy:
Infected:
Recovered:
Infection Table
| Time | % Infected |
|---|