Computer Science Coding

Lab 6 Part I (30 points)

A popular children’s toy is the Magic 8 Ball,an oversizedplastic billiard ball that yields answers to simple questions. (Magic 8 Ball is a trademark owned by Mattel, Inc. © 2003 Mattel, Inc. All Rights Reserved.) To receive its wisdom, you ask the Magic 8 Ball a question, shake it vigorously, and then read the response that appears in a window on the bottom. Functionally speaking, the Magic 8 Ball determines its answer by randomly selecting from a list of predetermined responses, such as “yes,”“no,”and “reply hazy—try again.”

Create a Web page named magic.html that simulates the functionality of a Magic 8 Ball. Your page should look similar to the figure shown below, with a text box for entering a yes/no question and a clickable 8-ball image (a simple image is provided in http://balance3e.com/Images/8ball.gif). When the button is clicked, a function should be called to select a random response from a list of at least five possible responses (using the RandomOneOf function) and display the response in a page division. Test your page to make sure that it operates correctly, providing a (potentially) different answer on each click.

Lab 6 Part II (10 points)

The time.js Library

JavaScript provides basic features for manipulating dates and times. Building upon these features, the time.js library (available as http://balance3e.com/time.js) contains the definitions of several functions that can be useful within a variety of pages (see the table below).

The Web page shown next uses the CurrentTime function from time.js to timestamp the page as it loads. The showClock function, which is defined in the HEAD of the page, is automatically called when the page is finished loading (line 24).That function calls CurrentTime to get the current time and displays that time in the outputDiv page division (lines 18–19).The rendered page is shown below the code.

Enter the clock.html text from Figure 9.14 into a new Web page, then load the page in the browser to verify that it behaves as shown below.

As is, your clock.html page displays a single time—the clock time when the page was loaded. Modifying this page so that it displays a dynamic, running clock is surprisingly simple. Recall from Chapter 7 that the predefined setInterval function schedules the repeated execution of a function call at regular intervals. In particular, the call

setInterval(‘showClock()’, 1000)

will schedule the showClock function to be called every second (1,000 milliseconds). The result is that the current time is repeatedly updated in place on the screen, in effect turning the page division into a digital clock.

Modify the ONLOAD attribute of the BODY so that it executes this call to setInterval when the page loads (instead of the single call to showClock). Verify that the resulting clock “runs” in the page.