#!/usr/bin/perl
print "Welcome to the game!\n";
while (true) {
$one = int(rand(100)) - 50;
$two = int(rand(100)) - 50;
print "$one + $two = ";
$answer = <STDIN>;
$total += 1;
if ($answer == $one + $two) {
$good += 1;
}
print "So far your score is $good/$total.\n";
}
And a session with it:
So the first model is in Javascript: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%
<script>
function fun(arg) {
alert("I have received an arg of: " + arg);
if (arg == undefined) { arg = 0; }
else { arg += 1; }
document.forms[0].one.onclick = new Function("fun(" + arg + ")");
alert("one reports: " + document.forms[0].one.onclick);
}
</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>" +
"Type your answer here: " +
"<input type=\"text\" name=\"answer\" size=4> <p> ";
} else {
answer = document.getElementById("question").childNodes[1].childNodes[1].value;
if (answer == one + two) {
good += 1;
message = "Your answer was correct.";
} 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>" +
"Type your answer here: " +
"<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>
Please press <input type="button" name="input"
value="Proceed"
onClick="calculate()">
when you're ready.
</form>
</body>
So we are identifying the following pattern:
Here's the approach that uses the client to keep state, again:
<html>
<head><title>This is the file gamma.html</title>
<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
alert(browser);
function process() {
browser = browser(document.forms[0].arg.value);
alert(browser);
}
</script>
</head>
<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>
<head><title>This is the last one.</title>
<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 + ")");
alert("A session has been created.");
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 {
alert(document.forms[0].input.onclick)
}
}
</script>
</head>
<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>
<head><title>This is the last one.</title>
<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 + ")");
alert("A session has been created.");
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>
</head>
<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>
<head><title>This is the last one.</title>
<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 + ")");
alert("A session has been created.");
session = new Session("Welcome to the game.");
} else {
// read user input, update state
var answer = document.forms[0].arg.value;
session = sessions[session_id];
session.total += 1;
if (answer == session.one + session.two) {
session.good += 1;
alert("Good!");
} else {
alert("Wrong.");
}
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>
</head>
<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.