First the prototype:
```#!/usr/bin/perl

print "Welcome to the game!\n";

while (true) {
\$one = int(rand(100)) - 50;
\$two = int(rand(100)) - 50;
print "\$one + \$two = ";
\$total += 1;
if (\$answer == \$one + \$two) {
\$good += 1;
}
print "So far your score is \$good/\$total.\n";
}```
And a session with it:
```frilled.cs.indiana.edu%./quiz
Welcome to the game!
14 + 14 = 28
So far your score is 1/1.
25 + -10 = 15
So far your score is 2/2.
-28 + 4 = -24
So far your score is 3/3.
-45 + 46 = -1
So far your score is 3/4.
19 + 41 = ^Cfrilled.cs.indiana.edu%```
So the first model is in Javascript:
```<script>
function fun(arg) {
if (arg == undefined) { arg = 0; }
else { arg += 1; }
document.forms[0].one.onclick = new Function("fun(" + arg + ")");
}
</script>

<form>
<input type="button" name="one" onClick="fun()" value="Proceed">
</form> ```
Here's how this method is applied to our problem:
```<script>
function calculate(one, two, good, total, message) {
if (message == undefined) {
message = "Welcome to the game. ";
good = 0;
total = 0;
one = Math.round(Math.random() * 100 - 50);
two = Math.round(Math.random() * 100 - 50);
question = "What is " + one + " + " + two + "? <p>" +
"<input type=\"text\" name=\"answer\" size=4> <p> ";
} else {
if (answer == one + two) {
good += 1;
} else {
message = "That was wrong.";
}
total += 1;
one = Math.round(Math.random() * 100 - 50);
two = Math.round(Math.random() * 100 - 50);
question = "What is " + one + " + " + two + "? <p>" +
"<input type=\"text\" name=\"answer\" size=4> <p> ";
}
message += "<p> Current score: " + good + "/" + total;
document.getElementById("message").innerHTML = message;
document.getElementById("question").innerHTML = question;
document.forms[0].input.onclick =
new Function("calculate("+one+","+two+","+good+","+total+",\""+message+"\")");
}
</script>

<body bgcolor="white">
<form>
<span id="message"> </span> <p>

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

value="Proceed"
onClick="calculate()">
</form>

</body> ```
So we are identifying the following pattern:

Here's the approach that uses the client to keep state, again:

```<html>
<script>
function calc(arg, acc) {
acc += parseInt(arg);
alert("The accumulator is now: " + acc);
return new Function("arg", "return calc(arg,"+acc+");");
}
browser = calc(0, // initial arg
0);// initial acc
function process() {
browser = browser(document.forms[0].arg.value);
}
</script>
<body bgcolor="white">
<form>
Please type a value in the box <input type="text"
name="arg"
size=4>
<p> then press <input type="button"
name="input"
value="Proceed"
onClick="process()">
</form>
</body>
</html>```
Code for this last approach shortly before being finished:
```<html>
<script>
var sessions = new Object();
function Session(initial_msg) {
this.good = 0;
this.total = 0;
this.message = initial_msg;
this.one = undefined;
this.two = undefined;
}
function fun(session_id) {
if (session_id == undefined) {
session_id = Math.round(Math.random()*100000);
document.forms[0].input.onclick =
new Function("fun(" + session_id + ")");
session = new Session("Welcome to the game.");
session.one = Math.round(Math.random() * 100);
session.two = Math.round(Math.random() * 100);
sessions[session_id] = session;
document.getElementById("output").innerHTML =
session.message + "<p>" +
"What is " + session.one + " + " + session.two + "?";
} else {
}
}
</script>
<body bgcolor="white">
<form>
<span id="output"></span>
Please enter the value here: <input type="text" name="arg" size="4">
<input type="button" name="input" value="Proceed" onClick="fun()">
<input type="button" name="reset" value="New session" onClick="fun()">
</form>
</body>
</html>```
Here's a transformation of the code above:
```<html>
<script>
var sessions = new Object();
function Session(initial_msg) {
this.good = 0;
this.total = 0;
this.message = initial_msg;
this.one = undefined;
this.two = undefined;
}
function fun(session_id) {
if (session_id == undefined) {
session_id = Math.round(Math.random()*100000);
document.forms[0].input.onclick =
new Function("fun(" + session_id + ")");
session = new Session("Welcome to the game.");
} else {
// read user input, update state

}
session.one = Math.round(Math.random() * 100);
session.two = Math.round(Math.random() * 100);
sessions[session_id] = session;
document.getElementById("output").innerHTML =
session.message + "<p>" +
"What is " + session.one + " + " + session.two + "?";
}
</script>
<body bgcolor="white">
<form>
<span id="output"></span>
Please enter the value here: <input type="text" name="arg" size="4">
<input type="button" name="input" value="Proceed" onClick="fun()">
<input type="button" name="reset" value="New session" onClick="fun()">
</form>
</body>
</html>```
And here's the final program:
```<html>
<script>
var sessions = new Object();
function Session(initial_msg) {
this.good = 0;
this.total = 0;
this.message = initial_msg;
this.one = undefined;
this.two = undefined;
}
function fun(session_id) {
if (session_id == undefined) {
session_id = Math.round(Math.random()*100000);
document.forms[0].input.onclick =
new Function("fun(" + session_id + ")");
session = new Session("Welcome to the game.");
} else {
// read user input, update state
session = sessions[session_id];
session.total += 1;
if (answer == session.one + session.two) {
session.good += 1;
} else {
}
session.message = "Your score is now: " +
session.good + "/" + session.total;
}
session.one = Math.round(Math.random() * 100);
session.two = Math.round(Math.random() * 100);
sessions[session_id] = session;
document.getElementById("output").innerHTML =
session.message + "<p>" +
"What is " + session.one + " + " + session.two + "?";
}
</script>
<body bgcolor="white">
<form>
<span id="output"></span>
Please enter the value here: <input type="text" name="arg" size="4">
<input type="button" name="input" value="Proceed" onClick="fun()">
<input type="button" name="reset" value="New session" onClick="fun()">
</form>
</body>
</html>```
We have exhibited three models for web programming, using only Javascript.