I built this web app to present a random group of questions for quizzes and tests. The page opens with random questions. Clicking anywhere shows (only) the spinner div. Clicking anywhere again brings up new questions.
One thing is bothering me, though. I have succeeded in moving all the JS out of the body except for this:
<div id="click" onclick="location.reload();">
I've tried using this in the script section, but it hasn't worked for me:
document.getElementById('click').onclick = location.reload();
Looks like it should do the same thing, but it doesn't, so I'm out of ideas. Other feedback is welcome, too.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random Test Questions</title>
<!-- Mobile viewport-->
<meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, user-scalable=no">
<script language="javascript">
// change questions here -- in quotes, comma separated
function setUP() {
var questionSets = [
["Set 1 Question 1", "Set 1 Question 2", "Set 1 Question 3", "Set 1 Question 4", "Set 1 Question 5"],
["Set 2 Question 1", "Set 2 Question 2", "Set 2 Question 3", "Set 2 Question 4", "Set 2 Question 5"],
["Set 3 Question 1", "Set 3 Question 2", "Set 3 Question 3", "Set 3 Question 4", "Set 3 Question 5"],
["Set 4 Question 1", "Set 4 Question 2", "Set 4 Question 4", "Set 4 Question 4", "Set 4 Question 5"],
["Set 5 Question 1", "Set 5 Question 2", "Set 5 Question 5", "Set 5 Question 4", "Set 5 Question 5"]
];
for (var setIndex = 0; setIndex < questionSets.length; ++setIndex) {
var questionSet = questionSets[setIndex];
var questionIndex = Math.floor(Math.random() * questionSet.length);
var question = questionSet[questionIndex];
var selector = '#questions div:nth-child(' + (setIndex + 1).toString() + ')';
document.querySelector(selector).innerHTML = question;
//alternative method follows -- comment out above two lines, uncomment below two lines
//var setId = 'set_' + (setIndex + 1).toString();
//document.getElementById(setId).innerHTML = question;
}
}
function showQuestions() {
document.getElementById('spinner').style.display = "none";
document.getElementById('click').style.display = "none";
document.getElementById('questions').style.display = "block";
}
function showSpinner() {
document.getElementById('questions').style.display = "none";
document.getElementById('click').style.display = "block";
document.getElementById('spinner').style.display = "block";
}
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 = 0;
document.getElementById('time').style.backgroundColor = "red";
}
}, 1000);
}
window.onload = function() {
setUP();
showQuestions();
var minutesLeft = 239, //Change to minutes you need -- counted in seconds -- minus one second
display = document.querySelector('#time');
startTimer(minutesLeft, display);
document.getElementById('questions').onclick = setUP;
document.getElementById('questions').onclick = showSpinner;
};
</script>
<style>
#questions div {
font-family: Arial, Helvetica, sans-serif;
font-size: 7vh;
margin-top: 6vh;
border: 1px solid gray;
padding: 1vh;
width: 100%;
}
.questions {
background-color: #ececff;
}
.time {
background-color: #4cdc4c;
text-align: center;
}
#spinner {
height: 30vw;
width: 30vw;
position: absolute;
top: 12vh;
margin-left: 35vw;
overflow: hidden;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 3vw solid #ececff;
border-right: 3vw solid #ececff;
border-bottom: 3vw solid #ececff;
border-top: 3vw solid #4cdc4c;
;
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#click {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id="questions">
<div id="set_1" class="questions">First question</div>
<div id="set_2" class="questions">Second question</div>
<div id="set_3" class="questions">Third question</div>
<div id="set_4" class="questions">Fourth question</div>
<div id="set_5" class="questions">Fifth question</div>
<div id="time" class="time">04:00</div>
</div>
<div id="click" onclick="location.reload();">
<div id="spinner"></div>
</div>
</body>
</html>