Quiz Building Anyone?
Are you using Formidable to build quizzes? Many people are and Formidable allows you to build really nice quizzes right out of the box. But, what if you have special requirements like this poster in Formidable's Slack Community.
The Requirements
- Have a 'check answer' button after each multiple choice question.
- If all of the multiple choice selections for the question are correct, they get a 'congrats, move on to the next question' or a 'try again, with this tip' if any of the selections are incorrect.
- The congrats/tip box needs to disappear when they change the answer, so they can re-click to check again.
Sounds simple enough...
The Solution
This is our proof of concept:
The form is comprised of a radio button field with four options, a checkbox field with six options, and two custom HTML fields for the check answer buttons. All of these fields use HTML data attributes to convey information to the front end jQuery. Data attributes are used to store custom data that is private to the page or application. They provide us with a method that allows us to write tight, generic jQuery code.
Radio Button Field
This is the HTML for the radio button field that was customized on the form's Settings/Customize HTML page. Take note of lines 6 though 9.
Formidable's default HTML for any field consists of a single [input] shortcode. This default will not work to address our user's requirements. For this challenge, we have to use individual [input] shortcodes for each of our radio button options. This is because we have to assign a data attribute to each radio button option to indicate right and wrong answers. Since we have four radio button options, we need four individual inputs.
Formidable makes it easy to create individual inputs for each option. Just click the "Single Option" on the HTML Tags popup.
When the new shortcodes are inserted into your code, each of them is inserted with opt=1 as a parameter. Remember to change the opt number for each radio button option. Also, don't forget to delete the single default input shortcode.
When you add additional parameters to any input shortcode, they are passed through "as is" to the input's generated HTML when rendered in the browser. Each of the shortcodes in our example HTML has a data-results and data-question attribute. The data-results attribute indicates right or wrong answers. This is what the rendered HTML looks like in the browser:
The data-question is the question number. Don't get hung up on the idea that this attribute requires an ordinal number. It can actually be any unique string as long as the matching HTML for the Check Answer button matches up.
Check Answer Button 1
This is the source code for the HTML field related to the radio button field.
The source code is simple. Just a few divs that include the id attribute and a button. Make sure you include the type="button" attribute when you write the button's HTML, otherwise when you click the button it will submit the form instead of checking the answer.
The "display-results1" div is used to display the content of the data-results attribute from the radio button options.
The "display-results-btn1" includes three data attributes: data-question, data-field-id, and data-field-type. These data attributes are necessary since the jQuery defines its initial variables from them when the button is clicked. Without them, your code won't work. For clarity, the data-field-id is the radio button's field ID.
Checkbox Field
The source code for the checkbox on the Customize HTML page is pretty much the same as the radio button's. The difference being that we have six individual options instead of four. Also, the data-results attribute provide just right or wrong values, in this case, we're using "correct" and "wrong".
Check Answer Button 2
The check answer button for the checkbox is a little more robust than the radio button's check answer button in that this button includes two additional data attributes. The additional data attributes are data-wrong and data-right-answers.
The data-wrong attribute is the message and tip that's displayed when the user makes a mistake with the answer. The data-right-answers is the count of how many checkboxes contain the right answer. In our example, we have three checkboxes that need to be selected for a completely right answer.
If you wanted to, you can get a little fancy with the jQuery and display a different message for partially right answers. We're not doing that in this demo, but it is possible to do so when using this process.
The jQuery
We're not going to walk through this jQuery because the code is very well commented. The comments explain everything that is happening in the code to make this all work.
If you haven't worked with custom jQuery with Formidable forms yet, the code is copied and pasted into the After Fields area on the Settings/Customize HTML page.
Final Thoughts
This proof of concept form only uses a radio button and checkbox field as examples. However, this same process can be extended to virtually any field, on any form, for any purpose. The key takeaways here are how to properly use data attributes and the jQuery needed to access them for whatever requirement you need to fulfill.
We hope you've found this to be useful.
Leave a Reply