Playing a dice game, using While loop

Intro

In a previous blog post I explained the ins and outs of the new Advanced Actions dialog box. If you feel confused about my terminology in this more practical blog post, please read that first article. A decision block of type 'While' is totally new in version 2017. It has some similarities with the Conditional decision block (IF, Then, Else) but offers new possibilities as you'll see in this simple game.  The While loop can be used to create a looping sequence of commands. That loop can be infinite, or limited in number of executions, based on one condition or a combination of conditions.  Mohana Das from the Adobe team published recently this article demonstrating the infinite While loop. Please read that article, for users familiar with advanced actions the used condition 'IF 1 is equal to 1' will be easily recognized, since this was the condition needed to create a mimicked standard action decision in older versions. It means that the sequence of commands will continue to be done, since that condition always results in True. In a future blog post, I will offer some tips about breaking such an infinite loop.

The present article  will focus on using the While loop, based on a condition which results in having the commands sequence repeated a limited number of times. It is a very simple game, every object was created within Captivate. One exception: the color shift in the Characters was achieved using roundtripping with Photoshop.

It is not a responsive project, to avoid a too long article (should have to explain setup in fluid boxes with logic of the variables and advanced actions). Maybe in a next article?

Play first!

Download this published folder (HTML5). Sorry, cannot embed it in this post (allows only SWF's and it is not playing well in Flash output). Unzip the folder, launch the index.html file to start playing.  It is a small game: when you click on the Play button, a dice will be rolled and you'll see one of the faces of the dice, indicating a (random) number. The girl is supposed to climb the stairs, she will go up as many steps as the number you won. The goal is to reach the top. When the girl reaches the top of the stairs, clicking on the Play button will result in another scenario, and a Reset button will appear. 
On entering the Game slide you'll see two looping animations, with added randomness and a possibility to stop the the looping. You'll see this action in Preview, but I will not provide details. 

Slide setup - preparations

Have a look at the timeline of the Game slide:

I created the stairs as a freeform shape. That was pretty easy with Guides (see Guides Rule) and Snapping to guides. Of course a better approach would be to create that shape in Illustrator with export to SVG, but it is always a challenge to use only the available Captivate tools.

Dice: this is a multistate object, the normal state is a square shape, for each of the sides circular shapes with a gradient fill are added. Look at  the Object state panel for this object. 

The 3D animated dice has also been created as a group from a lot of shapes.

Effects - Characters
Two custom motion effects were created for the climbing girl. Default effects couldn't be used in the advanced action, because the path had to be edited. Here are two screenshots of the custom effects: Impatience (before starting game) and StepUp  (during play).


The original Character (climbing the stairs) will disappear with a default Exit effect 'Zoom out'. when the top is reached.
The Sticky image that replaces the original one climbing the stairs, will get a default Entrance effect 'Drop in and Bounce'. The text panel in that image is covered with a click box, functioning as a Reset button.
Play button: is a simple transparent button. 

Variables (for game only - more are needed for the start animation)

I created 5 user variables:  
  • v_dice: starts with an empty value, will get a random number between 1 and 6 (using JavaScript, see Playing with Numbers)
  • v_counter: starts with a value=0 and will be used in the condition for the While loop to fix the number of repetitions to match the random number in v_dice
  • v_stair: is a second counter, that will be used to keep track of the total number of steps done. It is needed to know when top is reached. The staircase has 16 steps. It also starts with a value=0.
  • v_null: empty variable (see...) used to reset the v_dice variable after each use of the Play button
  • v_roll: starts with a value=0, will track the number of dice rolls needed to complete the steps; that number appears after the top of the stairs is reached. It is a third counter.

For the EnterGame action a 6th variable v_anim is used.


Events and actions

The three used events for the game are:
  1. Success event of the Play button, it will trigger an advanced action PlayAct
  2. Success event of the Click box (Reset) it will trigger the advanced action ResetAct
  3. On Enter event of the Game slide, which triggers the animations: EnterGame

ResetAct triggered by Click Box

I couldn't use Scenario 2 of the Replay Slide blog post.  There are a couple of reasons, one being that the Game slide was originally the only slide. It is never a good idea to start a project with a complicated On Enter action (as is necessary for the looping animation). The workaround is to have a short dummy slide (mine is 0,2 secs) before the game slide and use this Reset action:

Due to the command 'Continue', the On Enter action of the game slide (second slide) is always executed. At this moment for HTML5 output this is not the case when using micronavigation (as in the blog post about Replay slide).

PlayAct triggered by Play Button

The PlayAct has 3 decision blocks, one of each type: the first decision is a standard action (sequence of commands), the second is a While loop based on a condition and the last decision is an IF condition, in previous versions labeled as a conditional action. Here is the Preview:

Decision 1 'Random'  (standard action)

With this sequence, the 3D dice (animated On Enter) will be hidden and replaced by the static dice in its Normal state.
The one line JavaScript will generate a random number between 1 and 6
  window.cpAPIInterface.setVariableValue("v_dice",Math.floor(Math.random()*(7-1))+1);
I explained the construction of this line in detail in this blog post

The variable v_counter is reset to 0. It is important that this is done before the While loop in the third decision.

Decision 2 'EndCheck' (conditional IF action)

This decision checks if the character has reached the top by comparing the user variable v_stair with the total number of steps (16). Contrary to v_counter, v_stair is only reset to 0 when re-entering the Game slide (using ResetAct).

The Play button is hidden (to avoid disturbing the rest of the sequence) and the static multistate dice.

The original character disappears, is replaced by a group (character + click box + text balloon) with some default effects.

If the condition is not fulfilled (ELSE), which means the top has not yet been reached, the variable v_roll is incremented by 1. 

Decision 3 'ShowNumber' (While loop)

The condition used to limit the execution of the commands in this loop, is a combination of these two (AND):
  1. The number of steps taken by the image cannot go beyond the random number stored in v_dice (see first decision) and
  2. The total number of steps done, stored in v_stair, cannot be greater than 16, number of steps in this staircase.

The commands to be done while that AND combination results in True are:

  • Switching the static dice to the next state (see image of the Object states for this static dice above)
  • Character gets on the next step (using custom effect StepUp, but that name has been changed by Captivate to the name of the effect it was based on 'RightToLeft'.
  • The variable v_counter is incremented, it is this variable which is used in the first condition
  • The variable v_stair is incremented; that variable is not reset by clicking on the Play button, is necessary to check if the top is reached (decision 2 'EndCheck').

EnterGame triggered by the On Enter event

Here is the Preview, let me know if you need more details

Questions?

Fire away. Creating this game was a lot of fun, 'while' exploring 'while' loops. Let your creative juices surge!

Custom Failure Messages/Attempts - Drag&Drop

Intro

This article is written as an answer to a question on the forums: Drag&Drop with Advanced Action

For quiz slides you have the option to show more than one Failure message, linked to the attempts. That functionality is not available for Drag&Drop slides. As you can read in the thread, another user posted a solution using the Object actions which are executed after each drag action.  The solution I describe here is more similar to what happens on other quiz slides: the messages will appear after clicking the Submit button. This work flow is only valid for Knowledge Check slides, which was the goal of the user on the forum. As you can read in one of my former blog posts, a D&D slide which is not scored, is reset automatically when leaving the slide. This functionality is used here. You'll also see that I used the InBuilt states for the drop target, which i described in this post.

Example 

Watch this interactive movie to see the result. It is Flash-based, do not watch from a mobile device, please.

Setup D&D Slide

The Drag&Drop slide's Timeline looks like this screenshot:

From Bottom to Top you find these object timelines:

  • DragOne, DragTwo and DragThree which are the 3 Drag sources. Those objects have only one extra InBuilt state: the transparent DragOver State. D&D is set up so that the drag sources disappear behind the drop target.

  • DropContainer which is the unique Drop Target. It has 3 states as you see in this State panel

  • Text Tx_Question which has the Question

  •  Gr_Feedback with several objects; the whole group is hidden in Output
    • I_Fail and I_Success are the two sticky images
    • Shape button SB_Continue with a pausing point at 2 secs, which is later than the (default) pause of the D&D (1,5secs)
    • FB_One, FB_Two and FB_Three are the failure feedback messages for the 3 possible failures. The first two have an inserted variable v_attempt.

You don't see a Success feedback on the timeline, because I kept the default Success message for the D&D slide (unchecked the Failure message)? That Success message has just be edited (freeform shape).

The D&D panel, tab Actions has been set up as visible in this screenshot. Although the user provides 3 attempts, you see that I set the attempts to 1 in this panel:

Variable, Events and Actions

I used only one variable: v_attempt, with a starting value of 3. If you want to have more attempts than 3, just change that starting value. You can see its value in the example movie, center of the bottom bar. That variable is also inserted in the first two Failure messages.

SubmitAct, triggered by the Failure event of the D&D (see panel above)

This conditional action has 4 decisions, can easily be edited to have more than 3 attempts

  1. Decision 'Always' is a mimicked standard action, decrements the value of v_attempt by 1
  2. Decision 'First' checks if v_attempt is equal to 2, which means the first attempt (because the original value has been decremented in the first decision). If that is the case 3 objects out of the feedback group are shown: the first feedback message (FB_One), the image I_Fail and the continue button SB_Continue
  3. Decision 'Second' checks if v_attempt is equal to 1, which means the second attempt. The actions are identical to 'First', with the exception of the feedback message (now FB_Two)
  4. Decision 'Third' checks if v_attempt is equal to 0, which means the third and last attempt. It has similar actions to the previous two decisions. 

Here is a screenshot of the complete action:

SuccessAct, triggered by the Success event of the D&D (see panel above)

This standard action will set the variable v_attempt to 0 (necessary to have the last action ContAct executed correctly), shows the image I_Success and the Continue button. The success message appears automatically, since it is de original embedded message.


ContAct, triggered by the Success event of the Continue button

Here is the 'trick'! After each attempt I want the D&D slide to reset automatically. This is only possible when you leave and re-enter the slide. To achieve this, I used a similar (but easier) approach as explained in the blog post ReplaySlide. I inserted a dummy slide before the D&D slide, with a very short duration (0,1secs). Have a look at the script triggered by the Continue button, which is a one-decision conditional action:

When there are attempts left (v_attempt > 0), these commands are executed:

  • Expression cpCmndGotoSlide = cpInfoCurrentSlide - 2
    The first system variable cpCmndGotoSlide has an index starting with 0, whereas cpInfoCurrentSlide starts with 1. That is the reason why 2 is subtracted. In human language this command means Go to Previous Slide.You can replace it by 'Go to Previous slide' as well, but I like to repeat explanations like this. Sorry!
    Alternative: Go to Previous Slide


  • Continue: is necessary so that the playhead is released. It will quickly speed over that dummy slide (0,1 sec) and you'll see the D&D slide almost immediately, freshly reset because it was re-entered and not scored.

When no attempts are left the user is navigated to the last 'End' slide.

Tips

If you want to allow the same scenario for this slide, when the user revisits the slide, you have to reset the variable v_attempt to its original value, which can be done with the ELSE part of the action ContAct. It will have 2 commands in that scenario:

  • Assign v_attempt with 3
  • Go to Next Slide

To change the number of attempts, for example from 3 to 4:

  • Change the default value of v_attempt to the new literal
  • Create an extra Feedback message FB_Four and include it in Gr_Feedback (select both new message and group, followed by CTRL-G)
  • in SubmitAct
    • Duplicate the last decision 'Three', and label it 'Four'
    • Edit 'Four', replace 'FB_Three' by 'FB_Four'
    • Edit 'Three': replace the literal '0' in the condition by '1'
    • Edit 'Two': replace the literal '1' in the condition by '2'
    • Edit 'One': replace the literal '2' in the condition by '3'

No other changes are necessary.


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 7 decisions.

The first decision 'Always' will calculate the sum. It doesn't matter that it always sums four terms, since the lacking terms are empty.

The second 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 :)











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.



Drag&Drop in 2016 with Captivate 9

Update: an updated version (with a new workflow) and more details about Resetting a slide is published recently under this link

Intro

As promised in a previous article, I explored the enhancements to Drag&Drop in Captivate 9, more specifically added InBuilt States. In previous versions only buttons and shape buttons had those states. Captivate 9 added multistates to all objects and provided InBuilt states for all objects in a Drag&Drop slide: drag sources and drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for added custom states.

Example Movie

Watch this movie, I left the default play bar active to allow you free navigation. You'll find two Drag&Drop slides with different use cases on slides 4 and 5:
  1. The first use case has only two drag sources, one of them being correct, the other incorrect. There is one drop target, the cup. Watch the different InBuilt states both for the two drag sources which have identical states and for the drop target. All states are introduced on slides 2-3. All objects have also one custom state. Because of my manipulation of the states on Submit, the default Reset button will not return you to a fresh start if you have used the Submit button. You'll have to use the custom 'My Reset' button in that case. 

  2. In the second use case you'll see 7 drag sources and 2 target objects: the box and the trashcan. You are supposed to drag all sources to the appropriate target. You'll find the 'My Reset' button here as well.

Drag Sources: states

The Drag Sources have 5 InBuilt States (see slide 2 in movie). Common to all those states and to the custom states is that you cannot add any object in a state. All the options on the Big Button Bar (horizontal toolbar) are dimmed with the exception of the Record button (for audio): no Text objects, no Shapes, no Higlight boxes (under Objects), no Media can be added to any state. Here is a short description of each state, of its functionality and limitations. As a visual reminder have a look at the Gallery, which shows those states for the first use case
  1. Normal state (InBuilt): is the Default state. This state will appear before dragging, and will re-appear if a drag source is sent back to its original position as well (for an incorrect object). The size of this state is important, because several states are locked to the same size. You can rotate the Normal state (watch the rotate handle at the top), which will also lock some of the states to the same rotation.

  2. Dragover state (InBuilt): this state appears when the drag source is over a drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state and become permanent. It is totally locked (watch the lock symbol bottom right): will keep the same size as the Normal state, cannot be rotated. Be careful: if you allow all drag sources, both correct and incorrect, to be dropped on the target, the DropAccept state will also appear for correct and incorrect objects! If you only allow the correct drag sources to be dropped, this state will only appear for them.
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. When the incorrect object is sent back to its original position, the DropReject state is replaced by the Normal state. Like the DropAccept state this state is totally locked: no resizing, no rotation possible
  5. DragStart state (InBuilt): this state appears when you start the dragging movement until you are over a drop target, where it will be replaced by the DragOver state. The state is not locked, it can be resized and rotated.
  6. Custom state: this state is also fully locked to the rotation and size of the Normal state. As written before, you cannot even add objects in this state (which is possible for buttons). That is a limitation, in many cases you'll want to revert to the old method of hide/show objects. For this example it seems as if I added the image of the wings, but I'm just cheating: for all states I used smart shapes. That way I was able to change the form of the shape (Replace shape), to change its fill and stroke. For the InBuilt states I used gradients or solid colors as Fill, for this custom state I used Image Fill. Since a shape can also be used as Text container, it was possible to change the labels of the states as well. If you are not yet member of the Smartshape fan-club, maybe... :)


