Exercise 1: Improved Slideshow

In class on Wednesday, we looked at functions showPic(N) and nextPic() and how they can be used to implement a slideshow with a "Next" button instead of individual buttons for each picture. For your first exercise, you should implement this idea. And you should have a "Previous" button as well as a next button.

To start the exercise, you can copy your slideshow from Lab 3 into your lab7 folder. (Alternatively, you can use my slideshow, which can be found in /classes/cs120/slideshow.)

Remove the buttons and replace them with a "Next" button and a "Previous" button. You might want to put the buttons to the left and right of the image, and you might want to name them something like ">>>" and "<<<" instead of "Next" and "Previous". Replace the current <script> with one that implements the new buttons.

Here is the code that we looked at in class. You can adapt it for your new script, but remember that you also have to change the picture's captions when you change the picture:

var currentPic = 1;

function nextPic() {
    currentPic = currentPic + 1;
    if (currentPic > 4) {
        currentPic = 1;
    }
    showPic(currentPic);
}

function showPic( N ) {
    var pic = document.getElementById("picture");
    if ( N == 1 ) {
        pic.src = "lion.jpg";
    }
    else if ( N == 2 ) {
        pic.src = "elephants.jpg";
    }
    else if ( N == 3 ) {
        pic.src = "polar-bear.jpg";
    }
    else if ( N == 4 ) {
        pic.src = "chipmunk.jpg";
    }
}

(One new bit of information, from my slideshow... It can take some time for a web browser to retrieve an image. For a slide show, it's a good idea to "preload" the images so that the loading is already done before the user clicks the button. In my slideshow, I preload the images in my script. It's done using lines of the form:

    var img1 = new Image(); img1.src="bluejay.jpg";
    var img2 = new Image(); img2.src="chipmunk.jpg";
    var img3 = new Image(); img3.src="elephants.jpg";

and so on. The first part, img1 = new Image(), creates something called an image object, which can represent an image that has been loaded by the browser but not shown on the page. The second part, img1="bluejar.jpg", says which image it is and makes the browser load that image. Later, when you add the image to the page, the browser already has the image and doesn't need to load it again. This is not something that you should do with a huge number of images, but it works for a slideshow with a limited number of images.

And, by the way, if you have loaded an image in this way, you should be able to draw the image onto a canvas using a graphics context. Use a command such as graphics.drawImage(img1,x,y). The image will be drawn on the canvas with its upper left corner at the point (x,y).)

Exercise 2: Addition Quiz

For this exercise, you should create a web page that administers a simple addition quiz to the user. The page will present a sequence of problems to the user. The user will enter an answer in a text-input box and will tell the user if the answer is correct or wrong. After the user has answered a problem, the page will change the problem, and the user can answer the new problem. The page will show the number of problems that the user has attempted and the number of problems that the user has answered correctly. When the page is first loaded, it should look something like this:

After the user has answered the first problem, it might say:

After some time, it might say:

You should pick the numbers for the problem at random. The numbers should be small integers. For example, use integers that have no more than two digits. To get such a number, you can use

firstNum = Math.floor( 100*Math.random() );

As you design your program, think about the global variables that you will need. What quantities do you have to remember between one click of the button and the next? How do the first numbers get onto the page? What has to happen when the user clicks the button?

You are welcome to try to improve the program. For example, you could ask the user their name and use that name on the page. You could tell the user the correct answer if they get a problem wrong. You could add encouraging comments (or sarcastic ones). Maybe you can think of other improvements on your own.