I'm trying to create a sort of math quiz which prompts the user to answer one question before moving onto the next. At the end of the quiz, a popup window should list all of the problems along with the user's answers to each problem. I have it pretty much in place, but I can't figure out how to store each of the user's answers into an array in order to display these answers in the popup window. Any help would be greatly appreciated!
HTML:
<body>
<form>
<table id="addProblem" width="150" border="0" cellspacing="0" cellpadding="10">
<tr>
<td> </td>
<td colspan="1" align="right"><input id="carryOver"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right" id="firstNum">48</td>
</tr>
<tr>
<td>+</td>
<td colspan="2" align="right" id="secondNum">16</td>
</tr>
<tr>
<td colspan="3"><hr id="sepLine"></td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right"><input id="userAnswer" type="text"></td>
</tr>
<tr>
<td colspan="3"><input type="button" onclick="submitAnswer()" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
JavaScript:
// first number in addition problem
var numOne = [48,39,16,43,37,23,44,13,37,28,48,16];
// second number in addition problem
var numTwo = [16,22,25,18,46,49,18,39,25,17,9,28];
// counter variable
var i = 0;
function submitAnswer() {
// validate the answer was a number
var guessed = Number(document.getElementById('userAnswer').value);
var checkAnswer = 'Correct!';
// if the answer is incorrect, change result to Incorrect
if (guessed != numOne[i]+numTwo[i]) {
checkAnswer = 'Incorrect!\nThe answer is'+' '+Number(numOne[i]+numTwo[i])+'.';
}
// will show the string in the result variable
if(confirm(checkAnswer) && i<1) {
// next question
i++;
document.getElementById('firstNum').innerHTML=numOne[i];
document.getElementById('secondNum').innerHTML=numTwo[i];
// reset the answer and carry over to blank
document.getElementById('userAnswer').value = '';
document.getElementById('carryOver').value = '';
} else if(i=1) {
var results=window.open('','name','height=400,width=500');
results.document.write('<html><head><title>Results</title>');
results.document.write('<link rel="stylesheet" href="style.css">');
results.document.write('</head><body>');
results.document.write('1) '+numOne[0]+' + '+numTwo[0]+' = ' + 'user input for Problem 1');
results.document.write('<br>');
results.document.write('2) '+numOne[1]+' + '+numTwo[1]+' = ' + 'user input for Problem 2');
results.document.write('<p><a href="javascript:self.close()">Close</a> the popup.</p>');
results.document.write('</body></html>');
results.document.close();
}
}