Drop Targets: states

The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

  1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.

  2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
  3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to 'accept' or 'reject' the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
  5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
  7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.  

Reset - My Reset

The default Reset button has been added to both use cases (slide 4-5). This button can only be used to reset before submitting the result. I added an extra button 'My Reset', which is really the Replay2 button described in a previous blog post. If a D&D slide is not included in a quiz, has not score it will be reset when you re-enter the slide. This is what I'm doing, getting back to the last frame of the previous slide, then continue. That may result in some flickering, depending on the bandwidth, but the D&D will be totally reset. The mentioned blog post explains the need for a user variable v_enter to store the first frame number of each slide with an On Enter action. 

Setup Use Case 1

Have a look at the Timeline of this slide:

There is only one correct answer: DragSource1 to Target1. There is an object action for this correct answer, to change the state of the other drag source to the Custom state, as you can see here:

Setup is almost the default set up: Snap behavior will change the size and the opacity of the dropped object to 70% (size) and 80% (Opacity), and snaps to the center (Anchor). There is one attempt allowed, and the actions on Success and Failure are visible here:

The advanced action DDSuccess4 has three statements:

Due to hiding the drag sources with this Success event, the On Enter action of the slide has to 'reset' the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:


Setup Use Case 2

Have a look at the Timeline of this slide:

