Page 6: Try it Yourself

So far, this workbook has mainly been you reading code (and html). Hopefully, you also took the opportunity to do some extra reading (for example, reading some JavaScript references). And some tinkering: one way to understand the programs is to try to make changes to see how things work.

On this page, we have three boxes that you need to do yourself.

To help you check that you are getting the concepts, here are a few little programming things to try. In each box, we will ask you to do something. You should edit the 01-06-01.html, 01-06-02.html, and 01-06-03.html files accordingly to do it. These will be the things that the grader will check.

These little exercises are simple - and not very interesting. But make sure you understand what you are doing, since they will be the building blocks for doing more interesting things later.

And of course, to correctly use GIT to commit your work and push it back to the repository on GitHub.

For this workbook, it is OK that the JavaScript code is in the HTML files. In fact, it is preferred.

Note that the rubric for the boxes on this page is at the bottom. In fact, all workbook pages have the rubrics at the bottom.

Box 1: Sliders

In this box (01-06-01.html), make 3 sliders. Add event handlers such that the third slider shows the difference in value between the first two. So that slider3 = slider2 - slider1. Slider3 should move whenever slider1 or slider2 are moved. Making it such that slider1 and/or slider2 move when slider3 moves is a little trickier (and worth more points) - you need to figure out how to make reasonable values for slider 1 and 2 given a new value for slider 3.

Hint: Box 3 on Page  4  (Doing things to HTML) is a good starting point. The lower of the two sliders there has a nicer behavior for this exercise. Consider setting the min and max properties of the sliders so that the third slider has the right range. The min can be negative.

Box 2: Start Stop

In this box, make a slider and two buttons. One labeled “start” the other labeled “stop”. When you press “start”, the slider starts moving. When you press “stop” the slider stops. This is sortof like the last slider in Box 3 on Page  5  (Animation Loops), except that you should use two buttons, rather than one checkbox.

Box 3: Bounce

The sliders on Page  5  (Animation Loops) all went from left to right, and then restarted at the left.

In this box, make the slider move from left to right, but when it hits the right edge, have it move right to left. It should repeat (so it goes back and forth - as if it “bounces” when it hits the edge).

The “blinking” in Box 5 of Page  5  (Animation Loops) is really annoying. Instead let’s make something a little less annoying: instead of just changing to another color in a flash, have the color slowly (but not too slowly) change from one color to another and back. It should repeat.

The basic version of this would have the color go between red and white. This is basically the same as Box 3, except that rather than changing the position of the slider, you are changing the background color of the text (or the blue and green components of the color).

For bonus points, have the text background change (smoothly) between a list of colors. (just like page 5 switched between red, yellow, and green, you could make yours slowly fade from red to yellow to green then back to red).

Hint: We’ve been using HTML colors as hex (so red is #FF0000). You’ll may want to do your math with regular numbers and convert. Here is a reference page that might be useful. Or, you might find a more convenient way to specify colors using numbers.

The End!

When you’re done with your work, remember to commit everything and push it back to GitHub. And, when you’re done, don’t forget to do the “handin quiz” on Canvas that tells us that your assignment is ready to be graded.

Page Rubric
  • (Box: 01-06-01) (2 pts) making 3 sliders
  • (Box: 01-06-01) (3 pts) making slider3 be slider2-slider1 (and update when either slider2 or slider1 is moved)
  • (Box: 01-06-01) (3 pts) adjusting slider1 and slider2 when slider3 moves
  • (Box: 01-06-02) (2 pts) making the 3 input elements
  • (Box: 01-06-02) (2 pts) making the slider move (continuously) when start is pressed
  • (Box: 01-06-02) (2 pts) making the slider stop when the stop button is pressed
  • (Box: 01-06-02) (2 pts) making the slider starting again when the start button is pressed (after being stopped)
  • (Box: 01-06-03) (2 pts) slider goes forward
  • (Box: 01-06-03) (2 pts) slider goes backward
  • (Box: 01-06-03) (3 pts) slider goes back and forth
  • (Box: 01-06-04) (3 pts) fade between colors
  • (Box: 01-06-04) (3 pts) colors transition in both directions (red->white, white->red - or others)
  • (Box: 01-06-04) (3 pts) transition between multiple colors