Adding Timer(Time-Limit) to Captivate Quiz using JavaScript.


Although Captivate provides Widget to implement timer in Quiz(Test), following simple procedure, using JavaScript, could give you lot more freedom to program and control the Quiz. I regularly use this in the online Test of my Students.
Let me explain with example, steps required for the same.
In a Captivate project, Add following user variables:
Step 1:
User Variables:
cp_min, cp_sec, cp_time_out, time_left:
Create /add questions slides of your choice. I have added simple 5 slides in this Captivate project to explain this procedure.
Step 2:
As shown below, Insert similar Slide, just before 1st Quiz Slide.

Step 3:

“On Exit” Action of this Slide, add JavaScript as scripted below:

Explanation of the above Script: To explain it better, let me divide script in different parts :
Line 1 to 4: setting JavaScript variables and passing it’s value to Captivate. Here you can set time-limit of your choice. For Demo purpose, I have set just 2 minutes as Time-limit.
Line 7 to 23: it is the function which would be called every second by line number 24.
Inside the function: Line number 8 to 13: simple manipulation of seconds , minutes.
Line 15 to 18: checking if the time is Over. And if thime is over Resullt slide is called.

Timer(second_Passed() function) will continually check for Time elapsed. The moment time is up, JavaScript will force program execution to jump from the current question slide to the Result slide.
Note: The candidate who is giving that exam is not necessarily Failed, but marks would be counted for whatsoever correct answers he/she has given in the time-limit, and Result is displayed accordingly.

Step 4:

To inform Student, about this(sudden end of Exam due to time-out), Time-Out message need to be displayed.

In the Result Slide, following Advanced Actions is added to display “Timed-Out” Box, if time was over.


I hope this will be useful to many who want to add simple time-limit in the Quiz(online exam).

Note: Although everything is shown and working example in also hosted, I have purposely kept one ‘cache’ without explanation. And those who will do it, will come to know about that cache. Try solving that at least for some time… otherwise I will explain that Defiantly. But I strongly believe that first you must try practically.

Request to Expert: Defiantly, You may be knowing the ‘Cache’ and its solution, but please don’t explain and give solution in the immediate post. Let other do by them selves.

The post Adding Timer(Time-Limit) to Captivate Quiz using JavaScript. appeared first on eLearning.

Storyline 360 – Best practices of using JavaScript to get Custom Print Result

Though there are vivid authoring tools, Articulate Storyline would be the best possible tool to create custom elearning courses. The best practice to create more engaging e-learning courses is to include JavaScript in Storyline. Recently, we were deployed in a project where our stakeholders need an activity to be implemented such that user should take…

Scrolling Marquee Sign

I was having some fun with creating one of those signs that scrolls messages across the display and thought I would share it with you.

As with all projects – there is usually more than one way to approach them but I hope this will simply provide some inspiration for some of your own projects.
Tackle it however you choose. Here is my rendition…

My little message board is made up of several states, a couple variables, and some buttons.

Image States
Of course, I had to create enough image states to represent all the updates in the display. My example has a display with a digital readout and total  of 33 states. Basically it was nothing more than doing a one-off of each of the letters so it did not take too long to create them. I did spend a little time trying to get what I thought was a decent glow on the letters for aesthetic purposes only.

I have two variables. One to track whether the display is on or off and one for helping to adjust the speed of the scrolling.

I have four buttons. Two speed buttons – one to increase speed and one to decrease along with two buttons for turning the display on and off.

Once started, the message will continue to scroll over and over until stopped. I wrestled a bit with immediately “powering off” the display and letting it finish the message and simply not repeat again. I decided to just stop it cold in order to reduce confusion over whether the button worked or not. The speed buttons will increase or decrease the speed of the scrolling by a hundredth of a second for each click of the respective arrow.

