roachhd/maths-app.html

## maths-app.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>App-to-Convert</title>

<script type="text/javascript">
	var field1 = 0;        //field1 and field2 are the values being added together
	var field2 = 0;
	var question_num = 0;  //question_num counts up to 10

	//The showPanel function displays the panel with the given id
	function showPanel(id) {
		//Check if 10 questions have been answered, then redirect to the "Done" screen
		if ((id=="question") && (question_num==10)) id="done";
		var panels = new Array("welcome","question","correct","incorrect","about","done");
		//Loop through and show the requested panel while hiding all of the others
		for (var i=0; i<panels.length; i++) {
			document.getElementById(panels[i]).style.display = (id==panels[i]) ? "block" : "none";
		}
		if (id=="welcome") {
			//Welcome screen resets the question number
			question_num = 0;
		} else if (id=="question") {
			//Increment the question number
			++question_num;
			//Create two random numbers
			field1 = Math.floor(Math.random() * 11);
			field2 = Math.floor(Math.random() * 11);
			//Show the two numbers on the screen
			document.getElementById("field1").innerHTML = field1;
			document.getElementById("field2").innerHTML = field2;
			//Clear the answer field and set the input focus
			var ans = document.getElementById("answer");
			ans.value = "";
			ans.focus();
		}
	}

	//The checkAnswer function compares the input to field1+field2 and shows correct or incorrect feedback
	function checkAnswer() {
		//Get the input
		var ans = document.getElementById("answer").value;
		//Show the "correct" panel if the input equals field1+field2, otherwise show "incorrect"
		showPanel((ans==(field1+field2)) ? "correct" : "incorrect");
	}
</script>

<style type="text/css">
#math_quiz {  /* main container */
	position: relative;
	width: 550px;
	height: 400px;
	font-family: 'Times New Roman', Times, serif;
	font-size: 24px;
	text-align: center;
	color: #121212;
}
#math_quiz p {
	margin-left: 40px;
	margin-right: 40px;
}
#math_quiz .field { /* the two numbers to be added */
	position: absolute;
	width: 75px;
	height: 27px;
	font-weight: bold;
	text-align: right;
}
#math_quiz .panel { /* each panel is 550x400 */
	position: absolute;
	left: 0px;
	top: 0px;
	width: 550px;
	height: 400px;
	display: none;
}
#math_quiz a {   /* gold buttons with black borders */
	position: absolute;
	background-color: #FF9900;
	border: solid 5px #000000;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 15px 10px 15px;
	display: block;
}
#math_quiz #plus_sign { /* static "+" sign */
	position:absolute;
	left:25px;
	top:127px;
	font-size:34px;
	font-weight:bold;
}
#math_quiz #horz_line { /* horizontal line above the answer */
	position:absolute;
	left:17px;
	top:167px;
	width:295px;
	height:5px;
	background-color:#000000;
}
#math_quiz #answer { /* input field */
	position:absolute;
	left:75px;
	top:182px;
	width:175px;
	height:32px;
	font-family:'Times New Roman', Times, serif;
	color:#121212;
	font-size:24px;
	font-weight:bold;
	text-align:right;
	border:solid 1px #000000;
	padding-right:5px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
	<div id="math_quiz">
		<div id="welcome" class="panel" style="display:block">
			<h3>Math App</h3>
			<a style="left:21px;top:267px;" href="#" onClick="showPanel('question');return false;">Play Button</a>
			<a style="left:225px;top:268px;" href="#" onClick="showPanel('about');return false;">About Button</a>
		</div>
		<div id="question" class="panel">
			<div id="field1" class="field" style="left:170px;top:102px;"></div>
			<div id="field2" class="field" style="left:170px;top:132px;"></div>
			<div id="plus_sign">+</div>
			<div id="horz_line"></div>
			<input id="answer"/>
			<a style="left:182px;top:277px;" href="#" onClick="checkAnswer();return false;">OK Button</a>
		</div>
		<div id="correct" class="panel">
			<h3>Correct!</h3>
			<a style="left:210px;top:216px;" href="#" onClick="showPanel('question');return false;">OK Button</a>
		</div>
		<div id="incorrect" class="panel">
			<h3>Incorrect!</h3>
			<a style="left:210px;top:216px;" href="#" onClick="showPanel('question');return false;">OK Button</a>
		</div>
		<div id="about" class="panel">
			<p>About text would go here.</p>
			<a style="left:180px;top:277px;" href="#" onClick="showPanel('welcome');return false;">OK Button</a>
		</div>
		<div id="done" class="panel">
			<h3>You're done. You answered 10 questions.</h3>
			<a style="left:180px;top:277px;" href="#" onClick="showPanel('welcome');return false;">OK Button</a>
		</div>
	</div>
