Skip to content
Adapt User's Guide version 4.5


The Interactive Scene is a highly graphical multiple choice question where the options are elements of the scene.

example of an interactive scene component
Interactive Scene Example

Despite being question-like, the component is a Presentation Component and cannot be used in assessments.

The scene component is not mobile friendly — That means you should not use this component with courses that have significant number of mobile users. For users of mobile devices who’s screens are smaller than the size of the scene, the component shows alternative content and completely discards the scene, automatically marking the component as complete.

This component is fairly difficult to use due to the nature of the underlying media. The component requires significant thought put into the accessibility using techniques that are not obvious to those without experience in crafting accessible paths through complex content. In addition, the graphics required by the component have extremely strict specifications that are difficult for non-experts to grasp.

When considering using this component, it is best to reach out to the staff artist and accessibility staff before you begin. You’ll need a solid plan and a considerable setup before you begin any work.

The content in the incorrect feedback is broken into three sections:

  1. An opening section to allow you to introduce the errors in the component;
  2. A list of errors generated based on the item feedback for incorrect selections/omissions
  3. A closing section to sum up the interaction

Scene Settings

The Interactive Scene inherits all the settings common to the Presentation Components.

The width of the scene in pixels. Do not include the ‘px’ units in this value.

The height of the scene in pixels. Do not include the ‘px’ units in this value.

The alternative text for the scene itself. This description must be completely comprehensive, not just describing the scene but describing mood, theme, etc. There is no character limit to this description.

The image for the background. Dimensions of this image must precisely match those of the scene width and height specified.

Text content that will completely replace the scene on devices too small to display the scene. This must be instructionally equivalent to the scene.

The text displayed for the submit button.

The text displayed for the show feedback button.

Text read as the accessible description along with each item. This field works similar to a FIELDSET / LEGEND tag and should bind the item back to the original question. The screen reader may read this text before the item’s description, after the item’s description or not at all depending on the user’s settings. This text should ask the original question of the learner again in the most succinct way possible.

The title of the correct feedback dialog.

The body of the correct feedback dialog.

The title of the incorrect feedback dialog.

The opening for the incorrect feedback. Should introduce the list of errors.

The closing section for the incorrect feedback. Should sum up the interaction.

This is a list of the selectable items in the scene. When you click the Add button, a dialog will slide out from the right side of the screen allowing you to populate the item. The fields in this dialog are:

A name that both you and Adapt use to identify the item. Must be unique.

The width of the item in pixels. Do not include the ‘px’ units in this value.

The height of the item in pixels. Do not include the ‘px’ units in this value.

The top (y) position of the item in pixels. Do not include the ‘px’ units in this value.

The left (x) position of the item in pixels. Do not include the ‘px’ units in this value.

The z position of the item. Higher numbers appear “on top of” lower numbers. Do not include ‘px’ units in this value.

If checked, this is a correct answer the learner should select.

Feedback text added to the list of errors that appear in the incorrect feedback.

The description of the item. This description is read by assistive technology every time the user focus or selects the item. It must be succinct, but clearly convey the item and it’s context.

The image of the item. This image is optional and can be omitted if the item already exists as a part of the scene image. If supplied, the image dimensions must precisely match the width and height of the item.

The image to display when the learner hovers or focuses the item and when the item is selected. This image is not optional and must precisely match the width and height of the item as well as the size of the Item Image if provided.

The graphic used for the scene background can be tricky to determine. The size of the image (and thus the scene itself) must be less than width of the content area excluding padding and margin. This number can vary from theme to theme but is generally around 900px wide. However, applying other effects (parallax, trickle) to the block will reduce this number.

You will want to plan in some margin. In our previous work, interactive scenes were never larger than 780px wide, and small if at all possible.

In addition, the height is of some consideration: The interactive nature of the scene means that if the user has to scroll up and down to see the full scene, they will miss content. Again, our experience says this should be under 540px high.

Item graphics have some legal requirements as well: The target should be at least 44px wide and/or tall. The highlight image should use an outline or replacement of the original object that has sufficient contrast on the scene image to be visible at more than 50% of the selected image’s area and must have a contrast ratio of at least 3:1.