<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>
<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>
</label>
</div>
quiz( Answers = []; questions,optionss);
quiz()
loadDataFromJson()
XMLHttpRequest
onreadystatechange
readyState
4
questions
quiz();
xhttp.onreadystatechange
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)