</body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>App-to-Convert</title>

	<script type="text/javascript">
	var field1 = 0; //field1 and field2 are the values being added together
	var field2 = 0;
	var question_num = 0; //question_num counts up to 10

	//The showPanel function displays the panel with the given id
	function showPanel(id) {
	//Check if 10 questions have been answered, then redirect to the "Done" screen
	if ((id=="question") && (question_num==10)) id="done";
	var panels = new Array("welcome","question","correct","incorrect","about","done");
	//Loop through and show the requested panel while hiding all of the others
	for (var i=0; i<panels.length; i++) {
	document.getElementById(panels[i]).style.display = (id==panels[i]) ? "block" : "none";
	}
	if (id=="welcome") {
	//Welcome screen resets the question number
	question_num = 0;
	} else if (id=="question") {
	//Increment the question number
	++question_num;
	//Create two random numbers
	field1 = Math.floor(Math.random() * 11);
	field2 = Math.floor(Math.random() * 11);
	//Show the two numbers on the screen
	document.getElementById("field1").innerHTML = field1;
	document.getElementById("field2").innerHTML = field2;
	//Clear the answer field and set the input focus
	var ans = document.getElementById("answer");
	ans.value = "";
	ans.focus();
	}
	}

	//The checkAnswer function compares the input to field1+field2 and shows correct or incorrect feedback
	function checkAnswer() {
	//Get the input
	var ans = document.getElementById("answer").value;
	//Show the "correct" panel if the input equals field1+field2, otherwise show "incorrect"
	showPanel((ans==(field1+field2)) ? "correct" : "incorrect");
	}
	</script>

	<style type="text/css">
	#math_quiz { /* main container */
	position: relative;
	width: 550px;
	height: 400px;
	font-family: 'Times New Roman', Times, serif;
	font-size: 24px;
	text-align: center;
	color: #121212;
	}
	#math_quiz p {
	margin-left: 40px;
	margin-right: 40px;
	}
	#math_quiz .field { /* the two numbers to be added */
	position: absolute;
	width: 75px;
	height: 27px;
	font-weight: bold;
	text-align: right;
	}
	#math_quiz .panel { /* each panel is 550x400 */
	position: absolute;
	left: 0px;
	top: 0px;
	width: 550px;
	height: 400px;
	display: none;
	}
	#math_quiz a { /* gold buttons with black borders */
	position: absolute;
	background-color: #FF9900;
	border: solid 5px #000000;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 15px 10px 15px;
	display: block;
	}
	#math_quiz #plus_sign { /* static "+" sign */
	position:absolute;
	left:25px;
	top:127px;
	font-size:34px;
	font-weight:bold;
	}
	#math_quiz #horz_line { /* horizontal line above the answer */
	position:absolute;
	left:17px;
	top:167px;
	width:295px;
	height:5px;
	background-color:#000000;
	}
	#math_quiz #answer { /* input field */
	position:absolute;
	left:75px;
	top:182px;
	width:175px;
	height:32px;
	font-family:'Times New Roman', Times, serif;
	color:#121212;
	font-size:24px;
	font-weight:bold;
	text-align:right;
	border:solid 1px #000000;
	padding-right:5px;
	}
	</style>
	</head>
	<body bgcolor="#FFFFFF">
	<div id="math_quiz">
	<div id="welcome" class="panel" style="display:block">
	<h3>Math App</h3>
	<a style="left:21px;top:267px;" href="#" onClick="showPanel('question');return false;">Play Button</a>
	<a style="left:225px;top:268px;" href="#" onClick="showPanel('about');return false;">About Button</a>
	</div>
	<div id="question" class="panel">
	<div id="field1" class="field" style="left:170px;top:102px;"></div>
	<div id="field2" class="field" style="left:170px;top:132px;"></div>
	<div id="plus_sign">+</div>
	<div id="horz_line"></div>
	<input id="answer"/>
	<a style="left:182px;top:277px;" href="#" onClick="checkAnswer();return false;">OK Button</a>
	</div>
	<div id="correct" class="panel">
	<h3>Correct!</h3>
	<a style="left:210px;top:216px;" href="#" onClick="showPanel('question');return false;">OK Button</a>
	</div>
	<div id="incorrect" class="panel">
	<h3>Incorrect!</h3>
	<a style="left:210px;top:216px;" href="#" onClick="showPanel('question');return false;">OK Button</a>
	</div>
	<div id="about" class="panel">
	<p>About text would go here.</p>
	<a style="left:180px;top:277px;" href="#" onClick="showPanel('welcome');return false;">OK Button</a>
	</div>
	<div id="done" class="panel">
	<h3>You're done. You answered 10 questions.</h3>
	<a style="left:180px;top:277px;" href="#" onClick="showPanel('welcome');return false;">OK Button</a>
	</div>
	</div>
	</body>
	</html>