javascript - jQuery quizz with radiobuttons misbehaving -
i writing simple online quizz. there 4 radiobuttons choices. initially, script populates choices first question. after that, user should choose next 1 , click button. if answer matches correct one, total increments. else, next question loaded. when 10th question submitted, results loaded. questions loaded array ten objects called "pitanja". quno question number, opt1 opt 4 option texts , corrno correct option number.
but if user hasn't chosen anything, there condition, won't work. quizz moves on , each time sets fourth choice. if other chosen, next 1 still 4 default. maybe one, too... additionally, says success rate 30%, corresponds 3 of 10 correct d's...
i know not complex @ all, i'm confused here... have gone wrong?
$(document).ready(function() { var pitanja = [{ "quno": 1, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 2 }, { "quno": 2, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 4 }, { "quno": 3, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 2 }, { "quno": 4, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 4 }, { "quno": 5, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 1 }, { "quno": 6, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 3 }, { "quno": 7, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 2 }, { "quno": 8, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 1 }, { "quno": 9, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 4 }, { "quno": 10, "opt1": "a", "opt2": "b", "opt3": "c", "opt4": "d", "corrno": 3 }]; //****************************************************// var corrtotal = 0; // total correct answers var qnumber = 0; // current question number var currentchoice = 0; //current answer choice function popunipitanja(qnumber) { var qu = pitanja[qnumber]; //current question, array index $("#quizz-question-no").text("question " + qu["quno"]); $("#label1").text(qu["opt1"]); $("#label2").text(qu["opt2"]); $("#label3").text(qu["opt3"]); $("#label4").text(qu["opt4"]); } function proveriodgovor(choice, corr) { // choice selected value, corr current question correct value if (parseint(choice) === corr) { corrtotal++; } //if selected , correct value match, increment total correct } function sacuvajizbor() { //save user choice if ($("#opt1").prop("checked", true)) { currentchoice = 1 }; if ($("#opt2").prop("checked", true)) { currentchoice = 2 }; if ($("#opt3").prop("checked", true)) { currentchoice = 3 }; if ($("#opt4").prop("checked", true)) { currentchoice = 4 }; } function ucitajrezultate() { // loads quizz results var average = corrtotal * 10; // divide total (10 questions) , multiply 100 percents $("#quizz-warn").hide(); $("#quizz-form").html("broj tačnih odgovora: " + corrtotal + ", što je: " + average + "%"); //erase quizz form , display results } $("button").click(function() { //handle user submit var correctanswer = pitanja[qnumber]["corrno"]; //save number of curent correct answer sacuvajizbor(); //save user choice if (currentchoice < 1 || currentchoice > 4) { //if choice isn't 1 or 2 or 3 or 4, user didn't choose @ $("#quizz-warn").text("molimo izaberite odgovor :)"); //warn user choose answer } else { proveriodgovor(currentchoice, correctanswer); //check user answer , act accordingly if (qnumber === 9) { //if question number 9, 10th question, display results ucitajrezultate(); //display results } else { //if it's not, move on next question popunipitanja(++qnumber); //load next question currentchoice = 0; //reset current choice 0 } } }); popunipitanja(qnumber); //initially, load first question (qnumber 0 default) });<html lang="sr"> <head> <meta charset="utf-8"> <title>the quizz</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <div id="quizz-form"> <span id="quizz-title">quizz text: </span> <p id="quizz-question-no"></p> <form> <input type="radio" name="quizz-opt" id="opt1" value="1"> <label class="opt-txt" for="opt1" id="label1"></label> <br> <!--option 1 end--> <input type="radio" name="quizz-opt" id="opt2" value="2"> <label class="opt-txt" for="opt2" id="label2"></label> <br> <!--option 2 end--> <input type="radio" name="quizz-opt" id="opt3" value="3"> <label class="opt-txt" for="opt3" id="label3"></label> <br> <!--option 3 end--> <input type="radio" name="quizz-opt" id="opt4" value="4"> <label class="opt-txt" for="opt4" id="label4"></label> <br> <!--option 4 end--> <button type="button">dalje</button> </form> <div id="quizz-warn"></div> </div> <script src="kviz.js"></script> </body> </html>i know names not in english, didn't think have seek help, , @ point i'm afraid change them :) hope comments help...
the issue in currentchoice if statement. should change this:
if ($("#opt1").prop("checked")) { currentchoice = 1 }; instead of
if ($("#opt1").prop("checked", true)) { currentchoice = 1 }; simply, setting of options checked .prop("checked", true). now, checks option. if selected, currentchoice gets updated , user not able move next question without answering current one.
to make more functional, need remove error message when user choose option. added $("#quizz-warn").text("molimo izaberite odgovor :)"); else-statement of button click event. in order reset options, add same else-statement:
$("input").prop("checked",false); check out in jsfiddle
Comments
Post a Comment