CPSC 120, Fall 2014
Lab 7: More Functions and Ifs

As we get ready for the test next week, this lab is more about consolidating ideas than it is about introducing new concepts. We are taking a break from graphics for this lab. The two exercises ask you to work with functions and if statements. You should try to finish the lab, or at least work on both exercises, before the test.

To begin the lab, create a new folder named lab7 in your cs120. folder. Your work for the lab should be placed in that folder.

Please remember that your work for the previous lab should be in a folder named lab6 in your cs120 folder. Note: You can turn in Exercise 3 from Lab 6 next Friday instead of today. Just move guessing-game.html

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;

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:

Problem 1: What is 37 + 21 ?

Your answer:

(You don't have a score yet.)

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

Problem 2: What is 18 + 50 ?

Your answer:

You have attempted 1 questions and have answered 0 correctly.

After some time, it might say:

Problem 21: What is 33 + 8 ?

Your answer:

You have attempted 20 questions and have answered 14 correctly.

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.