I decided to run with JavaScript on this, although I did make a version using advanced actions as well. I stayed with the JavaScript on this one because I felt it offered better control over the speed. The ‘Delay Next Action’ option is too clunky for me when timing is more critical. I will admit, though, that it was quicker in this case to simply create an advanced action with a ‘While’ condition to go to the next state.

On the green power button, the JavaScript itself is a simple repeating of a setTimeout function called scroll that changes the state of the display. The final setTimeout calls the first one as long as the variable for power is flagged. Here is an example of what they look like so you can see the pattern. I am sure there is a better way to script this but I can only work with what I know for the moment. We are also setting the go variable to 1, calling the scroll function,  and disabling the green button so that the scrolling is not initiated on top of itself.

function scroll() {
if (window.go==0) {
else if(window.go==1) {
setTimeout(scroll2, speed);

function scroll2() {
if (window.go==0) {
else if(window.go==1) {
setTimeout(scroll3, speed);

On the red power button we are simply changing the go variable to 0 and re-enabling the green button.

On the speed buttons, the code simply increases or decreases the speed variable by a value of 10. The setTimeout part of the javascript uses a value in milliseconds which means a value of 1000 represents 1 second. I have the default scrolling set for 100. It is worth noting that in order to decrease the speed of the scroll, I am actually increasing the speed variable while decreasing the speed variable in order to make it go faster.

If you have any questions about this please do not hesitate to post them.

I have included a working sample below.


The post Scrolling Marquee Sign appeared first on eLearning.

Accessing Image by ID containing a specific word via an external JS file?

Hi everyone, I’m working in Captivate 2017 on a responsive project. What I’m trying to accomplish is take a piece of code which ‘zooms’ (translates position and scale via GSAP API) images via one function that targets all images by whether or not their id contains the word ‘image’. I’ve created something that ‘zooms’ images using GSAP already, but the difference is I made each image page a .zip file containing an html, css, and js page. This was nice as I could control the css and html of the images, however, loading a .zip file on each slide with an image can take a minute and sometimes images don’t load right away.
I’m wondering if I can do the same effect, however with one external JS file that I’ll load into my index.html file after publish. I’m having a hard time calling/accessing images with an id that contains the word ‘image’ however. I’m not an expert coder by any means and I’ve had a lot of help from forums to get as far as I am, but essentially the code I’m using looks like this:

var targets = document.querySelectorAll(‘[id^=”image”]’);

for (var i = 0; i < targets.length; i++) {

var tl = new TimelineMax({ paused: true, reversed: true });[i], 0.6, { x: 100, y: 100 }, 0);

targets[i].anim = tl;

targets[i].addEventListener(“click”, function() {

this.anim.reversed() ? : this.anim.reverse();



This method using document.querySelectorAll returns the variable ‘target’ in the console log as a node list with the length of 0 (even when on a slide that has an image on it). So I’ve tried another method:

var targets = $(“img[id*=”image”]”);

for (var i = 0; i < targets.length; i++) {

var tl = new TimelineMax({ paused: true, reversed: true });[i], 0.6, { x: 100, y: 100 }, 0);

targets[i].anim = tl;

targets[i].addEventListener(“click”, function() {

this.anim.reversed() ? : this.anim.reverse();



I’ve tried this using $(“img …. and $(“div …. as I’m not sure what HTML tag captivate assigns to images? Neither of them seem to pick up my image with the id of “image43”  however. In the console log it returns as “m.fn.init [prevObject: m.fn.init(1), context: document, selector: “img[id*=”image”]”]” with a length of 0.
Anyone have an idea as to how I can call my images based off of their id and if it contains the word image? Or if I could do the same thing by calling whatever class name captivate assigns to images (how would I figure out what that is)? Thanks!

The post Accessing Image by ID containing a specific word via an external JS file? appeared first on eLearning.

Three Learning Interactions from One JavaScript Function

Click to Launch Project: Play

Learning Interactions are components of Adobe Captivate 2019 that provide the learner with a specific way of viewing information or interacting with published courses. For example, a Glossary is a Captivate Learning Interaction that presents terms in a list and allows learners to search the list using an input field or scrollbar. A number of contributors have created videos and blog posts on Learning Interactions, and I’ve listed them in the reference section, should you want to view them yourself.

You may be tempted to call Learning Interactions “widgets”, and you wouldn’t necessarily be wrong. However, as Leive Weymeis notes,  within the Captivate environment a “Widget” refers specifically to components compatible with Adobe Flash (.swf) while Learning Interactions refer to those compatible with both Flash and HTML5. A subtle, but important distinction when you’re developing courses.

Learning Interactions have a number of advantages, including improving engagement through the organized presentation of content and increased opportunities for user interactivity. Another advantage is that you don’t have to create them, as there are a number of Learning Interactions in Captivate ranging from a simple Table to games, such as Jeopardy and Who Wants to be a Millionaire.

While Captivate’s Learning Interactions provide great features and functions, you could find yourself in a situation where you don’t need all the bells and whistles or want greater control over slide layout and content. Learning Objects require that you cover the entire slide, and while some configuration and use of alternative themes is available, the basic slide layout is standardized.

Recently, I found myself in a situation where I wanted some of the functionality that Learning Interactions provide, but couldn’t find a Learning Interaction that was consistent with my overall graphic design concept. After giving it some thought, I decided to create my own, and while they don’t contain all the functions of the onboard Captivate Learning Interactions, they worked for me. JavaScript is a personal preference for me, and you could likely create something similar with Captivate’s Shared Actions.

This article presents three simple interactions created with Captivate 2019 and JavaScript:  A Tabs interaction, a Timeline interaction and a Process interaction. The code is set up in such a way that all three interactions used the same JavaScript function, provided a structured naming scheme was used for a relatively common set of multi-state objects.

If you’re familiar with JavaScript and multi-state objects, you can jump to the JavaScript code later in the post. I’ve included comments that explain how it works. If you’d like more detail on the reasoning behind the code, I’ve included additional detail and pictures in the following sections.

Component Objects: Multi-State Rectangles and Circles

The fundamental components of the interactions in this article are multi-state rectangles and circles, with one dedicated object each for titles, text and pictures. Each multi-state object was a container of sorts for all the content of its type. In the figure below, the highlighted rectangle (ttp2_pic) contains a series of states each having a picture corresponding to a “Milestone” in the Timeline interaction. For example, “pic_1” corresponded to a picture for “2010” while “pic_9” corresponded to picture for “2014”.

In order to make the JavaScript function work, without resorting to additional scripting, each Learning Interaction was limited to one multi-state object for title, text and pictures. In other words, all content for a single interaction was displayed in the same objects, a “single” display of sorts.

In contrast, there were as many buttons in each interaction as needed, with each button serving as a trigger for a specific state. For example, there were 9 buttons in the Timeline with each corresponding to a specific point in time. When a button was clicked, such as the “2010” button (i.e., ttp2_button_1), it would change the state of the related title, text and picture objects to the state associated with 2010 (i.e., title_1, text_1 and pic_1).

Naming Conventions

In order for the buttons to “call” the appropriate title, text and picture states, a standard naming scheme was used. While the end result was that there was no need to use variables in Captivate, it did mean that care had to be taken in naming each multi-state object and button across the three interactions. The general scheme is shown in the figure below.

In short, the slide was the name of the Learning Interaction, with “ttp” signifying “Tabs, Timeline and Process”. To ensure each interaction had a unique name, a number was added to the end. For example, the Timeline was the second interaction so it was named “ttp2”.

In turn, the Learning Interaction name (e.g., “ttp2”) served as a prefix of sorts for all display objects and buttons on the slide. This ensured they could be uniquely identified by Captivate and the JavaScript function. In addition to the Learning Interaction name prefix, each button received a number at the end to distinguish them from other buttons on the screen.

Invoking JavaScript

Clicking on a button resulted in calling the f_tabTimeProcSing() function, named for interactions “Tab”, “Timeline” and “Process”. The “Sing” text string indicates a single set of display objects (i.e., title, text, picture). The function sends three key arguments:

  • numberButtons: The number of buttons used in the specific interaction (e.g., “9” for the Timeline)
  • charWidgetName: The number of characters in the “prefix” of the button name corresponding to the “widget” (Learning Interaction) name (e.g., “4” for “ttp2”)
  • numbCharStem: The number of characters excluding the number at the end of the button name (e.g., “12” for “ttp2_button_”).

Example: f_tabTimeProcSing(“9”,”4”,”12”);

For the three interactions in this post, much depends on correctly naming the objects, especially the buttons. While a bit tedious, it resulted in only about 12 lines of code and allowed for the creation of a  large number of independent Learning Objects within the same project.

JavaScript Execution

There are three general areas of execution in the JavaScript:

  1. Extracting the active button’s name, its “prefix” (i.e., interaction name) and “suffix” (i.e., ending number)
  2. Change state of all button states to “inactive” using a loop limited by the number of buttons (numberButtons).
  3. Change state of all objects associated with the button “prefix” and “suffix” to “active

Invoking JavaScript Function

//Invoke Function via Button Click


Executing JavaScript Function


Tab, Timeline and Process Widget – Single Set of Display Objects

Parameters: Number of Buttons, Widget Name, Number of Characters Excluding Number at end of Button Name


function f_tabTimeProcSing(numberButtons,charWidgetName,numbCharStem) {

//Extract Active Button Name, Widget Name and State Number

var v_buttonName = this.document.activeElement.getAttribute(“id”);  //Get Id of active button

var v_widgetName = v_buttonName.slice(0,charWidgetName);  //Extract widget name from button

var v_contentNumber = v_buttonName.slice(numbCharStem);  //Slice state number off  button’s end

//Deactivate Previously “active” Button by Setting all Buttons States to “inactive”

//Note: Number of Buttons is Used to Limit the Loop

var i=1;

while (i<=numberButtons){




//Set State of Clicked Button to Active


//Create Target Names of Multi-State Display Objects Using Widget Name and Content Type

//Create State Using State Type and Unique Number at End of Button Name






While the Learning Interactions created weren’t as sophisticated as the those within Captivate 2019, they did serve the requirements of the project, especially in terms of creating a common graphic design theme across the slides. While some of the additional Captivate features, such as animated process boxes or a responsive design, would have been nice, they weren’t needed.


Adobe eLearning | Create learning interactions in Adobe Captivate

Lieve Weymeis | Tips – Learning Interactions

The Captivate Team | Introduction to Drag-and-Drop interactions

Allen Partridge Ph.D. – Adobe eLearning | Smart Learning Interactions Tutorial

Paul Wilson | Adobe Captivate – Make Your eLearning Interactions Experiential


Daniel Jacobs | Sydney Opera House

Jeremy Galliani | Sydney Opera House

Wallpaper Flare | Green and Black Floral Textile, Colorful, Abstract

The post Three Learning Interactions from One JavaScript Function appeared first on eLearning.

Using javascript to jump to last slide in project (not based off of slide index or name)

Hi there, I’m wondering if anyone knows a way to use javascript to jump to the last slide of the project if you don’t know the amount of slides in the project? Obviously I can look at how long the project is everytime and put in the slide index number like –

window.cpCmndGotoSlide = 15;

but I’m wondering if there isn’t some way to identify the last slide of the project, so that if the number of slides changes I don’t have to go back and change my code?

Any help is much appreciated.


The post Using javascript to jump to last slide in project (not based off of slide index or name) appeared first on eLearning.

Navigation between two Captivate projects (stop a page from reloading?)

I’m working in Captivate 2017 in a non-responsive project. I have multiple projects that I’d like to ‘link’ together, which I’ve been able to do using my custom next and back navigation buttons built in Adobe Animate. The code for loading up a new project looks like this –


(If you know a better piece of code for doing this, please let me know, I’m new to javascript).

This works well for loading up the next project, however for going back to a previous project (the goal is for users to have complete navigational control going back and forth as much as they want), I’ve used the same method, but I want the “previous” course to open up to it’s last slide, so that it feels more fluid (even though the lack of autoplay allowed in browsers kind of kills the fluidity, not much I can do about that). So I’ve used a # at the end of the URL to identify when the users is clicking backwards in the project. Something like this –


Then on the first slide of the previous project I have some code –

function pageLoad(){

if (window.location.hash === “#load-stuff”) {

// jump to last slide

window.cpCmndGotoSlide = 21;




This sends the user to the last slide. The issue now is that the #load-stuff is still on the end of the URL, so now if the user goes through the Table of Contents and navigates to the first slide of that project, they will be sent to the last slide of it instead.

I’ve tried clearing out the #load-stuff tag when reaching the last slide of the project, by adding this to the final slide –

function getRidHash(){

window.location.href = location.href.replace(location.hash, “”);



Which does clear the tag, however, then the page reloads entirely without the tag and returns back to the first slide.

Is anyone familiar with a better method for accomplishing this? Or is there a way I can stop the page from refreshing after executing my code on the last slide?

I did try adding window.stop(); to my code, but then it doesn’t complete loading all the web objects I have on the slides (some web objects I just place on the first slide and then set to last for the rest of the project).

Any advice is much appreciated.

The post Navigation between two Captivate projects (stop a page from reloading?) appeared first on eLearning.

Presenting Event Video with Portable Network Graphics and JavaScript


Click to Play Project

Some time ago I pitched a presentation design to a potential client who worked in video post production. Though they ultimately went “in house”, I really liked the final design as it relied heavily on their award winning videos and graphics. This showcase presents an Adobe Captivate 2019 presentation based on that design.

Central to the design was including a video player within the presentation. While experimenting with the graphics and video, I found that the content of the background graphic really drove the best position for the video player in order to get a pleasing effect. In the end, I found that three positions for the video player worked for all background graphics: middle-left, middle-center and middle-right.

With the design in mind, I set to work creating the Captivate project. However, getting the project to reflect my design resulted in some challenges in terms of both the control and “look and feel” of Event Video. I’m sure there are other ways of putting this material together, but the solutions I found are below.

Portable Network Graphics (PNGs)

I really wanted a “clean” design, with subdued controls, in order to focus on the graphics and video. This presented the first couple of challenges. First, I couldn’t find and onboard Skin that looked and functioned as I wanted. Second, while video playback is likely optimized for the specific requirements of Captivate, I didn’t want the “black bars” (a.k.a. Letter Box) to show.

A search of the Adobe forums and web provided some suggestions, including using a streaming service that allowed more control over the interface. In the end, I remembered a brief comment from a discussion thread that basically suggested covering the black bars up with a graphic frame. My solution was similar, though I used a large page-sized PNG with a window cut in it. This allowed for a very slim video frame.

Controlling Playback with JavaScript

While the effect I got with the PNG overlay looked good, using an Event Video without a skin resulted in a couple of issues that needed to be addressed: the video automatically played when entering a Captivate slide and without a skin there were no playback controls.

Dealing with Auto Play: If you use an onboard Skin for playing video, you are given the option to disable “Auto Play”. However, if you don’t use a Skin, the video will automatically play when the user navigates to a slide. The solution I found was to “pause” the video on slide Enter using JavaScript in an Advanced Action. To make it work, however, I needed to delay the execution of the JavaScript using the “Delay Next Actions By” method to allow the video to finish loading, otherwise the pause script wouldn’t work.

The downside of the “Delay” method is that when you enter a slide, a short amount of video is played resulting in movement within the playback frame and an audio “pop”. My solution involved editing the videos so the first couple of seconds were occupied with a still image with no audio track.

JavaScript Code for Pausing Video Playback


Creating Playback Controls: The general method used for the playback controls involved using a smart shape as a button and then adding JavaScript to the button as an action. A good overview of this technique is documented by Adobe and presented in a video by Paul Wilson.

My twist was to call an external JavaScript function and use the Pause-Play button’s ID to control playback and change the button state. The upside was I didn’t need to create an additional variable in Captivate.

JavaScript Code for Pause-Play Button

//Video Pause-Play Toggle Button

function videoPausePlay() {

//Retrieve ID of pause-play button and assign to variable

var v_buttonID = this.document.activeElement.getAttribute(“id”);

//Retrieve TagName of the video

var video = document.getElementsByTagName(“video”)[0];

//If video is paused, play the video and change the button state

if (video.paused) {

// Play the video;

//Show the state with the “pause” icon



//If video is playing, pause the video and change the button state

else {

// Pause the video


//Show the state with “play” icon




Rewind, on the other hand, was a bit more problematic. While rewinding the video was pretty straight forward, managing the state of the Play-Pause was an issue since it was no longer the “active” element. My solution was to use an intelligent naming scheme for all video control buttons and then piece together the Play-Pause ID in JavaScript.

For example, all Play-Pause buttons in the project started with “g_playPause” and ended with a text string corresponding to the presentation section (e.g., “g_playPause_maven”). Since I used this scheme on the Rewind button, as well, I simply “sliced” the “_maven” text off the Rewind button and added it to “g_playPause”.

JavaScript Code for Rewind Button


function videoReplay() {

//Retrieve TagName of the video

var video = document.getElementsByTagName(“video”)[0];

//Construct name of playPause button

var str1 = “g_playPause”; //Common text to all Play Pause buttons

var str2 = this.document.activeElement.getAttribute(“id”); //Rewind button ID

var str3 = str2.slice(8); //Slice off text that identifies presentation section

var v_playPause = str1.concat(str3); //Construct name of Play Pause button

// Pause the video


//Show the Play-Pause button state with “play” icon using constructed name for button


//Rewind to Beginning




In the end, the Captivate project came out very close to my intended design. I’m sure there are other solutions that would have worked, as well. But this one worked for me. I really enjoyed creating the original proposal for my client, and this version, as well. I’m “all about the graphics” and this particular design really capitalized on graphic and video content.


Jeremy Shimmerman  | Turn off ‘autoplay’ on embedded(event) video when it has no playbar skin

Paul Wilson | Control Event Video with JavaScript

Chris Ching | HTML5 Video pause and rewind

Matt West | Building Custom Controls for HTML5 Videos


NASA GSFC Conceptual Image Lab | Bennu’s Journey

Walt Feimer and Michael Lentz (Animators)

Macrovector – Freepik | Laptop tablet desktop mobile | Searching for Signs of Life on Mars | Shields Up! (Dynamic Earth)

Aries Keck,  Patrick Lynch and Greg Shirah (Visualizer) | Maven Targeting Mars

The post Presenting Event Video with Portable Network Graphics and JavaScript appeared first on eLearning.

Mars Colony 01: A Journey Into JavaScript and Gamification

Launch the Mission: Mars Colony 01 Project: Play

Adobe Captivate 2019 incorporates a rich variety of accessible features and functions that allow developers to produce effective eLearning courses. However, whether the result of client requirements, or your own professional development goals, you may want to extend Captivate’s capabilities through the use of JavaScript or JQuery.

My interest in using JavaScript and JQuery was twofold. First, I wanted to brush up on my JavaScript skills, as I don’t specialize in JavaScript programming. I use JavaScript when a communication or training solution requires it, and sometimes its just not needed.

Second, I wanted to explore how JavaScript and JQuery worked within Captivate 2019. As I said, you may not need to use JavaScript, as Advanced Actions and Shared Actions within Captivate may get the job done quite nicely. However, there might be situations in the future when using JavaScript could work for me.

This showcase presents “Mission: Mars Colony 01”, a Captivate 2019 project created to explore using JavaScript to create simple Gamification functions. As my objectives were mainly professional development, I kept the style more on the “fun” side. Key feature highlights include a:

  1. Learner selected avatar and name
  2. System assigned performance “Level” based on quiz performance
  3. Timed perceptual speed task that includes automatic scoring

The main focus of the project was a perceptual speed task based on an ability test that measures how quickly a person can scan objects and detect similarities and differences. In this case, the user reads a pair of 6 digit numbers and must determine if they are the same or different. This section of the project required the most coding in order create the functions for the countdown timer, the toggle buttons used in the test and the calculation of test performance.

General Strategy

The general scripting strategy was, to the extent possible, to call all JavaScript and JQuery functions within an Advanced Action created for each slide. Back in the day, this was basically how we set up OpenScript within the Toolbook object hierarchy.

Once the Advanced Action is created and assigned to a slide for the “On Enter” event, the Advanced Action could be easily accessed, along with the JavaScript. This made updating and debugging the JavaScript code easier.

The bulk of the JavaScript was contained in the “my_java_code.js” file and linked to the Captivate “index.html” file via an include, as described by TLC Media Design. The .js file was written with Atom, with debugging accomplished with a combination of the Python Tutor and Developer Tools within Google. Note: I backed up my “index.html” file before altering it.

Avatars, Timers and Quizzes

It is worth noting that the coding for the project was based on the strategy or actual code for a number of Adobe Community contributors.

Selecting Avatars: To setup the avatars, avatar name and performance level, I used a method similar to that recommended by Paul Wilson that involved setting the state of a multi-state smart object based on a variable’s value. However, where Paul Wilson used advanced actions, I used a combination of advanced actions and JavaScript.

Countdown Timers: The script for the timers was based on Greg Stager’s 10-Second Timer 3000, with some modifications. First, since it was used to set a time limit for the perceptual speed task, some of the buttons weren’t needed. However, as I found out, the script for the “Cancel” task was essential for ensuring the timer was reset prior to continuing navigation. Second, in addition to the countdown clock, I included a countdown bar.

The Perceptual Speed Task: My original concept was to use radio buttons for the perceptual speed task, but I couldn’t find a solution. I did find a great article by Steven Warwick where he used JavaScript to create a custom true / false quiz using toggle buttons and this code did the trick. It is worth noting that Quiz slides contain very special objects that Captivate uses to communicate with the LMS. Its best to avoid deleting slides or objects, rather use the onboard options to hide objects or hide them within the screen using formatting or other objects.

Wrapping it Up

All in all I enjoyed creating the Mars Colony 01 project. I certainly brushed up on my JavaScript tools and learned a thing or two about JQuery in the process.

Files for Download

Captivate 2019 .cptx document: Mars Colony 01

JavaScript Code: my_java_code


TLCMediaDesign | Using External JavaScript libraries in Adobe Captivate

JavaScript.Info | Debugging in Chrome

Paul Wilson | Adobe Captivate – Allow Learners To Select Their Own Avatar

Greg Stager | Countdown Timer

Steven Warwick – Health Decisions | Building a fully custom quiz in Adobe Captivate using JavaScript


BiZkettE1 – Freepik | Arabic Night Landscape 

Vectorpocket – Freepik | Set of Cartoon Spaceman Kid

Vectorpocket – Freepik | Set with Cartoon Astronaut Girl

Vectorpocket – Freepik | Cartoon Spaceman

Vectorpocket – Freepik | Spaceman Family with Space Ship

Vectorpouch – Freepik | Cartoon Solar System

NASA- JPL Caltech – MSSS | Telephoto Vista from Ridge in Mars’ Gale Crater


Mark DiAngelo | Wind Sound 

The post Mars Colony 01: A Journey Into JavaScript and Gamification appeared first on eLearning.