This blog post contains all the information you need to create an Adobe Captivate file with Branching (and quiz questions using Branch Aware with Return to quiz). We have also included a JavaScript feature which allows you to set up a random navigation path for your users.
Be sure to check out our Adobe Captivate Foundations and Masterclass courses if you’d like to learn more.
Links to finished projects and source files
- Link to finished file with branching, branch aware and JavaScript
- Link to finished file developed in YouTube video
- Link to source file (CPTX)
Branching in Captivate
Branching in Captivate is when more than one path can be presented for a user to navigate. The most common reason for this is when we want our users to select a department they work in or a job role. Creating a branching project allows us to then present the information that is relevant to the user. We can also incorporate a common branch where all users experience the same branch as the information may be relevant to everyone regardless of their job role.
Branch Aware
Branch Aware is a feature in Adobe Captivate and is related to branching. This feature needs to be enabled if we have incorporated quiz questions within the branches.
Return to Quiz
This feature allows us to navigate users back to information if they get a quiz question wrong. The user can review the information and then attempt the question again. This is an ideal approach to reinforced learning.
JavaScript
Below is the JavaScript that is used in the project that was built in the video walkthrough.
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
var objCP = document.Captivate;
var randomSlide = randomFromTo(2, 4);
function onButtonClick(){
objCP.cpEISetValue('cpCmndGotoSlide', randomSlide);
}
onButtonClick();
Table of Contents
- 00:11 – Introduction
- 00:43 – High level flow of user experience
- 00:51 – Walkthrough of finished project using branching, branch aware, return to quiz and javascript
- 11:31 – Breakdown of walkthrough project in Captivate (Branching View)
- 14:16 – Creating the project from scratch in Adobe Captivate
- 16:50 – Display Slide Label using System Variable
- 19:19 – Branching View before navigation setup
- 19:55 – Setting up navigation for branching
- 22:12 – Branching View after navigation setup
- 23:01 – Creating content pages for the branches
- 24:17 – Creating question slides for the branches
- 24:52 – Branching view after content and questions slides created
- 25:18 – Continuing development of branches including further questions for each branches
- 34:04 – Updating the question mechanics for correct navigation. Also covers question design and reinforced learning.
- 36:11 – Branching view after question mechanics updated
- 36:56 – Continue updating question mechanics for other questions
- 39:18 – Branching view after other questions updated
- 41:11 – HTML5 Preview of project with normal navigation (Return to Quiz NOT implemented)
- 42:35 – Implementing Return to Quiz to allow multiple attempts at questions including HTML5 Preview
- 44:16 – HTML5 Preview showing incorrect results due to Branch Aware not turned on
- 47:31 – Implementing Branch Aware to ensure correct results being calculated due to branching including HTML5 preview
- 49:16 – Implementing JavaScript for the random path functionality
- 54:08 – HTML5 Preview showing JavaScript
- 55:00 – Reminder to keep navigation buttons included even when JavaScript random feature implemented to maintain branching
- 55:54 – Using Advanced Actions and Variables to display dynamic content reflecting the branch/path user navigated based on Last Slide Visited
- 01:03:48 – HTML5 Preview of Advanced Actions and Variables functionality
- 01:05:15 – Wrap up and thanks for watching