< Context / Components

QUIZ

Introduction

A multiple choice quiz, with an optional summary page.

Body

type

-text

Two types are accepted suggestive or generic. Suggestive will compile the answers and display a summary of the content at the end of the quiz. Generic will simply end on the last question.

revealCustomMessage

-boolean

A value of true will display a custom message after selecting an answer - A value of false will display the default progress counter message (# out of # complete!)

manualAdvance

-boolean

A value of true will require a user action to advance each question. A value of false will automatically advance to next question after selecting answer

mobileVersionOnly

-boolean

A value of true will display a mobile friendly version. A value of false will display a standard desktop layout that switches to a mobile friendly fluid version via media query, when viewed on screen size smaller than settings.style.container.width

autoAdvanceDelay

-number

Amount of time the before advancing to next question, after the use selected answer (manualAdvance required to be false)

exitButton.copy

-text

Button copy that will display below answers for each question (type: generic only)

exitButton.url

-text

URL destination for button that will display below answers for each question (type: generic only)

nextButton.default

-text

Copy for button that advances quiz to next question (active after answer is selected)

nextButton.last

-text

Copy for button that completes the quiz (active after answer is selected)

suggestive.correct

-text

Indicating text on the compiled page listing, whether a question was answered correctly

suggestive.incorrect

-text

Indicating text on the compiled page listing, whether a question was answered incorrectly

suggestive.title

-text

Title for the summary page

suggestive.subtitle

-text

Subtitle for the summary page

resetProgress.title

-text

Title for quiz reset animation page (required: type: suggestive, manualAdvance: false)

customFinalSlide

-boolean

A value of true will display a custom final page after quiz is complete, instead of summary page.

customFinal-HTML

-text

HTML to be rendered on final page (required: customFinalSlide: true)

Example .json

      {
        "type": "quiz",
        "body": {
          "type": "suggestive",
          "revealCustomMessage": true,
          "manualAdvance": true,
          "mobileVersionOnly": false,
          "autoAdvanceDelay": "2",
          "exitButton": {
            "copy": "Leave Quiz",
            "url": "http://www.example.com"
          },
          "nextButton": {
            "default": "Next question",
            "last": "Finish"
          },
          "suggestive": {
            "correct": " ✓ correct",
            "incorrect": " ✕ incorrect",
            "title": "✓ Complete!",
            "subTitle": "Review your answers:"
          },
          "resetProgress": {
            "title": "Resetting Quiz..."
          },
          "customFinalSlide": false,
          "customFinal-HTML": ""
        }

question

An array of questions to include in the quiz

  • canBeCorrect

    -boolean

    Indicates whether a question will contain a correct answer

    title

    -text

    Main headline / Question copy

    subTitle

    -text

    Sub headline / Descriptive copy

    helperText

    -text

    Additional copy located above the answers

    alertMessage

    -text

    Copy to display below questions to indicate a selection is required to advance

    defaultButtonURL

    -text

    Copy to display for button related to question

    defaultButtonCopy

    -text

    URL for button related to question

    desktop.image.url

    -url

    URL for desktop image

    desktop.image.width

    -number

    Width for desktop image

    desktop.image.height

    -number

    Height for desktop image

    desktop.image.position

    -text

    Alignment: left, center, right

    mobile.image.url

    -url

    URL for mobile image

    mobile.image.width

    -number

    Width for mobile image

    mobile.image.height

    -number

    Height for mobile image

    mobile.image.position

    -text

    Alignment: left, center, right

Example .json

        "body": {
          "question": [
            {
              "dynamicLinks": false,
              "canBeCorrect": false,
              "title": "First question placeholder",
              "subTitle": "",
              "helperText": "",
              "alertMessage": "Please make a selection first!",
              "defaultButtonURL": "example.com/destination-for-question-1",
              "defaultButtonCopy": "q1 default",
              "desktop": {
                "image": {
                  "url": "https://example.com/desktop.png",
                  "width": "200",
                  "height": "150",
                  "position": "center"
                }
              },
              "mobile": {
                "image": {
                  "url": "https://example.com/mobile.png",
                  "width": "400",
                  "height": "300",
                  "position": "center"
                }
              }
            }
          ]
        }

answer

An array inside of question array to include in the answers

  • correct

    -boolean

    true: indicates answer is correct - false: indicate answer is incorrect

    choice

    -text

    Multiple choice / answer copy

    customMessage

    -text

    Copy to display after answer is selected

    inputValue

    -text

    not currently implemented - will be used once quiz values can be submitted.

    dynamicButtonCopy

    -text

    Copy for button, related to selected answer, will display after a user has selected answer

    dynamicButtonURL

    -url

    URL for dynamic button, related to selected answer, will display after a user has selected answer

Example .json

        "body": {
          "question": [
            {
              "answer": [
                {
                  "correct": true,
                  "choice": "Answer #1",
                  "customMessage": "",
                  "inputValue": "",
                  "dynamicButtonURL": "example.com/destination-for-question-1_answer-1",
                  "dynamicButtonCopy": ""
                },
                {
                  "correct": false,
                  "choice": "Answer #2",
                  "customMessage": "",
                  "inputValue": "",
                  "dynamicButtonURL": "example.com/destination-for-question-1_answer-2",
                  "dynamicButtonCopy": ""
                },
                {
                  "correct": false,
                  "choice": "Answer #3",
                  "customMessage": "",
                  "inputValue": "",
                  "dynamicButtonURL": "example.com/destination-for-question-1_answer-3",
                  "dynamicButtonCopy": ""
                }
              ]
            }
          ]
        }

Style

style

Styling on the component container.

title

Styling on the headline text

subTitle

Styling on the sub-title text

counter

Styling on the # out of # counter that displays above answers

helperText

Styling on the text that displays above answers

answers

Styling on the multiple-choice answer text

selector

Styling on the icon to the left of each multiple-choice answer

selector.hover

Styling for when a user hovers the icon to the left of each multiple-choice answer

selector.selected

Styling for when a user selects the icon to the left of each multiple-choice answer

selector.correct

Styling for the icon to the left of each multiple-choice answer if it is a correct answer

selector.incorrect

Styling for the icon to the left of each multiple-choice answer if it is an incorrect answer

answerMobileContainer

Styling for the multiple-choice answers mobile container

answerDesktopContainer

Styling for the multiple-choice answers desktop container

suggestiveContent

Styling for the summary page

suggestiveTitle

Styling for the summary page title

suggestiveSubTitle

Styling for the summary page subtitle

suggestiveCorrect

Styling for the answers listed on the summary page that were answered correctly

suggestiveInCorrect

Styling for the answers listed on the summary page that were answered incorrectly

suggestiveButton

Styling for the link that is listed on summary page

suggestiveButton.hover

Styling for when a use hovers the link listed on summary page

resetProgressTitle

Styling for the reset page title

resetProgressBar

Styling for the reset progress meter

customMessage

Styling for the message that displays after a user makes a selection

customIncorrectMessage

Styling for the message that displays after a user makes an icorrect selection

customCorrectMessage

Styling for the message that displays after a user makes a correct selection

customCounterMessage

Styling for mess age displays after user makes a selection

defaultButton

Style for the buttons used throughout quiz (can be overridden)

defaultButton.hover

Style used throughout quiz for when a user hovers a button (can be overridden)

nextButton

Style used for the button that advances to the next question

nextButton.hover

Style used for when a user hovers the button that advances to the next question

genericButton

Style used for the button that does not advance the quiz

genericButton.hover

Style used for when a user hovers a button that does not advance the quiz

exitButton

Style for a button that takes the user out of the quiz (type:generic only)

exitButton.hover

Style for when a user hovers a button that takes the user out of the quiz (type:generic only)