Description

Displays an area with an interactive quiz. An editor allows you to define one or more questions, determine the correct answers as single or multiple choices, while the general appearance of the widget, including everything from fonts to pictures, can be changed from the selection inspector.

The quiz widget also triggers several events that allow to customize the behavior of the widget and perform actions when, for example, the quiz is completed or an answer is changed.

Double-click a quiz object on stage to open the Quiz Editor:

Quiz Editor

The editor is divided into two hierarchical columns: at left you can find the list of questions, and selecting a question on the left populates the list of corresponding answers on the column at right.

To insert a new question, click on the + button in the Questions column. Multiple questions will produce a paginated quiz, the user will be able to switch questions by swiping or using arrow buttons.

Once a question is selected, click on the + button in the Answers column to add an answers. To define ore or more answers as correct, flag them by clicking on the small square at their right - e.g. Quick and Brown are the correct answers to the question How’s the fox? in the picture above.

Both questions and answers in the editor can be dragged in order to change their position using the corresponding triple-line icon.

Properties

Quiz widget supports most of the Generic Object Properties, plus the ones listed below. To edit properties of a Quiz widget, select it and use the selection inspector at the right of your project window.

Questions Click to open the Quiz Editor to define questions and answers for the quiz
Padding Space, in pixels, between the border of the widget and the content area with questions and answers
Check Label The label displayed for the Check button, which allows to check the correctness of the answers given by the end user
Reset Label The label displayed for the Reset button, which clears the answers given by the end user and allow to answer the questions again
“Missing Answers” Message Text for the message that appers when end user clicks the Check button before answering all questions
“Perfect” Message Text for the message that appers when end user clicks the Check button and all answers are correct
Title The title for the quiz, which appear on every page of the quiz, above questions
Title ▹ Font Defines the font to use to display the title
Title ▹ Size Defines the font size, in pixels, to use to display the title
Title ▹ Color Defines the color to display the title
Questions ▹ Font Defines the font to use to display the questions
Questions ▹ Size Defines the font size, in pixels, to use to display the questions
Questions ▹ Color Defines the color to display the questions
Answers ▹ Font Defines the font to use to display the answers
Answers ▹ Size Defines the font size, in pixels, to use to display the answers
Answers ▹ Color Defines the color to display the answers
Answers ▹ Numbers Enabled to display a number for each answer, for easier reference
Single-Choice Answer Icons ▹ On Defines the icon to display on an answer selected by the end user in a single-choice quiz
Single-Choice Answer Icons ▹ On (Correct) Defines the icon to display on a correct answer selected by the end user in a single-choice quiz, after clicking the Check button
Single-Choice Answer Icons ▹ On (Wrong) Defines the icon to display on a wrong answer selected by the end user in a single-choice quiz, after clicking the Check button
Single-Choice Answer Icons ▹ Off Defines the icon to display on a answer in a single-choice quiz
Single-Choice Answer Icons ▹ Off (Missed) Defines the icon to display on a correct answer which was not selected by the end user in a single-choice quiz, after clicking the Check button
Multiple-Choice Answer Icons ▹ On Defines the icon to display on an answer selected by the end user in a multiple-choice quiz
Multiple-Choice Answer Icons ▹ On (Correct) Defines the icon to display on a correct answer selected by the end user in a multiple-choice quiz, after clicking the Check button
Multiple-Choice Answer Icons ▹ On (Wrong) Defines the icon to display on a wrong answer selected by the end user in a multiple-choice quiz, after clicking the Check button
Multiple-Choice Answer Icons ▹ Off Defines the icon to display on a answer in a multiple-choice quiz
Multiple-Choice Answer Icons ▹ Off (Missed) Defines the icon to display on a correct answer which was not selected by the end user in a multiple-choice quiz, after clicking the Check button

Events

Quiz widget triggers all Widget Events, plus the ones listed below. To edit event handlers for a Quiz widget, select it and use the Interactivity Panel on the right side of the project window.

Completed Perfectly

Triggered when end user taps on the Check button and all the given answers are correct.

Completed With Errors

Triggered when end user taps on the Check button and some of given answers are wrong.

Completed With Missing Answers

Triggered when end user taps on the Check button before giving an answer to every question.

Edit Answer

Triggered when end user taps on an answer

Page Backward

Triggered when end user switches to the previous question/page

Page Forward

Triggered when end user switches to the next question/page

Actions

Quiz widget can be used as target of most Generic Actions.

Code

Here’s an example of how a quiz widget containing one question with four answers is exported on the html page:

<div id="obj4" class="SCPageObject SCQuiz">
  <section class="practice" epub:type="practice" id="obj4_practice">
    <section class="practicediv swiper-container" id="obj4_practice_1" dir="ltr">
      <header>
        <h1 class="title" epub:type="title">
          <span class="chapter_label">Quiz</span>
          <span class="chapter_number">1</span>
        </h1>
      </header>
      <ol class="practicelist swiper-wrapper">
        <li class="multiple-choice-problem swiper-slide" id="obj4_1_1">
          <div class="question">
            <p>How's the fox?</p>
          </div>
          <ol class="choices">
            <li>
              <input class="css-checkbox" type="checkbox" name="obj4_1_1_choice" />
              <label class="css-label lb-checkbox" for="obj4_1_1_1_choice">
                <span class="choice-content">1. Quick</span>
              </label>
            </li>
            <li>
              <input class="css-checkbox" type="checkbox" name="obj4_1_1_choice" />
              <label class="css-label lb-checkbox" for="obj4_1_1_2_choice">
                <span class="choice-content">2. Slow</span>
              </label>
            </li>
            <li>
              <input class="css-checkbox" type="checkbox" name="obj4_1_1_choice" />
              <label class="css-label lb-checkbox" for="obj4_1_1_3_choice">
                <span class="choice-content">3. Yellow</span>
              </label>
            </li>
            <li>
              <input class="css-checkbox" type="checkbox" name="obj4_1_1_choice" />
              <label class="css-label lb-checkbox" for="obj4_1_1_4_choice">
                <span class="choice-content">4. Brown</span>
              </label>
            </li>    
          </ol>
        </li>
      </ol>
    </section>
    <div class="quiz-buttons">
      <button type="button" class="quiz-button quiz_check">Check</button>
      <button type="reset" class="quiz-button quiz_reset">Reset</button>
    </div>
  </section>
</div>