Skip to content

Instantly share code, notes, and snippets.

@vfontjr

vfontjr/form-checkbox.html

Last active Feb 14, 2021
Embed
What would you like to do?
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<div id="field_[key]_label" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</div>
<div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">
[input opt=1 data-results="correct" data-question="2"]
[input opt=2 data-results="wrong" data-question="2"]
[input opt=3 data-results="correct" data-question="2"]
[input opt=4 data-results="wrong" data-question="2"]
[input opt=5 data-results="correct" data-question="2"]
[input opt=6 data-results="wrong" data-question="2"]
</div>
[if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
[if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<div id="field_[key]_label" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</div>
<div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">
[input opt=1 data-results="Sorry, wrong answer" data-question="1"]
[input opt=2 data-results="Congratulations!!" data-question="1"]
[input opt=3 data-results="Sorry, wrong answer" data-question="1"]
[input opt=4 data-results="Sorry, wrong answer" data-question="1"]
</div>
[if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
[if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>
<div id="answer-check2">
<div id="display-results2"></div>
<div class="check_results_btn_container">
<button id="display-results-btn2" type="button" data-question="2" data-field-id="284" data-field-type="checkbox" data-wrong="You blew it buddy!" data-right-answers="3">Check Answer</button>
</div>
</div>
<div id="answer-check1">
<div id="display-results1"></div>
<div class="check_results_btn_container">
<button id="display-results-btn1" type="button" data-question="1" data-field-id="282">Check Answer</button>
</div>
</div>
<script>
jQuery(document).ready(function($) {
"use strict";
/* function that addresses the second requirement
* "The congrats/tip box needs to disappear when they change the answer, so they can re-click to check again."
* We pass the question number variable as defined by the data-question attribute
*/
function clear_results( question_no ) {
var display_element = "#display-results" + question_no;
$(display_element).hide();
}
/* This function monitors the form's radio button and checkbox fields' click and change events
* If either even fires, the clear_results function is called to clear the message display
* Note the difference in how Formidable constructs the field names. 282 is the radio button and 284 is the checkbox
* the checkbox field has an empty array brackets [] as part of the name.
* If you inadvertently leave these brackets off, your code will not work
*/
$('input[name="item_meta[282]"], input[name="item_meta[284][]"]').on("click, change", function() {
clear_results( $(this).data("question") );
});
/* this is the heart of the working code. This function monitors the "check answer" buttons click event
* if the click event fires, this is where the magic happens.
* Make sure you add the button ID to the list in the first line of code otherwise the magic will fizzle.
*/
$("#display-results-btn1, #display-results-btn2").on("click", function() {
/* retrieve the necessary values from the HTML data attributes
* Tip: defining variables in a single statement separated with commas
* executes faster than invidual var declarations
*/
var display_element = "#display-results" + $(this).data("question"),
field_id = $(this).data("field-id"),
field_type = $(this).data("field-type"),
field_name = (field_type == "radio") ? 'input[name="item_meta[' + field_id + ']"]' : 'input[name="item_meta[' + field_id + '][]"]',
checked_option = (field_type == "radio") ? field_name + ':checked' : field_name,
checkbox_correct = true,
checkbox_right_answers = $(this).data("right-answers"),
checkbox_right_count = 0;
/* display the results based on field type */
if (field_type == "radio") {
/* first check if an answer has been provided */
if ( $(checked_option).val() === undefined || $(checked_option).val() === null) {
/* if no radio buttons have been checked, display message */
$(display_element).html("Please select an answer").show();
} else {
/* if a radio button has been checked, display the button's data-results attribute */
$(display_element).html($(checked_option).data("results")).show();
}
} else {
/* checkbox field */
/* first check if an answer has been provided */
if ($(checked_option + ":checkbox:checked").length == 0){
/* if no checkboxes have been checked, display message */
$(display_element).html("Please select an answer").show();
} else {
/* if we have checked boxes, loop through to test for right or wrong
* wrong answers mean the incorrect responses have been selected,
* or not all of the correct answers have been selected
*/
$(checked_option).each( function () {
if ( this.checked && $(this).data("results") == "wrong" ) {
/* if a wrong answer is selected, set the flag to display the appropriate message */
checkbox_correct = false;
} else if ( this.checked && $(this).data("results") == "correct" ) {
/* count the number of right answers */
checkbox_right_count += 1;
}
});
/* if we have a wrong answer or not all of the correct answers have been selected,
* display the data-wrong attribute
* you can get fancy with the messaging here. For example, if the user misses one right
* answer, you can have a message saying "Almost" or "Not quite"
*/
if ( !checkbox_correct || checkbox_right_answers !== checkbox_right_count ) {
$(display_element).html( $(this).data("wrong") ).show();
} else {
/* Hurray! All of the right aswers have been chosen */
$(display_element).html( "Congratulations!!!" ).show();
}
}
}
});
});
</script>
<div id="frm_field_282_container" class="frm_form_field form-field frm_top_container vertical_radio">
<div id="field_alg0c_label" class="frm_primary_label">Radio Buttons
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_alg0c_label" role="group">
<div class="frm_radio" id="frm_radio_282-0">
<label for="field_alg0c-0">
<input type="radio" name="item_meta[282]" id="field_alg0c-0" value="Option 1" data-invmsg="Radio Buttons is invalid" data-results="Sorry, wrong answer" data-question="1" aria-invalid="false"> Option 1</label>
</div>
<div class="frm_radio" id="frm_radio_282-1">
<label for="field_alg0c-1">
<input type="radio" name="item_meta[282]" id="field_alg0c-1" value="Option 2" data-invmsg="Radio Buttons is invalid" data-results="Congratulations!!" data-question="1" aria-invalid="false"> Option 2</label>
</div>
<div class="frm_radio" id="frm_radio_282-2"><label for="field_alg0c-2">
<input type="radio" name="item_meta[282]" id="field_alg0c-2" value="Option 3" data-invmsg="Radio Buttons is invalid" data-results="Sorry, wrong answer" data-question="1" aria-invalid="false"> Option 3</label>
</div>
<div class="frm_radio" id="frm_radio_282-3"><label for="field_alg0c-3">
<input type="radio" name="item_meta[282]" id="field_alg0c-3" value="Option 4" data-invmsg="Radio Buttons is invalid" data-results="Sorry, wrong answer" data-question="1" aria-invalid="false"> Option 4</label>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment