Checking answer in a quiz

I am making a simple quiz using jQuery. It is not a multiple choice quiz. The user has to type the answer. I am new to javascript and jquery. I am unable to write the code for checking the right answer. The questions and answers are stored in an array. Most probably the error is in the checkAnswer function. It shows the first question but after clicking the submit button it is not showing the next question.
Perhaps the error is in this syntax:

 if (output.value == questions.answer) {
score++;
    }

The complete document and jQuery is:

<body>
    <div class="start">
        <h1> Welcome to English Pupils </h1>
        <a class="btn" href="#"> Get Started </a>
    </div>

    <div class="quiz">
        <input class="input" type="text">
        <input class="output" type="text">
        <a href="#"> Submit </a>
    </div>

    <div class="summary">
        <h2> Summary Screen </h2>
        <p> Congrats you scored x out of y correct ! </p>
    </div>
</body>


var questions = [
    {
        title: "I like cricket.",
        answer: "I do not like cricket.",
    },

    {
        title: "He is smart.",
        answer: "He is not smart.",
    },

    {
        title: "She sings well.",
        answer: "She does not sing well.",
    },

    {
        title: "You are a cheat.",
        answer: "You are not a cheat.",
    },

];

let score = 0;
let currentQuestion = 0;

$('document').ready(function () {

    $('.start a').click(function (e) {
        e.preventDefault();
        $('.start').hide();
        $('.quiz').show();
        showQuestion();
    });
});


function showQuestion() {
    let question = questions[currentQuestion];
    $('.input').val(question.title);
    $('.quiz').html();
    for (var i = 0; i < question.answer.length; i++) {
    }
}

function checkAnswer() {
    let question = questions[currentQuestion];
    if (output.value == questions.answer) {
        score++;
    }

    currentQuestion++;

    if (currentQuestion >= questions.length) {
        showSummary();
    } else {
        showQuestion();
    }
    showQuestion();
}

function showSummary() {
    $('.quiz').hide();
    $('.summary').show();
    $('.summary p').text("Congrats you scored " + score + " out of " + questions.length + " correct !");

}
1 Like

Hi @tarunrathore03041980, where is output defined, and where are you actually calling checkAnswer()?

Hi @tarunrathore03041980

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.

1 Like

According to your suggestions I have made some corrections in my codes of quiz. Now I am having only one problem that the quiz summary is not showing the correct score. It is showing the score equal to total number of questions each time. I am unable to write the code for it.
As I know the wrong syntax is: if (out == questions.answer) {score++; }

The code is :

<html>
 body>

    <div class="start">
        <h1> Welcome to English Pupils </h1>
        <a class="btn" href="#"> Get Started </a>
    </div>

    <div class="quiz">
        <input type="text" class="input" />
        <input type="text" class="output" />
        <a class="sub" href="#" onclick="checkAnswer()"> Submit </a>
    </div>

    <div class="summary">
        <h2> Summary Screen </h2>
        <p> Congrats you scored x out of y correct ! </p>
        <a class="rst" href="#" onclick="restartQuiz()"> Restart Quiz </a>
    </div>

</body>
</html>
var questions = [
    {
        title: "I like cricket.",
        answer: "I do not like cricket."
    },

    {
        title: "He is smart.",
        answer: "He is not smart."
    },

    {
        title: "She sings well.",
        answer: "She does not sing well."	
    },

    {
        title: "You are a cheat.",
        answer: "You are not a cheat."
    },

    {
        title: "They are coming.",
        answer: "They are not coming."

    },

];


let score = 0;
let currentQuestion = 0;

$('document').ready(function () {
    $('.start a').click(function (e) {
        e.preventDefault();
        $('.start').hide();
        $('.quiz').show();
        showQuestion();
    });

    $('.output').keyup(function (e) {
        if (e.keyCode === 13) {
            $('.sub').click();
        }
    });
});


function showQuestion() {
    let question = questions[currentQuestion];
    $('.input').val(question.title);
    $('.quiz').html();
    for (var i = 0; i < question.answer.length; i++) {
    }
}

function checkAnswer() {
    let question = questions[currentQuestion];
    let out = $('.output').value;
if (out == questions.answer) {
        score++;
    }
    currentQuestion++;
    if (currentQuestion >= questions.length) {
        showSummary();
    } else {
        showQuestion();
    }

    $('.sub').click(function () {
        $('.output').val('');
    });
}


function showSummary() {
    $('.quiz').hide();
    $('.summary').show();
    $('.summary p').text("Congrats you scored " + score + " out of " + questions.length + " correct !");
}

function restartQuiz() {
    $('.summary a').click(function (e) {
        e.preventDefault();
        $('.summary').hide();
        $('.quiz').show();
        currentQuestion = 0;
        showQuestion();
    });
}

I would have expected you to get an error message in the console for that. Shouldn’t you be checking question.answer as you do in other places?

I made the following corrections later but it’s still not working.

let out = $(‘.output’).val ();
if out == (questions[currentQuestion].answer)
{ score++; }

My quiz project is now working fine. The problem now I am facing is that it is showing correct score when clicked on submit button each time but not showing correct score if pressed enter to submit the answer. Could anyone please suggest me the solution to why pressing enter is not showing correct score?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.