Page Localstore: Local Storage Interface
Spring 2026 Sample Solution
This page provides access to the local store interface. It duplicates what is on other pages.
The debug button write out the contents of the local store to the console:
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 |
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! |