Branching Component

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

The Branching component displays content to the learner based on decisions made. The Branching component allows you to set up branching scenarios where the learner can choose different pathways to specific outcomes.

This article provides an overview of the Branching component, component setup, and behavior.

Component overview

The Branching component is an interactive component that displays content to the learner based on decisions made. The Branching component allows you to set up branching scenarios where the learner can choose different pathways to specific outcomes.

The Branching component is a fully responsive question component and can be part of an assessment or used as a separate component in your course.

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 Body. Use the text editor to style and format your text.

1. Add Instruction Text that tells users 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 Branching component. This widget can display an icon and label prior to the Branching component completion, which changes to a different icon and label once the Branching component is completed.

Items Section

In the Items section, you add Items to your Branching component.

Start by adding an item by clicking the Add Item button.

In the Items section:

1. Start by adding an item by clicking the Add Item button.
2. All items that can be connected to a specific option will display a connection target button. When a learner selects this option, they will be presented with the connected item.
3. Click and drag items to move them around to help organize your items in the editor view.

Click Expand editor to get a better work area when setting up the Branching component items.

Editing an item:

1. Add Item Body text. Use the text editor to style and format your text.
2. Add Item Color. This color will be used in the editor.

1. Scroll down and add Item Instruction. This is displayed above the item options.
2. Select Media Type. Select Media Type from Image, Video, Video Stream, Gif or Audio. By default, this is set to Image.

1. Add Image, gif, video, or audio.
2. Set Image Per Device Size as needed.
3. Add Image Alt Text as needed.
4. Select Position of Item Media for the image, gif, video or audio relative to the text. Select Right, Left, Top or Bottom. The default setting is Bottom.
5. Enable Randomized Options as needed.
6. Add Options ARIA Label as needed.

Add and delete Items as needed.

Behavior section

The Behavior section for the Branching component is divided into the following sections: Option Settings, Story Mode, Marking, Restart, Resume Timer, Scoring, Progress Bar, Full Screen and Logic.

In the Option Settings section:

Toggle to enable Randomize Options. This setting can also be turned on inside each item.

In the Story Mode section:

1. Toggle to Enable Story Mode. This allows the learner to see the path they have taken.
2. Set Max Story Items Displayed at a time. The items will be counted from the current item.
3. Toggle to enable Display Story Mode on End. This will allow the learner to display the full story when they reach the end of a branch.
4. Add Display Full Story Button Text. This is the text on the display full story button text.

Note: The Max Story Items Displayed setting has no effect if set to 0 or below. Display Story Mode on End can be used even if Story Mode isn't enabled.

In the Marking section:

1. Toggle to enable Always Mark as Correct regardless of which item is reached at the end. If this setting is turned off, an end item can be set to mark the component as complete.
2. Toggle to Display Marking Icon. Enabling this will display a correct/incorrect marking icon on an end item

In the Restart section:

Note: If Branching Assessment is enabled, the restart button will not display unless Allow Assessment Retakes is enabled.

1. In the Restart section, toggle to Allow Restart on End. Enabling this will allow the learner to restart the branching component when they reach the end of a branch. This will not reset the branching assessment.
2. Toggle to enable Always Allow Restart. With this setting enabled, the learner can always restart the branching component at any point.
3. Toggle to Keep Completion on Restart. Enabling this keeps the component's completion status when the branching component is restarted. By default, the component is set to incomplete when restarted. This setting is ignored if Branching Assessment is enabled.
4. Add Restart Button Test. This is the text shown on the restart button.

In the Resume section:

Toggle to enable Resume on Revisit.

In the Timer section:

Timers can be set on any item other than the first or end item (item with no options). When the timer ends, the Timeout Text is displayed along with a button to restart the component.

1. Add Timeout Text. This is the text displayed when the time runs out on an item if the item has a timer.
2. Add Timeout Restart Button Text. This is the text on the timeout restart button.
3. Add Timer Time Remaining Text. This is the text that displays before the countdown timer.
4. Add Timer Seconds Text. This is the text that displays after the current time remaining.

In the Scoring section:

1. Toggle to Display Score. Enabling this will display the current score to the learner. Scoring can still be used for automatic branching even if not displayed to the learner.
2. Add Score Text. This is the text displayed next to the current score in the Branching component.
3. Toggle to disable Reset Score on First Item. By default, this setting is enabled. Reset the score when the first item is displayed. This is useful if an option is connected to the first item.

Note: The score is always reset if the learner restarts the component using the restart button (if Reset Score on First Item is enabled).

In the Progress Bar section:

1. Toggle to Display Progress Bar. Enabling this displays a progress bar which indicates progression through the branching component using items or score.
2. Select Progress Type as needed. Options to select are Items or Score.
3. Set Progress Max Score. The score is required for the progress bar to appear full.
4. Add Progress Bar Label Text. This is the text displayed next to the progress bar.

In the Full screen section:

1. Toggle to enable Display Full Screen. With this setting enabled, a poster image and a start button will be displayed on the Evolve page to start the Branching component in full-screen mode.
2. Add Start Full Screen Button Text.
3. Add Exit Full Screen Button Text.

1. Scroll down the page and select a Full Screen Poster Image to display.
2. Set Image Per Device Size as needed.
3. Enter Full Screen Poster Image Alt Text, as needed.

In the Logic section:

1. Toggle to enable Save Score to Variable. If enabled, the score 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.

Assessment section

The Assessment section, is divided into Assessment Score, Assessment Retakes and Assessment Feedback.

In the Assessment Score section, toggle to Enable Branching Assessment. This will set the Branching component to be used as a course assessment.

In the Assessment Score section, you make settings that allow converting the branching score to a valid Assessment Score that will be reported to the LMS.

1. Set Maximum Relative Score.
2. Set Pass Mark Score.
3. By default, Display Assessment Score is enabled and will display the assessment score in the assessment result. Toggle to disable this setting.

1. Scroll down the page and toggle to enable Display Relative Score. This will Display the Max Relative Score next to the default score. This can help the learner judge their performance during the component.
2. Toggle to enable the setting Limit Score To Max Relative Score.
3. Enter Assessment Score Text. This is the text displayed next to the assessment score in the assessment result.

1. In the Assessment Retakes section, toggle to Allow Assessment Retakes.
2. Set the maximum number of Assessment Retake Attempts.
3. Toggle to Allow Unlimited Retake Attempts.

In the Assessment Feedback section, you enter Passed Feedback Text and Failed Feedback Text. Use the text editor to style and format your text as needed.

Appearance section

In the Appearance section, you toggle to enable Use Column Layout.

Note: The Use Column Layout is only available on desktop size screens.

1. Select Item Option Radio Icon Visibility. By default, this setting is set to Visible. Toggle to set to Hidden.
2. Set the amount of Item options per row for different devices. By default, this is set to 1 for desktop, tablets and mobiles.

In the Story Mode section:

1. Set Story Mode Option Selected Background Color as needed.
2. Set Story Mode Option Selected Text Color as needed.
3. Set Story Mode Pointer Icon Color as needed.

In the Progress Bar section:

1. Set Progress Bar Background Color as needed.
2. Set Progress Bar Highlight Color as needed.
3. Set Progress Bar Text Color as needed.

Animations section

In the Animations section, you set what Animations to run when the next item in the Branching component is displayed.

Did this article help?

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