Laboratorio di tecnologie informatiche L-A 2006/2007

    Main     Slides     Tutorials     Exercises

JavaScript Exercises

The Magic 8-Ball

The Magic 8-Ball is a toy used for fortune-telling. The fortunes are given by a white plastic die in the shape of an icosahedron, floating in a blue liquid, with answers to yes-no questions in raised letters on its 20 triangular faces. There is a transparent window on the bottom of the 8-ball, and when the ball is held so that the window faces up, the die floats to the top randomly exposing one of its faces in the window.

We want to reproduce the fortune-telling mechanism on a web page, by using a form where inserting questions and obtaining answers, and exploiting JavaScript for the dynamic needings of our application. The following list enumerate requirements for our Magic 8-Ball web page, and a suggested path to... enlightenment by fortune-telling! ;-)

  1. Start the HTML page with a form containing a text area where the user can enter their question, and a button to submit that question. When the user clicks on the button, a random response should be generated and displayed in a text box.
  2. After writing the form, the simplest step further you can take is to hook the event handler for clicks on the button to a call to a JavaScript function.
  3. The handler could invoke a JavaScript predefined function, or a function you defined by yourself, e.g. in a script element contained in the head or body elements of the web page.
  4. The JavaScript code will need a data structure (e.g. an array) containing the answers from which the Magic 8-Ball will randomly pick up. A function will also be needed for generating a random number so as to randomly index your data structure. (Hint: look at Math.random and Math.floor)
  5. Finally, you'll need to pick the question from the HTML page and put the answer on the text box via JavaScript. Look at the predefined document object, and at how it can help traverse forms and their children elements.

Solution

Try a proposed solution to the Magic 8-Ball problem.

Questions and extensions

  • Data from the textarea is really not necessary at all, since the process of choosing an answer is independent from the question. But does an answer makes sense when there is no question? How would you modify the code to include a check that a question has really been made?
  • Having an input element containing output text is quite disturbing, even if the text field is readonly. Could you modify the solution to have it display the answer within a paragraph?
  • If the invocation of sayAnswer in the onclick handler is precedeed by answer = ['yes']; what happens to the Magic 8-Ball application? Why? Does it change anything if the variable declaration is preceeded by var?
  • How would you dynamically insert an onclick handler on the button instead of hard-coding it as an HTML attribute?

The Slot Machine

A slot machine is a type of casino game. Traditional slot machines are coin-operated machines with three (or more) reels, which spin when a lever on the side of the machine is pulled. The object of the game is to win money from the machine, which awards prizes when all the reels display the same symbol.

In order to reproduce a slot machine on a web page, you will need three images (for example, a clam, an octopus and a shrimp) representing the possible symbols to display. Then, you will also need a form containing: three spots for the screen of the slot machine (three spots, three images... you like to win easy, eh?); a button to have the images spin; an indicator of the amount of money you have; an indicator of the current bet, with two buttons to increase or decrease it. The game is over when all the money is lost.

Solution

Try a proposed solution to the Slot Machine problem.

Questions and extensions

  • Objects are used for reels (slots) and the slot machine only. Could you envision other abstractions in the Slot Machine application that may be modeled as objects?
  • There is duplication of information between the three img tags in the HTML document and the ids and images arrays in the script. Would you eliminate that duplication by deleting the tags and dynamically build them using those arrays, or by deleting arrays and extracting information about images from HTML? Try both ways, and see pros and cons for each solution.
  • There is a bug in the Slot Machine application: a single bet greater than the amount of remaining money is allowed. How would you fix the code so as to constrain bets to the current amount of available money?