Game Component

This component is NOT recommended for use when creating accessible courses.

The Game component lets you build in multiplayer, AI-rich games with animation and sound effects in a few clicks. The Game component has ranking, power-ups, and rounds all built-in.

This article provides an overview of the Game component, component setup and behavior, and examples of Game component configurations.

Component overview

The Game component lets you build in multiplayer, AI-rich games with animation and sound effects in a few clicks. The Game component has ranking, power-ups, and rounds all built-in.

The Game component is a fully responsive and interactive question component. The Game component can be part of an assessment, and the result can be saved to a variable, as needed.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down the page and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells learners how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Game component. This widget can display an icon and label prior to the Game component completion, which changes to a different icon and label once the Game component is completed.

Behavior section

In the Behavior section, you make settings for Game Mode, Streaks, Settings, Power Ups, and Logic.

In the Game mode section:

In the Game Mode section, you set the Game mode. Select Rank mode or Multiplayer mode.

Note: When using Rank mode, ranks must be set-up in the Game component Ranks section.

Set Default Points Awarded per correct question answered. By default, this is set to 50.

When using Multiplayer mode, you set the number of Multiplayer Points Required. This is the number of points required for the learner or AI character to win. By default, this is set to 500.

By default, End Game on Win is enabled. Toggle to disable this setting. Enabling this will end the game as soon as one multiplayer character achieves the required points.

In the Streaks section:

1. By default, Enable Streaks is enabled. This setting allows the learner to gain extra points. Toggle to disable.
2. Set Required Streak Amount.
3. Set Streak Points as needed.

In the Settings section:

1. Toggle to Disable Skip Question.
2. Toggle to Skip Game Start Screen.
3. Toggle to Skip Character Select Screen.
4. By default, Resume on Revisit is enabled. Toggle to disable this setting.
5. By default, Reset Game is enabled, and this allows a learner to reset the game when finished. Toggle to disable this setting.

In the Power Ups section:

A learner can use Power Ups during a question.

By default, all settings for Power Ups are enabled:

1. Enable “Stop Time” Power Up. This gives the ability to stop the question timer once per round.
2. Enable “Show Answer” Power Up. This gives the ability to show the answer to the current question once per round.
3. Enable “Hint” Power Up. This gives the ability to simplify a question once per round.

In the Logic section:

1. Toggle to enable Save Points to Variable. If enabled, the total points is saved to the selected variable.
2. Select Variable or Create Variable.
3. Select Variable Save Type as needed. Replace: replaces the current value of the variable with the value the learner saves in the component. Increment: increases the variable's value by the value that the learner saves in the component. Decrement: decreases the variable's value by the value that the learner saves in the component.

Game General section

The Game General section you make settings for the following parts: Game, Character, Round, Question Instruction, Power Up, Ranks, Multiplayer, Statistics, and Streaks.

In the Game section:

1. Add Game Play Button Text. This button appears on the page to open the game in fullscreen.
2. Add Game Start Title. This is title text that appears in the game start dialog once a character has been selected.
3. Add Game Start Body. This is body text that appears in the game start dialog once a character has been selected. Use the text editor to style and format your text, as needed.

Scroll down the page and add Game Start Media.

1. Select Start Dialog Media Type. Select Image or Gif.
2. Select Game Start Image or Game Start Gif as needed.
3. Add Game Start Media Alt Text as needed.

1. Add Game Start Button Text. This is the button that appears in the game start dialog that starts the game.
2. Add Game Reset Button Text. This button displays once the game has ended.
3. Add Game Exit Button Text. This button displays once the game has ended.
4. Add Skip Question Button Text. This button displays underneath each question during the game.

1. Add Next Question Button Text. This button displays underneath each question during the game once the question is complete.
2. Add True Button Text. This button displays as the True option in the True or False question type.
3. Add False Button Text. This button displays as the False option in the True or False question type.

1. Add Game Dialog Next Button Aria Label, as needed.
2. Add Game Dialog Previous Button Aria Label, as needed.

In the Character section:

1. In the Character section, add Character Select Title. This is title text that appears in the character select dialog.
2. Add Character Select Body. This is body text that appears in the character select dialog. Use the text editor to style and format your text, as needed.

Finally in the Character section, add Select Character Button Text. This button appears in the character select dialog that confirms character selection.

In the Round section:

1. Add Round Text. This text appears during a round at the top of the screen to indicate which round the learner is on.
2. Add Round Of Text. This text appears between the current and total round numbers.

1. Add Begin Round Button Text. The button is displayed in the round start dialog. This can be overridden in each round.
2. Add Next Round Button Text. This button is displayed in the round end dialog. This can be overridden in each round.
3. Add Final Next Round Button Text. This button is displayed in the final round end dialog.