Effects are time-based, starting after the pausing point of the Drag&Drop (1.5secs which is default). Back and Next buttons have no pausing point in this slide. When the playhead is released by the Success event, it has to continue seamlessly to the end slide 6.

For the correct answer all Christmas balls have to be dropped either in the box (2, 0, 1 and 6) or in the trashcan (3, 4 and 5). There are no object actions in this use case. 

For setup of both drop targets size and opacity of the drag sources will change to 0% to have them disappear in the target. You can see that the actions on Success and Failure are very simple:

Even the on Enter action of this slide can be a real 'simple' action to have the correct frame number assigned to the user variable v_enter:






Custom Hotspot questions in Captivate 8

Update

If you are using CP2019, version 11.5 where you can use SVGs as buttons, with possible limitation of the clickable area to the image itself instead of the bounding box, have a look at this updated version of a custom hotspot question:

SVGs for Hotspot question

Intro

A couple of weeks ago I presented a session 'Enhance Effectiveness of Quizzes in Captivate 8' at DevLearn 2014. One of the subjects that I barely was able to tackle due to lack of time, is the creation of custom questions. You'll find several blog posts where I created custom questions using standard objects, widgets and learning interactions. On the forums I often suggest to replace the default hotspot questions by custom questions. And finally find the time to explain why I recommend this. The success of the Quiz blog posts and of this BYOL session at DevLearn make me wondering if an e-book with focus on Quizzing would be welcomed by the community? Looking for comments on that plan.

Why?

The default hotspot question slide has some limitations. Here are the ones I find most frustrating:
  • hotspots are always rectangular
  • it is not possible to have partial scoring
  • you cannot add shape buttons to that type of slide, because any space outside of the correct hotspots causes failure
Thanks to my favourite Captivate object, the shape button, it is pretty easy to create a scored custom hotspot question with
  • freeform hotspots
  • partial scoring, that can be reported to a LMS by SCORM
  • allowing to add shape buttons for more functionality

Why not?

What are the disadvantages of a custom hotspot question slide compared with the default hotspot question slide;
  • custom question slides always take more time (although shared actions can help), especially if you want to add all question functionality (Clear, Retake etc...)
  • if you like the animations that appear on clicked hotspots, they are not added automatically in custom hotspots, there is of course a way of showing the clicked hotspots
  • although the total score will be correct when using partial scoring, some quizzing system vars will consider each correct hotspot as being a separate question; you have to be careful when using a default score slide, in which you show number of questions/correct questions
  • it is not possible to use custom questions in a question pool

Example

Watch this movie. After the intro slide you'll see two Hotspot questions. Both questions have partial scoring. The fourth slide is the default score slide, to show how each correct hotspot is considered to be a question as is the case with all scored objects. To remediate, I added a custom score slide as last slide (use Continue button on the 4th slide). I didn't create a Reset or Retake situation. If you want to replay, refresh the browser window. Good luck!

