Showing if the answer was right or wrong as soon as it’s selected can be done by adding the following jQuery to your theme’s footer.php file.
<script>
jQuery(window).load(function() {
// when an answer is selected
jQuery(".hdq_label_answer").click(function(){
// check if this question has already been answered
let p = jQuery(this).parent().parent();
if(jQuery(p).hasClass("hdq_answered")){
return false;
} else {
jQuery(p).addClass("hdq_answered");
// check to see if answer was right
if(jQuery(this)[0].children[0].children[0].value == 1){
jQuery(p).addClass("hdq_answered_correct");
jQuery(this).addClass("hdq_correct");
} else {
jQuery(p).addClass("hdq_answered_incorrect");
jQuery(this).addClass("hdq_wrong");
}
jQuery(p).find(".hdq_question_after_text").fadeIn();
}
});
});
</script>
Let me know if you need help getting this to work
Thread Starter
Henry
(@henrychea)
Hi yes that works, but I want to show the correct answer if the wrong answer is selected, the person would know what the correct answer was as well.
Thread Starter
Henry
(@henrychea)
Also it would be cool if we could disable the user from clicking on other answers if they alr answered
Just note that the “disabled” part to stop users from selecting again will not work yet, but will automatically work once the next version is released.
If you NEED that to work sooner than later, let me know and I can tell you what file and code to modify to get the disabled to work now.
<script>
jQuery(window).load(function() {
// when an answer is selected
jQuery(".hdq_label_answer").click(function(){
// check if this question has already been answered
let p = jQuery(this).parent().parent();
if(jQuery(p).hasClass("hdq_answered")){
return false;
} else {
jQuery(p).addClass("hdq_answered");
// check to see if answer was right
if(jQuery(this)[0].children[0].children[0].value == 1){
jQuery(p).addClass("hdq_answered_correct");
jQuery(this).addClass("hdq_correct");
} else {
jQuery(p).addClass("hdq_answered_incorrect");
jQuery(this).addClass("hdq_wrong");
}
jQuery(p).find(".hdq_question_after_text").fadeIn();
let inp = jQuery(p).find(".hdq_check_input");
for(let i = 0; i < inp.length; i++){
inp[i].disabled = true;
if(inp[i].value == 1 && !inp[i].classList.contains("hdq_correct")){
inp[i].parentNode.parentNode.classList.add("hdq_correct_not_selected");
}
}
}
});
});
</script>
Thread Starter
Henry
(@henrychea)
Hi, does this show the correct answer too if the user selects the wrong answer?
Thread Starter
Henry
(@henrychea)
Oppps yes it does, thank you 😀 I’m really sleepy so I’m a bit sloppy XD
Thread Starter
Henry
(@henrychea)
IT’S WONDERFUL, I’ve been searching my way into jQuery but really can’t think the JS way. I’ve wrapped around python my head has been spinning. You said the disabled could work now, is it with the beta version of HD Quiz? If not I would love to follow your instructions and enable it.
Thread Starter
Henry
(@henrychea)
I get the a-question-for-the-quiz error with the beta version. I tried using the custom hooks but the bug really got it my way so I downgraded to normal
yes, that was a bug in that old beta that has since been squashed. I should delete that old beta download so others don’t use it, so thanks for brining it up.
Please edit ./hd-quiz/includes/js/hdq_script.js and around line 80, you will see
/* For now, only allow 1 correct answer for a question
------------------------------------------------------- */
This is the start of the function we need to edit.
Replace that entire function with the following:
/* For now, only allow 1 correct answer for a question
------------------------------------------------------- */
jQuery(".hdq_label_answer").click(function() {
// get the parent id
hdq_question_id = jQuery(this).attr("data-id");
if(jQuery("#" + hdq_question_id + " .hdq_label_answer").children(".hdq-options-check").children(".hdq_check_input").is(":enabled")){
jQuery("#" + hdq_question_id + " .hdq_label_answer").children(".hdq-options-check").children(".hdq_check_input").prop('checked', false);
jQuery(this).children(".hdq-options-check").children(".hdq_check_input").prop('checked', true);
}
});
What this does is forces HD Quiz to first check to see if the input has been disabled before forcing it to update.
Thread Starter
Henry
(@henrychea)
Yesssss thank you so much for that. I’m looking very forward to the new release 😀
