www.webdeveloper.com
Results 1 to 8 of 8

Thread: Help a newbie with short quiz...

  1. #1
    Join Date
    Jan 2013
    Location
    London, UK (Originally Vancouver)
    Posts
    10

    Wink Help a newbie with short quiz...

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Have you tried searching this forum for topics with a similar question?
    Try 'quiz' or some variation on that theme.

  3. #3
    Join Date
    Jan 2013
    Location
    London, UK (Originally Vancouver)
    Posts
    10
    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!");
        }


  4. #4
    Join Date
    Dec 2012
    Posts
    95
    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.

  5. #5
    Join Date
    Jan 2013
    Location
    London, UK (Originally Vancouver)
    Posts
    10
    Okay thanks. Is there an easy way to use a loop to ask 3 questions?

  6. #6
    Join Date
    Dec 2012
    Posts
    95
    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>

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    sorry disturbing you guys, may i ask a kind of 'off topic' question? 'kitten' !== 'pussy' ? just for my info...
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    Jan 2013
    Location
    London, UK (Originally Vancouver)
    Posts
    10
    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 
    0questions.lengthi++) // 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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles