Customizing #Episerver.Forms with client events, build a quiz

Example of using client side events to tweak and customize the output and displaying result depending of input values.

Published 27th of October 2017
Episerver Forms > v2

Storyboard:

  • quiz
  • multiple steps
  • last step display result
  • and possibility to post your result (on a board or for a contest)

Demo in full screen (gif)

We will use the jQuery formsSetupCompleted and formsNavigationNextStep to do our client side customizations.

Available events are:

  • formsNavigationNextStep
  • formsNavigationPrevStep
  • formsSetupCompleted
  • formsReset
  • formsStartSubmitting
  • formsSubmitted
  • formsSubmittedError
  • formsNavigateToStep
  • formsStepValidating

This example uses this setup:

On the question (single choice) elements i choosed to set 1 (one) for the right answer and 0 (zero) on wrong.

Then later in the javascript I just sum radio buttons in form and divide with total radios, so I get a percent.

The Rich Text Element in result step displays a progress bar and then uncovers a div depending on result in previous steps:

Result_Percent and Result_Grade: I use predefined hidden inputs to save the score when submitted.

After submission:

Back-end:

Display:

The code:

Made a quizblock just to package form with javascript, I use it to ouput my javascript, only on pages when this block is used, thru EPiServer.Framework.Web.Resources.ClientResources.RequireScript(“/static/js/quizblock.js”).AtFooter();

The javascript

Javascript console:

Email the submission looks like this:

Thoughts

Source:

SEO terms

  • Extending Episerver Forms Example
  • jQuery events client side tweaking

Happy forming!

Like it? please up vote
1