Page 25: Last Page (rubric)
Spring 2026 Sample Solution
You have made it to the end of the first workbook!
Hopefully, you got here by going through every page and completing the work on it. The boxes are the biggest part of it. Here is a list of all the boxes, and whether or not you checked the checkbox for the box. This way you can keep track of what you’ve completed.
List of Boxes
| Box The box name links back to the box. | Check These checkboxes indicate whether you have checked the checkbox for the box. If you didn't check the box, go back to it, make sure the work is completed, and check it. | Tag (internal) This is our "internal code name" for the box. | Kind
Kinds of boxes: view - look at the box and experiment with it examine - look at the code for the box edit - change the box's content rubric - several steps are suggested in the rubric page - form elements on page in rubric |
|---|---|---|---|
| 01-02-01 | ex-simple | rubric | |
| 01-04-01 | eg-elements | view | |
| 01-04-02 | eg-styling | view | |
| 01-04-03 | eg-style-sheet | view | |
| 01-04-04 | eg-color | view | |
| 01-04-05 | eg-layout | view | |
| 01-04-06 | eg-buttons | view | |
| 01-04-07 | eg-sliders | view | |
| 01-04-08 | ex-button | rubric | |
| 01-06-01 | eg-code | view | |
| 01-06-02 | ex-code | view | |
| 01-06-03 | eg-code-too | view | |
| 01-06-04 | eg-defer | view | |
| 01-06-05 | eg-function | view | |
| 01-06-06 | eg-literal | view | |
| 01-07-01 | eg-html | view | |
| 01-07-02 | eg-event | view | |
| 01-07-03 | eg-slider | view | |
| 01-07-04 | eg-output | view | |
| 01-07-05 | eg-button-slider | view | |
| 01-07-06 | eg-better | view | |
| 01-07-07 | ex-add-js | rubric | |
| 01-09-01 | eg-animation | view | |
| 01-09-02 | eg-parallelism | view | |
| 01-09-03 | ex-parallelism | rubric | |
| 01-09-04 | eg-infinite | view | |
| 01-10-01 | eg-time | view | |
| 01-10-02 | ex-time | rubric | |
| 01-10-03 | eg-blink | view | |
| 01-11-01 | ex-sliders | rubric | |
| 01-11-02 | ex-start | rubric | |
| 01-11-03 | ex-bounce | rubric | |
| 01-11-04 | ex-throb | rubric | |
| 01-12-01 | ex-throb3 | rubric | |
| 01-12-02 | ex-control | rubric | |
| 01-12-03 | ex-orderly | rubric | |
| 01-13-01 | color | view | |
| 01-14-01 | eg-canvas-vs-svg | view | |
| 01-14-02 | eg-red-square | view | |
| 01-14-03 | eg-moving-squares | view | |
| 01-14-04 | eg-svg | view | |
| 01-15-01 | eg-basics | view | |
| 01-15-02 | eg-stroke-fill-four | view | |
| 01-15-03 | eg-stroke-fill-three | view | |
| 01-15-04 | eg-stroke-fill-five | view | |
| 01-15-05 | eg-transparency-three | view | |
| 01-15-06 | eg-transparency-two | view | |
| 01-15-07 | eg-transparency-many | view | |
| 01-18-01 | eg-two-circles | view | |
| 01-19-01 | ex-four-things | rubric | |
| 01-19-02 | ex-drawing | rubric | |
| 01-20-01 | eg-svg-animation | view | |
| 01-20-02 | eg-svg-event | view | |
| 01-21-01 | eg-display-list | view | |
| 01-21-02 | eg-canvas-event | view | |
| 01-21-03 | eg-object-event | view | |
| 01-21-04 | eg-animation-event | view | |
| 01-21-05 | eg-animation-event-rain | view | |
| 01-21-06 | eg-interaction-no-event | view | |
| 01-21-07 | eg-interaction-no-event-button | view | |
| 01-22-01 | ex-clicks | rubric | |
| 01-23-01 | ex-fireworks | rubric | |
| 01-24-01 | creative1 | rubric |
Here is a list of all of the box rubric items in this workbook. You should make sure that you have done all the ones that you want to do. They are checked off if you checked the check box. You should only check the boxes that you have completed (we might check).
Workbook Rubric
| Box The box name links back to the box. | These checkboxes indicate whether you have checked the box for the rubric item. If you didn't check the box, go back to it, make sure the work is completed, and then check the checkbox. | Kind
Kind of rubric items: standard - expected from all students advanced - used to get a better grade creative - an opportunity to do something creative levels - rubric item graded by selected achievement level optional - not required, but encouraged |
Description |
|---|---|---|---|
| 01-02-01 | X | standard | change web page text |
| 01-04-08 | X | standard | make a red button with your name in it |
| 01-07-07 | X | standard | add a javascript file that says something |
| 01-09-03 | X | standard | Fix bug so that all the sliders work |
| 01-10-02 | X | standard | change slider speed to half |
| 01-11-01 | X | standard | making 3 sliders |
| 01-11-01 | X | standard | making slider3 be slider2-slider1 (and update when either slider2 or slider1 is moved) |
| 01-11-01 | X | standard | adjusting slider1 and slider2 when slider3 moves |
| 01-11-02 | X | standard | making the 3 input elements |
| 01-11-02 | X | standard | making the slider move (continuously) when start is pressed |
| 01-11-02 | X | standard | making the slider stop when the stop button is pressed |
| 01-11-02 | X | standard | making the slider starting again when the start button is pressed (after being stopped) |
| 01-11-03 | X | standard | correct use of time delta |
| 01-11-03 | X | standard | slider goes forward |
| 01-11-03 | X | standard | slider goes backward |
| 01-11-03 | X | standard | slider goes back and forth |
| 01-11-04 | X | standard | correct use of time delta |
| 01-11-04 | X | standard | fade between colors |
| 01-11-04 | X | standard | colors transition in both directions (red->white, white->red - or others) |
| 01-12-01 | X | optional | Make a 3-color throb |
| 01-12-02 | X | optional | buttons to cause fade to 3 colors |
| 01-12-03 | X | optional | randomly change between colors with timing |
| 01-12-03 | X | optional | put selected colors into the sequence |
| 01-19-01 | X | standard | made all 4 shapes |
| 01-19-02 | X | advanced | it's a picture |
| 01-19-02 | X | standard | shapes that aren't rectangles |
| 01-19-02 | X | standard | obvious transparency |
| 01-22-01 | X | standard | circles appear at mouse click |
| 01-22-01 | X | standard | circles change change color when mouse is over them |
| 01-22-01 | X | standard | circles change back when mouse leaves |
| 01-22-01 | X | advanced | circle changes color when clicked, hover still works |
| 01-23-01 | X | standard | user clicks mouse, firework shoots from the bottom towards mouse |
| 01-23-01 | X | standard | firework moves to mouse position over time |
| 01-23-01 | X | standard | firework disappears (explodes) when it gets to position |
| 01-23-01 | X | standard | small moving pieces appear where big one explodes |
| 01-23-01 | X | standard | pieces move outward from explosion |
| 01-23-01 | X | standard | multiple fireworks at once (if user clicks quickly) |
| 01-23-01 | X | standard | fireworks are different colors |
| 01-23-01 | X | advanced | explosions fade out (or disappear) after a distance |
| 01-23-01 | X | advanced | fireworks start from random locations at bottom |
| 01-23-01 | X | advanced | random fireworks in addition to user clicks |
| 01-23-01 | X | advanced | projectile motion |
| 01-23-01 | X | creative | Creative Fireworks |
| 01-24-01 | X | creative | Make something cool! |
Handing things in…
Please check one more time that your NetID is correct:
Please tell us how you used AI tools in doing this workbook. Remember, disclosing AI usage is a part of the class policy on AI usage.
In the following type-ins you should give attributions for any work that you included. For example, if you took an image or model from the web.
Check that the local store is correctly written (and the json file moved to the correct location) - it probably changed after you filled in the AI Note and Attributions.
If you’ve done that, then you are ready to submit your workbook!
Make sure to commit and push your work. And then press the “Submit” button to tell us that your assignment is ready for grading.
You are viewing the solution version of this page. Submission is disabled.
After pressing the submit button, the File Status may say “The json file does not match the local store” because the submission time is now in the local store. You don’t have to worry about that.
If you’ve made something you are particularly proud of, we encourage you to submit it for the gallery.
Congratulations! You’ve completed Workbook 1.