Getting correct score in a quiz application

JavaScript
1

I am new to javascript and jquery. I am making a simple quiz using jQuery. It is not a multiple choice quiz. The user has to type the answer in the input field. The questions and answers are stored in an array. 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. Most probably the error is in the checkAnswer function.
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);
}


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();
    });
}
2

You’re right that the error is in the check answer function. There are actually two things wrong there, both of which have the same cause - you’re calling for properties which don’t exist but look like they should, and they’re returning undefined.

It’s a really easy error to make, and a really hard one to find yourself.

  1. To get the value of a text input using jquery, you need to use .val() rather than .value.

  2. \When you compare out to the answer, you’re actually comparing it to the .answer property of questions itself, not questions[currentQuestion].

Your code is giving you a perfect score because you are comparing $(’.output’).value (which doesn’t exist) to questions.answer (which also doesn’t exist). undefined is the same as undefined.

If you fix those two issues, your code runs successfully, as shown here.

3

Sir, after making corrections as you suggest, the project is working fine but now I am facing a new problem. 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?

4

I think it’s because you’ve got two separate things happening when you click submit. In the html, you’ve got an “onclick” field that runs the function you want, but the keypress calls a function that empties the output first, and then runs the function; because the output has been cleared, you can never successfully compare it to the answer.

5

Could you please suggest me a solution ?