March 21, 2018
Introductory Tips/Information Window
Comments
(4)
March 21, 2018
Introductory Tips/Information Window
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 153 people
(4)

We have probably all seen, at one time or another, one of those little popup windows the very first time that you launch an app that gives you a little bit of information about how to get started.

I thought I would play around with this concept a little bit to create something similar with Captivate.

Here is the link to the working demo. It features my 9-year old dog, Shelby.

https://s3.us-east-2.amazonaws.com/captivateshare/introTips/index.html

Before I dive into how I made this, I want to begin by saying that I have been using Captivate since version 3 and for many years have been kind of rigid about creating only those things that I can do with the native functions of Captivate – i.e. no javascript. That is actually sort of odd since I learned javascript in college once upon a time. Fast forward many years…

As my brain has grown with many ideas that I think are cool or perhaps really complicated in general – I eventually stumbled upon a concept that “should” work natively, but alas, did not. Turns out it was only correctable by using a single line of javascript code.

That experience triggered within me a desire to refresh my memory on some of that old javascript and put it to good use. In fact, I was able to accomplish what I think are some really powerful learning objects in a fraction of the time since I can type a lot faster than I can execute the literally thousands of clicks it would take to do some of the same things through advanced actions.

That said – This little tip window example was constructed with the help of javascript but can still be done with advanced actions.

Here is how I put it all together…

There are six spots with code. Only five are a part of it and you could get by with just three. There is also a single variable.

  1.  Forward button for the information box
  2.  Backward button for the information box
  3.  The ‘X’ to close out the information box
  4.  Help button in lower left corner (Not really a requirement for the box – just there if someone wanted to pull it up again.)
  5.  An ‘onEnter’ action (mostly for aesthetics – not required)
  6.  Begin button in lower right (this is not really needed though – it was just for the demo)

The information window has a total of five pages. Each of the pages is a different state. I named them step1, step2, step3, step4, and step5.
I deliberately use this type of convention often now as it allows me to easily use the power of javascript to concatenate data and have that apply to the changeState action.
I then created a variable and called it  infoPage. This is to store the current page of the information window. Default value is 1.

The code for the forward button is as follows…

infoPage = (++infoPage);

cp.changeState(“infoBox”,”step”.concat(infoPage));

if (window.infoPage>1) {
cp.show(“infoBack”);
}

if (window.infoPage==5) {
cp.hide(“infoNext”);
}

First, on each click of the button, I have the variable incremented by 1. The next line of code is one of my favorites. It changes the state of my information box from step 1 to step 2, etc by simply concatenating the infoPage variable onto the word “step” so that it creates the name of the state. Finally, the two IF statements simply show or hide the two buttons as you navigate to help prevent over incrementing or decrementing the value of the variable.

The code for the backward button is as follows…

infoPage = (- -infoPage);

cp.changeState(“infoBox”,”step”.concat(infoPage));

if (window.infoPage<5) {
cp.show(“infoNext”);
}

if (window.infoPage==1) {
cp.hide(“infoBack”);
}

It is essentially the same but decreases the value of infoPage and reverses the show or hide of the two buttons.

The code behind the close button does what you might expect… It hides everything and resets the variable to 1 so that if it is closed in the middle it will restart at the beginning.  It also enables the Help and Begin Buttons in the lower corners since they are not active while the information box is up.

cp.hide(“infoBox”);
cp.hide(“infoBack”);
cp.hide(“infoNext”);
cp.hide(“closeInfoBox”);
cp.hide(“shade”);
cp.enable(“beginBox”);
cp.enable(“helpBox”);
infoPage=1;

The code on the help button simply brings everything back up again with the information box at step 1.

cp.show(“infoBox”);
cp.show(“infoNext”);
cp.show(“shade”);
cp.show(“closeInfoBox”);
cp.disable(“beginBox”);
cp.disable(“helpBox”);
cp.changeState(“infoBox”, “step1”);

The ‘onEnter’ action is nothing more than disabling the two buttons at the bottom. I have the infoBox fade in immediately so I didn’t want the buttons active while the infoBox was active.

cp.disable(“beginBox”);
cp.disable(“helpBox”);

Finally, the code behind the Begin box is only there for the sake of the demo. It brings up a box to state that nothing more is available. Of course, this would not be necessary if you actually move forward to the next slide.

cp.show(“infoBox”);
cp.show(“shade”);
cp.show(“closeInfoBox”);
cp.disable(“helpBox”);
cp.changeState(“infoBox”, “noContent”);

Hopefully you can see how this might be done with advanced actions. It is mostly showing and hiding with some change states.
Additionally, I hope it provides you with some ideas for some projects of your own. Feel free to ask any questions.

4 Comments
2020-11-10 04:39:09
2020-11-10 04:39:09

Thank you!  So helpful!

Like
2018-03-22 15:48:09
2018-03-22 15:48:09

Greg, thank you for the help and encouragement. I think I’m close to starting ….

Like
(1)
2018-03-22 15:36:01
2018-03-22 15:36:01

Greg, thank you for sharing. I’ve worked in Captivate a long time but have never used code.

Do you create a button.
Then have an advanced action say – javascript?

The hardest part for me to getting started using code is to know how to begin. Your insight is appreciated.

Like
(1)
(1)
>
chase5555
's comment
2018-03-22 15:43:34
2018-03-22 15:43:34
>
chase5555
's comment

Any object that you can assign an action to should be able to have the code run. It can also be setup for the slide onEnter or onExit.

In the case of the button – under the Actions tab – look at the dropdown list for On Success. You will find a choice called Execute Javascript. You will then see a button for the script window. You can type directly in that window or paste your code there.

What I like about using the code is that once you get the hang of it… it is so much faster and I think it is easier to make modifications or utilize in other projects.

Like
(1)
Add Comment