CODEWITHSUNDEEP
javascriptjqueryhtml
HipsterLeprechaun
HipsterLeprechaun

Reputation: 15

jQuery Simple Quiz not working

I am just learning Javascript and jQuery. I have made a simple quiz that is essentially broken, but I have narrowed the problem down to my code. I am certain that all the ids are linked, and that jQuery is connected correctly to the CDN. I know I could ask the questions one after another, but imo that is sloppy coding.

From http://pastebin.com/54JQwhAg

HTML: <!DOCTYPE html>
<html>
    <head>
        <meta charset="Utf-8">
        <title>The quiz to end all quizes</title>
        <link rel="stylesheet" href="style.css">
        <script src="libs/jquery-1.11.0.min.js"></script>
        <script src="script.js"></script>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div id="main">
            <div id="header">
                <img src="images/logo.png">
                <h2>This page is an experiment to see if I can use JavaScript and jQuery to make a quiz game.</h2>
                <p>Please answer with no punctuation.</p>
                <p id="show">Click here to show answers.</p>
                <img id="start" src="images/clickme.png">
            </div>
            <div id="answers">
                <!-- CHEATER!!! -->
                <p><span id="ans1"></span>Q: Who was the first African-American major league baseball player? A: Jackie Robinson</p>
                <p><span id="ans2"></span>Q: Who was the second U.S. President? A: John Adams</p>
                <p><span id="ans3"></span>Q: Where did the general keep his armies? A: In his sleevies</p>
                <p><span id="ans4"></span>Q: Why did the chicken cross the road? A: To get to the other side</p>
                <p><span id="ans5"></span>Q: Why did the scarecrow get a promotion? A: He was outstanding in his field</p>
                <h2 id="numright"></h2>
                <p id="hide">Click here to hide answers.</p>
            </div>
        </div>
    </body>
</html>

Javascript:
$(document).ready(function() {
    var score;
    var questions = [
                    "Who was the first African-American major league baseball player?", 
                    "Who was the second U.S. President?",
                    "Where did the general keep his armies?",
                    "Why did the chicken cross the road?",
                    "Why did the scarecrow get a promotion?"
                    ];
    var answers = [
                    "jackie robinson",
                    "john adams",
                    "in his sleevies",
                    "to get to the other side",
                    "He was outstanding in his field"
                    ];
    $('#answers').hide() // hide answers
    $('#start').click(function() {
        for (num=0; num<5, num++){
            var ans = prompt(questions[num], "Enter Answer Here")
            if (ans == answers[num])
                score++
            } // end if
        } // end for
        $('#answers').show() // show answers
        $('#show').hide() // hide show
        $('#numright').write('You got ' + score + '/5')
    }); // end click
    $("#show").click(function() {
        $('#answers').show() // show answers
        $('#show').hide() // hide show button
    }); // end click
    $("#hide").click(function() {
        $('#answers').hide() // hide answers
        $('#show').show() // show show button
    }); // end click    
}); // end ready

Basically, the parts that should be hidden dont load on start, and when the image that start the quiz is clicked, nothing happens. When I have tried to narrow down the problem to a line of code, parts of code randomly work and then not work, with no apparent correlation.

Upvotes: -1

Views: 354

Answers (1)

Chris Brown
Chris Brown

Reputation: 4635

I found 2 errors going through the code, both within the for loop

Firstly your for loop had a comma instead of a semi colon after num<5

Secondly you were missing your opening curly brace on the if statement

Corrected:

for (num=0; num<5; num++) {
    var ans = prompt(questions[num], "Enter Answer Here")
    if (ans == answers[num]) {
        score++
    } // end if
} // end for

Also, there are a couple more things to note

Before you try to increment the variable score you need to initialise it;

var score = 0;

And further down, when outputting the score in the <h2> tag you use .write() as a function, I assume based on JavaScript's document.write(). In jQuery use .text() instead and the score outputs successfully.

Fixed Fiddle

Upvotes: 1

Related Questions