API Docs for: 1.0.1
Show:

Quiz Class

Defined in: src\quizlib.js:7

Class that represents an HTML Quiz. Provides methods for checking answers, generating a score and providing visual feedback.

See https://alpsquid.github.io/quizlib for usage

Constructor

Quiz

(
  • quizContainer
  • answers
)

Defined in src\quizlib.js:7

Parameters:

  • quizContainer String

    ID of the quiz container element.

  • answers Array

    Array of correct answers using the input value. e.g. ['a', '7', ['a', 'b']]. Can use nested arrays for multi-answers such as checkbox questions

Example:

    new Quiz('quiz-div', ['a', '7', ['c', 'd'], 'squids', ['a', 'b']]);

Methods

checkAnswers

(
  • [flagUnanswered=true]
)
Boolean

Defined in src\quizlib.js:131

Checks quiz answers against provided answers. Calls clearHighlights for each question.

Parameters:

  • [flagUnanswered=true] Boolean optional

    Whether to ignore unanswered questions. If false, unanswered questions will not be flagged

Returns:

Boolean:

True or if flagUnanswered is true: True if all questions have been answered. Otherwise false and unanswered questions are highlighted.

clearHighlights

(
  • question
)

Defined in src\quizlib.js:186

Clears highlighting for a question element (correct and incorrect classes), including unanswered question warnings and elements using the Classes.TEMP class

Parameters:

  • question HTMLDocument

    Question element to clear

highlightResults

(
  • [questionCallback]
)

Defined in src\quizlib.js:217

Highlights correctly and incorrectly answered questions by:

  • Adding the class 'quizlib-correct' to correctly answered question titles
  • Adding the class 'quizlib-incorrect' to incorrectly answered question titles

Parameters:

  • [questionCallback] Function optional

    Optional callback for each question with the following arguments:

    1. Quiz: the quiz object
    2. Element: the question element
    3. Number: question number
    4. Boolean: true if correct, false if incorrect.

    This allows you to further customise the handling of answered questions (and decouples the library from a specific HTML structure), for example highlighting the correct answer(s) on incorrect questions.
    Use the Classes.TEMP ('quizlib-temp') class on added elements that you want removing when checkAnswers is called

Example:

   // Method Call
   quiz.highlightResults(handleAnswers);

   // handleAnswers callback
   function handleAnswers(quizObject, questionElement, questionNo, correctFlag) {
       ...
   }

Properties

answers

Array

Defined in src\quizlib.js:76

User defined answers taken from constructor

Classes

Object deprecated final

Defined in src\quizlib.js:21

Deprecated: Since version 1.0.1, Classes should be accessed through the static context (Quiz.Classes)

Enum containing classes used by QuizLib as follows:

  • QUESTION: 'quizlib-question'
    • used to identify a question element
  • QUESTION_TITLE: 'quizlib-question-title'
    • used to identify the question title element
  • QUESTION_WARNING: 'quizlib-question-answers'
    • used to identify the element containing question answers
  • QUESTION_ANSWERS: 'quizlib-question-warning'
    • used by the 'unanswered question warning' element. Removed by clearHighlights
  • CORRECT: 'quizlib-correct'
  • INCORRECT: 'quizlib-incorrect'
  • TEMP: 'quizlib-temp'
    • Add to any elements you want to be removed by clearHighlights (called by checkAnswers). For example, adding an element with the correct answer in your clearHighlights callback and have it be removed automatically

Default: See above

Classes

Object final

Defined in src\quizlib.js:96

Enum containing classes used by QuizLib as follows:

  • QUESTION: 'quizlib-question'
    • used to identify a question element
  • QUESTION_TITLE: 'quizlib-question-title'
    • used to identify the question title element
  • QUESTION_WARNING: 'quizlib-question-answers'
    • used to identify the element containing question answers
  • QUESTION_ANSWERS: 'quizlib-question-warning'
    • used by the 'unanswered question warning' element. Removed by clearHighlights
  • CORRECT: 'quizlib-correct'
  • INCORRECT: 'quizlib-incorrect'
  • TEMP: 'quizlib-temp'
    • Add to any elements you want to be removed by clearHighlights (called by checkAnswers). For example, adding an element with the correct answer in your clearHighlights callback and have it be removed automatically

Default: See above

result

QuizResult

Defined in src\quizlib.js:69

Quiz Result object containing quiz score information. See QuizResult

unansweredQuestionText

String

Defined in src\quizlib.js:57

Warning displayed on unanswered questions

Default: 'Unanswered Question!'