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.

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. Write your code in 01-06-01.js

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 (01-06-02.html), 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. Write your code in 01-06-02.js

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 (01-06-03.html), 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). You must use a time delta, as explained on Page  5  (Animation Loops), to control timing. Write your code in 01-06-03.js

Box 4: Throb, not blink

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. There should be a continuous fade between colors, not discrete jumps. It should repeat. Again, you must use a time delta, as explained on Page  5  (Animation Loops), to control timing.

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).

The box below is 01-06-04.html Write your code in 01-06-04.js

Hint: To move between two numbers a and b, you can weigh them with a parameter t which goes between 0 and 1, and the formula t*a + (1-t)*b. If you plug in t=0, you get b, and if you plug in t=1, you get a. If you plug in a value in between, you get some weighted value in between a and b. For example, t=0.5 gives you 0.5*a + 0.5*b = (a+b)/2, which is the average of the two. This concept is called linear interpolation, and we’ll cover it more later in the class.

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. Also see CS559 Color Tutorial.

Note: you need to make the text alternate between white and red. It should take 1 second to make the transition in each direction (use the clock!).

Note: you should not try to use any fancy HTML animation/transition features to cause the fading. You should write a program that changes the color every time step.

The End?

This is the end of the basic part of the workbook. There are some “advanced” exercises on the next page that you can use to earn advanced points and get more practice with web programming.

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 survey” on Canvas (Workbook 01 Handin (due Mon, Jan 30)) that tells us that your assignment is ready to be graded.