Concept Hotspot Question - version 1

This question slide has one big shape button behind four shape buttons that indicate the form of the four countries to be clicked. The big shape button when clicked, will track a wrong click. I used 3 variables for this question:
  • v_attempt: number allowed attempts; will be reused for second question, number is assigned by On Enter action
  • v_counter: counts the clicks, to be compared with v_attempt;  will be reused for second question, reset to 0 by On Enter action
  • v_wrong: counts the mistakes, is not reset because it will continue to increment on second question, is used on custom score slide.
Here you see the timeline of this slide. The correct hotspots, shape buttons, have been duplicated to create the covers that are normal shapes with a texture fill. 


For the incorrect hotspot (shape button) I created a conditional advanced action with two decisions:
  1. "Always" is a mimicked standard action, self-explanatory. Because this hotspot can be clicked multiple times, the last statement is necessary to place the playhead one frame back, in the active portion of the shape button.


  2. "ShowNext" checks if the number of allowed attempts is reached, and if that is the case will hide all the hotspots and shows the Next button.

For the correct hotspots, that allow only one click, I created a shared action with two decisions

  1. "Always" is a mimicked standard action, self-explanatory. The parameters are highlighted.


  2. "Checker" is similar to the second decision for the incorrect hotspot. Parameters are highlighted.

The On Enter action for this slide is a standard shared action that resets the value of v_counter and v_wrong to 0 and assigns a value to v_attempt.


Concept Hotspot Question - version 2

I will not explain this question as extensively as version 1 (maybe in a planned book about Quizzes). It has multiple incorrect hotspots, and uses an extra variable v_scorehot. Try to figure it out. As a tip, this was my timeline:

Comments?

As always I welcome comments about this example. As mentioned in the Intro, I would also like to know if you'd appreciate a book explaining the design, the tweaking possibilities and custom questions for Captivate quizzing.

Dare to Share - part 2

Intro

In the first part of this series about Shared Actions (in Captivate 7) I explained how you can create a shared action. The examples only had the statements Show and Hide. At the end you could see a published CP-movie, in which shared actions were applied several times. This second part will explain the first way of using shared actions. As a surplus you'll get an explanation of the use case that you watched in the first part.

'Execute Shared Action'

The first way of using a shared action is with the command Execute Shared Action, that can be triggered by all the events explained in a previous post: Events and (advanced) Actions. You'll find this new command in the dropdown list, just below its sibling 'Execute Advanced Action'. 


The only place, where you will not find this command, is in the dropdown list for Hyperlinks (Format accordion for Text). However it is available in the dropdown lists for Actions in the Drag&Drop interaction. Look out for an example of shared actions in D&D later on in this series. 

When you have chosen a shared action, next to its name you'll not find the browser button (as for Advanced actions), but a Parameter button. When you click that button, you'll see a dialog box in which you can choose the parameters to apply. In this screenshot you'll see the highlighted Parameter button. This shared action is applied to one of the click boxes of the example in the first part of this series (see later: Use case). Two parameters are already assigned. To find the third one (a new click box) I clicked twice in the field and typed 'peer' (first characters "pe" would have be sufficient as well) to filter the list to those objects/groups that have the character sequence 'peer'. Consistent labeling is good practice, as I told multiple times! 


I could have interchanged the items for second and third parameter, it doesn't matter because both will be made visible. You are totally free which items to use as parameters. As an illustration: here is the same shared action for the last click box: you'll see that the second item to show is not a click box, but a text container:

Use Case - Description

Slide objects

