TEG Quiz Library

Simulates identity and trivia quizzes on a CMS static page or data acquisition form. The library expects the form to be the usual assortment of radio buttons seen on social media and clickbait sites.

Requires

Includes

Installation

Link the styles and JavaScript in the <head> element of the page.

<!--
  Bootstrap Grid is used for the default breadcrumbs. If you're not using the breadcrumbs or
  have your own content then you don't need this.
-->
<link rel="stylesheet" href="https://server.name.com/path/bootstrap-grid.min.css" />
<!--
  TEG Fake Pages provides the pagination of each question in the quiz. The styles do the
  actual hiding and showing of content. The library just swaps class names. If you don't
  want the fake pagination, don't include this or TEGFakePages.js below.
-->
<link rel="stylesheet" href="https://server.name.com/path/TEGFakePages.css" />
<!--
  The baseline TEGQuiz styles only provide highlighting for selected answers.
-->
<link rel="stylesheet" href="https://server.name.com/path/TEGQuiz.css" />
<!-- Scripts should be in this order. This is a must. -->
<script src="https://server.name.com/path/jquery-3.5.0.min.js" type="text/javascript"></script>
<!-- TEG jQuery Utilities is required by TEGFakePages -->
<script src="https://server.name.com/path/TEGUtilities.js" type="text/javascript"></script>
<script src="https://server.name.com/path/TEGFakePages.js" type="text/javascript"></script>
<!-- TQWhoAmI.js defines behavior for an identity quiz. -->
<script src="https://server.name.com/path/TQWhoAmI.js" type="text/javascript"></script>
<!-- TEGQuiz.js provides baseline quiz functionality and initializes the quiz type. -->
<script src="https://server.name.com/path/TEGQuiz.js" type="text/javascript"></script>

Initialize the quiz object. This can be done in the <body> element or in an external JS file.

jQuery(document).ready(function() {
  window.TEGForm = new TEGQuiz({
                                 paginationOptions: {
                                   pageItemParentSelector: '',
                                 },
                                 whoAmIOptions    : {
                                   categories: {
                                     'category01': {
                                       count: 0,
                                       win  : 'You are in Category 1!',
                                     },
                                     'category02': {
                                       count: 0,
                                       win  : 'You are in Category 2!',
                                     },
                                     'category03': {
                                       count: 0,
                                       win  : 'You are in Category 3!',
                                     },
                                     'category04': {
                                       count: 0,
                                       win  : 'You are in Category 4!',
                                     },
                                   }, // end categories
                                   answers   : {
                                     '#checkbox205': 'category01',
                                     '#checkbox206': 'category02',
                                     '#checkbox207': 'category03',
                                     '#checkbox208': 'category04',
                                   }, // end answers
                                 }, // end whoAmIOptions
                               });
  // any additional stuff goes here
}); // end jQuery(document).ready

For a functional example see Static Form Example Who Am I.

Properties

Property Type Default Description
options Collection See Options below. A collection of options for configuring the quiz.
args Collection {} A collection of the query string parameters from the URL of the form.
form jQuery Object {[]} jQuery object initialized with the HTML element selected by the formSelector option below.
questions jQuery Object {} A jQuery object containing the form fields which will be counted to score the results.
submitButton jQuery Object {} A jQuery object containing the form submit button.
submmitted Boolean false Used in conjunction with the option resultsBeforeSubmit to control form submission.
quiz Collection 
{
  getResults: function() {

    if (console) {
      console.warn('WARNING: TEGQuiz.quiz.getResults not overridden.');
    } // end if console available
  }
}
 A JavaScript object containing the properties and functions defined by the Quiz Type Plugin used.

Methods

Method Description
runAfterAnswer() Runs the functions in the afterAnswer collection option below.
errorHandler() Runs the functions in the errorQueue collection option below.
submitHandler() Runs the functions in the submitQueue collection option below.
getAnswerCount() Returns the number of questions answered.

Options

Option Type Default Description
formSelector String 'form' CSS selector to identify the form element. This object will be hidden so that all the various swapping and rearranging happens out of sight.
questionSelector String 'input[type="checkbox"], input[type="number"], input[type="radio"], input[type="range"], select' CSS selector to identify the form fields.
questionExcludeSelector String '#firstName, #lastName, #email' CSS selector form fields to exclude from quiz processing.
answerHighlightClass String 'selected' CSS class name to be added to the labels of selected quiz answers. If answerLabelSelector is set, the library will attempt to add the value of answerHighlightClass as a CSS class name to the field label when the input field changes.
afterAnswer Collection 
{
  // runs after every question
  everyTime: function(event) {
    // update the results
    TEGQuiz.form
           .find(TEGQuiz.options.resultSelector)
           .html(TEGQuiz.quiz.getResults());
    return true;
  },
}
 Collection of functions to run after questions are answered. The function named everyTime will run when any answer is selected. Additional functions can be added for each question by adding a member with a key value matching the ID of a form element in the questions collection.

Example of a Custom afterAnswer Function for a Specific Question

{
/* The key value for each entry must match the ID of the
 * answer label for which it is to run. The function
 * will receive the event that fired the onClick handler.
 */
'questionID': function(event) {
    if (console) {
      console.log('afterAnswer.questionID\n' +
                  'this = ' + this + '\n' +
                  'event = ' + event + '\n');
    }
  },
}
Option Type Default Description
submitSelector String 'input[type="submit"]' CSS selector of the form submit button used to create the submitButton property.
usePagination Boolean typeof TEGFakePages === 'function' True if the library TEG Fake Pages is available.
paginationOptions Collection {} A collection of options to pass to TEG Fake Pages. See TEG Fake Pages for full documentation.
useTrivia Boolean typeof TQTrivia === 'function' True if the Quiz Type Plugin TEG Quiz Trivia is available.
triviaOptions Collection {} A collection of options to pass to TEG Quiz Trivia. See the associated HTML file for full documentation.
useWhoAmI Boolean typeof TQWhoAmI === 'function' True if the Quiz Type Plugin TEG Quiz Who Am I is available.
whoAmIOptions Collection {} A collection of options to pass to TEG Quiz Who Am I. See the associated HTML file for full documentation.
resultsBeforeSubmit Boolean true Determines if results must be calculated and shown to the user before the form is submitted. If this is true then the first submission will be halted and the results requested from the Quiz Type Plugin.
resultSelector String '.results' CSS selector of HTML element to display the results of the quiz.
afterLoad Function 
function(Options) {

 if (console) {
  console.log('TEGQuiz.afterLoad\n' +
              'Options = ' + Options + '\n');
 }
 return false;
}
 CSS selector of HTML element to display the results of the quiz.
submitQueue Collection of Functions 
{
 '00500_quizHandler' :  function(event) {

  if (console) {
   console.warn('005_quizHandler not overridden as expected.');
  } // end if console available
  return true;
 } // end ['005_quizHandler']()
}
 A collection of functions to be run as the form.onSubmit event handler. Each entry in the collection will be run in alphabetical order by key name. The Quiz Type Plugins will override the entry with the key word 00500_quizHandler.
errorQueue Collection of Functions 
{
 '00500_quizErrorHandler': function(event) {

  if (console) {
   console.warn('00500_quizErrorHandler not overridden as expected.');
  } // end if console available
  return true;
 }
}
 A collection of functions to be run if any of the form.onSubmit event handlers returns false. Each entry in the collection will be run in alphabetical order by key name. The Quiz Type Plugins will override the entry with the key word 00500_quizErrorHandler.