JQuery Multiple Choice Multiple Feedback If Statement -
i'm trying create multiple feedback jquery question need little if-statement code. have 1 correct answer have different feedback alert selecting each wrong answer. give different feed each wrong answer. example, "you selected grey, there better answer, please select again." or "you selected black, there better answer."
here code far.
jquery:
$(function () { //variable of correct answers var rules = ['correct']; //force checkboxes work radio buttons var boxes = $("input[name=q4]:checkbox").click(function () { boxes.not(this).attr('checked', false); }); $('.submit4').click(function (e) { e.preventdefault(); //check correct answers var above if ($('input[name=q4]:checked').map(function (i, v) { return v.id; }).get().join(',') == rules[0]) { alert("correct! reflective colors should make more visible @ night"); } else { $('.grey:checked').attr('disabled', 'disabled').removeattr('checked'); alert("grey wrong... might not bright enough."); } }); });
html:
<h1> question </h1> <p>what best color wear after dark?</p> <form> <label> <input type="checkbox" name="q4" class="grey"></input>grey</label> <label> <input type="checkbox" name="q4" class="black"></input>black</label> <label> <input type="checkbox" name="q4" class="white"></input>white</label> <label> <input type="checkbox" name="q4" class="red"></input>red</label> <label> <input type="checkbox" name="q4" id="correct"></input>reflective yellow</label> <br /> <button class="submit4">submit</button> </form>
in case, suggest use switch
, (just implement own logic):
$('.submit4').click(function (e) { e.preventdefault(); //check correct answers var above var result; switch($('input[name=q4]:checked').attr('class')){ case 'grey': result = "it's grey"; break; case 'black': result = "it's black"; break; case 'white': result = "it's white"; break; case 'red': result = "it's red"; break; default: result = 'correct answer!'; break; } alert(result); });
in case switch works getting class of selected checkbox, , can whatever want on each case instead of using bunch of if/elses...
jsfiddle demo: http://jsfiddle.net/darkajax/q4rj8/
Comments
Post a Comment