This document assumes you've already looked at the problem once, perhaps by doing Homework Four. 

<html>
  <head><title>Homework Six</title></head>
  <body>

  </body>
</html>

Next we create a simple setup: 

    <script>
      function Listener() {
        this.process = function process() {
          alert("You don't say!..."); 
        }
      } 
    </script>

This is associated with: 

    <form>
      Press <input type="button" value="Proceed" onClick="a.process()"> to move on.
    </form>  
    <script> 
      a = new Listener(); 
      a.process(); 
    </script>

But the inside of our listener needs to focus on the problem at hand: 

          if (this.message) {

          } else {
            this.message = "Welcome to the game, are you ready?"; 
            this.correct = 0; 
            this.total = 0; 
            this.key = ""; 
          }

Let's start worrying about reporting the state: 

          document.getElementById("message").innerHTML = this.message;

The output for this is: 

      <span id="message"></span> <p>

Now we need to get past the first screen: 

           this.questions = ["Australia", "China", "Italy", "United States", "South Africa", "Russia", "Spain", "Brazil"];

This was part of the initialization. We will shuffle it later. 

            alert(this.questions.pop());

We can do this in all the screens following the first one. 

      var url = "http://silo.cs.indiana.edu:11350/images/";

This is necessary later: 

            this.question = "Whose flag is this: <img src=\"" + 
                            url + this.questions.pop() + ".png\"> " + 
                            "<input type=\"text\" name=\"answer\"> <p>" ; 
            document.getElementById("question").innerHTML = this.question;

Although this would be a bit better: 

            this.key = this.questions.pop();
            this.question = "Whose flag is this: <img src=\"" + 
                            url + this.key + ".png\"> " + 
                            "<input type=\"text\" name=\"answer\"> <p>" ; 
            document.getElementById("question").innerHTML = this.question;

The addition above needs the addition listed below: 

      <span id="question"></span>

It's fair to remind you that question will have a textfield inside, so it should be in the form.

Now this works well, but doesn't know when it's finished: 

            if (this.questions.length > 0) { 
              // ... 
            } else {
              document.getElementById("question").innerHTML = "End of game, are you ready for a new one? <p>"; 
              this.questions = ["Australia", "China", "Italy", "United States", "South Africa", "Russia", "Spain", "Brazil"]; 
            }

The game should also grade and report the score: 

            if (this.key) { 
              this.answer = document.forms[0].answer.value; 
              if (this.answer == this.key) {
                this.correct += 1; 
                this.message = "Good! "; 
              } else {
                this.message = "Nope. "; 
              }
              this.total += 1; 
            } else { 

            }

Reporting will be done this way: 

              this.message += "Score currently " + this.correct + " out of " + this.total + ".";

The end of game also needs to reset the state: 

              this.correct = 0; 
              this.total = 0;  
              this.key = "";

Finally the message needs to be updated from one game to the other: 

              this.message = "Welcome to a new game, score currently: " + this.correct + " out of " + this.total + ".";

To randomize you can use: 

              for (var i = 0; i < 100; i++) {
                var index = Math.floor(Math.random() * this.questions.length);
                var other = Math.floor(Math.random() * this.questions.length);
                var temp = this.questions[index];
                this.questions[index] = this.questions[other];
                this.questions[other] = temp;
              }

Just be sure to do it twice (when you initialize, and re-initialize).
Last updated on Nov 14, 2008, by Adrian German for Essentials of Web Programming