Help a newbie with short quiz...

**goose2013** · 01-15-2013, 10:17 AM

First of Hello!

I am new to the forum and also relatively knew to JavaScript.

Looking for an expert who may be able to spare a couple of minutes of there time to help me with a fix for creating a short 3 question quiz that is called with a body onload function.

I know i am asking alot but im kind of hoping someone has something similar perhaps already created?

The quiz is to be designed to give the user two attempts at answering each question and also keep a running score and then display final score on page.

Any takers? This would be much appreciated as i no where near skilled enough

Cheers

Goose

**JMRKER** · 01-15-2013, 11:21 AM

Have you tried searching this forum for topics with a similar question?
Try 'quiz' or some variation on that theme.

**goose2013** · 01-16-2013, 08:32 AM

Thanks i had a look and made this attempt. I have it working so the question is being asked but i would like to give the user a second attempt and keep a running total of the users score. Then finally display the score to my page

Any help/advice at all would be massively appreciated.

PHP Code:


function askQuestion()



{    

    var answer1 = prompt("What is the capital of England?","");

    if (answer1 == 'London') 

    {

        alert("Correct!");

    } 

    else 

    {

        alert("Sorry, Try Again!");

    }

}

**iBeZi** · 01-16-2013, 09:35 AM

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Quiz</title>
    </head>
    <body>
        <form>
            <label for="answer">What is the capital of England?</label>
            <input type="text" id="answer"/>
            <input type="submit" value="Answer"/>
        </form>
        <div id="response">
        </div>
        <script>
            var attempt = 1;
            var score = 0;
            var text = document.getElementById('answer');
            var response = document.getElementById('response');
            document.getElementsByTagName('form')[0].addEventListener('submit',checkAnswer);
            
            function checkAnswer(e) {
                var answer = text.value;
                if(answer == "London" && attempt <= 2) {
                    score++;
                    response.innerHTML = "correct, score: "+score;
                } else if(attempt < 2) {
                    attempt++;
                    response.innerHTML = "Wrong, please try again";
                } else if(attempt >=2 ) {
					attempt++;
                    response.innerHTML = "Ran out of tries :(";
                }
                e.preventDefault();
            }
        </script>
    </body>
</html>

Try something like that, prompts aren't recommended.

**goose2013** · 01-16-2013, 10:28 AM

Okay thanks. Is there an easy way to use a loop to ask 3 questions?

**iBeZi** · 01-16-2013, 10:49 AM

Code:

<!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>

**Padonak** · 01-16-2013, 11:27 AM

sorry disturbing you guys, may i ask a kind of 'off topic' question? 'kitten' !== 'pussy' ? just for my info...

**goose2013** · 01-16-2013, 05:09 PM

Well observed Padonak!

guys thanks for all the help! This is what i have so far - all i need is for the user to get 2 attempts at each question, quick fix anyone?

PHP Code:


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);

Thread: Help a newbie with short quiz...

Thread Tools

Display

Help a newbie with short quiz...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions