Page 7: Advanced Points

On this page, there are some more “advanced” exercises to try.

To be honest, these are a bit gratuitous… they are mainly here so we can have this first workbook be more “normal”. In the past, there was no way to earn an A on this first workbook, and no way to try out the advanced points mechanics in class.

These exercises aren’t really graphics programming (since we’re not doing that yet). They are trickier time varying and interactive programming that extend the previous exercises. They are practice at understanding the event-driven programming model and incorporating logic to make behaviors. Later in the class, you will use these kinds of things to make graphics objects move in interesting ways.

The Concept of Advanced Points

Before starting this page, make sure you understand the concept of advanced points. Only do the exercises on this page if you’ve done all the basic stuff in the workbook.

Remember, you can only earn advanced points if you turn the assignment in on time. If you miss the deadline, you are better off using your energy to get going on the next assignment.

Also, on any assignment, there is a limit to how many advanced points you can earn. We do this so students don’t try to do the advanced stuff to make up for not doing the basics. On this assignment there is a limit of 6 points. So even if you do all of these advanced exercises and score all 9 points, you can only earn a maximum of 6.

This means the most points you can earn on this assignment is 85 + 6 which is enough for an A. There is no way to get an A+ on this assignment. Remember, that with workbooks, there is no notion of “percentages” - on some workbooks you can score more than 100, on some workbooks you can only score less than 100. There is nothing magic about 100.

Note: graders will not have time to give partial credit for these exercises. They either work or they do not.

Box 7-1: Throb, not blink redux

On page 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 (on page 5) 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 box 5 on Animation Loops, but fading instead of jumping.).

The box below is 01-07-01.html Write your code in 01-07-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).

Box 7-2: 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-07-01.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-07-02.html Write your code in 01-07-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.

Box 7-3: 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-07-03.html Write your code in 01-07-03.js

The End!

This really is the end of the workbook. Don’t forget 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.