How to get correct score in quiz by pressing enter ?

Question

0.00/5 (No votes)

See more:

I am working on a quiz project which is not multiple choice one. The user has to type the answer in the input field each time. The problem I am facing is that I am getting correct score if clicked on submit button each time but not getting correct score if pressed enter to submit the answer.

What I have tried:

<!DOCTYPE html>

<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Unlimited grammar practice exercises of 
    each & every topic to get a good commmand of English language">
    <link rel="stylesheet" type="text/css" href="random.css">
    <script type="text/javascript" src="jquery.js"> </script>
    <script type="text/javascript" src="random.js"> </script>

    <title> English Grammar Exercises </title>

</head>

<title> Grammar Quiz </title>

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

JavaScript

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').val();
    if (out == questions[currentQuestion].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();
    });
}

Posted 5-Apr-19 10:27am

Tarun Rathore

Updated 6-Apr-19 6:31am

v6

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Patrice T · Answer 1 · 2019-04-05T12:57:00

Quote:
The problem I am facing is that I am getting correct score if clicked on submit button each time but not getting correct score if pressed enter to submit the answer.

Do you understand that your quizz page is made of 2 part intimately linked together, html and Javascript ?
By providing only JS part, you prevent us from helping you.

I have not played with JS for a long time, but this loop is doing nothing

JavaScript

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