In the Question Instructions section:

1. Add Multiple Choice Instruction Text. This is displayed above the answers in all Multiple Choice questions. Use the text editor to style and format your text, as needed.
2. Add Graphic Multiple Choice Instruction Text. This is displayed above the answers in all Graphic Multiple Choice questions. Use the text editor to style and format your text, as needed.

Scroll down the page and add True or False Instruction Text. This is displayed above the answers in all True or False questions. Use the text editor to style and format your text, as needed.

1. Add Drop Instruction Text. This is displayed above the answers in all Drop questions. Use the text editor to style and format your text, as needed.
2. Add Ordering Instruction Text. This is displayed above the answers in all Ordering questions. Use the text editor to style and format your text, as needed.

In the Power up section:

1. Add Stop Time Power Up Button Text.
2. Add Hint Power Up Button Text.
3. Add Show Answer Power Up Button Text.

In the Ranks section:

1. Add Ranks Label Text. This text is displayed in the game top bar next to the current rank.
2. Add Rank Up Text. This text is displayed in a notification when the learner gains a rank.

In the Multiplayer section:

1. Add Multiplayer “You” Text.
2. Add Multiplayer “and” Text.

1. Add Multiplayer Winner Text Prefix, as needed.
2. Add Multiplayer Winner Text Postfix.
3. Add Multiplayer multiple Winners Text Postfix.

In the Statistics section:

1. Add Statistics Title Text. This title text appears in the stats dialog.
2. Add Statistics Body Text. This body text appears in the stats dialog. Use the text editor to style and format your text, as needed.

1. Scroll down the page and add Points Gained Statistic Text.
2. Add Correct Questions Answered Statistic Text.
3. Add Average Seconds Per Question Statistic Text.
4. Add Streak Bonuses Achieved Statistic Text.

In the Streaks section:

1. Add Streak instruction text. This text is displayed above the round question indicator if streaks are enabled.
2. Add Streak instruction text. This text is displayed in a notification when the learner achieves a streak.

Add Characters

In the Characters section, you Add Characters to your Game component.

For each Character:

1. Add Character Name. This is the name of this character.
2. Select Character Avatar Image. This image is displayed in the character select dialog and the status bar if selected or an AI character.
3. Toggle to enable Is AI Character. With this setting enabled this character can be used for Multiplayer mode. This character will not be selectable by the learner.

Add, duplicate, and delete Character Items as needed.

Add Rounds

In the Rounds section, you Add Rounds to the Game component.

For each Round:

Add Round Title. This title text appears in the round’s start dialog.

Add Round Body. Use the text editor to style and format your text, as needed.

1. Scroll down the page and select Round Start Media Type. Select Image or Gif.
2. Select Game Start Image or Game Start Gif, as needed.
3. Add Round Start Media Alt Text as needed.

1. Add Round End Title. This title text appears in the round’s end dialog.
2. Add Round End Body. This body text appears in the round’s end dialog.

Scroll down and add settings for Round End Media:

1. Select Round End Media Type. Select Image or Gif.
2. Select Game End Image or Game End Gif, as needed.
3. Add Round End Media Alt Text as needed.

1. Add Begin round Button Text. This is the button that is displayed to start the round.
2. Add Next Round Button Text. This button is displayed to move onto the next round.

Note: The Final Next Round Button Text is used if this is the final round.

In the Rounds Behavior section:

1. Add Points Awarded. This is the number of points awarded per correct question during this round.
2. Toggle to Enable Round Timer.
3. Toggle to Randomize Questions.

Note: If Points Awarded is set to 0, the default points set in the Behavior section for the Game component will be used.

In the Rounds Questions section, you Add Questions to be displayed during this round.

Add, duplicate, and delete Round Items as needed.

Multiplayer Feedback section

In the Multiplayer Feedback section, you add First Place Feedback.

1. Add First Place Feedback Title.
2. Add First Place Feedback Body text. Use the text editor to style and format your text, as needed.

Select a First Place Feedback Image and add First Place Feedback Image Alt Text as needed.

Scroll down the page and add settings for Second Place Feedback, Third Place Feedback, and Fourth Place Feedback.

Sound Effects section

1. In the Sound Effects section, select Background Music for the Game component, as needed.
2. Select Correct Sound Effect as needed. This audio will play when a question is answered correctly.
3. Select Incorrect Sound Effect as needed. This audio will play when a question is answered incorrectly.

Appearance section

In the Appearance section, the appearance and styling of the Game component are handled in the Theme settings.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.