Timer Quiz in either PHP or Javascript or html5

@jeff122Mar 30.2016

My site should contain an interactive multiple choice quiz about the subject you are developing on your Web site. Once the quiz has been completed, it gives the user a mark on how he/she performed. This should be time limited. When the quiz is finished should also display the summary of the user performance (which answers were correct or incorrect, and how long it took to complete the quiz). The user will get 2 marks for each correct answer, and -1 for each wrong answer. The quiz should consist of 10 questions. The background colour of the page should change according to the awarded mark.

Can someone please help me? I am a newbie at this and i really need someone’s help. MANY THANKS AND LOVE!!!!

to post a comment

HTML

4 Comments(s) _↴

@NogDogMar 30.2016 — #Well...If [i]I[/i] were doing it, I'd do most of the heavy lifting on the server side with PHP. JavaScript would mainly be used to display a timer, but the final adjudication of whether they submitted in time would be done on the server side (so that tech-savvy users couldn't cheat). As far as helping you, for now I'd just advise that you break down the requirements into individual features, then start implementing those features in a modular way, so that you can combine the building blocks as you complete them. If you have a [i]specific[/i] problem/question about one of those building blocks, then post it here, along with snippets of the code you've actually written. (I.e., I'm not just going to do your assignment for you.)

@jeff122authorMar 31.2016 — #Well...If [i]I[/i] were doing it, I'd do most of the heavy lifting on the server side with PHP. JavaScript would mainly be used to display a timer, but the final adjudication of whether they submitted in time would be done on the server side (so that tech-savvy users couldn't cheat). As far as helping you, for now I'd just advise that you break down the requirements into individual features, then start implementing those features in a modular way, so that you can combine the building blocks as you complete them. If you have a [i]specific[/i] problem/question about one of those building blocks, then post it here, along with snippets of the code you've actually written. (I.e., I'm not just going to do your assignment for you.)[/QUOTE]

Hi, i got bunch of help from online but i am having difficult with this particular part where i am supposed to display the final time that was left when the user finished the quiz.

<!DOCTYPE html>

<head>

<title>Game Quiz</title>

<style>

div#test{ border-style: solid; padding:30px 50px 50px 50px; background-color: lightblue;}

</style>

</head>

<body>

<div>

<h2 id="test_status">Game Quiz</h2>

<h3 id="timeleft">Time left</h3>

</div>

<div id="test"> </div>

<script>

var myquiz;

function beginTimer() {

myquiz = setInterval(function(){myTimer()},1500);

restrict = toplimit;

}

function myTimer() {

if (restrict > 0) {

nmin=Math.floor(restrict/60);

nsec=restrict%60;

if (nmin!=0) { ntime=nmin+" minutes and "+nsec+" seconds left"; }

else { ntime=nsec+" seconds left"; }

ax('timeleft').innerHTML = ntime;

} else {

ax('timeleft').innerHTML = restrict+' - You are Out of Time thus no score will be given, please continue finishing the quiz';

cleartime(myquiz);

}

restrict--;

}

var pos = 0, posn, choice, correct = 0, rscore = 0;

var toplimit = 15, restrict = toplimit; // each questions will be 15 seconds //

var questions = [

[ "What was the first console created by Sony?", "Psone", "Play Station", "Ps Vita", "B" ],

[ "From the option below who is the fastest video game characters?", "Mario", "Master Chief", "Sonic", "C" ],

[ "What company created FIFA?", "Electronic Arts(EA Sports)", "Microsoft", "Rockstars", "A" ],

[ "What company invented the game GTA?", "Electronic Arts(EA Sports)", "Sony", "Rockstars", "C" ],

[ "What is the current GTA game?", "GTA San Andreas", "Grand Theft Auto", "Grand Theft Auto V", "C" ],

[ "What is the current Xbox Console?", "Xbox one", "Xbox 360", "Xbox 720", "A" ],

[ "What was Nintendos first try at an arcade game?", "Donkey Kong", "Donkey Kong Jr.", "Final Fantasy", "A" ],

[ "Which company created Tails?", "Rare", "Sega", "Microsoft", "B" ],

[ "Dhaslim is a character in which game?", "Mortal Kombat", "Fight Night", "Street Fighter", "C" ],

[ "What gaming console has the highest number of unit sold of all time?", "Wii", "Play Station 2", "xBox 360", "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 ax(IDS) { return document.getElementById(IDS); }

function randOrd() { return (Math.round(Math.random())-0.5); }

function renderResults(){

var test = ax("test");

test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";

ax("test_status").innerHTML = "Test Completed";

ax('timeleft').innerHTML = '';

test.innerHTML += '<button onclick="location.reload()">Re-test</a> ';

setQuestionOrder();

correct = 0;

cleartime(myquiz);

return false;

}

function renderQuestion() {

var test = ax("test");

ax("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;

if (rscore != 0) { ax("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 = "<h3>"+question+"</h3>";

test.innerHTML += "<label><input type='radio' name='choices' value='A'> "+chA+"</label><br>";

test.innerHTML += "<label><input type='radio' name='choices' value='B'> "+chB+"</label><br>";

test.innerHTML += "<label><input type='radio' name='choices' value='C'> "+chC+"</label><br><br>";

test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";

restrict = toplimit;

clearInterval(myquiz);

beginTimer();

}

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] && restrict > 0) { correct++; }

pos++; posn = questionOrder[pos];

if (pos < questions.length) { renderQuestion(); } else { renderResults(); }

}

window.onload = function() {

setQuestionOrder();

renderQuestion();

}

</script>

</body>

</html>

my code so far is shown above...

I really need to know the coding that i need to put and where cuz again, i feel stupid and dumb so please help me. many thanks

@NogDogMar 31.2016 — #Depending on the purpose of this assignment, it may not matter, but I feel I must point out that anyone who does a "view source" of the web page and has a basic understanding of JavaScript will be able to figure out what the answers are. ?

As far as your specific question, I'll leave it to the JS experts (I'm more a PHP and database guy). If you don't get any response here, you could as in the JavaScript-specific sub-forum a few down from this one.

@panah786Sep 11.2016 — #put 20 question in (var questions = [) list and working with 10 random question.........

Also in #HTML _↴

how to insert text from a remote location Custom interface to IP video server SWF Question!

Success!

Help @jeff122 spread the word by sharing this article on Twitter...

Tweet This

Timer Quiz in either PHP or Javascript or html5

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Timer Quiz in either PHP or Javascript or html5

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