I have a javascript quiz and I know how to make the questions appear one at a time.
I need help making all the questions appear again once the user clicks on "check answers". That way the user can see all the questions and get feedback on whether they were answered correctly or not. Right now the user just sees the total score and the final question.
The questions appear as html radio buttons, rather than javascript arrays, because the real quiz will include reading texts and audio files for each question. I want to show the questions one at a time because the real quiz will have 40 questions, which will be overwhelming if they all appear on the same page.
Any help/ideas would be appreciated!
css
body{
font-family: arial;
text-align: justify;
margin: 25px;
}
#check{
font-family:arial;
font-size: 14px;
background-color: #C0C0C0;
color: #000000;
border: 1px solid black;
cursor: pointer;
}
#next{
font-family:arial;
font-size: 14px;
background-color: #C0C0C0;
color: #000000;
border: 1px solid black;
cursor: pointer;
}
#check:hover{
background-color: #C0C0C0;
}
#next:hover{
background-color: #C0C0C0;
}
javascript:
function validate() {
var q1 = document.forms.form.q1.value;
var q2 = document.forms.form.q2.value;
var q3 = document.forms.form.q3.value;
var q4 = document.forms.form.q4.value;
var questions = [q1, q2, q3, q4];
var answers = ["a", "c", "c", "b"];
var points = 0;
var total = 4;
for (var i = 0; i < total; i++) {
if (questions[i] == answers[i]) {
points = points + 1;
}
if (q1 == "a") {
document.getElementById("text1a").style.color="GREEN";
}
if (q1 == "b") {
document.getElementById("text1b").style.color="RED";
}
if (q1 == "c") {
document.getElementById("text1c").style.color="RED";
}
if (q2 == "a") {
document.getElementById("text2a").style.color="RED";
}
if (q2 == "b") {
document.getElementById("text2b").style.color="RED";
}
if (q2 == "c") {
document.getElementById("text2c").style.color="GREEN";
}
if (q3 == "a") {
document.getElementById("text3a").style.color="RED";
}
if (q3 == "b") {
document.getElementById("text3b").style.color="RED";
}
if (q3 == "c") {
document.getElementById("text3c").style.color="GREEN";
}
if (q4 == "a") {
document.getElementById("text4a").style.color="RED";
}
if (q4 == "b") {
document.getElementById("text4b").style.color="GREEN";
}
if (q4 == "c") {
document.getElementById("text4c").style.color="RED";
}
}
var q = document.getElementById("p");
q.style.fontSize = "14px";
q.style.textAlign = "left";
q.innerHTML =
points +
" out of " +
total +
"<br />"
return false;
}
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var sixtyMinutes = 60 * 60,
display = document.querySelector('#time');
startTimer(sixtyMinutes, display);
};
function nextQ(){
var blockFound = 0;
var lastQuestion = 0;
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
if ( blockFound == 1){
blockFound = 0;
divs[i].style.display = 'block';
}else if ( divs[i].style.display == 'block' ){
if ( i + 2 == divs.length){
lastQuestion = 1;
}
blockFound = 1;
divs[i].style.display = 'none';
}
}
if ( lastQuestion == 1){
document.getElementById('next').style.visibility = 'hidden';
}
}
html:
<!DOCTYPE html>
<title>Reading Practice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<link rel="stylesheet" href="test.css">
<script type="text/javascript" src="test.js">
</script>
</head>
<body>
<div><p style="color:#ff4b0d; font-size:30px">Time left: <span id="time">60:00</span></p></div>
<br>
<br>
<form name="form" id="questions" onsubmit="return false;">
<div id="q0" style="display:block">
1. Where is Mt. Everest? <BR><BR>
<input type="radio" name="q1" value="a" id="1a" class="1a"><span id="text1a"><label for="1a"> A Nepal</label></span><br>
<input type="radio" name="q1" value="b" id="1b" class="1b"><span id="text1b"><label for="1b"> B China</label></span><br>
<input type="radio" name="q1" value="c" id="1c" class="1c"><span id="text1c"><label for="1c"> C India</label></span><br>
<br>
</div>
<div id="q1" style="display:none">
2. What is the second largest country in the world (by area)? <BR><BR>
<input type="radio" name="q2" value="a" id="2a" class="2a"><span id="text2a"><label for="2a"> A China</label></span><br>
<input type="radio" name="q2" value="b" id="2b" class="2b"><span id="text2b"><label for="2b"> B Russia</label></span><br>
<input type="radio" name="q2" value="c" id="2c" class="2c"><span id="text2c"><label for="2c"> C Canada</label></span><br>
<br>
</div>
<div id="q2" style="display:none">
3. How many times have the Olympic Games been cancelled? <BR><BR>
<input type="radio" name="q3" value="a" id="3a" class="3a"><span id="text3a"><label for="3a"> A one</label></span><br>
<input type="radio" name="q3" value="b" id="3b" class="3b"><span id="text3b"><label for="3b"> B two</label></span><br>
<input type="radio" name="q3" value="c" id="3c" class="3c"><span id="text3c"><label for="3c"> C three</label></span><br>
<br>
</div>
<div id="q3" style="display:none">
4. How many colours are in a rainbow? <BR><BR>
<input type="radio" name="q4" value="a" id="4a" class="4a"><span id="text4a"><label for="4a"> A five</label></span><br>
<input type="radio" name="q4" value="b" id="4b" class="4b"><span id="text4b"><label for="4b"> B seven</label></span><br>
<input type="radio" name="q4" value="c" id="4c" class="4c"><span id="text4c"><label for="4c"> C nine</label></span><br>
<br>
<input type="submit" id="check" value="check answer" onclick="validate();" />
<p id="p"></p>
</div>
<button id="next" onclick="nextQ()">Next Question</button>
</form>
</body>
</html>
All you need to do is add the following at the end of your validate function (but before the return – which you can actually remove):
const divs = document.getElementsByTagName('div')
for (const div of divs) {
div.style.display = 'block'
div.style.visibility = 'visible'
}
and if you want to have it even more concise you can destructure the style attribute:
const divs = document.getElementsByTagName('div')
for (const {style} of divs) {
style.display = 'block'
style.visibility = 'visible'
}