Source code for https://formiable-masterminds.com/how-to-provide-instant-feedback-on-forms/

form-checkbox.html

<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>

form-radio.html

<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>

quiz-instant-feedback-checkbox.html

<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>

quiz-instant-feedback-radio.html

<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>

quiz-instant-feedback.js

<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>

radio-input-rendered.html

<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>