Making a quiz with jquery and javascript

Question

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

I'm not sure what you are trying to do....can you be more specific? — 13ruce1337
– 13ruce1337, Commented Mar 30, 2014 at 15:43
I'm trying to make a quiz. Thats get the question from within the JSON object. — Emil
– Emil, Commented Mar 30, 2014 at 15:46

rupps · Accepted Answer · 2014-03-30 17:11:50Z

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

 }

Collectives™ on Stack Overflow

Making a quiz with jquery and javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related