Click here to Skip to main content
15,922,407 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am a newbie. The following is the html document to my JavaScript code.

What I have tried:

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

<div class="quiz">
    
    
    <a class="sub" href="#"> Submit </a>
</div>

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


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);
    $('.quiz').html();
    for (var i = 0; i < question.answer.length; i++) {
    }
}

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
Updated 6-Apr-19 6:28am
v4
Comments
Tarun Rathore 6-Apr-19 6:49am    
It will take me some time to be familiar with the rules of the forum. I have made corrections as per your suggestions. Could you please now suggest me a solution ?

1 solution

It's a better idea to information to your previous question instead of posting raw HTML here, and use the "code" widget to enclose it in pre tags and engage the syntax highlighter:
<pre><div class="start">
    <h1> Welcome to English Pupils </h1>
    <a class="btn" href="#"> Get Started </a>
</div>

<div class="quiz">
    
    
    <a class="sub" href="#"> Submit </a>
</div>

<div class="summary">
    <h2> Summary Screen </h2>
    <p> Congrats you scored x out of y correct ! </p>
    <a class="rst" href="#"> Restart Quiz </a>
</div></pre>
Then gives us this:
<div class="start">
    <h1> Welcome to English Pupils </h1>
    <a class="btn" href="#"> Get Started </a>
</div>

<div class="quiz">
    
    
    <a class="sub" href="#"> Submit </a>
</div>

<div class="summary">
    <h2> Summary Screen </h2>
    <p> Congrats you scored x out of y correct ! </p>
    <a class="rst" href="#"> Restart Quiz </a>
</div>
But your question is still the same thing, and requires the same answer: you have no javascript in there and no code behind code to process the "quiz". Without at least one of those, you aren't going to have any results to display!

I'd strongly suggest that you re-read your course notes and / or recent book chapters as you don't seem to have grasped how to construct a responsive web page at all yet.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900