/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Allow two attempts at a question (JS quiz)

I was looking for a way in which to allow someone to have two attempts at a question in a JS quiz, and found this old thread: [URL=”http://www.webdeveloper.com/forum/showthread.php?271527-Help-a-newbie-with-short-quiz”]http://www.webdeveloper.com/forum/showthread.php?271527-Help-a-newbie-with-short-quiz[/URL] which was posted over a year ago, with it ending with the issue that the user that two “lives” overall rather than two attempts at a question, and no response. The code is below:

[code=php]
var total = 3;
var score = 0;
var correct = 1;

//array list with questions & answers
var questions = [
[‘What is the capital of England?’, ‘London’],
[‘What is the capital of Scotland?’, ‘Edinburgh’],
[‘What do you call a baby cat?’, ‘Kitten’]
];
function askQuestion(question) //calling the function

{
var answer = prompt(question[0], “”); //using prompt to pull question from array and assing users answer to var
if (answer == question[1]) //if statement checking if answer = answer pulled from array list
{
alert(“Correct! ” + “You have scored ” + correct + ” out of ” + total);
score++;
correct++
}
else
{
alert(“Sorry. The correct answer is ” + question[1]);
}
}

for (var i = 0; i < questions.length; i++) // counter which will end loop after 3 questions answered.

{
askQuestion(questions[i]); // indexing the array for the next question to be pulled
}

document.writeln(“Well done! Your final score is ” + score + ” out of ” + total);
[/code]

So rather than posting on a dead thread, I’m hoping that one of you can help me out- should be an easy fix. Thanks!

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@jcc481authorMay 27.2014 — Got it:

<!DOCTYPE html>

<html>

<head>

<title>Quiz</title>

</head>

<body>

<form>

<label for="answer" id="question"></label>

<input type="text" id="answer"/>

<input type="submit" value="Answer"/>

</form>

<div id="response">

</div>

<script>

var questions = [

{

"question":"What is the capital of England?",

"answer":"London"

},

{

"question":"What is the capital of Australia?",

"answer":"Canberra"

},

{

"question":"What do you call a baby cat?",

"answer":"Kitten"

}

];

var attempt = 1;

var score = 0;

var questionNum = 0;

var questionField = document.getElementById('question');

var text = document.getElementById('answer');

var response = document.getElementById('response');

document.getElementsByTagName('form')[0].addEventListener('submit',checkAnswer);

loadQuestion(questionNum);

function loadQuestion(num) {

questionField.innerHTML = questions[num].question;

attempt = 1;

}

function checkAnswer(e) {
var answer = text.value;
if(answer == questions[questionNum].answer && attempt <= 2) {
score++;
if(questionNum < questions.length) {
console.log('test');
questionNum++;
}
if(questionNum !== questions.length) {
loadQuestion(questionNum);
response.innerHTML = "correct, score: "+score;
} else {
response.innerHTML = "correct, final score: "+score;
}

} else if(attempt < 2) {
attempt++;
response.innerHTML = "Wrong, please try again";
} else if(attempt >=2 ) {
attempt++;
response.innerHTML = "Ran out of tries final score: "+score;
}
e.preventDefault();
}
</script>
</body>

</html>
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...