Captivate's Timelines (master slide/normal slide cptx) demystified


Intro

After this introductory post, and the post about the typical Video Demo timeline this article will explain the specific features of the timelines in a cptx project: both for master slides and normal slides. The common features for cpvc- and cptx projects were explained in the introduction, if you missed it please take a look at that blog post.

Timelines CPTX project

Timeline panel in a cptx project is shared by Master slides and Normal slides (Filmstrip), depending on which panel is active at that moment. There are differences in look and features between Master slide timelines and Slide timelines. 

Contrary to the Timeline in a cpvc project, each  'track' in a cptx project can have only one item:the (master) slide has its timeline, audio has a separate timeline stacked under the slide timeline, each object, whether static of interactive has its own timeline. Result is that the Eye/Lock buttons will affect only one object, that each track can have the name of the object on that track.

The vertical arrangement of the timelines, also called the 'stacking order', is important when you have overlapping objects. Be careful with covering interactive objects by static objects: depending on the output, the interactive objects will remain active even though they are not visible. 


    Master slide Timeline 

    The timing of a master slide has no real meaning, master slides nor objects on master slides have any timing. The Timing Properties panel is not available neither. The timeline will show the default duration (normally 3 secs), which is necessary to show and edit the stacking order (vertical positioning of the object timelines). Here is a screenshot of the timeline of a Master slide:

    Objects on master slides never have an ID, which explains why you seen only icons in the first column to identify the object  type. That type is also visible inside the object timeline itself. The icons for Placeholders usually are included in square brackets [], to differentiate them from normal objects (no brackets). There are some exceptions (look at the Rollover Caption/Image in the screenshot).

    The only interactive object allowed on master slides,  is a shape button (shape used as button). If Pause Project  is checked in the Actions tab, the pause will be visible at the end of the timeline. This is the case for the uppermost object in the screenshot: look at the Pause symbol, the pause itself is at the location of the end of that timeline. This shape button is an object, the shape two tracks below is a placeholder (brackets). 

    The tiny icons between the control panel (with play button etc) and the zoom slider do not have any value because Time has no meaning for a master slide.

    Slide Timeline

    If you create a slide, based on a master slide, not all objects inserted on the master slide will be visible in the Timeline; have a look at this screenshot:

    • Placeholder objects (beige timeline) will appear in the timeline panel (I renamed them); if you don't use them (example: you don't add text, content, image), they will not appear in output. The icons are in square brackets.
    • Content placeholder (blue timeline) acts the same way.
    • Rollover caption/image (green) if inserted as Placeholders, will appear but they'll move to the bottom of the stack as you can see on the screenshot which shows a slide based on the Master slide shown above.
    • Static objects on the master slide, will be visible on the stage, but not in the timeline. They will be visible in output, with their formatting on the master slide (there is no such object in this case)
    • Shape buttons on the master slide will be visible on the stage, but not in the timeline. They will be visible and keep their interactivity in output. In the screenshot you see that the topmost object, the shape button on the master slide, is missing in the Slide timeline.

    The stacking order of the objects on the timeline can be changed by dragging the timeline or by using the Arrange option under the Right-click menu. Objects can be staggered on the timeline to appear at in sequence or overlapping partially. Contrary to the typical video timeline for a CPVC-project, all objects will be visible on the stage, independent of the time they'll appear. For people used to avideo work flow this can seem confusing, but it is very helpful for arranging objects on the stage. You can always check the sequence of appearance by Playing the slide (which is not a Preview). You'll see the playhead moving, and can stop it with the space bar or the Pause button to edit/synchronize (see also Shortcut keys later on).

    The specific indicators that can appear in the timelines for a cptx project on normal slides are:

    • Audio icon : if you attach audio to an object, a similar audio icon as you had for video clips with audio in a cpvc-track,  will appear in the timeline

    • Pause indicator: consists of two parts, the pause symbol (double vertical lines) and the exact location of the pause (thin vertical line) to the right of the symbol. You'll see this indicator in
      • Question slide timeline: mostly at 1.5secs for a default slide duration of 3 secs - pause is linked to the Submit button
      • Score slide timeline: identical setup as for question slides - pause is linked to the Continue button
      • Interactive object timeline:  if you insert a pausing Click box, the pause will be at the end of its timeline; for buttons, shape buttons, Text Entry Boxes, the pausing time is by default 1.5secs after the start of the timeline, it can be changed by dragging the thin vertical Pausing line or with the Timing Properties panel. That same panel can be used if to uncheck the pause.

        Other timeline pauses that are NOT visible on the timeline, only to be found in the Timing Properties panel:
      • A pausing shape button on the master slide. The pause is at the end of each slide timeline, but not visible on any slide timeline
      • Drag&Drop slide is by default pausing at 1,5secs (under Actions tab in D&D panel), but that pause is not visible on the timeline (linked to the Submit button, playhead will be released by either the Success or the Failure action)
      • Interactive widgets/interactions: do have a pause at 1 sec (check the Timing Properties panel). Beware: most widgets/interactions are static, not interactive. Examples of interactive widgets are the games. For a complete overview of interactions, have a look at two older articles on my blog: Learning Interactions  and  Widgets
    • Group  indicators: if you group objects, you can collapse the group with the collapse button and expand with the expand button.
      Tip: never group objects having effects, because the effects will be deleted without warning. You can apply an effect to a group.       

    • Effects: if you apply effects to an object the indicator 'fx' will appear on that timeline (and on the stage).  You get the same expand/collapse buttons as for groups. 

    • (Sticky) triangle: red triangle at the end of an object timeline means that this timeline is linked to the end of the slide; if you increase/decrease the slide duration the object timeline will move to keep the end glued to the end of the slide, without changing the duration of the object timeline.
      Do not confuse with an object timeline that is set to Display for the rest of the slide (CTRL-E): such an object timeline will have a fixed start point, its duration will change when the slide duration is changed. It has no special indicator.

    • Double arrows at the end of an object timeline: this object is set to Display for the rest of the project. You'll see its timeline only on this first slide, on following slides the object will be visible on the stage but not in the Timeline panel.

    • A Zoom object has a very thin vertical line in its timeline: this indicated the end of the zoom movement.

    • FMR (Full Motion Recording, created in a software simulation for mouse movementsslides: red line in the center of the slide timeline
    • CPVC slides: identical look to the FMR slide, but editing functionality in the Properties panel is different (will open the Video editor)

    Tips 

    You can see the slide timeline as one video clip in your course 'movie'. Whether the user will be aware of a transition between those slides depends on your setup. The playhead will continue seamlessly from the last frame of a slide to the first frame of the next slide (which is another video clip) if these conditions are fulfilled:

    1. No slide transition between slides
    2. Keep the default actions On Enter for the second slide, and On Exit for the first slide (No action)
    3. No pausing on the slide (look above for presence of pauses)

    Captivate could have put all those 'clips' on one long timeline, but believe me, it is much easier to manage and edit objects on the shorter slide timelines and the learner will never know this.

    The default duration of a slide is set to 3 seconds. There are (only) two possible valid reasons to increase that duration:

    1. If you add a Voice Over audio clip to the slide (slide audio).  The slide duration will have to match or be superior (allowing small gaps before and after audio) to the duration of the audio clip.

    2. If you want objects to appear in a certain sequence, staggered on the timeline, even if you don't have slide audio.

    What is NOT a valid reason to increase the slide duration: to give the user time to see/read everything, or in case of object audio to listen to everything. Captivate is meant to create interactive courses! Give your learner control, by pausing the slide. In that case he can take as much time as he wants to listen, watch the slide. This subject (about adding pauses) is so important that I'll treat it more in detail in a later post.

    In that case, give the user control over the movie, by adding Pause(s) to the timeline. 

    Video Demo Timeline demystified (cpvc-project)

    Intro

    In a first article about timelines, I described the common features: timeline ruler, playhead, eye button, lock button, control panel and the tiny icons at the bottom of the second column of the Timeline panel. This post will explain the more specific features of the Timeline panel in a Video Demo project (cpvc file).

    Timeline in a CPVC or Video Demo Project

    CPVC-files are created with the Video Demo application packed with Captivate. Those projects are pure video files, they can only be published to a video format (MP4 - H264 codec).  It has a dedicated video editor, which has some panels similar to those in a cptx-project. One of those panels is the Timeline panel, which is not hidden when entering the Video editor, contrary to the newbie UI for cptx-projects.. Here is a screenshot of a typical timeline of a video demo in the Video editor:

    Similar to other video applications, you'll see one continuous timeline for the whole movie. I will use the word 'track' for each horizontal line in the Timeline panel. Immediately after creating a video demo only one track will be visible in the panel, the bottom track labeled as 'Video/Audio'. This label is automatically attributed to the first track.

    The bottom track in the screenshot pointed at with the name 'Video/Audio' because contrary to a cptx project, the audio has no separate timeline, but is included in the video track. Another difference is that the bottom track can have several video clips. In the screenshot you see two full video clips and the start of a third clip.  

    The video clips can be in sequence (clip 1 and 2) without a gap, or separated by one or more static objects. Clip 2 and 3 have a text and an image inserted between them. Those objects were added manually, and they appear in new tracks. Only non-interactive, static objects can be added to a video demo. Similar to the multiple video clips for the Video/Audio track, the other tracks can have multiple objects (which is not possible in a cptx project). New tracks are only added when necessary, when two or more objects overlap in time. In the screenshot you see multiple objects in three tracks. This explains the generic name 'Objects' for the tracks (first column). The names of the tracks cannot be changed, customized which is another difference with the object/style timelines in a cptx project. The Properties panel has not field 'Name'. 

    Due to the possible presence of multiple items on a track, clicking a dot linked to the Eye and Lock button will affect all the objects on that track. It is not possible to lock or hide one object timeline (or one video clip). That is another big difference with the Timeline in cptx projects. 

    More specific features are:

    1.  Just below the time ruler in seconds, you'll see diamond icons (and a half icon at the start). Those diamonds indicate the start/end of a video clip. Their color is grey by default. You can click such a diamond, and the color will be green. You can add a transition from the Video Effects panel that will appear automatically in the right docking station.After adding a transition the diamond's color changes to orange. You can add a transition to the start of the first clip, hence the half-diamond appearing at the start of the Video/Audio Track.
    2. The orange In/out markers are the same vertical position as the playhead. You'll find them at the beginning and the end of the Video/audio track. If you want to focus on one video clip, you can drag the In marker to the start of that video clip, and the Out marker to its end. When you use the Play button from the Control panel (or the shortcut key Space bar), the playhead will move only within that video clip. You can also use the Trim command to delete the darkened part by dragging the In/Out markers. If I did that for the situation in this screenshot, only the second video clip would be preserved.
    3.  In the Pan/Zoom status (which is the default status of the timeline, visible in the Screenshot images so far) the track with the video clips can have Zoom indicators (loupe icon). They appear when you add a zoom and/or pan effect. The duration of the zoom/pan transition is visualized by the width of the shadow triangle before the zoom indicator.
      In this Pan/zoom status you'll find under the timeline tracks the buttons 'Split', 'Pan and Zoom' and 'Trim' to be active.

    4. The second status, Mouse status can be made active with Edit, Edit Mouse points (use the same work flow to return to the Pan/Zoom status). The 'Pan and Zoom' button will be dimmed, inactive but 'Split' and 'Trim' buttons remain available. In this status the start of mouse trails are visible on the video/audio track as mouse icons(screenshot below): you can select them individually and edit or delete the mouse object.
    5. To trim away part of a video clip, you have to position the playhead near the location that you want to delete. When clicking the Trim button two black triangles, the Trim markers (In and Out) will appear. The gap between them will be greyed out and will be deleted when you click on the Trim button again. You can drag both Trim In and Trim out markers to select precisely the part to be trimmed. You'll end up after the trim action with two video clips, and a transition point (diamond marker) separating them.

    The objects in the CPVC timeline have no real color coding (for cptx projects, this will be explained in a later blog post): everything is blue, the Video/Audio track is bit different but still blue. A selected video clip or object will be in a more saturated blue.

    CPVC or Video Demo slide

    You can embed a Video Demo in a normal cptx-project. This can be done either by recording directly from within the cptx-project with the big button, Slides, Video Demo or by inserting an exisiting (raw) cpvc project using the menu Insert, CPVC-slide. The look of such a slide, in the filmstrip and in the Timeline panel is identical to the look of the (old) FMR-slides (Full Motion Recording) that are created in a software simulation for movements that cannot be captured in static slides (like dragging, moving objects). The only way to recognize a cpvc slide is by the presence of the button 'Edit Video Demo' in the Properties panel.

    Next post?

    Soon I'll publish a longer article about the ins and outs of the Timeline(s) in a cptx-project: master slides, normal slides, effects....


    Captivate's Timeline(s) Demystified - Intro

    Intro

    Happy New Year 2017 to all Captivate users!

    Quite a few years ago I wrote an article about Timeline secrets in Captivate 5: Tiny Timeline Tidbits

    Since the change in the UI with Captivate 8 , the newbie User Interface minimizes the Timeline panel by default which is a pity IMO. Some of the questions I read, at least partially due to that decision to hide the Timeline: 

    •  'I want to get rid of the timeline, don't need it at all'
      (user thinking that Captivate is just a Powerpoint clone).
    •  'Why is the timeline not showing the whole project, so user unfriendly'  
      (user supposing Captivate is a mini video application)

    •  'Why do I see all the objects on the slide, even when the playhead is in a part where some objects shouldn't be visible, not intuitive'  
      (user with  an Animation background)

    For those reasons I suspect it is Time to update that old article, to explain the ins and outs of the Timeline panel with its latest additions like CPVC-projects and slides, Effect Timelines, Drag&Drop. 

    Timeline panel, in collaboration with the Timing Properties panel is at the core of the Captivate applications. Personally I'm persuaded that it should be a top priority in the skillset of any Captivate developer, whatever its level.

    Since I cannot offer you a 'digestive' (limoncello, grappa, schnapps, single malt;;;) I will split up this (broad) subject in several articles. You are reading the introduction. Following posts will treat topics like 'Timeline in a cpvc-project', 'Timelines in a cptx-project, master slides and normal slides', 'Color coding and Shortcut keys for Timelines', 'Why/how to pause a timeline?'. 

    Why a Timeline?

    Many users talk about the output of a Captivate project as 'a movie'. Although this is only completely true for a file published to a video format (MP4), this indicates well that Captivate is related to video applications like Premiere Pro and After Effects.

    No one will have doubts about the importance of 'time' for video. A movie has a playhead, which moves at a certain speed. That speed is usually indicated by the term 'frames per second', or FPS.

    Frames remind me always of the traditional way of producing cartoon movies: each frame, drawn by a graphic artist, was slightly different from the previous and the next frame. By playing those frames at a certain speed,  movement could be simulated: the slowness of our eye/brain made it possible to see fluid movements from those frames.

    Captivate has two types of 'raw' files: the cptx-files (slide-based) and the cpvc-files (less-known, Video Demo files). Both types have a Timeline panel but with some differences as I will try to explain in this sequence of posts. Let us start with those features that can be found always in the Timeline.

    Common features

    You can either read the following text, or watch this interactive Captivate slide:

    Some items are available in all Timeline panels: for cptx and cpvc projects:
    1. Contrary to some video or animation applications, the Timeline ruler in Captivate is always in Time units (seconds), cannot be changed to frames (look at the horizontal ruler in the top of the Timeline panel). The smallest increment in the timeline is 0,1 seconds. With a default rate of 30FPS (which can be changed) 0,1seconds = 3 frames

    2. The Playhead is represented by a red rectangle. When you use the play button in the control panel (see 4), you'll see its movements. You can also drag the Playhead to a certain position on the timeline. The size of the rectangle is bit different between a cptx and a cpvc project as you can see in the screenshot.

    3. In the first column of the panel, on top you find the Eye button, and each track (horizontal line in the panel) in the Timeline has a (blue, filled with orange) dot under this button. See the screenshots:
      When clicking the Eye button on top of the column, all objects in all tracks will be hidden on the stage. This is only meant for editing reasons, it will not affect the published course.To hide items after publishing you need to click that 'other' Eye button in the Properties panel of the objects (hidden in Output). When clicking on a dot under the Eye button, next to a track, all objects on that track will be hidden. In the exampled on the screenshot, the second tracks from the top have been hidden.

    4. Next to the Eye button is a Lock button, also with dots next to each track. When you click the button itself all objects on all tracks will be locked: not available for selection nor for editing properties. However, if you click a dot next to a track, there are two states. On the first click only size and position will be locked. In that state you can still select /style the objects. The blue Lock icon is surrounded by 4 arrows, as you can see in the screenshot: for the cpvc it is the track immediately above the Video/Audio track, for the cptx project the uppermost timeline. Clicking twice on a dot results in full lock: no selecting/editing is possible. This is the case for the uppermost Objects track in the cpvc-screenshot and for the image I_topics in the cptx project. Watch the different look of the lock icons.

    5. The Control panel at the bottom of the first column (see screenshot above) has the classical (video) buttons:  'Move Playhead to start', 'Stop', 'Play', 'Move Playhead to the end'. Play and Stop can also be activated with the space bar if the timeline panel is active.
      Warning: Play Slide under the button Preview has the same function as Play in this control panel. Although it is under the Preview button it is NOT a preview at all! It is just meant to be used for editing, will not show how the slide will look after publishing. This is a common misunderstanding.
      The last button on the control panel: 'Audio' is a toggle, will mute/unmute Audio when watching using the Play button. Like the Eye button, this will not affect audio when publishing. The state of this button will apply to all open projects.

    6. In the second column at the same vertical position as the control panel described under 6 and the horizontal scrollbar, you'll find 4 tiny icons in all normal slides (they have no sense for the Master slide which has no real duration)

      1. Hourglass icon: indicates the location of the playhead from the start of the track; its tooltip is 'Elapsed Time'; this indicator is always available, even when no track nor object is selected.
      2. Vertical line + right arrow (Selected Start Time) will only have a value when a video clip or a static object is selected; it will indicate the start time of the selected video/object. In the screenshot the Smartshape on top is selected.
      3. Vertical line + right arrow + vertical line (Selected duration) will show the duration of the selected clip/object, is only available when a video/object is selected on a track.
      4. Chrono icon: Total duration of the slide 

        The Zoom slider to the right of this total duration,  allows the timeline to zoom in/out. 

    Next post

    The next article will be about the specific features of the Video Demo timeline (cpvc-project) and the cpvc-slides. You'll not have to wait long, neither for the third article about the specificity of timelines in a cptx-project (master slides and normal slides). 


    Playing with Numbers - part 2

    Intro

    In the previous blog post I introduced you to the common JS API, and you used the method 'setVariableValue' to populate a variable defined in the Captivate project. That value was a random number generated in the JS window, using the Math.random() and the Math.floor methods. The values were integers, between fixed numbers 10 (included) and 100 (not included). In this second article you'll learn to know a new method 'getVariableValue' from the JS API, which lets you transfer a value to JS. We started with the mathematical operation 'Sum', now we'll switch to 'Subtractions' needing again the command 'Expression'. Because CP cannot handle well negative values, we'll have to take care of that as well.

    The progress bar introduced with the Sum exercises, will be continued. You'll see that it is possible to change the state of an object, displayed for the rest of the project, from a slide where that object is not inserted. 

    Scenario Subtract Slide

    Subtraction will be with two terms, always integers. Whereas in the Sum slide I decided that all terms would have to be between 10 and 100, on this slide the user will be able to choose a Maximum number, and if he wants a Minimum number. The minimum number has already a default value of 10, which can be changed by the user, the maximum number is empty. The Max value needs to be bigger than the Min value, if that is not the case, the Max value will automatically be set to 'Min + 200'.
    The same sticky figure (with states) and OK button (with state New) are used as described in the previous post for the Sum slide.
    This Subtract slide can only be visited when 5 correct Sum exercises have been done, hence the 5 stars on the progress bar are in place on entering this slide. The progress bar is set to display for the rest of the project, and you can change the state (to 6 or more stars) from this Subtract slide, although the progress bar is not visible in the Timeline. New stars can be added after a correct subtract exercise, and after 10 stars, the Next scenario is executed (same as on Sum slide).
    Here is a slide preview, after answering the first correct subtract question:

    Used objects

    The same multistate objects are used as on the Sum slide (see state panels on previous post):

    • Sticky figure with its states and a motion effect for the minus sign
    • OK button, which changes to a New button after the first exercise
    • Progress bar, which has been displayed for the rest of the project.

    In this slide I only used TEB's, which I can control due to the presence of the CpExtra widget (InfoSemantics). The consequence is that this description is only valid for HTML output. For SWF output the TEB can be replaced by a Scrolling Text Interaction:

    • TEB_max accepts only numbers and is empty when starting - associated variable is v_max
    • TEB_min accepts only numbers and has a default value of 10 (changeable)  - associated variable is v_min
    • TEB_result accepts only numbers - associated variable is v_result (reused from sum slide)

    Two shape buttons, that are alternatively enabled/disabled:

    • SB_Number is the OK/New button, triggers the advanced conditional action SubtractTerms
    • SB_CheckSubtract is the Check button, triggers the advanced conditional action CheckSubtract
    To make the next state of the sticky figure interactive, it is covered by a Click box CB_Next2.

    This is the Timeline of the slide:

    Variables

    Some variables created for the Sum slide are reused:

    • v_one, v_two, v_three, v_four: are reused for the values of the two terms, which will end up in v_one (first term) and v_two; those variables will be reset by the On Enter action of the Subtract slide
    • v_result: will store the result value typed in by the user in TEB_result, has to be reset as well.
    • v_check: will be calculated and used to validate the result given by the learner. 
    • v_progress: is a counter for the correct answers, will be used to change the state of the progress bar; this variable is not reset but starts with the value 5 (end value after the Sum slide)
    • v_null: empty variable used to clear the content of the displayed result for a new sum (see Where is Null?)
    • xprefTEBUpdateFromVariable:  for HTML output, one of the CpExtra variables. When assigning the value 1 to this variable (with CpExtra widget loaded either in the file, or headless) it is possible to change the associated variable of a TEB by an action, and it will be reflected immediately in the TEB. I used this to clear TEB_Result.

    New variables are:

    • v_max associated with TEB_max will store the maximum value for the terms

    • v_min associated with TEB_min will store the minimum value for the terms

    Advanced Actions

    Shared actions were not possible. One Standard advanced action was needed (to reset vars) and two Conditional actions.

    EnterSubtract

    This very simple standard action, triggered by the On Enter event of the slide, clears several variables that are reused from the Sum slide:

    SubtractTerms

    This conditional action is triggered by the OK/New button SB_Number. It has 3 decisions:

    1. "CheckCorrect" will compare the values stored in v_max en v_min. If the maximum value is not exceeding the minimum value, the maximum value will be calculated by adding 200 to the minimum value.

    2. "RandomNum" will generate two random numbers and store them in the variables v_three and v_four. Reason is that the last decision will have to put the largest number into v_one and  the smallest in v_two. This could have been checked in the JS script window as well, but I wanted to keep the JS as simple as possible and checked with the last decision. 

    3. "CheckMax" compares the values in v_three and v_four. The largest value will be assigned to v_one, the other to v_two. This decision also calculates the result of the subtraction to be stored in the variable v_check (will be used to check the user's entry).

    CheckSubtract

    This conditional action is triggered by the check shape button SB_CheckSubtract and has 6 decisions

    The first decision 'Checker', will check the entered value (v_result) with the correct value (v_check). It is the only decision with a Then and Else part. For correct answer, the state of the sticky character is changed, the counter (v_progress) is incremented,  the state of the button SB_Number is changed to another state and enabled again, while the button SB_CheckSubtract is disabled. For an incorrect answer, the counter is not incremented, and the sticky character is changed to another state.

    The 5 other decisions 'ProgressXxxx' check the value of v_counter and show the appropriate state for the progress bar. The last decision 'ProgressTen' will also change the sticky Character to its state GoNext and enable the click box to proceed to the next slide (subject of the next blog post, with Multiply exercises).


    Javascript 

    In the previous post you learned to use 'window.cpAPIInterfaceSetVariable (x,y)' method to populate a variable x (to be entered as a string between quotes) with a value y. You calculated y by using a combination of two Math methods in JS: 

    • Math.random() which generates a random number between 0 and 1 (not included)
    • Math.floor() which will convert a decimal number to an integer by rounding it down (cutting off the decimals).

    For the sum slide we used a combination of those two methods, to end up with a random number between 10 and 100 (not included):

    Math.floor(Math.random()*(100-10)+10))

    For the Subtraction, the maximum and minimum values are not fixed, but stored in Captivate variables v_max and v_min. Due to the first decision in SubtractTerms action, we are sure that v_max > v_min. Those value will be transferred to JS variables with the method 'window.cpAPIInterfaceGetVariable(x)' where 'x' is the name of the Captivate variable, entered as a string (between quotes). Example:

    var max = window.cpAPIInterfaceGetVariable("v_max");       stores value of v_max in JS variable max

    Instead of the fixed values 100 and 10, used for the sum slide, you use this time min and max to generate a random number between min and max. The two random numbers are stored in variables v_first and v_second. Since they are random, we do not know yet which one has the largest value:

    var first = Math.floor(Math.random()*(max-min)+min);

    var second= Math.floor(Math.random()*(max-min)+min);

    You are already familiar with SetVariableValue to store the result of first in v_three - Captivate variable, and second in v_four. 

    window.cpAPIInterface.setVariableValue("v_three",first);
    window.cpAPIInterface.setVariableValue("v_four",second);


    Conclusion

    You earned a second star, soon a third part will be ready, up to multiplications and bit more of randomness.

    Playing with Numbers - part 1

    Intro

    How to use Adobe Captivate to create a course for simple calculations, has been popping up on the forums several times. You can use Text Entry Boxes, MCQ's to reach that goal, but that is pretty limiting. Some examples can be found in this older blog post where the real goal was to have the score being linked to the attempts.

    I started using JavaScript in Captivate projects since the release of the common API for JS (version 8) whenever the advanced actions did lack the wanted functionality. For those who want to start using JS, I wanted to explain some very simple use cases in a sequence of 4 articles that will focus on the 4 basic operators that are available in the Expression command: sum, subtract, multiply and divide. Each of the posts will introduce a JS example. The Expression command is not available as a simple command from the dropdown list in the Actions tab, it is only available in advanced/shared actions. 

    This article will focus on the Sum operator, and introduce JS to make it possible to generate random numbers. You'll also see how to assign that generated number to a Captivate variable with the function setVariableValue from the API. That will allow to use the same slide for several sum questions. I will use the Multi-state object feature of Captivate 9 several times as well. In the next parts you'll also learn about retrieving a Captivate variable value with getVariableValue, how to format a number to specific number of decimals, how to avoid dividing by 0 (zero).

    Scenario Summing slide

    User will be allowed to choose for sums consisting of 2 up to 4 terms. The number of terms can be changed after completion of one exercise.

    For a correct answer, the stick figure will change to another state, and a star will be added to the progress bar (also a multi-state object). For an incorrect answer the stick figure also changes to a state but no star will be ended to the progress bar.

    After completion of 5 correct sums, the stick figure will change to a Next button. The user could still add more questions, but no more 'stars' will be added to the progress bar. 

    In this screenshot, from HTML output, you'll see the situation after one successful answer, second sum has been created with 4 terms:

    Used objects

    Multi-state objects

    Stick Character: see image Object States in Library below

    OK/New shape button: see image Object States in Library below

    Progress bar: see image Object States in Library below 

    Special objects

    Radio buttons - works perfectly for SWF output but formatting is not preserved for HTML output; labeled "Wd_TermNumber"

    Scrolling Text interaction for SWF output, labeled "Wd_SumResult". It is possible to change the shown content in this interaction by changing the associated variable (v_result). However that functionality only works for SWF, not for HTML output. For that reason I needed an alternative which is a  

    Text Entry Box, labeled "TEB_result" combined with the CpExtra widget and a specific command variable for HTML output. Since there is a bug in Captivate 9, which prevents using a TEB multiple times on a slide, I used a workaround. The default Submit button was deleted. It was replaced by a custom shape button (SB_CheckSum in the timeline) to trigger an advanced action. In this case an easy workaround, since I used that same shape button for the Scrolling Text Interaction for SWF output. The associated variable for the TEB is the same as for the Scrolling Text Interaction (v_result). Nothing had to be changed to the advanced action 'CheckSum' when replacing the Scrolling Text Interaction by a TEB.

    Variables

    v_one, v_two, v_three, v_four: will get the values for the (possible) 4 terms of the sum which are generated by the advanced action 'SumTerms'

    v_result: will store the result value typed in by the user in the Scrolling Text interaction (SWF) or the TEB (HTML)

    v_check: will be calculated and used to validate the result given by the learner in the advanced action 'CheckSum'

    v_progress: is a counter for the correct answers, will be used to change the state of the progress bar

    v_null: empty variable used to clear the content of the displayed result for a new sum (see Where is Null?)

    xprefTEBUpdateFromVariable: only for HTML output, one of the CpExtra variables. When assigning the value 1 to this variable (with CpExtra widget loaded either in the file, or headless) it is possible to change the associated variable of a TEB by an action, and it will be reflected immediately in the TEB. I used this to clear the result when defining a new sum.

    Advanced Actions

    In this particular case it was not possible to use shared actions. Two advanced actions, both conditional, were needed:

    SumTerms, triggered by the OK button (SB_Terms) after choosing the number of terms

    This conditional action has 4 decisions, the first 'Always' is a mimicked standard action (will always be executed), prepares for a new sum by clearing the result and the terms. It also resets the state of the sticky character.
    The three other decisions will show the correct number of terms, based on the choice made by the user. In these decisions, a Javascript command is used to generate random numbers (see later).

    CheckSum, triggered by the Check button (SB_CheckSum) to validate the answer

    This conditional action has 6 decisions.

    The first decision 'Checker', will check the entered value (v_result) with the correct value (v_check). It is the only decision with a Then and Else part. For correct answer, the state of the sticky character is changed, the counter (v_progress) is incremented,  the state of the button SB_Terms is changed to another state and enabled again, while the button SB_CheckSum is disabled. For an incorrect answer, the counter is not incremented, and the sticky character is changed to another state.

    The 5 other decisions 'ProgressXxxx' check the value of v_progress and show the appropriate state for the progress bar. The last decision 'ProgressFive' will also change the sticky Character to its state GoNext and enable the click box to proceed to the next slide (subject of the next blog post, with Subtract exercises).

    JavaScript for random numbers

    In the documentation provide by the Captivate team about using the common JS interface, you'll find a description of creating random numbers:

    Common JS Interface

    In this example I wanted to generate a random number between 10 included) and 100 (not included). The script window for the decision 'TwoTerms' of the action SumTerms (see above) had to generate two random numbers, to be stored in v_one and v_two; for the decision 'FourTerms' 4 variables had to get a random number:

    Short explanation of this code:

    The JS method Math.random() generates a decimal number between 0 (included) and 1 (not included).

    The multiplication Math.random()*(100-10) will result in a random (decimal) number between 0 (included) and 90 (not included).

    The sum Math.random()*(100-10) + 10 will result in a random (decimal) number between 10 (included) and 100 (not included).

    The JS method Math.floor(e) will cut off the decimals of the argument e, round iit down to the nearest integer. As a result the full expression used in the JS window  Math.floor(Math.random()*(100-10) + 10) will result in an integer between 10 (included) and 99 (included). 

    The method from the common API setVariableValue(x,y) allows to assign the value from the second argument to the variable indicated in the first argument. Beware: the variable name has to be identified as a string (text) by putting it between single or double quotes. For the value, which is a number, you can use the expression explained above. It is a method of the cpAPIInterface which is in the window object. That explains the total line of code, which in JS always ends with a semicolon:
    window.cpAPIInterface.setVariableValue("v_one", Math.floor(Math.random()*(100-10) + 10));

    Conclusion

    You will be able to download the published files - both for SWF and for HTML, when the 4 articles are ready. If you succeeded reaching  this conclusion, you have won your first star!  Three more to go :)











    Knowledge Check Slides - tips

    Intro

    Knowledge Check Slides have been introduced as one of the new quizzing features with version 9. The Help documentation is 'spartan' as usual. You can read this as Features (quote from the Help):

    • Knowledge check slide imbibes similar features of question slide without any results, reporting structure and interaction ids. 
    • Knowledge check slides do not participate in reviews. 
    • Random questions are not applicable to this knowledge check slide. 
    • Master slide and controls usage is similar to question slide. 
    • Knowledge check slides can be used to impart the learning on specific topics. 

    I explored those KC slides in preparation for a workshop about new Quizzing features, and want to give you some more tips. Since the KC slides are very similar to normal quiz slides, I'll start with 'Recognizing KC slides'. Then I'll show the differences in default setup, and in some other aspects not mentioned in the Help,  the relationship with the quizzing system variables and - what did you expect? - a tweaking tip.

    Recognizing KC slides

    This is possible in different locations:
    • in the Filmstrip, KC slides get a special indicator at the bottom right, which the Quiz slides do not have; in this screenshot slides 1&3 are KC slides and have that indicator:
    • in the Quiz Properties panel you see more differences with normal quiz slides, most are due to the fact that KC slides are not scored by default:
    • The mention (KC) next to the type of question
      The lack of the possibility to choose between Graded and Survey (because KC slides are not scored)
      No partial scoring for MCQ slides with multiple correct answers 
      No points
      No penalty

    • in the Advanced Interaction panel you don't see a specific indicator. The score of the KC slides is set to 0,  they are not set to be reported but... contrary to what the Help tells, the KC slides have an individual Interaction ID. This is probably not used. Look at this screenshot:

    There is no way to convert a KC slide into a question slide, nor a question slide into a KC slide!

    Default setup KC slide

    The default settings for a KC slide are bit different from those for a question slide:

    1. For a KC slide only the Incomplete feedback message is activated, not the Correct message as for Quiz slides
    2. For both KC and Question slide only the Submit button is checked off. The Back, Skip and Clear buttons can be activated, but they are not by default.
    3. Attempts are set to Infinite, with the Retry Message enabled. For question slides by default Attempts is set to 1. Because the attempts are set to infinite, you don't have a Failure message enabled for KC slides. You can decrease the attempts and in that case you can provide up to 3 Failure message, same as for Question slides.

    You read in the Help that KC slides will not be visited during Review, they are not in the Quiz scope, except of course if they are nested in between normal quiz slides. Contrary to Pretest slides, the KC slides will not prevent navigation by playbar or TOC.

    It is not possible to use question pools (see Help), random questions but it is also not possible to use GIFT format to import KC slides. 

    Some options in the Quiz Preferences do work for KC-slides: if you check the option to Hide Playbar in Quiz, this will be valid both for question slides and KC slides. Unchecking the option 'Allow Backwards Movement' will only prevent backwards movement on question slides, not on KC slides. However, KC slides do not get a Progress indicator! IIf you want a progress indicator (question X of Y) you can have a look at this older blog post..

    When you leave a KC slide, it is reset immediately which is not the case for question slides which are frozen until a new attempt on Quiz level is started. In that way a KC slide behaves like a Drag&Drop slide that is not set to be reported, had no score. There is no possibility to freeze the answer on a KC slide, which may be a game stopper sometimes.

    As the Help mentioned, design of the KC slides depends on the same master slides as the normal question slides, with the exception of the new Review buttons which will never appear on KC slides. For navigation on KC slides you can use the Back/Skip buttons or add custom shape buttons.


    System variables 

    Contrary to the Pretest slides, there are no specific system variables available for Knowledge Check slides. I have been looking for quizzing system variables that do get a value from a KC slide. Here is an overview of the variables that are not used by KC slides:

    • cpInQuizScope and cpInReviewMode, both Booleans will not be toggled from the default 'false' to 'true' when you enter a KC slide. If the KC slide is in between normal question slides, it can be 'true' but that is not due to the KC slides.
    • Variables linked with scoring are not used: cpInfoPercentage, cpQuizInfoLastSlidePointScored, cpQuizInfoNegativePointsOnCurrentQuestionSlide, cpQuizInfoPassFail, cpQuizInfoPointsPerQuestionSlide, cpQuizInfoPointsscored, cpQuizInfoPartialScoringOn, cpQuizInfoTotalProjectPoints, cpQuizInfoTotalQuizPoints 
    • cpQuizInfoAttempts: gives the attempts on Quiz level, as specified in 'Quiz Preferences, Pass or Fail'. Those attempts have no sense for KC slides, since the user can come back as many times as he wants to retake the KC question which is always reset when leaving the slide.
    • cpQuizInfoPassPercent and cpQuizInfoPassPoints: since KC slides have no score, those settings of the Quiz Preferences have no meaning for KC slides.
    • cpQuizInfoTotalQuestionsPerProject: contrary to the Pretest questions which are counted in this variable, as are the normal Question slides, the KC slides are not included in this variable. Same for the variables cpQuizInfoTotalCorrectAnswers, and cpQuizInfoTotalUnansweredQuestions

    As you see not many variables are used by KC slides, but some are used! Moreover they can be very useful if you want to do more with KC slides:

    • cpQuizInfoAnswerChoice: one of my favorites as you could read in this old blog postIt can be used to tweak the work flow with KC slides as you'll read more later on. One exception: it is not populated when you use Advanced Answer option.
    • cpQuizInfoMaxAttemptsOnCurrentQuestion: can be useful as well, although having a similar system variable to cpQuizInfoAttempts for current attempt on question level would be even better. You need a user variable as a counter for attempts on question level. If you keep the default setting of Infinite attempts, this variable will have the value 32767 (no idea why?).
    • cpQuizInfoQuestionSlideTiming and cpQuizInfoQuestionSlideType are available for KC slides as well.

    Tweaking tips

    Here are some tips, which I tried out with success but will not explain in detail.

    1. If you do not want to keep the Attempts set at Infinite, but to a limited number it would be possible to count the number of correctly answered KC slides. Create a user variable v_counter with a default value of 0. Use the Success action of the KC slides to increment that counter. Later on you can show the obtained value for v_counter, and even use that value in a conditional action to offer feedback or navigate the user back to content slides.

    2. There is no Review possibility for KC slides as mentioned. If you offer limited attempts on question level, you could show a custom feedback message on the KC slide for the questions answered correctly, something like 'You have answered this question correctly'. When simulating a 'Review' situation, the user will be invited to answer only the KC questions that do not show that message. Be careful: all embedded question slide objects are always on top of the stack, you don't want the feedback to be hidden by those objects. That can be done by having a shape before the KC slide, timed for the rest of the project and always on top. This tweaking work flow was described in this article: Buttons on Question/Score slides?

    3. The use case described in this thread of the Captivate forums could be solved using the same system variable cpQuizInfoAnswerChoice in conditional actions, combined with a counter to track the number of attemptsl. You cannot leave a normal question slide to a content slide for remediation unless you follow the strict rules for remediation. If you want to limit the attempts to get a correct answer, remediation rules are broken. With a KC slide, the answers are reset every time, which allows a lot more freedom. However: if you need a real score for the slide, you'll have to use the workaround I described in this blog post: Report Custom Questions - part 2









      More is in a... hyperlink - Dropdown Menu

      Intro 

      In my last blog post I demonstrated how a hyperlink can overcome the limitation of states in Captivate, not allowing to add interactive objects to states.
      In older versions of Captivate the widget 'Go to Slide' was available: a dropdown menu with slide names, useful to jump to those slides. That widget has disappeared, is not replaced by a Learning interaction (compatible with HTML5). 
      Although this widget can be reproduced, using the Dropdown interaction, that solution has several drawbacks. The formatting of the interaction is limited (maximum font size is 14pt), and you would need a variable and a conditional advanced action with as many decisions as you have slides in the dropdown list.
      A much easier solution can be found in this article, using hyperlink events. For a consistent behavior of the dropdown effect,  I also used Micronavigation

      Hyperlink commands

      The list with commands, opening the dropdown list in the Hyperlink dialog box is much shorter than the list with simple actions under the Actions tab. 
      Of course the Web page is the first command, since that is what you expect to happen with a hyperlink. 
      These commands are not available for a hyperlink event:
      • Continue: since the hyperlink event has no way to prevent 'Continue Playing Project' as is the case for simple actions, this is not that important
      • Return to Quiz: is meant for remediation, normally to be triggered by a Next button
      • Play Audio/Stop Triggered Audio: can always be done using an advanced action
      • Execute Shared Action: which is really a pity :(
      • Pause: can always be done using an advanced action
      • Exit: can always be done using an advanced action
      • Toggle: can always be done using an advanced action
      • Show/Hide TOC: can always be done using an advanced action
      • Show/Hide Playbar: can always be done using an advanced action
      • Lock/Unlock TOC: can always be done using an advanced action
      • State commands: Go to Next State/Go to Previous State cannot be done by advanced action, Go to State is possible.

      For hyperlink events some commands have been put together in one dialog box, which is the case for the Slide command:


      Example

      Watch the movie: after the title slide the dropdown menu 'Go To' appears. When you click on that shape button, another shape wlll drop down. It has 6 hyperlinks, I left them underlined to emphasize their type.

      When clicking on a hyperlink you'll be navigated to another slide which has a Back button to return to the Menu slide. The content slides are about the same subject as the previous blog post about popups and Close button. Of course it would be possible to have multiple slides in each 'chapter', and have only selected slides in the dropdown list.


      Setup, variables and actions

      Objects on Dropdown menu slide

      The objects on the slide with the Dropdown menu are visible in this screenshot of its Timeline:

      User variable v_start

      The shape button SB_Menu (Caption 'Go To') is on top of the originally hidden Smart Shape SS_DropDown, and pauses at 2,6 secs, after all effects have been accomplishedTo mimick the behavior of a dropdown the Effect 'Stretch From Top' is applied to that shape. The effect starts at time 0 and has a duration of 1 sec. The arrow shape ArrowGoTo has some explanation and the effect EaseInFromLeft is applied. The second arrow ArrowDropDown has a similar effect, starting bit later, but that shape is not visible until the button SB_Menu is clicked.

      One user variable was created: v_start. It will be used to store the frame number of the first frame of the slide with the dropdown menu. I learned from experience that effects are much more consistent when you use micronavigation instead of applying the effect by an advanced action. The content of the variable will be used to send the playhead back to the first frame of the slide, to have the time-based effect being played.

      Events and Actions

      1. On Enter (Dropdown menu slide): standard advanced action EnterDropDown

      The back button on the content slides send the user to this DropDown slide, and the On Enter event of the slide is used to reset everything as it appeared first time: hiding the shape SS_DropDown, the arrow shape ArrowDropdown, and showing ArrowGoTo. Moreover the number of the first frame of this slide is stored in the variable v_start. This is the script:

      2. Success event of the shape button SB_Menu: standard advanced action DropAct

      This action will hide the arrow shape ArrowGoTo, show the shape SS_DropDown and its arrow ArrowDropdown and return the playhead to the first frame of the slide with the system variable cpGotoFrameAndResume which has 'Continue' built in. That way the effects for the dropdown menu and the arrow with explanation will appear as they are timed from the start of the slide.


      3. Hyperlink events

      Contrary to the situation explained in the previous blog post where the hyperlink event was used as Close button, in this case it doesn't matter that the playhead is always released when executing a command by a hyperlink because of the navigation to another slide. The command Slide was used, which opens the dialog box slide. Here the LInk is set to point to the correct content slide. In this screenshot you see the hyperlink setting for the navigation with the item 'Decor':

      More is in a...hyperlink - Close button

      Intro

      A while ago I published a list with events able to trigger an action, whether it is a simple, advanced or shared action. Most commonly used events are the slide events, Success/Failure events for interactive objects, Question slide and Quiz events, D&D events. Both the hybrid rollover slidelet events (now deprecated because it is not supported for HTML output) and the Hyperlinks are 'outsiders' but can be very useful as I want to point out with this article (Closing popup or lightbox) and the next article (creating a dropdown list with Jump to actions, equivalent of the former 'Goto Slide' widget). 

      Example movie

      Watch this two-slide example.

      1. The title slide has a text hyperlink 'Next' to proceed to the next slide.

      2. The second slide has six shape buttons, each opening a popup (it could have been a lightbox as well, work flow is identical). In the popup information you'll find  the text 'Close X' which is a hyperlink  to close the popup.


      States and Hyperlink

      It is not possible to add interactive objects to a custom state: button, click box, shape button, Text Entry Box, all are greyed out. However it is possible to have a hyperlink within a text container, that will be active for all states of that container. This can be a welcome workaround. It is however not possible to have different actions for the hyperlinks in different states. Since the goal here was to close the popup, I created a shape as text container with 7 states as you can see in this screenshot:

      The 'Normal', or default state looks invisible: there is no text in the text container with the exception of the text hyperlink 'Close X'. This was achieved by giving the text hyperlink the color of the background, the text container a Fill with Alpha=0% and no stroke. The other states have a Fill (Alpha=100%), they have information text with a visible color (also for the Text Hyperlink) and an image.

      Actions

      1. Next Hyperlink - Title Slide

      The commands for Hyperlinks look a little bit different than the dropdown list in the Actions tab. For hyperlinks commands 'Go to Next Slide', 'Go to Previous Slide' and 'Jump to Slide' are in one dialog box:

      2. Shape buttons to open popup - Second slide 'ActionProcess'

      Look at the timeline of the second slide: all shape buttons (name starts with SB_) pause the slide at the same time, 15,5 secs. When triggering an action, the playhead should not be released, to allow clicking as many times as wanted, in any sequence on those shape buttons. The number of attempts is left at Infinite.

      The only command to be triggered is to change the state from the default 'Normal' state to one of the custom states. The choice is yours: 

      • you can use a simple action (be sure to uncheck the option 'Continue Playing the Project'
      • you can use a one-line advanced action, create duplicates for each button; playhead will not be released
      • you can use a one-line shared action with two parameters (text container and state).

      3. "Close X" hyperlink - in text container second slide

      Beware: there is NO option to prevent 'Continue Playing the Project' when you assign a command to a hyperlink. That means that you cannot use a simple action, but have to use a standard advanced in this case.It is again the action 'Change state...to Normal.' 

      Another difference for hyperlink events: the command Excecute Shared Action is missing. That is too bad, because if it had been available, one shared action would have been able to achieve both showing popup (with the 6 shape buttons) and close the popup (with the Hyperlink).

      Conclusion

      Hyperlink makes it possible to have an action in a state for an object, although it has to be the same action for each state of the object. You learned about the differences between hyperlink events and other events to trigger an action:

      • There is no way to prevent the playhead from being released if you trigger a simple action; use a standard advanced action.
      • You cannot trigger a shared action with a hyperlink.
      • Some commands have a different look: example is the Slide command (see screenhot in this article).





      Navigation Help Slides

      Intro

      In this thread on the Captivate forums, a user asked how to configure navigation in a course with content slides and two help slides. The Help slides should be accessible from each content slide using a button. There is navigation possible between the two Help slides, and the user should be able to return to the content slide from where he started, from each of the Help slides.

      Although there is a system variable cpInfoLastVisitedSlide, this cannot be used for this use case, because the user can navigate between the two Help slides. I explained shortly a possible work flow with a user variable and a couple of standard actions in the thread. Since the user told that he is a newbie concerning variables and advanced actions, I promised to write out a more detailed tutorial. This is certainly not a complicated use case! If you are an 'expert' in advanced actions, this is not a post to your taste.

      Example project

      This project has a Title slide, 3 Content slides and ends with two Help Slides.

      Instructions are in the movie, try out the buttons.  You don't have a Back button on the content slides, but you can always refresh the browser to restart playing. Click on the Title slide to start playing:

      Interactive objects/events

      • Slide 1 (Title) which uses the master slide 'Title', has a click box covering up the slide. It has the default action
         'Go to Next Slide'. 

      • Master slide 'Content' has the Help button (with the question mark): it is a shape button (no states at this moment in CP9) which triggers a standard advanced action 'ToHelp'. This master slide is used for the content slides.

      • Slide 2 (Content1): has a shape button for Next which pauses the slide at 2.5secs. This shape button is timed for the rest of the project, so that it will show up in all following content slides. A shape button on the master slide is excluded because this Next button has to be hidden on the last content slide. You cannot show/hide an object on the master slide, because it has no ID, no name. This Next button has been labeled 'SB_Next'. For this small example, it can look easier to have a Next button on each slide where it is needed, but if you have a lot of content slides, this approach will save on time and file size.

      • Slides 2,3 (content slides): to be sure that the Next button is visible, even when coming back from the Help slides, the On Enter event of these slides is used for the simple action 'Show SB_Next'. 

      • Slide 4 (last content slide): the Next button has to disappear, which is done with an On Enter action 'Hide SB_Next'.

      • Master slide 'Help': this slide has no interactive object, is used by the Help slides

      • Slide 5 (Help slide 1): has another instance of the Help button (SB_Next_Help) with the action  'Go to Next Slide'.
        This slide has a special shape button 'SB_Back1' to allow going back to the content slide. This button triggers a standard action 'BackToSlide'. This shape button has a bubble added in the Rollover state, which functions as Tooltip.
        The On Enter action for this slide is used to hide the button 'SB_Next' (from slide 2), same way as on the last content slide. Why? That button will already been hidden if the user comes from the last content slide, but not when he is getting here from one of the previous content slides.
      • Slide 6 (Help slide 2): has no need for a Next button, but needs a pausing Back button (to navigate back to the first Help slide) with the action 'Go to Previous Slide'. It has another instance of that special button ''SB_Back2'. I didn't opt to time that button for the rest of the project, because there are only two Help slides and having to hide/show them would have been more work than using two instances.


      Variables and advanced actions

      Variables

      Two system variables are used in this example:

      1. cpInfoCurrentSlide: gives the slide number of the current slide. The index starts with 1, which means that for slide 1 this variable is 1.

      2. cpCmndGotoSlide: will be used to navigate the user back to the content slide. Beware: for this variable the index starts with 0. That means that slide 1 has to be indicated as 0, slide 2 as 1.

      One user variable has to be created: v_last.  This variable will be used to store the value of cpInfoCurrentSlide when the user leaves the content slide to go to the Help slides. You do not have to define a default value for that user variable.

      Standard actions

      ToHelp triggered by the shape button on the master slide 'Content'

      In the first statement, the slide number of the current slide is stored in the user variable v_last. Then the user is navigated to the first Help slide (slide 5), and I added Continue which is not always necessary, depends on the set up of the slides.

      BackToSlide triggered by the buttons SB_Back1 and SB_Back2 on the Help slides

      For the first statement an Expression was needed, because of the different index for the system variables cpInfoCurrentSlide and cpCmndGotoSlide. Example: if the user came to the Help slides from the third content slide, the variables would be:

      • cpInfoCurrentSlide = 4   because the third content slide is slide 4
      • v_last = 4   because the action ToHelp stored the value of the previous system variable in this user variable
      • cpCmndGotoSlide = 3  because this is the indicator for slide 4, since the index starts with 0; for that reason I needed to subtract 1 from the value stored in v_last

      Overview

      In the Advanced interaction you'll find a great overview of all the actions, events of the slides. Too bad: you'll not see the shape button on the master slide, nor its action.



      What's in a Theme - a Template?

      Intro

      When trying to help Captivate users, I often bump onto confusion between themes and templates. Same confusion can be found in many training schedules and books. There has been a lot of evolution in Captivate since versions, slowly but steadily. Those are not the big hype features that were emphasized everywhere. You know that I often appreciate more the hidden gems, which help any developer to save time and frustration. This article will explain how I am creating custom Themes, and also why I am using Templates a lot less than in earlier versions of Captivate (before version 6). 

      Theme versus Template

      The goal of a Captivate theme is to keep a consistent design throughout your project. It can be 'applied' to any project, even after creation. Although most themes will be created for a certain resolution, when designed carefully it is not necessary to apply it only to projects with the same resolution. When you apply a well designed theme to a project, the 'look' will change immediately and you'll not have to edit the design a lot afterwards. A theme is saved in a file with extension cptm. You can have themes for a normal (blank)  or for a responsive theme. Captivate 8 and 9 both have several themes in the box, most of them being responsive themes. They show up as thumbnails when you click on the Big Button 'Themes'. Those Captivate themes are stored in the Public Documents, under the subfolder 'Layouts' of the 'eLearning Assets', at the same level as the Theme Colors palettes.

      You can store your custom themes in this folder or wherever you want. The Thumbnails view (under Themes button) has a Browse button which allows you to navigate to any folder. I will mostly save a custom theme in the project folder when working for a client. But you see in the screenshot that I have a custom theme (CP8Theme) in the default folder. That folder is a copy of the original Layouts folder in the Gallery under the Captivate installation folder. If you ever have messed up one of the themes in the Public documents, you can restore it from that original folder. If you delete the whole Layouts folder in the Public documents, while Captivate is closed, on restarting the application a new copy of the original folder will be installed in the Public documents (see also my article: Keep your Customisation).

      To save a theme you need to use the Themes menu, not the big button 'Themes'. Use the option 'Save Theme as' if you started from an existing Captivate theme.

      template in Captivate has to be chosen before you create a project. You have to use the option File, New Project, Project from Template. This means that a template needs to have exact the same resolution as you want for your project. As for a theme, there is a difference between a template for a responsive, and one for a normal (blank) project. A template file has the extension cptl. When you create a project from a template, it will get the normal extension cptx. You can edit a template, and that will the only reason why you would save it again as a cptl. It is also possible to create a template from a normal cptx-file with the option 'File, Save As'. There is no 'reserved' folder for templates, Captivate has no included 'templates'. The term is often wrongly used: most Captivate 'templates' that you can find on the web, are just cptx-projects, not templates in the Captivate language. 

      When a template is saved, the used theme, preferences etc are saved with the template. However you can always apply another theme later on. 

      Components of a Theme

      It is rather important to know what exactly will be saved in a custom theme. . Remember: if you ever want to use that theme in a responsive project, be sure to create the theme in such a project. I will list up the components in the logical sequence to be followed when editing or creating a custom theme :

      1. Theme colors palette

      The start point for design consistency in a project is guaranteed by the consequent use of a Theme, which starts with the creation of a palette with 10 colors that will be used for object styles, master slides, skin, and within learning interactions. I have written some articles about the creation of a Theme colors palette:  Colorful 2015  and   Theme Colors. Beware: it is no longer possible to save an ASE file with Adobe Color (as described in the first article): that means that the Swatch Manager is not very useful anymore. My recommendation is to ignore the Swatch Manager and focus on the Theme Colors Palette, which is available in any Color Dialog box.
      When saving a theme (using the Themes menu), the used theme colors palette will be saved with the same name. In the mentioned articles you'll find a way to save a theme colors palette independently from a theme as well.

      2. Object Styles - Object Style Manager

      Most design-oriented applications have a work flow for creation and use of styles (Word, InDesign, Framemaker). All experts and good trainers will tell you to use styles, and to avoid overridden styles. Captivate is no exception in that world: it has a great Object Style Manager to be found under the Edit menu (or by using the the shortcut key SHIFT-F7). Object styles can be saved individually, have the extension cps, only useful in case you want to export/import such an individual style. In most use cases you'll save all the object styles necessary for a project in a custom theme, no need to export/import styles anymore as was the case before themes appeared in Captivate.

      If you are working on a responsive theme: first define the breakpoint views you want in the theme, before launching the Object Style Manager. In the styles you will be able to define the look for the breakpoints that are available in the project.
      Make some decisions about which objects you'll be using in the theme as well. Just an example: if you prefer using shapes instead of captions for feedback messages, capture messages etc you do not need to change all the caption styles. A similar situation exists for normal buttons vs shape buttons. 

      Some tips:

      • Use only colors from the palette defined in Step 1.
      • Do not hesitate to change one of the (grayed out) styles between brackets [Default...]. You can overwrite those styles, since you are working on a custom theme. Those are the styles that will be applied immediately when you insert an object. Another approach is to clone a style and set it as Default style. The problem is that you'll end up with tons of custom styles, which makes selecting the proper style in dropdown lists not easier. That is why I always change existing default styles. 
      • For buttons: the InBuilt states Rollover and Down are available together with Normal  for change in the OSM, do not forget to check/edit those states. This is valid for Text Buttons, Image Buttons and Transparent buttons.
      • For shapes: you cannot define a default style for text and another default style for buttons (too bad), but any shape style that you define should include InBuilt states (Normal, Rollover, Down) because any shape can be converted to a button.
      • Quizzing objects are in a separate category. Quiz buttons cannot be replaced by shape buttons (yet), but you can define an individual object style for each quiz button. Feedback captions can be replaced by shapes.
        Feedback captions and shapes not always use theme colors in the default Themes included with Captivate. Be careful: if you want to have consistent colors in your project, you'll need to check those styles.
      • It is not possible to define real Effects in an Object style. Only the 'old' Transitions can be defined.

      3. Master slides

      The Object styles defined in step 2 - at least the default styles - will immediately be applied to the objects on the Master slides.  If it doesn't look well, you can edit the object style and redefine it, while working on the objects in the Master slides (It can be done with the Properties panel). Be sure to make all added objects responsive (check all the breakpoint views) on the master slides. 
      Each theme needs at least 6 master slides (Blank Master slide, 4 Quiz master slides and a Score master slides), besides the main master slide, but you can create as many master slides as you want. You can add different type of placeholders on master slides, but be careful with the 5 master slides for Quiz: the embedded objects (without individual timeline) have a lot of functionality built in!

      Some tips

      • Use the new Rulers to assist you for designing master slides: Guides Rule!
      • If you ever will use the theme for software simulations: keep a real Blank master slide, because it is used both for software simulations and for PPT import. You don't want those slides covered up with other stuff.
      • Remember that shape buttons can be used on master slides, they can have actions. This can be a big time saver for custom buttons like the ones from these posts: Toggle buttons   and Replay slide button
      • Do not forget to label the master slides

      4. Skin

      Use the theme colors palette to customize the skin: playbar, borders and Table of Contents. You can even insert a logo on the TOC and eventually custom expand/collapse icons.

      5. Recording defaults

      This is only necessary for themes (also) to be used for software simulations. Although you have set up Default object styles in step 2, you still have to indicate which styles have to be used when capturing simulations. Just one example:
      • Create a default style for the highlight box in step 2: with a big bright red stroke and outer fill. Set it to display as default highlight box style.
      • Open Preferences, Recording, Defaults and check the default Highlight box style: it will still be set at the original default style in the original theme. Bit annoying, but it also allows you to save two different sets of object styles within a theme: one for normal slides, and one for software capture slides.

      Do not forget to save the theme (using the Themes menu)!


      Do you need a Template?

      I ask this question often everywhere: with all the design power and flexibility of a custom theme, why would you still need a template? Before themes existed, I used templates to be able to reuse variables and advanced actions (see: Template for reusing script). With the present version of Captivate, we have shared actions which I store in a separate project to be used as external library in any project. Variables, used in those shared actions, get copied automatically when the shared action is dragged into the Library of the new project.  When you copy an object, that triggers an advanced action, the action will be copied along when pasted into another project. 

      I used templates to have footnotes on each slide, pointing to the name of the project, showing the slide number and the total amont of slides. But now you can put them on master slides, using system variables or user variables that can be populated later on. 

      When would I use a template in Captivate 9? For courses that have several modules, where you want to have some slides in common, maybe have custom navigation/control buttons that cannot be put on the master slide, but need to be timed for the rest of the project. I would rarely use it to have placeholder slides, unless some team members need to have that assistance. Lot of placeholders have fixed object size, which can just be annoying. If you do have a lot of advanced actions (maybe variables), that cannot be replaced by shared actions, identical entries in Project Info, variables not included in shared actions: those would be situations where I would think about creating a template.


      Conclusion

      I hope this post did clarify the difference between a theme and a template. If you ever see somewhere my question 'Do you need a template', this will no longer be a mystery, right?