How Can I Use Parts of an Image to Track Successful Completion of Parts of a Course?

[sagem15836397]

Hi Captivate Community,

I'm fairly new to Captivate and would like to hear your suggestions and tips for creating a progress tracking mechanism.  Specifically, I would like to use parts of an image to show success.  For example, at the beginning of a course - the image has 5 parts, but all of them are grayed out.  As one successfully completes a branched sub-module, the associated part of the image becomes bright.  Would it be best to break up the image in Ps and import the parts as layers  (using the multi-state object concept)?  Here are a few related questions:

1. Can I tie one of the pieces to successfully passing a test using the Cp quiz slides?  How?

2.  Since the course is branched, is there anything I need to know about Property actions - On enter/On exit?

I am using Cp 2017 (no responsive courses).  I have just started to use advanced actions and states, and am still a beginner in that area.  And since I am basically teaching myself as I go, reference to any helpful tutorials would be super awesome!

Thanks all!

[Lilybiri]

Of course that is possible. I planned to have a blog post about a countdown timer, and a 'progress' indicator in the near future. I started by blogging about the new Advanced Interactions dialog box:

Advanced Actions Dialog box in Captivate 2017 - Captivate blog

Recently I blogged a game as example:

Playing a dice game, using While loop - Captivate blog

You'll be able to download a published file which has a progress indicator and a countdown animation.

The progress indicator is a multi-state object. The normal state for you can be the total grayscale image. Create separate images (coloured) for each of the parts. All can be done in Photoshop, use the roundtripping to import all layers, will make it easier to make edits if necessary. Before I try to explain more, is there a imposed sequence for the submodules or not? If the sequence is not imposed, it would perhaps be easier to have separate coloured images that are hidden on the start instead of multistate object. Hope you understand what I mean? You would need too much combinations in states if you want to do it with a multistate object.

[sagem15836397]

Hi Lilybiri

Correct, there is no specified sequence.  In my example, the home page has 5 branches for the sub-modules, including a test, and the progress tracker will be located here.  The learner chooses which area to go to and when he/she completes the branch successfully, the related part of the tracker will display in color.  Branches have interactions - drag drop, click boxes and buttons.

I will also need to rely solely on Cp to create this effect.  Have you used Flash or anything else, or just Cp? (By the nature of my question, you may know that I have not learned these skills yet!)  For files to play nicely with our own hosting application/field devices, I have to publish in HTML5 (not swf).  

[Lilybiri · Accepted solution]

If you had a look at the game post, you would have read that I always try to do everything with Captivate. Your scenario is not that complicated at all to achieve.

• The grayscale image can be visible from the start,
• The color parts have to be located in place, but turn off visibility in output for them (you could group them) by clicking on the eye icon in the Properties panel. Label them so that they are easily to be recognized.
• On the Back button for the submodules, you'll use the Success event to trigger an action, a shared or an advanced action with two commands:
       Jump to Menu slide
       Show Im_One                  where this is the color image related to this part
• For the quiz: you could use either the Success event in Quiz Preferences, or the On Enter event of the menu slide to do something similar.

[sagem15836397]

Thank you for that very simple set of actions!  I know I can do each of those parts.

[Lilybiri]

It only gets more complicated if you want to do something when all color parts are in place.... In that case you would have to use variables and a conditional action On Enter.