Graphic Multiple Choice Question Component

This component is suitable for use when creating accessible courses.

The Graphic Multiple Choice Question component is an interactive component that lets you test your learner’s knowledge by setting multiple answers with added images to a single question.

This article provides an overview of the Graphic Multiple Choice Question component, component setup and behavior, and examples of Graphic Multiple Choice Question component configurations.

Component overview

The Graphic Multiple Choice Question component can be part of an assessment or used as a separate component in your course. The Graphic Multiple Choice Question component is very flexible when it comes to configuring the component. There is a possibility to randomize the answers, various alternatives for displaying feedback, allowing more than one correct answer, etc.

The Graphic Multiple Choice Question component is fully responsive.

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 to add your Question. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label and Items Group 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 Graphic Multiple Choice Question component. This widget can display an icon and label prior to the Graphic Multiple Choice Question component completion, which changes to a different icon and label once the Graphic Multiple Choice Question component is completed.

Behavior section

In the Behavior section, you enter how many Attempts the learner is allowed for the specific question. You can enable to Display Attempts Counter and select to Randomize Answers, as needed.

You can set the number of Selectable Items, toggle to allow Individual Item Feedback, and enable Auto Submit the Question, as needed.

Note: Set Selectable Items to 1 to be able to set individual item feedbacks and auto submit the question. For the best accessible experience for learners, we would recommend not restricting the number of selectable items to less than the total number of answers.

Appearance section

In the Appearance section, you can set the number of Items per row by device size. By default, the Graphic Multiple Choice Questions component is set to 2 columns for desktop and tablets and 1 column for smartphones.

Add Answers

Answers section

In the Answers section, you Add Answers to your Graphic Multiple Choice Question component.

For each Answer Item:

1. Select an Item Image to display.
2. Toggle Set Image Per Device Size to set images per device size, as needed.
3. Enter Alt Text, as needed.
4. Add Item Text to be displayed as one possible answer for the question.
5. Enable Is this answer the correct option? if the answer is one of the correct answers.

Add, duplicate, or delete items as needed.

Component Examples

The Graphic Multiple Choice Question component gives you a lot of flexibility. Below are examples that illustrate different component setups:

Example 1 – displays Graphic Multiple Choice Question with two alternative Answer Items and one selectable answer.

Example 2 – displays Correct feedback in a notification pop-up over the Graphic Multiple Choice Question component.

Feedback

The Feedback section lets you tailor feedback for correct, partly correct, or incorrect answered questions. Feedback can be displayed on the page, beneath the Graphic Multiple Choice Question component or in a notification pop-up.

For each type of feedback, you can choose to include:

• global feedback set up
• custom text as feedback
• custom imagery as feedback
• a link to a specific part of your course; if, for example, learners should revisit a particular section
• a feedback style that overrides the theme styles settings

Did this article help?

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