TEG Quiz Trivia Plugin

Part of the TEG Quiz Library. This plugin provides the functionality necessary for the TEG Quiz Library to run a trivia quiz.

Requires

Properties

Property Type Default Description
options Collection See Options below. A collection of options for configuring the quiz.
countViewed Integer 0 A running count of questions viewed by the user.
countAnswers Integer 0 A running count of answers provided by the user.
countCorrect Integer 0 A running count of correct answers provided by the user.
countQuestions Integer 0 The total number of trivia questions in the quiz.
questionCountDisplay jQuery Object {} A jQuery object for the HTML element which displays the total number of questions to the user. See questionCountSelector below.
questionViewedDisplay jQuery Object {} A jQuery object for the HTML element which displays a running count of questions viewed by the user. See questionViewedSelector below.
questionAnsweredDisplay jQuery Object {} A jQuery object for the HTML element which displays a running count of questions answered by the user. See questionAnsweredSelector below.
questionCorrectDisplay jQuery Object {} A jQuery object for the HTML element which displays a running count of questions correctly answered by the user. See questionCorrectSelector below.

Methods

Method Description
getResults() Counts the number of correct answers and returns the results content from options.results collection after updating it with the question counts using the CSS selectors in question*Selector below.
options.showAnswer() A function fired after each question is answered. This is in options.showAnswer() below for easy overriding.

Options

Option Type Default Description
questions jQuery Object [] A jQuery object containing the quiz questions.
correctClass String 'correct' A CSS class name to be applied to the label for the correct answers.
answeredClass String 'answered' A CSS class name to be applied to the label for the selected answers.
explanationShowClass String 'show' A CSS class name to be applied to the content located by explanationSelector and the navigation buttons generated by TEG Fake Pages.
questionCountSelector String '.totalQuestions' A CSS selector to locate questionCountDisplay above.
questionAnsweredSelector String '.answeredQuestions' A CSS selector to locate questionAnsweredDisplay above.
questionViewedSelector String '.viewedQuestions' A CSS selector to locate questionViewedDisplay above.
questionCorrectSelector String '.correctQuestions' A CSS selector to locate questionCorrectDisplay above.
questionContainerSelector String '.step-item' A CSS selector to locate the parent element generated by TEG Fake Pages for the currently displayed question. The default matches the default value for this selector in TEG Fake Pages.
explanationSelector String '.explanation' A CSS selector to locate the explanation content for the currently displayed question.
nextButtonSelector String '.step-next' A CSS selector to locate the navigation for the currently displayed question.
answers Collection 
{
  'CSS Selector 01': ['answer 1', 'answer 2'],
  'CSS Selector 02': ['this answer'],
}
 A collection of CSS selectors and arrays of correct values. The key must be a CSS selector that matches all the form fields (radio buttons, mostly) that make up a trivia question. The value is an array of strings containing all the correct answers. Most of the time there will be only one entry but this structure allows for a group a checkboxes or a multi-select dropdown.
showAnswer() Function Way too long to list here. Fired after the user answers a question, this function disables the group of form fields, highlights the selected answer with answeredClass, highlights the correct answer(s) with correctClass, displays the content found by explanationSelector by applying the class name in the content found by explanationShowClass.
submitQueue Collection of Functions 
{
  // override the default submit handler for all quiz types
  '00500_quizHandler': function(event) {

    if (console) {
      console.warn('TQWhoAmI.options.submitQueue[\'00500_quizHandler\'] not overridden as expected.');
    } // end if console available
    return true;
  } // end ['00500_quizHandler']()
}
 A collection of functions added to the submitQueue option of TEG Query Library.
errorQueue Collection of Functions 
{
  // override the default error handler for all quiz types
  '00500_quizErrorHandler': function() {

    if (console) {
      console.warn('TQWhoAmI.options.errorQueue[\'00500_quizErrorHandler\'] not overridden as expected.');
    } // end if console available
    return true;
  } // end ['00500_quizErrorHandler']()
}
 A collection of functions added to the errorQueue option of TEG Query Library.
afterAnswer Collection of Functions 
{
  // run after every question
  '*': function(event) {
    TQTrivia.options.showAnswer(event);
    return true;
  } // end everyTime()
}
 A collection of functions added to the afterAnswer option of TEG Query Library. The default entry runs options.showAnsewr() above.
results Collection of Strings 
{
  100:
    '<h3>Perfect Score!</h3><p>You got everything right. ' +
    'That’s <span class="correctQuestions"></span> ' +
    'out of <span class="totalQuestions"></span>.</p>',
  90 :
    '<h3>Excellent!</h3><p>You got most questions right. ' +
    'That’s <span class="correctQuestions"></span> ' +
    'out of <span class="totalQuestions"></span>.</p>',
  50 :
    '<h3>Were you even paying attention?</h3><p>You got most questions wrong. ' +
    'That’s only <span class="correctQuestions"></span> ' +
    'out of <span class="totalQuestions"></span>.</p>',
}
 A collection of strings containing the content to show to the user. Each key is an integer value indicating the percentage of correct questions for which the HTML will be displayed. See TEG Quiz options.resultSelector.