Cards: Creating an interactive quiz with field effects

  • fortiform
    Asked on April 25, 2024 at 4:34 AM

    Hi,

    I would like to use Card form to build a trivia quiz game.

    We hope user can get result when they finish a card immediatilly.

    Not to final and get result.

    Forexample :

    User go to a question. There are four answer.

    When they choose a correct answer. It will display "Great! You are correct!"

    When they choose a wrong answer. It will shake the Card or display a "hint". untile they get correct answer.

    Hopefully Jotform can do this.

    Thank you!


  • Jason JotForm Support
    Replied on April 25, 2024 at 5:13 AM

    Hello Jimmy,

    Thanks for reaching out to Jotform Support. I suggest using our ready-made quiz template that is available online. This would help you easily create your trivia quiz form. You can go to this page to use the template, and it will automatically create the form from your end. There, you can modify the questions, and most importantly there are various conditions built on the form which is less hassle for you. Additionally, you can change the Layout type of the form to a Card Form. Let me walk you through it:

    1. In the Jotform Quiz Template page, click on Use Template in the upper right corner.
    2. Once the form is created from your end, click on the Roller Paint icon in the right corner.
    3. Go to Layout and choose Card Form. Cards: Creating an interactive quiz with field effects Image 1 Screenshot 30

    Note that on the quiz form template, the added Section Collapse element isn't available on the card form, so you might as well remove it from your end. On the other hand, we don't have a feature that would shake the card form once the form responders choose the wrong answer on each question. The template I suggest is to let the quiz taker take another test if they don't meet the 100% passing scores. Please see the screencast below:

    Cards: Creating an interactive quiz with field effects Image 2 Screenshot 41

    Now, the form respondents will have a choice to retake the test to reach a 100% passing score if that's what you want to achieve with your trivia quiz form. You might also want to visit our page about 10,000+ Free Online Form Templates that you can use to search for different quiz form templates that you need.

    Let us know if you need any other help.

  • fortiform
    Replied on April 25, 2024 at 5:30 AM

    Hi ,

    I just tried https://www.jotform.com/form-templates/jotform-quiz

    Is it possible to get result on its Card? not on final step.

    Like :

    https://www.britannica.com/quiz/commonly-misspelled-words-vol-2-quiz


    Thanks!


  • Myla JotForm Support
    Replied on April 25, 2024 at 6:58 AM

    Hello Jimmy,

    Thank you for getting back to us. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

    Thanks for your patience, we appreciate it.

  • Myla JotForm Support
    Replied on April 25, 2024 at 7:54 AM

    Hello Jimmy,

    Thank you for your patience. I have tried to recreate the quiz form from this link using conditions, however, since it is not possible to have more than 2 fields in a Card Type Form, I tested it on a Classic Type Form with multiple pages instead. After setting possible conditions and using timer widgets, I was able to achieve this, you can check my sample form here:

    Cards: Creating an interactive quiz with field effects Image 1 Screenshot 60

    Let me show you how it's done:

    • First, you need to create 2 similar questions, with one element being set to Read-Only and with Default Answer. This will be the one shown when time is up:

    Cards: Creating an interactive quiz with field effects Image 2 Screenshot 71

    • Then add a timer widget and set a condition to copy the value to the number field so you can use it for the Hide/Show condition on the similar question fields that was created above:

    Cards: Creating an interactive quiz with field effects Image 3 Screenshot 82Cards: Creating an interactive quiz with field effects Image 4 Screenshot 93

    • Lastly, add the condition to Hide/Show your Questions Fields. I added (003) for the seconds that the field will change:

    Cards: Creating an interactive quiz with field effects Image 5 Screenshot 104

    Unfortunately, the timer widget cannot be hidden since a text field element won't be able to capture the data if it is hidden. However, for the rest of the added fields, you can hide it. Feel free to clone the sample form and inspect if this meets your requirement.

    If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better?

  • fortiform
    Replied on April 26, 2024 at 9:31 AM

    Hi Myla

    Thank you for the demo. We don't need the Timer.


    What we need is:

    when user choose a correct answer on the Card. It will display "Great! You are correct!"

    When user choose a wrong answer. It will shake the Card or display a "hint". untile they get correct answer.


    Hopefully Jotform can do this.


    Thanks!


  • Raymond JotForm Support
    Replied on April 26, 2024 at 9:44 AM

    Hi fortiform,

    Thanks for getting back to us. Unfortunately, the feature you're looking for is not available. While you can conditionally show fields such as texts and questions, interactions such as showing a hint or shaking the card are not yet supported.

    We've gone ahead and escalated your request to our developers, but when or if it's developed depends on their workload, how viable it is, and how many other users also request it. If there are any updates, we’ll circle back to this thread and let you know.

    In the meantime, you may consider hiring a developer that can create forms or custom widgets for you. Feel free to visit Jotform Solutions Partner page or Jotform - Fiverr Partnership page for a list of experts you can hire.

    Thanks for your patience and understanding, we appreciate it.

 
Your Answer