Click here to Skip to main content
15,920,633 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Write and call a JAVA SCRIPT function display_quiz. This function should create the questions (from json file) inside the form. For each question we need to create a division, insert the question in the label and insert the options as radio buttons with the options of the question as value. At the end of the form we will have submit button.

What I have tried:

JavaScript
<pre><script>
 html='<form method="post" id="hi">'
 w=0;
 Answers = [];
 Choosen = [];
 function Load(){
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            Data = JSON.parse(xhttp.responseText);
            Ques = Data.questions;
            console.log(Ques);
            for(i = 0; i < Ques.length; i++)
            {
                q1 = Ques[i];
                Answers[i] = q1.answer;
                html += "<div><label>"+q1.question+"</label><br>";
                for(j=0; j < q1.options.length; j++)
                {
                    O = q1.options[j];
                    html += '<input type="radio" id="AB'+w+'" name = "AC'+i+'"/><label id="AD'+w+'">'+O+'</label><br>';
                    w++;
                }
                html += '</div>';
            }
            html +=   '<br><button type="button"  >Submit Answer</button><br>';
        }
        html += '</form>';
        document.getElementById("quiz_form").innerHTML = html;
    };
    xhttp.open("GET", "X.json", true);
    xhttp.send();
};

Load();
</script>
 </script>
 </body>
</html>

HTML
<label>
    <div id="quiz_form">
        <!--each radio option has unique Id-->
        <div class="ques" id="question1"></div>

        <div><input type="radio" id="Q1option1" name="Q1options">
            <span id="Q1opt1"></span>
        </div>

        <div><input type="radio" id="Q1option2" name="Q1options">
            <span id="Q1opt2"></span>
        </div>

        <div><input type="radio" id="Q1option3" name="Q1options">
            <span id="Q1opt3"></span>
        </div>

        <div>
            <div class="ques" id="question2"></div>

            <div><input type="radio" id="Q2option1" name="Q2options">
                <span id="Q2opt1"></span>
            </div>

            <div><input type="radio" id="Q2option2" name="Q2options">
                <span id="Q2opt2"></span>
            </div>

            <div><input type="radio" id="Q2option3" name="Q2options">
                <span id="Q2opt3"></span>
            </div>
        </div>

        <div class="ques" id="question3"></div>

        <div><input type="radio" id="Q3option1" name="Q3options">
            <span id="Q3opt1"></span>
        </div>

        <div><input type="radio" id="Q3option2" name="Q3options">
            <span id="Q3opt2"></span>
        </div>

        <div><input type="radio" id="Q3option3" name="Q3options">
            <span id="Q3opt3"></span>
        </div>
    </label>
    
    <button class="subBtn" onClick="checkAnswer()">submit</button> 
    <!--when click call function-->
</div>

<div id="score" />
    <p id="Score"></p> <!--score will display here-->
</div>
<div id="results">
    <p id="Result"></p><!--results will display here-->
</div>
Posted
Updated 7-Jan-22 1:03am
v5
Comments
Chris Copeland 7-Jan-22 5:07am    
The code for what you've tried seems incomplete, it's correct to use an XMLHttpRequest but the code example you've provided is just invalid so it's impossible to work out what your issue is.

Also, what is the issue? You've provided what seems like requirements (for homework?) but not actually told us the problem you're having. Are you getting errors? Is something not loading?
Member 15491989 7-Jan-22 6:36am    
It is incomplete yes, I'm facing issues in extracting data from a JSON file and inserting them into a form, I'll post the whole code below.
And this is the JSON file

{
"questions": [
{
"question": "What is the square root of 100?",
"answer": "10",

"options":
{
"0": "20",
"1": "10",
"2": "25"
}

},
{
"question": "What is the result of 10^2 + 22?",
"answer": "122",

"options":
{
"0": "22",
"1": "1022",
"2": "42"
}
},
{
"question": "What is the remainder of 100/3?",
"answer": "1",

"options":
{
"0": "4",
"1": "1",
"2": "8"
}
}
]
}
Richard Deeming 7-Jan-22 6:47am    
Your HTML is malformed - the </label> and </div> tags aren't closed in the correct order.

You also have a syntax error in your Javascript:
quiz( Answers = [];
questions,optionss);


And you can't access the data returned from the AJAX request before the AJAX request has completed.
Member 15491989 7-Jan-22 6:54am    
Kindly, what do you mean by " you can't access the data returned from the AJAX request before the AJAX request has been completed." ?
Richard Deeming 7-Jan-22 7:02am    
Imagine you're sending an email to your teacher to ask what grade you got on a test. Can you tell your friend what grade the teacher said you got before you receive the teacher's reply?

In fact, in this case, since you call quiz() before you call loadDataFromJson(), you're trying to tell your friend what grade the teacher said you got before you've even sent the email to the teacher!

Making an AJAX request with the XMLHttpRequest is asynchronous. You can't know what was returned from the request until the onreadystatechange callback is called and the readyState is 4. Until that happens, your questions array will be empty.

You need to move the quiz(); call inside the onreadystatechange callback function.

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