Menu
I got this small html quiz project that I would want to be able to play distinct sound whether the user gets the answer wrong or right. I also wanted to make it play distinct sounds according to total percent of the result. If you’re interested for the history of the project here is the[URL=”http://www.webdeveloper.com/forum/showthread.php?304231-HTML-Random-Quiz-Game-w-Timer”] link.
Here’s the quiz
[CODE]
<!DOCTYPE html>
<head>
<title>Random Quiz</title>
<style>
div#test{
padding:10px 40px 40px 40px;
background-image: url(“.jpg”);
no-repeat center center fixed;
background-size: cover;
}
</style>
</head>
<body>
<div>
<h1 id=”timeleft”></h1>
<h2 id=”test_status”></h2>
</div>
<div id=”test”></div>
<script>
var myVar;
function startTimer() {
myVar = setInterval(function(){myTimer()},1000);
timelimit = maxtimelimit;
}
function myTimer() {
if (timelimit > 0) {
curmin=Math.floor(timelimit/60);
cursec=timelimit%60;
if (curmin!=0) { curtime=curmin +cursec; }
else { curtime=cursec; }
$_(‘timeleft’).innerHTML = “00:0″+curtime;
} else {
//$_(‘timeleft’).innerHTML = timelimit+’ – Out of Time’;
//clearInterval(myVar);
checkAnswer();
}
timelimit–;
}
var pos = 0, posn, choice, correct = 0, rscore = 0;
var maxtimelimit = 6, timelimit = maxtimelimit; // 20 seconds per question
var questions = [
[ “What is 8+6?”, “12”, “14”, “16”, “B” ],
[ “What is 20 – 9?”, “7”, “13”, “11”, “C” ],
[ “What is 7 x 3?”, “21”, “24”, “25”, “A” ],
[ “What is 8 / 2?”, “10”, “2”, “4”, “C” ],
[ “What is 8 ^ 2?”, “8”, “2”, “64”, “C” ],
[ “What is 8 mod 2?”, “0”, “1”, “4”, “A” ],
[ “What is 6 + 4 + 2?”, “12”, “14”, “16”, “A” ],
[ “What is 20 – 7?”, “7”, “13”, “11”, “B” ],
[ “What is 5 x 5?”, “21”, “24”, “25”, “C” ],
[ “What is 8 / 4?”, “10”, “2”, “4”, “B” ]
];
var questionOrder = [];
function setQuestionOrder() {
questionOrder.length = 0;
for (var i=0; i<questions.length; i++) { questionOrder.push(i); }
questionOrder.sort(randOrd); // alert(questionOrder); // shuffle display order
pos = 0; posn = questionOrder[pos];
}
function $_(IDS) { return document.getElementById(IDS); }
function randOrd() { return (Math.round(Math.random())-0.5); }
function renderResults(){
var test = $_(“test”);
test.innerHTML = “<h2>You got “+correct+” of “+questions.length+” questions correct</h2>”;
$_(“test_status”).innerHTML = “Test Completed”;
$_(‘timeleft’).innerHTML = ”;
test.innerHTML += ‘<button onclick=”location.reload()”>Re-test</button>’;
setQuestionOrder();
correct = 0;
clearInterval(myVar);
return false;
}
function renderQuestion() {
var test = $_(“test”);
$_(“test_status”).innerHTML = “Question “+(pos+1)+” of “+questions.length;
//if (rscore != 0) { $_(“test_status”).innerHTML += ‘<br>Currently: ‘+(correct/rscore*100).toFixed(0)+’% correct’; }
var question = questions[posn][0];
var chA = questions[posn][1];
var chB = questions[posn][2];
var chC = questions[posn][3];
test.innerHTML = “<h2>”+question+”</h2>”;
test.innerHTML += “<label><input type=’radio’ name=’choices’ value=’A’> “+chA+”</label>”;
test.innerHTML += “<label><input type=’radio’ name=’choices’ value=’B’> “+chB+”</label>”;
test.innerHTML += “<label><input type=’radio’ name=’choices’ value=’C’> “+chC+”</label>”;
test.innerHTML += “<br/><button onclick=’checkAnswer()’>Submit Answer</button>”;
timelimit = maxtimelimit;
clearInterval(myVar);
startTimer();
}
function checkAnswer(){
var choices = document.getElementsByName(“choices”);
for (var i=0; i<choices.length; i++) {
if (choices[i].checked) { choice = choices[i].value; }
}
rscore++;
if (choice == questions[posn][4] && timelimit > 0) { correct++; }
pos++; posn = questionOrder[pos];
if (pos < questions.length) { renderQuestion(); } else { renderResults(); }
}
window.onload = function() {
setQuestionOrder();
renderQuestion(pos);
}
</script>
</body>
</html>