CODEWITHSUNDEEP
javascriptjqueryhtml
Emil
Emil

Reputation: 55

Making a quiz with jquery and javascript

I'm working on making a quiz with javascript and jquery, but I am totally lost on how to go on. For now I have only created a JSON to save the question in.

Javascript document so far:

    // JavaScript Document
(function(){
    window.onload = init;

    function init(){

    }

    var points = 0;
    var numberofquestions= 0;
    var correct= 0;
    var quiz= {question: [
        {Question: "Question 1?", 
            answers: [
                {answer: "Answer 1", correct_answer: 0},
                {answer: "Answer 2", correct_answer: 1},
                {answer: "Answer 3", correct_answer: 0}
        ]}
    ]};
})();

HTML

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<script src="../javascript/quizJS.js"></script>
<link rel="stylesheet" type="text/css" href="../css/stil.css">
</head>

<body>
    <div id="wrapper">
        <header id="header">
            <h1>Quiz</h1>
        </header>
        <div id="container">
            <h2 id="Title"></h2>
            <ul class="answer">
            </ul>

            <section id="navigation">
                <button ID="btnPrev">Prev</button>
                <button ID="btnNext">Next</button>
            </section>
        </div>
        <footer id="footer">

        </footer>
    </div>
</body>
</html>

I'm not asking any to do it, but I need help on making any progress. I've tried using Google to find something similar, but it seems so complex and I can't figur out the pattern. Thank you

Upvotes: -1

Views: 1745

Answers (1)

rupps
rupps

Reputation: 9907

I will give you some thoughts:

  • Your structure for holding questions is right, and your initial variables are correctly chosen. That's a nice start. I miss one more variable "current_question" that you will set to 0.

  • Then we have the HTML part. It also seems an adequate structure to paint the questions.

Now, what is missing is the third part: The logic. You will need to write a program that:

  • 1) Paints one question in the HTML
  • 2) When the user clicks on an answer, look in your quiz array, in the current question, and check if it is correct
  • 3) if it is correct, you will add some points to your point variable.
  • 4) you will do current_question=current_question + 1 and go back to step 1)

This could complement your program

 var current_question_number=0;
 var currentQuestion=null; // we will store the current question here for easy access

 function start_quiz() {
    current_question_number=0;
    correct=0;
    points=0;

    paint_question();       

 }


 // you will call this to paint the current question current_question_number

 function paint_question() {

     currentQuestion=quiz.question[current_question_number];

      // paint the title

      // paint inside a HTML by id: Standard javascript way
      document.getElementById("title").innerText=currentQuestion.Question;

      // or use jquery: $("#title").text(currentQuestion.Question);

      // paint the answers
      var answers=currentQuestion.answers;

      for (var i=0; i<answers.length; i++) {
             var answer=answers[i]; // current answer
             // now you have to add <li>answer</li> to the <ul>
             // this is your homework!
      }
 }

 // you will call this when the user clicks on one answer, with the answer number

 function receive_answer(chosen) {

         if (currentQuestion.answers[chosen].correct_answer==1) {
                 // add the points
         }

         current_question++;
         paint_question();

 }

Upvotes: 4

Related Questions