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:
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 |
| Mode | One between Ask All Questions or Ask Random Questions. When the latter is used the widget will randomically select a number of questions (defined in the Questions to ask property) from all questions defined for the quiz |
| Mode ▹ Questions to ask | When Mode is set to Ask Random Questions, defines the number of questions to ask (use 0 to ask all questions, while still selecting their order randomically) |
| Reveal Correct Answers | Enable to reveal the correct answers when user clicks the check button, disable to only reveal that answer given by the user is wrong, without revealing the correct one |
| Allow Reset | Enable to allow the user to redo the quiz from scratch after answers correctness has been checked |
| Autosave User Answers | When enabled, end user answers will be saved and later restored when re-opening the page |
| Autosave User Answers ▹ Assessment ID | Optional, allows to set an assessments identifier for this quiz, enabling statistics collection by Shelf or LMS systems |
| Autosave User Answers ▹ Assessment Category | Optional, allows to set an assessments category for this quiz, enabling statistics collection by Shelf or LMS systems |
| 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 | Enable 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.