Today we’re going to see how we can persist data across Captivate courses using JavaScript cookies.
Why cookies are so awesome
They let you store data that can be retrieved later… even days later. For example:
- You could use it to store the slide number where the user left off, then resume to that slide when they pick up the course again.
- Store their name and retrieve it in another module “Welcome Back Jim!” to make the course more personable.
- Display a dashboard showing which lessons have been completed in your course… even if they close the browser and come back again.
- Store quiz scores from course to course, then average them out when they’re all complete displaying an overall score.
- Gather information from users in survey-like fashion storing the information in a cookie. Then make branching decisions in other courses based on their previous input.
Flexing Our JavaScript Muscles
I use a few JavaScript functions to help with creating, reading, and erasing cookies. I keep most of my JavaScript (JS) inside the standard.js template file typically located at …\Adobe\Adobe Captivate 5.5\Templates\Publish. I’d strongly recommend backing up the original standard.js file. I simply copied the file and renamed it standard_ORIG.js as my backup. You can download my custom standard.js file with these functions already defined for you. When you publish your .cptx project, Captivate will include this updated standard.js file with the new functions in your published output.
Download Project Files
Here’s the skinny on the func! What’s in the standard.js file:
function storeCpVariable(cookieName, cpVariable, days) — stores the value of a Captivate variable in a cookie. It takes three parameters:
- cookieName = the name you want to give your cookie.
- cpVariable = the name of the Captivate variable that contains the data you want to store. The value of the Captivate variable will be stored in the cookie.
- days = the number of days before the cookie expires. If a number is not provided, the cookie will be erased upon browser exit.
function retrieveCpVariable(cookieName, cpVariable) — sets a Captivate user variable with a cookie’s retrieved value.
- cookieName = the name you gave your cookie from a previous call to the storeCpVariable() function.
- cpVariable = the name of the Captivate variable that you want to set.
Eat’em Up – Setting Cookies!
Using the functions is really quite simple. You can add an “Execute JavaScript” action in Captivate from a slide entry or exit action, or from any interactive object (buttons, roll-over slidelets, click boxes, etc.)
In the above screenshot, we’re creating a cookie called ‘CookieDemo’, storing the value of the Captivate user variable ‘learnerName’, and setting the cookie to expire 2 days from now. For example, let assume that the learnerName variable contained the value ‘Darli’. Once the storeCpVariable() function is called, it will create a cookie named ‘CookieDemo’ and it will contain the value ‘Darli’, and it will expire 2 days from now. If Darli came back to the course a day later, we could read that cookie and do something with her name.
Eat’em Up – Reading Cookies!
In this case, we are reading the cookie called ‘CookieDemo’ and we’re setting the Captivate variable ‘retrievedName’ with the retrieved cookie value. Following our example, Let’s say Darli, our Learner, came back to the course the next day. Once the retrieveCpVariable() function is called, the Captivate variable ‘retrievedName’ will be set to the retrieved cookie value ‘Darli’. So if we had a caption in our Captivate project with “Welcome Back $$retrievedName$$“, at runtime it would read ‘Welcome Back Darli‘.
Practice — Try The Demo
Try entering your name and following all three steps.
Then erase the cookie by NOT entering your name and storing the empty value. Then refresh the page. You’ll notice the welcome message goes away because it’s conditional on the value of the cookie. Welcome to a new world!
Download Project Files
Along with the two functions above, there are other “helper” functions in the standard.js file. You don’t really need to use the below functions directly, but they’re good to know in case you want to break rank and do something unique:
function setCookie(name,value,days) — This function creates cookies and updates them if you need to set a new value. It takes three parameters:
- name = the name you want to give your cookie
- value = the info you want to store in your cookie
- days = the number of days before the cookie expires. If a number is not provided, the cookie will be erased upon browser exit.
function getCookie(name) — As you guessed, it will retrieve a cookie’s value. It takes one parameter: Then name of the cookie. The same name you used in the setCookie() function. Cookie names are case sensitive.
function eraseCookie(name) — BACK AWAY FROM THE COOKIE JAR! Once you use this function, the cookie will be set to empty, then erased when the browser is closed.