Here is the timeline of this unique slide, it shows from bottom up:
  • Title
  • Image (circle)
  • Group with 4 click boxes, over the circle image; only the bottom one, CB_Social, is 'Visible in output', the others are invisible
  • Gr_Bubble, group with 4 shape buttons that are also text containers, all invisible at the start
  • Tx_Instruction, set to invisible, that will appear when the last click box is clicked, telling to click on one of the bubbles
  • Gr_HLCover, set to invisible, grouping the gray transparent shape covering the slide and a shape button to close the Lightbox
  • Gr_HLBox: set to invisible, group with 4 light boxes that are (again) shapes used as text containers.


Events and Shared actions

The used events that trigger shared actions are:

  • Success event for each of the click boxes, using the shared action Show2Hide1, you have seen examples of the shared actions above. Only the fourth click box had a slightly different use of the parameters: not a click box was shown but the instruction text Tx_instruction. There is no Failure action, because the attempts are left at Infinite.

  • Success event for each of the 'bubbles', the shape buttons, triggers the shared action Show2, showing both Gr_HLCover  and the appropriate lightbox. Again, the attempts are set to Infinite, no Failure action will ever be fired. Here is one example:

    If another slide would be following, at least one of those bubbles needs a pause, to keep the playhead stopped. The four click boxes are no longer visible, so their pause is no longer active, available to stop the slide.

  • Success event for the shape button Bt_CloseHL triggers the shared action Hide2. Wondering why I could use that same shape button with the same action, because there is not only the group Gr_HLCover to be hidden, but also the specific lightbox? Well, I don't hide one lightbox, but hide the whole group Gr_HLBox, which means the one that is visible will be hidden as well. 



Visibility Shared Actions

In the first part I already explained that the number of times shared actions are reused is visible in the library. Double-clicking on the library item you can open the dialog with the Usage button and have details of the events where that action is used. You can also open directly the Usage overview only, by clicking the chain button at the top of the Library:

You will also see a nice summary in one of my favourite panels: Advanced Interaction (F9). Tip: this panel can be printed.

What next?

I did not see any comment in this blog yet, got some on other social media. Series is not finished, I plan to focus on reusing this kind of shared actions in the third part. That will be with another use case.




Dare to Share - part 1

Intro

Wondering about that title? It could be my motto: I'm not afraid to share whatever I discover about Captivate as faithful fans do know. Title is not about me, it has a different meaning. With some articles, this is the first one, I want to persuade you to give the new Shared actions a try. There is very little available about them, no tutorials, two recorded webinars (guilty about both), a presentation at Adobe Learning Summit in October 2013. Rare comments on the forums or in the discussion groups I'm attending daily are mostly negative: 'Too restricted', '... not useful at all'. Quotes like that remind me of similar negative attitude when advanced actions appeared in Captivate 4 (clunky interface), when I started blogging about them after their improvements in Captivate 5. Now most intermediate and advanced users do still complain about advanced actions but... they are used more and more!

Today I start with a small sequence of articles, to get you up and running with shared actions. I will also explain limitations (of course) and have my fingers crossed, hoping those limitations will be broken down by the Adobe team in future release(s).

Get your feet wet with Hide/Show 

The statements Hide and Show are perhaps the most used in advanced actions. And as you probably know, to avoid the play head being released when such a command is executed, you will often turn to a standard advanced action instead of a simple action. I explained this extensively in a previous post: Why Choose Standard over Simple Action in which you'll also find a link to a video on YouTube showing the work flow. First shared actions that you can put in your Library and use over and over again by importing that library as external library in any project. Here is the step by step work flow for the creation of a shared action that shows two 'items'. An item can be anything: 
  • a text container, an image, audio object or any other non-interactive object like a static widget/interaction
  • a button, click box, text entry box or any other interactive object (like some interactions, widgets)
  • a group of objects
I will explain the work flow for a shared action 'Show2' that Shows two 'items'. If you want to follow along, be sure to have at least two objects on a slide, that are initially hidden by unchecking the option 'Show in Output' in their Properties panel. And... it is easier when you label them

