Fall Semester 2004

Lecture Notes Extra: Additional Help with Homework Five

Here's a program like the assignment: 

<html><head><title>First to 100</title>

  <script language="javascript">

    var acc = 0; // state
    var message = ""; // also part of state

    function calculate() {

      arg = document.forms[0].arg.value; // read input

      var oldAcc = acc; // so it would look like fibonacci in the end (for fun and better reporting)

      if (arg > 10 || arg < 1) { message = arg + " is not a legal value."; } else { // process the state

        acc += eval(arg);

        if (acc >= 100) { message = "Game ends. You win."; } else {

          var comp = Math.round(1 + Math.random() * 10);

          if (acc >= 100) { message = "Game ends. Computer wins." } else {

            acc += comp;

            message = "Game is under way.";

          }

        }

      } // end of process the state (we don't need to store (or retrieve it, for that matter))

      document.getElementById("acc").firstChild.nodeValue
        = oldAcc + " + " + arg + " + " + comp + " = " + acc + " (" + message + ") "; // print state

      document.forms[0].arg.value = ""; // get ready for new input
    }
  </script>
  </head><body bgcolor=white>

  <form>

    <table cellpadding=6>

    <tr> <td> The value of the game is currently <span id="acc"> 0 (zero). </span> </td> </tr>

    <tr> <td> Please enter a number (between 1-10): <input type="text" name="arg" size=4> </td> </tr>

    <tr> <td> When ready, please press <input type="button"
                                              value="Proceed"
                                              onClick="calculate()"
                                       >

         </td>
    </tr>

  </form>

  </body>
</html>
What does it do? Can we use it?

Here's a simpler (shorter?) program: 

<html>
  <head><title>Example problem for the final</title>
  <script language="javascript">

    var one = Math.round(1 + Math.random() * 5);
    var two = Math.round(1 + Math.random() * 5);
    // alert("The dice is: " + one);
  </script>
  </head>
  <body bgcolor="white">
  <form>
  The dice show <span id="dice"> </span>. <p>

  Your balance is 5000. <p>
  What is the sum: <select name="sum">
    <option value="non"> Click me!
    <option value="eve"> Even
    <option value="odd"> Odd
  </select> <p>

  How much do you want to bet: <input type="text" name="bet" size=6> <p>
  When ready please push: <input type="button" value="Proceed"
                                               onClick="alert('No kidding.')" 
                           >
  </form>
  <script language="javascript">

    document.getElementById("dice").innerHTML = "(" + one + ", " + two + ")"; 
  </script>
  </body>
</html>
What does it do? Can you use this? 

<html>
  <head><title>Example problem for the final</title>

  <script language="javascript">
    var one = Math.round(1 + Math.random() * 5);
    var two = Math.round(1 + Math.random() * 5);
    var balance = 5000;
    var message;
    function process() {
      var guess = document.one.sum.options[document.one.sum.selectedIndex].value;
      var bet = document.one.bet.value;
      // alert("You are betting " + bet +" on " + guess);
      if ( (guess == "eve" && (one + two) % 2 == 0) ||
           (guess == "odd" && (one + two) % 2 == 1)
         ) {
        balance = eval(balance) + eval(bet);
        message = "Good guess.";
      } else {
        balance -= bet;
        message = "Too bad.";
      }
      one = Math.round(1 + Math.random() * 5);
      two = Math.round(1 + Math.random() * 5);
      // alert(balance);

      document.getElementById("dice").innerHTML = "(" + one + ", " + two + ")";
      document.getElementById("balance").innerHTML = balance;
      document.getElementById("message").innerHTML = message;

    }
    function changeBalance() {
      balance += 1;
      document.getElementById("balance").innerHTML = balance;
    }
  </script>
  </head>
  <body bgcolor="white">

  <a href="javascript:alert('Howdy!')">Click here for a greeting</a>. <p>
  <a href="javascript:changeBalance()">Click here to change the balance</a>. <p>
  <form name="one">

  <span id="message"> Welcome to our game. </span> <p>
  The dice show <span id="dice"> </span>. <p>
  Your balance is <span id="balance"> </span>. <p>

  What is the sum: <select name="sum">
    <option value="non"> Click me!
    <option value="eve"> Even
    <option value="odd"> Odd
  </select> <p>

  How much do you want to bet: <input type="text" name="bet" size=6> <p>
  When ready please push: <input type="button" value="Proceed"
                                               onClick="process()"
                           >
  </form>
  <script language="javascript">
    document.getElementById("dice").innerHTML = "(" + one + ", " + two + ")";
    document.getElementById("balance").innerHTML = balance;
  </script>

  </body>
</html>
What's this last one doing? What, if anything, can you use from it?

Can you change it? Should you?

Last updated: Nov 2, 2004 by Adrian German for A348/A548