Quiz Element
Let's play a Game

Overview

The Quiz Element offers an easy way to integrate a quiz into your website. It can have multiple questions and offers three different question types. Single answer, multiple choice and text input. At the end of the quiz their score is shown to the visitor.

Usage Examples

  • Exam or certification training
  • Entertaining content for visitors
  • Trivia content
  • ..

Quiz Properties

  1. Next Button Label: Text for the next question button (i18n)
  2. Previous Button Label: Text for the previous question button (i18n)
  3. Text Answer Input Label: Label for the type the answer question type  (i18n)
  4. Answer Button Label: Label for the Answer button (i18n)
  5. Result Summary Label: Heading text for the summary page (i18n)
  6. Try again Button Label: Label for the Try again button at the summary page (i18n)
Everything else, like styling, may be configured with common general properties. 

Question Properties

You can add as many questions as you want, just click on "Add Item" to add another one.
  1. Question: The question shown to the participant.
  2. Question Type: Is it a single choice, multiple choice or a text input (type in the answer) question.

Answer Properties

For single or multiple choice questions you can add as many answers as you want. For text input you only provide the answer text.
  1. Answer Text: The answer option shown to the user
  2. Correct Answer: Is this answer correct?

See it in action

What is the meaning of Mame?

Generated HTML (Outline)


<div class="mame-quiz" style="..">
   <div class="quiz__question" style=...">
     <h3 class="quiz__question-title">What is the meaning of Mame?</h3>
     <div class="quiz__answer">
        <button class="quiz__answer-button">....</button>
     </div>
   </div>
   <div class="quiz__summary">
      ....
   </div>
</div>

Style / CSS Selectors


.mame-quiz {
  /* The whole Quiz */
}

.quiz__question {
  /* One question */
}

.quiz__question-title {
  /* One question text / title */
}

.quiz__answer {
  /* One answer option */
}



JavaScript

Quizzes need the Mame JavaScript in order to work.

Was this article helpful?