Step by step

  • Open Advanced Actions dialog box, you'll act like for creating a Standard action
  • You can add the Action Name now or later; we will not use this action as an advanced action. If you add the name Show2 you will be able to keep it when saving as shared action or change the name.

  • Create the two statements 
  •    Show Object1
       Show Object2
  • Press the button 'Save  As Shared Action' (see first image in Gallery

In the Shared actions dialog, give a Title, Description of the shared action, description of the parameters - the parameter name is not important (those are the present object names) but description is (second image in Gallery)

In the Advanced Actions dialog box, the shared action will appear in the dropdown list for the script templates (see third image, only script template that is always available is Blank)

The Shared action will also appear in the Folder Shared Actions in the Library (see fourth image: this shared action was already applied 4 times, if you didn't apply it, number 0 will appear for Usage).


Use case: Highlight boxes

Watch this example movie, click on the green arrow in the center:

As you could see in the fourth image of the Library for this one-slide movie, taken from a presentation I did for the Adobe Education Summit in Barcelona (2013) about Flipped Classes, I used only 3 shared actions:

Hide2 is used once for the close Highlight button that appears with each highlight box

Show2 is used 4 times, triggered by the 4 shape buttons (bubbles) to show a highlight box

Show2Hide1 is used 4 times by click boxes over the collaboration circle, to show the 4 bubbles

Try to create the three shared actions. In the next part I will explain how to use them to create this slide.


Feedback

Let me know if you want to learn more about shared actions, their power and limitations. You can post a comment.

In the future, I plan to offer online training about advanced/shared actions. Let me know, by sending a note to the info@lilybiri.com) if you would like to participate.

Link score to attempts in Custom questions

Intro

This time a Flemish colleague asked me to help with a Quiz that is very close to my original profession: I'm a civil engineer and this Quiz was about introducting students to technical drawing techniques, more specific, interpretation of Isometric Projection. Back to my roots!

In a recent article I talked about 'Beating the system', trying to make advanced actions easy to manage, to avoid tracking endless numbers of variables by reusing them intelligently (Be a Captivate Ecologist). And of course, I use my favourite shape buttons, either on Master slide or timed for the rest of the project to avoid having a multitude of objects and actions. Last year I presented a webinar about that subject, you can find the recording link in this blog post

Use case description

In the example, which you can watch below, there are two types of custom questions:

  1. Student has to type in a number, after screening a drawing. Originally colleague used a Short Answer Question. This was replaced by a custom question, that uses a Text Entry Box. And for 6.1 users: I limited the entry to the box to numbers only. All questions except the last use this type.
  2. Student has to identify an element in the drawing by clicking on it. Originall a hotspot question, in the custom question I used a click box. This type is used here only in the last question.

For all questions 3 attempts were provided, but the obtained score depends on the attempt:

  1. Correct on first atttempt: score = 3 points
  2. Correct on second attempt: score = 2 points
  3. Correct on last attempt: score = 1 point

Even with the new quizzing features in Captivate 6 this is not possible out of the box. That is the reason why I choose for Custom questions. The score has not to be reported to a LMS, it is more of knowledge check, but the score will be shown to the student at the end.

Colleague also asked to make it possible (for one sequence of questions) for the student to click on a button to have some Help. In this case it was a one-slide Powerpoint animation. I converted the animation to SWF and used it that way.

Moreover colleague wanted to be able to change the passing score. It was quite a challenge but fun as well.

Example

Play with this movie to have an idea about the result. I didn't change the used drawings, nor the imported animation. You'll have to answer 10 questions...

Slides - Master slides

I used the Blank theme, main master slide has a gradient background. For the questions I created 3 master slides, one for each drawing (because they can be used for all questions concerning that drawing).

The first sequence of questions has a Help button with a tooltip. Both button and tooltip are shapes on the master slide Quest1. The shape button navigates to slide 2, which is the Help-slide with the animation. The help-slide will not be visited before the questions, for that sake I configured the button on the Intro-slide to jump immediately to the 3rd slide, which is the first question slide.

On the Help-slide you have a similar duo of shapes: a button and a tooltip (rollover shape). The button gets the user back to Last Slide Visited, to the question slide from which he asked for help.

Objects Timed for Rest of Project

On the first question slide, a lot of objects are timed for the rest of the project because they are reused all the time. Because I needed to be able to control their visibility, they couldn't be put on the master slide. Here is a screenshot of the timeline of that slide, the Text Entry Box was selected and its Properties are visible as well (watch the associated variable v_answer):

From bottom to top you see these objects:

Group Question1: has a text Quest1 and the not to be validated TEBAnswer1. Those objects are timed for the rest of the slide. These objects are visible in output.

Group TxtContainers: with the three possible text containers TxtSuccess, TxtWrong and TxtRetry. Initially they are not visible. I grouped them because it is easier to hide them all together in an advanced action. Those objects are timed for the rest of the project since they can be reused on each question slide. This will also make it possible to use less advanced actions, since they keep always the same name, ID.

Group GrpNext: has a shape button NextBt and a text container TextClickNext; the goal of the text is not only to tell the user what to do, but also to cover up the TEB's, so that they cannot be clicked another time to get the same score again. Why did I choose this instead of disabling the TEB? To disable the TEB a separate advanced action would have been needed, since each TEB has a different name. Whereas my 'cover' workaround allows me to use the same advanced action for every TEB. This group is initially invisible, and timed for the rest of the project.

Total: the banner with the obtained score, visible and timed for the rest of the project.

 

Variable ecology

In this use case I didn't use any system variable, and also deleted all default variables associated with the multiple Text Entry Boxes (9 of them, one for each of the first 9 question slides). I ended up with using only 7 variables. To prove it, here is a screenshot of the variables dialog box:

v_PassScore: will store the minimum percentage required to pass; I assigned a value on entering the first slide, the intro slide, with a simple action. Remember that the colleague requested to be able to change the value.

v_answer: will store the value entered in the TEB's, and is reused on each slide. This means that you have to associate this variable to each TEB to replace the default variable that normally gets the same name as the TEB (Text_Entry_Box_n). A good check: try to delete those default variables in the variable dialog box:  if removing a variable is denied, that means that you forgot to replace it by v_answer. If you are using version 6.1, you can use 'More Options' in the General accordion to limit the entry to Numbers.

v_attempts: reused on each question slide with a default value of 3, will be decremented with each attempt and also serve as question score.

v_correct: will be reused on each question slide, and populated with the correct answer on entering that question slide

v_max: starts with value = 0, not really necessary, but for lazy mathematicians, will be populated with the maximum score that can be obtained. You could also replace it by a literal, a number...

v_perc: starts with value = 0, will be used only on entering the score slide to calculate the percentage based on v_score and v_max

v_score: starts with value = 0, will store the score obtained, and will be incremented after each correct answer, taking into account the number of attempts used for the answer.

Events and Advanced actions

On Enter Slide events: 

are used both for the Question slides and for the Score slide.
  • Question slides: used to reset and hide what is needed, to calculate the new value of v_max and (only for the TEB-slides) to populate the variable v_answer with the correct number for the TEB-based questions. Here is an example of such a standard advanced action (for the second Question slide). Only the first statement has to be adapted for each TEB-slide.

For the click box slide (hotspot), this action is little bit different, no need to populate v_answer, but the click box has to be enabled (labeled Spot1):

  • Score slide: here a conditional action is needed which has two decisions; the first (Always) will hide unnecessary objects that were displayed for the rest of the project, and will calculate the percentage to be stored in v_perc. 

    Second decision (Checkup) will check the percentage and show the appropriate group (text + banner) based on that checkup:


     

Success event for Text Entry Boxes  triggers 'NotValidated'

All TEB's, which are not validated and have only one attempt will trigger the same advanced action, the conditional action NotValidated that has three decisions. The sequence of the decisions is important!

  1. Fout (Dutch for 'Wrong'): this situation occurs when the student has tried to answer 3 times, and didn't succeed to give the correct answer. 


    The correct feedback will appear, the group with the Next button and the coverup text will be made visible and the answer is reset (not really necessary, will also be reset on entering the next slide).
     
  2. Opnieuw (Dutch for Retry): will occur if the user has already given at least once an incorrect answer but the attempts are not yet exhausted.

     Correct feedback is made visible, variable v_attempts is decremented and v_answer is reset to 0. The last statement is meant to rewind the playhead to appear again before the pausing point of the TEB in its active part so that the student can answer again (see post about micro-navigation)
      
  3. Correct: whenever the student gives a correct answer. 

    Besides showing the correct feedback and the group GrpNext, you see that I calculated the new score that is immediately shown in the Total shape. Because of the sequence, the number of attempts left at that moment is identical to the score left for the slide.

Success event for Click Box triggers HotspotCorrect

For the hotspot question, I used both the Success and the Failure events for the click box (Spot1). Success event triggers this standard action, that is similar to the last decision Correct in the TEB-action; but here I disabled the click box to avoid the user clicking on it again :

Failure event for Click Box triggers HotspotNOK

The other situations, covered by the two decisions Fout and Opnieuw in the conditional action for the TEB's are now done by this conditional action attached to the Failure event. It has two decisions (since the third is now done by the Success action):

  • Fout (Wrong): if attempts are exhausted and the answer is wrong; very similar to the decision that is labeled the same way for the TEB's, no answer has to be checked here, only the attempts.

     
  • Opnieuw (Retry): after an incorrect answer, when there is at least one attempt left:

 

Conclusion

Pretty long article, I'm sorry. But wanted to offer this use case because of the the way I reused both variables and advanced actions. If I had plunged in without any preparation (or with an old version of Captivate) this probably would have led to a multitude of variables and actions.

Would really appreciate any comment, feedback.