Page 12: Advanced Items

On this page, there are some more complicated web programming exercises to try.

These exercises are optional. You can move on to Next: Page  13 - Graphics101: Some Foundations. There are more challenging versions of the slider and text exercises on the previous page. You might prefer to move on to graphics programming.

In the past, web programming was a separate workbook, so we needed to make some assignments that would challenge students, but not require graphics programming (since that came later).

These exercises are good practice at thinking about the logic of programming with events and solving problems with web programs. They are good practice for the kinds of programs you will write later in the semester. But, since they only manipulate sliders and text colors, they aren’t very interesting.

This year, we are making these optional.

Throb, not blink redux

On page Page  11  (Try it Yourself), you made text “throb” - transitioning from white to red. You might have noticed that the assignment said “basic” is to transition between red and white, and that my original demo transitioned between 3 colors.

So, in this box, you can try the more advanced version: make the text alternate between red yellow and green, but have it make smooth transitions between colors (it should fade from green to yellow to red then back to green, and repeat - just like 01-10-03, but fading instead of jumping.).

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

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.

In all these examples, I recommend changing the color of the background of the text (leave the text black).

A little more control

This is a similar exercise, except that rather than having the text change by itself, we will have the text change in response to the user.

In the following box (in 01-12-02.html), add three buttons called “red”, “yellow” and “green”. You can add the buttons right to the HTML, or you can have your program add the buttons. If you want to make more than 3 buttons (for other colors) that is OK.

When a button is pressed, immediately, the text (which says “here is some text” to begin with) should (immediately when the button is clicked) change to say “here is some text that will become COLOR”. Then, over 2 seconds, the text should gradually fade so the background becomes that color.

The box below is 01-12-02.html Write your code in 01-12-02.js

Note: for this box, don’t worry about what happens if the user presses the button during the previous transition. That turns out to be a bit harder.

More orderly

This exercise is a variant of the previous…

Pick (at least 5) colors.

(Part 1) The text should have the following behavior:it transitions (over 1/2 second) to white, it picks a color randomly from the list, then it transitions (over 1/2 second) to the chosen color, then it stays the chosen color for 1 second. This repeats over and over (so its a sequence of random colors, transitioning through white between colors).

(Part 2) (to make this even harder…) add a button for each of the colors. When the user presses the button for the color, the next change will be to that color. That is, if the text is already changing to one color, it will change to that color and then to the select color. And, if there are multiple button presses, it should change to all of them. If the user presses red, then yellow then green in rapid succession, the text will change to red, then to yellow, then to green (preserving the timing).

The box below is 01-12-03.html Write your code in 01-12-03.js