Tracking Results in the Math Quiz - Exercise

Contact Us or call 1-877-932-8228
Tracking Results in the Math Quiz - Exercise

Tracking Results in the Math Quiz

Duration: 15 to 25 minutes.

In this exercise, you will dynamically create a table that shows the user how she is doing on the Math Quiz. The screenshot below shows how the result will look:

  1. Open DynamicHtml/Exercises/MathQuizTable.html for editing.
  2. Change the msg() function so that it takes a second argument: color, and uses it to change the text of the "msg" div to the passed-in color.
  3. Change all calls to msg() to pass in a color as well as the text: green if the answer is correct and red if it is not.
  4. Option objects have a text property that holds the displayed text of the option. Add a getQuestion() function that returns the text of the selected question.
  5. Notice that there is a table at the bottom of the body of the page with an id of tblResults.
  6. Remember that the addRow() function is in the lib.js file. Modify the checkAnswer() function so that it adds a new row to the results table showing the question, user's answer, and correct answer.
  7. Test your solution in a browser.

Challenge

Modify the code so that the new row's background color is #00ff00 if the answer is correct and #ff9999 if it is not. Hint: the addRow() function returns the newly added row.

Solution:

DynamicHtml/Solutions/MathQuizTable.html
---- C O D E   O M I T T E D ----

	function checkAnswer() {
		var userAnswer = document.getElementById("answer").value;
		var correctAnswer = getAnswer();
		var question = getQuestion();
		var arrCells = [question, userAnswer, correctAnswer];
		addRow("tblResults", arrCells);
		
		if (userAnswer === correctAnswer) {
			msg("Right! The answer is " + correctAnswer + ".","green");
		} else {
			msg("Sorry. The correct answer is " + correctAnswer + ".","red");
		}
		removeOption();
		questionChanged();
	}
	
	function getAnswer() {
		var i = document.Quiz.question.selectedIndex;
		var answer = document.Quiz.question[i].value;
		return answer;
	}
	
	function getQuestion(){
		var i = document.Quiz.question.selectedIndex;
		var question = document.Quiz.question[i].text;
		return question;
	}

---- C O D E   O M I T T E D ----
	
	function msg(text, color) {
		document.getElementById("msg").innerHTML=text;
		document.getElementById("msg").style.color = color;
	}
</script>
</head>
<body>

---- C O D E   O M I T T E D ----

<table id="tblResults">
<tr>
	<th>Question</th>
	<th>Your answer</th>
	<th>Correct answer</th>
</tr>
</table>
</body>
</html>

Challenge Solution:

DynamicHtml/Solutions/MathQuizTable-challenge.html
---- C O D E   O M I T T E D ----
	function checkAnswer() {
		var userAnswer = document.getElementById("answer").value;
		var correctAnswer = getAnswer();
		var question = getQuestion();
		var arrCells = [question, userAnswer, correctAnswer];
		var row = addRow("tblResults", arrCells);
		
		if (userAnswer === correctAnswer) {
			msg("Right! The answer is " + correctAnswer + ".","green");
			row.style.backgroundColor="#00ff00";
		} else {
			msg("Sorry. The correct answer is " + correctAnswer + ".","red");
			row.style.backgroundColor="#ff9999";
		}
		removeOption();
		questionChanged();
	}
---- C O D E   O M I T T E D ----
Next