February 1, 2021
Customize and Use the Captivate Alert Window
Comments
(5)
February 1, 2021
Customize and Use the Captivate Alert 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: 155 people
(5)

At some point, you may have seen the Captivate Alert Window appear on your screen. I suppose the bad part is that if you’ve seen the window – it could mean that there was some sort of error.

As a developer – perhaps you can make some use of this pop-up messaging to help your learners.
Here is a way to do it.

1. Create your look.

The standard window is in shades of grey so you may wish to liven it up a bit with some color that matches your project well. You will need to access the Object Style Manager to do this and here is how you find that…

1. Go to Edit  >>  2. Select Object Style Manager
3. Select Runtime Dialog
4. Adjust colors and font as desired
5. Apply/Accept your changes.

Consider the pictures below to help visualize the steps.

2. Create an action to call your alert window.

This can be an onEnter action, a button click, a drag and drop response, or some other event of your choice. However you decide to do it, your action will need to be Execute JavaScript.

In the JavaScript window, we will need a line of code to bring up the alert window. Our code will take on the following form…

cp.alert(“message”,”title”);

The message is the main body of the alert and the title is the header. Just replace the word message with your own and replace the word ‘title’ with one that fits your message.

Consider the following example…

The code would look like this…

cp.alert(“If you can see this message – it is because you clicked the button.”,”Information”);

Clearing the pop-up is as simple as clicking the OK button.

Hopefully you can think of some ways to utilize this simple use of JavaScript in one of your projects.
Feel free to share your thoughts for usage in the comments.

5 Comments
2021-02-02 10:32:28
2021-02-02 10:32:28

Thanks Greg for this summary.

You may add that when you save the Theme as custom theme, the changes to the style of the Runtime dialog box are saved in the Theme.  Also the default runtime dialog box also will take on that design (self-paced learning when not in a LMS). Unless you create a Clone of the original style, and have a custom style which you only use for your custom alert boxes. Is there a way to extend your JS command to use a specific style?

Like
()
(4)
>
Lieve Weymeis
's comment
2021-02-02 13:01:02
2021-02-02 13:01:02
>
Lieve Weymeis
's comment

I have not tried modifying any color schemes of the dialog box using JavaScript but you can tweak the size of the box a bit more to your liking which could be useful if you are working with a smaller screen.

It does require a different line of code rather than being baked into to message part.

$(“.RuntimeDialogfgPanelDiv”).width(x);

$(“.RuntimeDialogfgPanelDiv”).height(x);

 

Simply change  ‘x’  to set the size in pixels for the box.

Like
()
>
Greg Stager
's comment
2021-02-02 14:31:14
2021-02-02 14:31:14
>
Greg Stager
's comment

OK, but probably it is not possible to apply a style created in Captivate. That means that it is impossible to apply any other style than the default style to a custom Alert box.

Like
()
>
Lieve Weymeis
's comment
2021-02-02 15:15:05
2021-02-02 15:15:05
>
Lieve Weymeis
's comment

I guess I would suggest creating the look you want for the box and then setting it as the default so it will be used in that project.

There does not appear to be a simple way of calling a pre-named style so that you can use multiple styles for an alert box in the same project.

A really adventurous person could probably craft up a function to serve as a style change and call it when needed. The JavaScript to pull it off will be more complex than that of just calling the box up with your own message in it.

As an example, here is a line of code that will change the background color of the message box to red. Piece several of these together for each part of the box style and throw it into a function and you could have a working style changer.

$(“#fgPanelDiv”).children(“div”).first().css(“backgroundColor”,“rgb(255, 0, 0)”);

 

Like
()
>
Greg Stager
's comment
2021-02-02 15:24:24
2021-02-02 15:24:24
>
Greg Stager
's comment

Sure, that was my suspicion. Hence my warning: this default style will also be used for the dialog box which pops up when you using bookmarking by TOC (not by LMS). There is no way to assign another style to that dialog box.

Like
()
Add Comment