So I'm making a site that generates random multiplication questions, and tells the user whether their answer is correct or incorrect using alert boxes and so far so good!
Now I'm trying to make a score table or how many right and wrong answers the user has inputted.
My theory is, declare two variables, "wrong" and "right" Every time a "well done you did it!" alert box comes up, add one to right Every time a "incorrect, try again!" alert box comes up, add one to wrong Link those variables to the values in my table.
It looks like it's trying to work, the table sort of flashes then goes back to 0. Maybe something is overwriting the values back to zero?
It's probably something obvious but I've been staring at it for ages now! Can anyone help?
here's my code:
<script type="text/javascript">
//Global variables to count scores
var right;
var wrong;
//Global variables to generate random numbers
var x = Math.floor(Math.random() * 12) + 1;
var y = Math.floor(Math.random() * 12) + 1;
//function to compile random numbers and text into readable Question
function genQuestion() {
var Question = x + " times " + y;
document.getElementById("inputVal").value = Question;
return Question;
}
//function to generate an answer to Question
function genAnswer() {
answer = x * y;
return answer;
}
//functions to choose text at random from array to go in alert box
//depending on whether or not the answer was correct or incorrect
function alertWellDone() {
var wellDoneMess = new Array();
wellDoneMess[0] = "Very good!";
wellDoneMess[1] = "Excellent!";
wellDoneMess[2] = "Correct! - Nice Work!";
wellDoneMess[3] = "Correct! - Keep up the good work!";
var i = Math.floor(4 * Math.random())
return wellDoneMess[i];
}
function alertIncorrect() {
var incorrectMess = new Array();
incorrectMess[0] = "No. Please try again.";
incorrectMess[1] = "Wrong. Try once more.";
incorrectMess[2] = "Incorrect! - Try once more!";
incorrectMess[3] = "No. - Keep trying!";
var i = Math.floor(4 * Math.random());
return incorrectMess[i];
}
//Generate question and fill question box automatically
window.onload = genQuestion;
//Function to compare the users input with the correct answer
//Tells site which array to take text from
function buttonPressed() {
var userAnswer = document.getElementById("outputVal").value;
if (userAnswer == genAnswer()) {
window.alert(alertWellDone());
genQuestion;
right++;
document.getElementById("right").innerHTML = right;
} else {
window.alert(alertIncorrect());
genQuestion;
wrong++;
document.getElementById("wrong").innerHTML = wrong;
}
}
</script>
<div class="mainContent">
<h1>Learn to Multiply Website</h1>
<p>Practice your times tables by answering the questions below!</p>
<img src="assets/images/math-clipart-1.png" alt="Math is fun!">
<form name="myForm" id="myForm" action="#">
<label>What is</label>
<input id="inputVal" name="inputVal" type="text" />
<br>
<label>The answer is</label>
<input name="outputVal" id="outputVal" type="text" />
<br>
<button class="button" onclick="buttonPressed()">Check my Answer</button>
</form>
</div>
<div class="scoretable">
<table>
<tr>
<th>Correct Answers</th>
<th>Wrong Answers</th>
</tr>
<tr>
<td id="right">0</td>
<td id="wrong">0</td>
</tr>
</table>
</div>
Aucun commentaire:
Enregistrer un commentaire