Question

QUESTION 2 You are developing an online quiz web application and you have been asked to design a JSON file for creating a TestBank. You need to design the JSON file for storing some multiple choice questions/answers. Here is an example of sample data which you need to convert it into JSON Q) 5 + 7 * 2 = ? a) 14 b) 12 c) 24 d) 19 ANS: d Answer the following questions: 1) How do you design the JSON file? Create the JSON file (for 5 sample test-questions) and validate it. 2) Develop a jQuery program which displays all questions, their multiple options, and the right answer.

Answer 1

var allQuestions = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        allQuestions = JSON.parse(this.responseText);
        console.log(allQuestions);

        var currentPage = -1;
        var totalScore = 0;
        var review = false;

        $(document).ready(function () {
            $("#quiz").hide();
            $("#alert").hide();
            $("#nextButton").html("Start Quiz");


            $("#nextButton").click(function(){
                $("#nextButton").html("Next");

                var answerArray = $("#myForm").serializeArray();

                // check if question has been answered
                if(answerArray.length==0 && currentPage>=0 && review==true) {
                    $("#alert").html("Please select an answer.");
                    $("#alert").fadeIn('fast');
                } else {
                    $("#alert").hide();

                    if(review) {
                        // evaluate question answered and add to score
                        $("input[type=radio]").attr('disabled', true);
                        $(".a"+allQuestions[currentPage].correctAnswer).addClass("correctAnswer");
                        if(answerArray[0].value == allQuestions[currentPage].correctAnswer) {
                            totalScore++;
                        } else {
                         $(".a"+answerArray[0].value).addClass("wrongAnswer");
                        }

                        review = false; // review completed
                    } else {
                        $("#content").fadeOut('slow',function(){
                            currentPage++; // iterate to next question
                            if(currentPage==allQuestions.length){ // Show Score
                                // quiz is over
                                $("p").show();
                                $("#quiz").hide();
                                $("#nextButton").hide();
                                $("p").html("You answered <span class='score'>"+totalScore+"/"+allQuestions.length+"</span> questions correctly!");
                            } else {
                                review = true; // turn review on for next question
                                var thisQ = allQuestions[currentPage];
                                // display a question
                                $("p").hide();
                                $("#quiz").show();
                                $("#form-question").html(thisQ.question);
                                $("#form-answers").empty();
                                var choiceArray = thisQ.choices;
                                for(var i=0; i<choiceArray.length; i++) {
                                    $("#form-answers").append('<div class="form-radio a'+i+'"><input type="radio" name="q'+currentPage+'" value="'+i+'"> ' + choiceArray[i] + '</div>');
                                }
                            }
                        });
                        $("#content").fadeIn('slow');
                    }

                }
            })
        });
        
    } /* else {
        $("p").show();
        $("#quiz").hide();
        $("#nextButton").hide();
        $("#alert").hide();
        $("p").html("Error accessing file.");
    } */
};
xmlhttp.open("GET", "quiz-data.json", true);
xmlhttp.send();

Quizdata.json

[
	{
	"question": "Which is NOT a real element?",
	"choices": ["Hydrogen", "Radium", "Vibranium", "Arsenic"],
	"correctAnswer": 2
	},
	{
	"question": "Which is NOT a layer of the atmosphere?",
	"choices": ["Taposphere", "Thermosphere", "Exosphere", "Stratosphere"],
	"correctAnswer": 0
	},
	{
	"question": "Which is the most abundant gas in the atmosphere?",
	"choices": ["Hydrogen", "Oxygen", "Nitrogen", "Helium"],
	"correctAnswer": 2
	},
	{
	"question": "Which element is all life on Earth based on?",
	"choices": ["Hydrogen", "Oxygen", "Silicon", "Carbon"],
	"correctAnswer": 3
	},
	{
	"question": "Water evaporates, condenses in the atmosphwere, and falls back to the earth as rain. What is this process called?",
	"choices": ["Wheel of time", "Water cycle", "Water exogenesis", "Fun times"],
	"correctAnswer": 1
	}
	]