Matchstick Game (Shared Actions)

Intro

A while ago, with Captivate version 8, I created a SWF version of this game. If you have a browser (such as Internet Explorer) supporting the Flash Player plugin, you can have a look using this link.  With that verrsion I could take advantage of the brand new Shared Actions, which allowed to have variables defined as parameters. In version  CP7 where shared actions were introduced, that was not yet possible.

Today HTML5 output is the standard. Moreover Captivate in recent versions has added some very useful features, which I would like to use to create a new version of this game:

  • Multistate objects, making the old Hide/Show workflows unnecessary, sparing time which was needed for resetting. Feature was added with CP9.
  • Guides and Rulers make setting up layout so much easier. Feature was added with second release of CP9.
  • New commands in Advanced actions: ‘Go to Next State’, ‘Go to Previous State’, ‘Delay Next actions by’  appeared in CP2017 with the new version of the dialog box)
  • Effects 2.0
  • Bitmap image used as button, new feature in CP2019,  release 11.5. I also used some design elements from the Quick Start Projects.

Why didn’t I use SVGs i this case? The stock image which I used to create the different matchsticks, did lead to smaller file size for PNG than for SVG. I know that they may be blurry when upscaled. There is no problem with the clickable area being the bounding box, due to the shape of the matchsticks. That is often the reason why I prefer SVG, but not the case here.

Have some fun with either the scalable version using this link, or with the embedded version (rules are explained in the file):


Tip: have a look at the end of the blog for a suggestion...

Setup

The example file has 4 slides, using some design elements (and colors) from the Quick Start Project 'Wired':

  • Title slide with a 'Play' button, which triggers the default 'Go to Next Slide' command
  • Intro slide, explaining the Game rules and a Start button. The On Enter event of this slide has an advanced action. Slide has double action: explaining rules on first visit, dummy slide on next visits. Such a dummy slide is necessary for a Reset action/
  • Game slide: On enter event is also used as advanced action trigger. More details below.
  • End slide

Slide Game - Timeline and Layout

I set up a grid of guides fo-r the game slide. It will be very useful when adding a second game slide based on another word:

The timeline is used to have the Next button and the final set of matchsticks (with flames) appear when necessary. No Hide/Show actions were needed:

You see on this timeline: 

  1. Gr_Match has been expanded, with 15 multistate objects, the Matchsticks. They are labeled in a logical way: start with Mt _ (Match), followed by a number for the group (1-3) and second number for the matchsticks, starting from left to right, top to bottom. Example: Mt_12 is the top stick in the first group, Mt_25 is the bottom stick in the second group.
  1. All are PNGs used as buttons, their timeline ends ar 1.6secs and pausing point is at 1.5secs. The Rollover and Down states have been taken out, a custom state 'Burnt' has been added:
  2. Feedback: a multistate smart shape timed for the rest of the slide. Normal state is made invisible, Success, Late and Cheat state were added:
  3. SB_Reset: shape button timed for the rest of the slide, default setting (pausing point not really necessary), timed for the rest of the slide. It triggers the simple action 'Go to Previous Slide'.
  4. SB_Next: shape button, appearing at 2.5secs, pausing point at 0.7secs. This means that the button will be invisible while playing the game.
  5. Gr_End:  group with burning matchstick images. Timeline starts at 1.6 seconds, till the end of the slide. That group will also remain invisible to the learner during the game.

Variables

You'll need a whole bunch of variables (4+15):

v_correct: will track the number of correctly removed matchsticks; start value = 0

v_moves: wil track the number of removed matchsticks; start value = 0

v_max: fixed value, number of matches that may be removed; will be populated in EnterGame action

v_visit: to track the visits to slide Intro;  start value = 0

v_11, v_12....v_35: Boolean variables , one for each matchstick, start value = 0; they track if the matchstick has been removed (value = 1) or not. The labeling is using the same logic as for the Mt_ labels. That makes it easy wen defining parameters.

Events and Actions

EnterIntro

As the name tells, this advanced action is triggered by the On Enter event of the second slide 'Intro'. 

It is an easy to understand conditional action, based on the tracking variable v_visit. On first visit the slide is played normally, on following visits the slide is skipped immediately, and re-enters the Game slide. That is necessary to reset variables for that slide.

Because it is used only once, I didn't convert it into a shared action. Nevertheless, could be a useful conversion but that will be explained in another blog post.

EnterGame

Triggered by the On Enter event of the Game slide, is used to reset all the variables. 

Similar to EnterIntro, it could be interesting to convert to a shared action. Explanation in that same future blog post (or webinar?).

Match_NOK (shared action)

This action is triggered by the Success event of the matchstick buttons, for those who should NOT be removed (hence the N in the name of the action). Here are screenshots of the action with indication of the parameters, and the description of the parameters:

The action has three conditional decisions.

  1.  First decision 'Doing' checks the value of the tracking Boolean variable, because the matchstick can be clicked to remove it (v_xx == 0) or to restore it (v_cc ==1). The variable tracking the number of moves will be incremented or decremented.
  1. Second decision  'Checker' compares the number of moves with the allowed maximum, and shows a message (state) when that maximum has been reached. I used the Delay command, to have the message disappear after a while.

  2. Third decision 'Cheat'  will lead to another message (state) if more than the allowed removals have been done. Again Delay command was necessary, ;this time to create an automatic Reset by going to the Intro slide.

This shared action has been used 9 times. Only the first two parameters have to be entered carefully, the other 4 are always the same.

Match_OK (shared action)

This action is triggered by the Success even of the matchstick buttons which need to be removed. Here are screenshots of the action with indication of the parameters,(2 extra compared with the previous shared action: Success state and the Gr_Match):

The first three decisions are similar to those of Match_NOK. Just one exception: this time the variable v_correct needs to be incremented/decremented within the first decision. A last decision 'End' was necessary for the Success situation, where v_max removals  (here 6) resulted in the correct word. 

More?

If you are pretty new to Variables, Advanced and Shared actions, this may seem very complicated. 

What if you want another slide with another word, maybe another number of maximal removals? 

You want to recreate such a game, maybe with other objects than matchsticks? 

It could be done without having to create any variable, just by using shared actions. Wished I could explain this in a workshop . Would you be interested? It is a very nice example of the way shared actions can allow you to create interactions WITHOUT PROGRAMMING SKILLS.   You don't have to believe me, of course... let me know if you want to participate  You can contact me using the mail address, or go to my website and fill in the contact form mentioning this invitation. 






Create Review State for scored Drag&Drop slide

Intro

Drag&Drop slides are popular both as Knowledge Check slide and as scored Quiz slide. No problem to integrate the score in the quizzing system variables. However there are still features where the D&D slide is not behaving like the other quiz slides. Some examples:
  • Pausing point is at 1.5 seconds, same as for Quiz slides, but that point is not visible in the Timeline.
  • Last Attempt action is wrongly indicated as ‘Failure’ action. Same as for normal Quiz slides, D&D slides have NO Failure actions.
  • You cannot have a Retry message when you provide more than one attempt.
  • There is only one Failure message, you don’t have the possibility of up to 3 different messages as is the case for other quiz slides
  • There is no Review status, which indicates if the question was answered correctly, and which answers were wrong or correct.
  • There are no Review navigation buttons. That is a problem, because during Review when the learner gets to a D&D slide, he will be stuck without those buttons.

For the problems concerning Try again, or multiple Failure messages I already offered a solution with a dynamic feedback message in a previous blog post. In this post I will try to explain a workflow for the Review issues.

The result of this workflow was visible in the sample project which I posted last week. There is a scored D&D slide as last question in  first part (Timeline).

Setup

Checkmarks

I used the checkmarks used for the other quiz slides, imported them into the Library. You can find them in the Gallery folder Quiz\QuizReviewAssets. Their name can be seen in this screenshot of the Library:

The small versions are used for the individual answer feedback, the normal versions for the global feedback Look at this example

Those checkmarks were used for multistate objects, with an empty Normal state. They are already present in the correct location during the quiz but invisible due to that Normal state. Two more states show either the correct or the incorrect checkmark. This is an example of the Object State panel, for the answer about the Shape button.

Review Navigation buttons

The quiz buttons in this theme are of the type 'Transparent button' That is the case for all themes packaged with Captivate. Too bad: it is impossible to apply any Quiz style to an object  a non-quiz slide, even on the Drag&Drop slide. The new feature Copy/Paste appearance will not work neither between items from the Standard and the Quizzing category. You have to create a style for a Transparent button that looks identical to the style of the Quiz buttons. As you probably know, the button label is simply text ‘<<‘ and ‘>>’. They trigger the commands ‘Go to Previous Slide’ and ‘Go to Next Slide’. Similar to the quiz slides, those buttons will only appear during Review (see On Enter action).

Variables

Four Boolean variables were created, with a start value of 0:

v_DD: will be toggled to 1 if the D&D slide is correctly done.

v_EffectDD; will be toggled to 1 if the Effect color is correct

v_SButtonDD: will be toggled to 1 if the Shape button color was correct

v_ShapeDD: will be toggled to 1 if the Shape color is correct

The system variable cpInReviewMode was used as well.

Events – Actions

Three events were used, all to trigger advanced actions: Success and Last Attempt event of the Drag&Drop slide (in that panel) and the On Enter event of the slide.

CorrectActDD

Why was it not possible to use the same Correct shared action in this case?  A D&D slide has no two-step Submit process, where the first step will keep the slide paused to allow the learner to read the feedback message.  It is possible to imitate that behavior, but I wanted to keep it simple, by keeping the slide paused for a couple of seconds before proceeding to the next slide. Second reason: for a correct answer need to toggle the variable  v_DD to 1. To achieve this, I used the shared action ‘CorrectAct’ as template to create this advanced action, which has two extra commands:

WrongActDD

Similar to the previous action, I used the shared action WrongAct as template, to create this advanced action. I needed only to add the Delay command, since the user variable v_DD had already the value 0.

EnterDD

Now the most complicated action, with many decisions to check all the possible situations. The decisions are mutually exclusive, which is the safest way to get a correctly functioning multidecision action. Hope you can figure it out with this Preview:

If you have problems or suggestions, post a comment please!

Intermediate Score Slides in 2020

Intro

Quite a while ago, in the SWF period, I created a similar post. Time to upgrade to make it ready for HTML output, using the newly added features in Captivate and fix the original problem (Review not functioning well).

As explained before, showing intermediate score slides, will not affect the reporting to a LMS. It is still a SCORM requirement that each course will transmit only one score, in this case the total score of all parts of the quiz. However showing intermediate scores can be helpful both for the learner and the developer: taking decisions based on the partial results are possible.

Since that old article, the powerful Drag&Drop slides were added to the Quiz toolset. A D&D slide can be scored, results can be added to the total score. They will not completely behave as the other quiz types. Have already posted some tweaking suggestions in previous posts.  The example file includes a D&D slide, which will have a Review status similar to the other quiz slides. The setup for such a Review status will be explained in a separate blog post.

Example file

It has three parts with questions about the three main stumbling blocks for Captivate users: Timeline, Quiz and Theme. You will see the progress (score)  for that part on each quiz slide,. Each part ends with a custom score slide. You can answer the different parts in any sequence, but after finishing all of them, you will be able to go to the final score slide, which  is the default score slide. You are free to explore the Review status using its button on the final score slide.

In the questions you’ll see that penalty, partial scoring etc have been used and are reported correctly.

Check your Captivate knowledge. There is only one attempt both on Question and on Quiz level. You can use this link for a scalable version or watch the embedded version (fixed resolution) here:


Overview and logic

The less-known Advanced Interactions panel offers a good overview.  On the dashboard three click boxes take care of navigation to the parts. You’ll see 5 question slides for the first part (Timeline), 4 for the second part (Quiz) and six for the third part (Theme). I collapsed the Drag&Drop slide, complete setup of that slide will be in the next blog post. You’ll see that I did use the Success and Failure events of the quiz slides (1 attempt) and several On Enter slide events. Both Advanced and Shared actions were used.

On the last quiz slide of each part, a Back button takes the learner back to the first slide, the Dashboard.  The former text ‘Part x’ will be replaced by the score obtained for that part, once it has been done. When all quizzes have been answered, the instruction text ‘Please, select an avatar’ is replaced by a originally hidden button which allows to go to the Final score slide, which is the default score slide of Captivate.

Setup

Variables

Quite a bunch of variables were necessary.

Part 1 (Timeline)

v_Timeline: will have the score obtained by the learner for this quiz part (Timeline), it is the partial equivalent of the system variable cpQuizInfoPointsscored

v_TimeCorrect: will track the number of correct answers for the part. Equivalent of the global variable cpQuizInfoTotalCorrectAnswers

v_TimeMax: will be used to calculate the maximum score which can be obtained for this part. Equivalent of the global variable cpQuizIntoTotalQuizPoints

v_TimePerc: will be used to calculate the percentage acquired for this part, equivalent of the global variable cpInfoPercentage.

For the number of questions in each part, I preferred to type in the literal value. It would have been possible to make this also tracked automatically of course.

Part 2 (Quiz)/ Part 3 (Theme)

A similar group of 4 variables were created, They are labeled v_Quiz, v_QuizCorrect, v_QuizMax and v_QuizPerc for the part Qui; for the Theme part they are v_Theme, v_ThemeCorrect, v_ThemeMax and v_ThemePerc.

Other

Instead of adding more variables to track which parts have been completed, I preferred using the Max variables for tracking, It was necessary to calculate the sum of those variables, hence an extra variable v_sum, which also had a default value of 0.

More variables were needed for the Drag&Drop slide setup, but they’ll be explained in the next blog post.

Events and Actions

Dashboard slide

On Enter event triggers: EnterDash (Advanced action)

To prevent the learner to press a click box multiple times, it needs to be disabled after the first attempt. That first attempt is identified by checking the score. There is a minimum chance that the learner had a zero score, didn’t expect that to happen but if it is the case, you would need an extra tracking variable which could be a Boolean.

Click Box Success events trigger: CBTimelineAct, CBQzAct, CBThAct (Advanced actions). This is a preview of the CBTimelineAct:

The Done state of the text object will show the obtained score instead of the default text ‘Part x’.  The two other click box actions are similar, you need to edit the Text object name and the slide to jump to. I preferred a duplicate action instead of a shared action, because it is rather simple, only two lines and used three times.

Shape Button SB_Final Success event: simple action ‘Jump to Slide FinalScore’

Quiz Slides (all)

Success event on the Quiz Properites: CorrectAct (Shared action)

This shared action is used by all quiz slides (14) except by the Drag&Drop slide (see next post) where I used the shared action as a template for a slightly different Success action:

Last Attempt event in Quiz Properties: WrongAct (Shared action)

Similar to the CorrectAct, used 14 times and once as template for the Drag&Drop Last attempt action:

If you are worried about the + operator for the negative points: the value of that system variable is negative by default.

First Quiz Slides

On Enter event: EnterFirstQuestAct (Shared action)

The avatars identifying the part on the quiz slides (needed to edit the master slides to make place for this custom group) have two extra text fields, one identifying the part, and one with the obtained score.

Last Quiz Slides

Success event Back shape button: BackAct (Advanced action)

Same advanced action is used for all Back buttons:

The second decision checks if all parts have been done and will show the button to jump to the final score slide if that is correct.

Intermediate Score slides

On Enter event: EnterScoreTimeline, EnterScoreQuiz, EnterScoreTheme (Advanced actions). Here a preview of the Timeline versoin:

The second decision is meant to skip the score slide during Review. The other advanced actions are similar to this one, just replace the variables. With the JS the percentage is formatted to maximum 1 decimal.

Final Score slide

On Enter event: Enter: EnterFinal (Advanced action)

Reminder: the avatars on the quiz slides are groups – see above.

More?

Lot more is possible of course. I didn’t insert a decision based on the already acquired intermediate scores but it is easy to do. I didn’t provide multiple attempts on quiz level, nor on question level. Comparing with my old article about Intermediate Score slides, the Review functionality is preserved however. Using the shared actions is a big improvement as well. I didn’t insert a progress indicator, because it would need more advanced actions, due to the splitting in parts and the presence of the Drag&Drop slide.

About the integration of the Drag&Drop slide,  especially its custom Review state, you’ll learn in the next blog post.

Percentage Progress Indicator (non-linear course) - solution 2

Intro

Recently I posted a first solution on my under this link.  It works fine, has a simple logic but something is bothering me: the percentage of viewed slides appears at the first frame of the slide which  is already included in that percentage.  It would be nice if only the percentage of the already viewed slides were shown. 

I hear some suggesting: use the On Exit event instead of the On Enter event. Logically? However that event is not to be trusted and . Consequence:  the frames in the inactive part of the interactive object are not visited. On Exit event happens after the last frame, which needs to be visited. Too bad, there is no ‘when leaving slide’ event, which would solve the problem. Hence this solution which is a little bit more complicated than the first solution.

Example file

I used the same 19 slides from the Quick Start Project ‘League’ as in the first example. The Table of Content is added to allow non-linear navigation. The option ‘Navigate to visited slides only ‘ is NOT checked to enable completely free sequence of slide views. The default playbar of this project is available, you can also scrub with the progress bar. But the progress indicator will only be updated when entering a slide. It is stil a slide-based indicator, not a frame-based nor time-based one.

View the example using this link for a scalable project, or this fixes resolution embedded one.


Setup

Progress indicator

Similar to the first solution, I used a text shape to show the value of a variable (v_perc) indicating the percentage slides already viewed when entering the present slide.  This text shape has a second state, labeled ‘Last’ which will appear on the last slide to be viewed:

This progress indicator has been inserted on the first slide, displayed for the rest of the project, always on top. However it will be hidden on the first slide by the On Enter action 'EnterFirst', because no slides are viewed yet.

Variables

Each slide  needs a slide tracking variable, user defined of the Boolean type. Start value is set to 0. Variable names are not important, I labeled them v_1 v_2,…..v_19 because it is easier to link them to the slides.  Boring work, sure but I always have a shared action ready in an external library with a bunch of variables and import them using the trick 1 explained in Rare tips for Shared Actions. For all slides except the first one,  Boolean will be toggled to 1 when visiting the slide for the first time. First slide doesn’t need a progress indicator on the first visit, since no slide have been viewed yet. The tracking variable v_1 will be used in the another action, to make the indicator visible on later visits.

Total number of visited slides will be stored in another user variable v_total, also starting with 0 as value.

A variable v_last will be used to detect if the active slide is the last slide to be viewed. This variable was not needed in the first solution.

The percentage viewed slides, which is displayed in a text shape (red) inserted on the first slide and timed for the rest of the project, is stored in the user variable v_perc.

The system variable cpInfoSlideCount will be used as well, its value is the total number of slides.

Events and actions

Enter event first slide: EnterFirst (advanced action)

That first slide can never be the last slide to visit, but on the first visit it shouldn’t show the Progress Indicator, since no slide has been viewed yet. Use the tracking variable v_1 for this conditional action:

Success event of the Start button on the first slide: StartAct (advanced action)

A short advanced action to make the ProgressIndicator visible after going to the Next slide.

Enter event of all slides (except first): PercCalcLast (Shared action)

This shared action has two decisions:

The first decision is similar to the one described in my first blog. One exception: the variable v_last is calculated from the user variable v_total (number viewed slides) and the total number of slides in the project ‘cpInfoSlideCount‘.

This calculated variable is used in the second decision. If it is equal to 1, the active slide is the last slide to be viewed. In that case the Normal state of the Progress Indicator is replaced with the Last state (warning about last slide), and the variable v_perc is set to 100%, will not change anymore during the session. The Else part is necessary to reset the state to Normal, so that later visits to any slide will show the progress in % (100%) again. 

Description of the 4 parameters, only the first parameter is different on each slide:

The Javascript, same as for solution 1,  is needed to format the percentage to no decimals.:

var perc = window.cpAPIInterface.getVariableValue(“v_perc”);

window.cpAPIInterface.setVariableValue(“v_perc”,perc.toFixed(0));

Tip: be careful when copy/paste this script, because the punctuation marks may not be pasted correctly if you are using another keyboard than my Belgian AZERTY one. Double-check them, please

More?

The logic behind this solution can also be used to show a progress bar, which takes into account the visited slides instead of the default playbar which is just jumping around when navigation is not sequential. Of course you can also show the number of viewed slides instead of a percentage. Maybe you have more ideas?


Percentage Progress indicator (non-linear course) - Solution 1

Goal

All tutorials about showing progress as a percentage have the same limitation: you need to view the course in a linear way, no branching or other non-linear navigation. Even in the TOC the indicated Time at the bottom is supposing you are in a linearly visited course. In the TOC the checkmarks at the slides are the only way to see which slides have been visited in a non-linear course, there is no real progress indicator. Recently someone asked (again) for a progress indicator (percentage) that would be functional in a non-linear course. 

I have created two possible solutions, All is slide-based, which is the reason for the two solutions:

  1. Easiest solution will show the % on each slide, but not after having viewed the slide, but when entering the slide.
  2. More perfect solution will show the percentage after having viewed the slides. Bit more complicated.
A bunch of Boolean variables and one shared action are what you need in both cases. In the second case I needed one very short advanced action as well. JS was necessary as usual to format the percentage display (no decimals, but can easily be changed). This post will explain the first (easy) solution.

Example

I took 19 slides out of the Quick Start Project ‘League’ and didn’t edit them with the exception of the Title slide. They are just used for testing the workflow. The default playbar, with its progress bar has been preserved. That is meant for comparison with the custom progress indicator. To allow you to navigate to slides in a non-linear way, I added the Table of Content, with navigation allowed. It is in Overlay, with the default Expand and Collapse buttons. Feel free to click in any sequence, and watch the progress indicator. I choose 19 slides, not 20 to show that it is possible with any amount of slides, even odd numbers. Here is a link to the scalable version:

Progress indicator for non-linear course

Or you can watch the embedded version (fixed resolution):


Setup

Variables

Each slide needs a slide tracking variable, user defined of the Boolean type. Its start value is set to 1. Variable names are not important, I labeled them v_1, v_2,…..v_19 because it is easier to link them to the slides.  Boring work, sure but I always have a shared action ready in an external library with a bunch of variables and import them using the trick 1 explained in Rare tips for Shared Actions. Each Boolean will be toggled to 1 when visiting the slide for the first time.

Total number of visited slides will be stored in another user variable v_total, also starting with 0 as value.

The percentage viewed slides, which is displayed in a text shape (red), inserted on the first slide and timed for the rest of the project, is stored in the user variable v_perc.

The system variable cpInfoSlideCount will be used as well,which stores the total number of slides.

Events – Shared Action ‘CalcPerc’

That shared action is triggered 19 times, with the On Enter event of the slides:

The Shared Action is straightforward and needs only one parameter: the slide tracking variable:

The JS is needed to avoid too many decimals for the calculated percentage:

var perc = window.cpAPIInterface.getVariableValue(“v_perc”);  window.cpAPIInterface.setVariableValue(“v_perc”,perc.toFixed(0));

The second solution where the progress will show the percentage viewed slides more correctly will be posted in another article, with its example file.

Review wrong answers in Quiz, skip correct answers

Intro

Similar to most Captivate developers I am busy converting legacy projects with SWF output to HTML output (in my blog). Quite a long time ago, based on questions from users, I wrote this blog post: Limit Review.  At that moment the version was Captivate 6 output was of course to SWF. If you want to view the embedded file, you'll need  Flash Player enabled browser to watch it.

I updated this blog post and created a new Example project. It is interesting to see how much easier the workflow has become, due to two new features:
  • Shared Actions: available since version 7 and improved with version 8. One of my favorite features, much underestimated by most developers for totally unknown reasons. Whereas in the old post I had to create 2 advanced actions for each quiz slide, this new version has only two shared actions, with one parameter.
  • New system variable cpInReviewMode (Quizzing category). It is a Boolean variable with a default value=0. That value will automatically be toggled to 1 when in Review mode.

Example file

I used the edited Theme, based on the Quick Start project ‘Alliance’ which I also used in my previous post with the Survey about upgrading legacy projects. HTML5 output is not as smooth as SWF output. You can compare the old post  (see link mentioned before) .

The example has 7 question slides, different types, using partial scoring and penalty. You can play the rescalable version from this link or watch the embedded one here:


Setup

Variables

This is the only remainder of the original blog.  We will be using another quizzing system variable cpQuizInfoLastSlidePointScored. The value of this variable is changing with each quiz slide. That change happens with the second step of the Submit Process.  More info about the Submit Process of a question slide can be found in this blog post.

We need to track the score for each quiz slide. To achieve that, a user variable is needed for each question slide. In this case, we need 7 user variables. No default value needed:

Labels are not so important, you just need to be able to link them to the quiz slides. If you have a shared action ready as in the first item of ‘Rare tips for Shared Actions‘ that is fine as well.

Events

All events are on the quiz slides:
  • On Enter event: will be used for a shared action EnterReviewAct. Tip: in the Advanced Interaction panel, this action will not appear (which is a pity). The reason is that the columns Success (which normally has the action for On Enter) and Failure (normally On Exit action) are used for the question actions. You can see the Usage of this action in the Library of course. Logically it has been used 7 times, because of the 7 quiz slides:



  • Success event of question (Quiz panel): will trigger a Shared action ‘ScoreQuestionAct’.

  • Last Attempt of question (Quiz panel): will trigger the same Shared action.  This action will be used 14 times. ave a look at this screenshot of the Advanced Interaction panel, where both the Success and Last Attempt events are registered:


Shared Actions

ScoreQuestionAct

This is a very simple standard action, copies the value of the system variable cpQuizInfoLastSlidePointScore to the tracking user variable. That variable is the unique parameter:

This action is triggered by both Success and Last Attempt events. It happens sometimes that you get an error, because the same parameter is used for both events. That is a bug in Captivate, which I have reported since a while, but the actions will work perfectly.

EnterReviewAct

This conditional action triggered by the On Enter event, checks two conditions:

  • Is the learner in Review mode?
  • Did the learner have a positive score on this slide? As you can see in the Advanced Interaction panel (screenshot in previous part),  I used penalty and partial scores.   Partial scored questions are counted as ‘correct’ answers in Captivate.

If both conditions are true, the slide will be skipped.

More?

Maybe you have some comments?  I don’t have a crystal ball, but feel like these two questions may pop up:

  1. Can this workflow also be used for random questions? 
    Answer is Yes: you need to trigger the shared actions for all quiz slides in the pool(s). Of course, you cannot have partial scoring, not penalty in a question pool.

  2. Can you avoid skipping partial scored questions?
    I see a way to do this, but wait for your suggestions.


Using cpQuizInfoAnswerChoice for Survey (Conversion from SWF to HTML)

Intro

Eight years ago I wrote a blog post about ‘Secrets of cpQuizInfoAnswerChoice’. Of course the embedded published project was SWF at that moment. This specific quizzing variable is very useful when you need to evaluate the results of survey slides in order to make decisions. I created a new example file, partially based on slides from the Quick Start Project Alliance. It is part of a ‘decision tree’ which could be used for those who want/need to convert legacy projects to make them ready for publishing to HTML5.

Example file instructions

There is no audio in this example. All quiz slides are Survey slides, and navigation is based on the results of the Survey slides.  Type of slides used are True/False, MCQ with one correct answer, MCQ with multiple correct answers. At the end of each branch (there are quite a lot of possibilities) you will end up on a slide with possible workflows. In this example you’ll find only three ‘results’ slides:
  1. If you have only the SWF output of the legacy project.
  2. If you have the cptx-file but cannot use it directly in the present Captivate version
  3. If you have the cptx file which can be opened in the present version.

To explore a new branch, please refresh the browser. There are more than 3 recommended workflows because of sub-branches.

You can watch the embedded movie below (fixed size) or use the link for a rescalable version.



Values of cpQuizInfoAnswerChoice

This system variable belongs to the category Quizzing. Typical for that category is that the variables are read only, you cannot edit them in Captivate directly.

It is a reused variable, gets a different value after the Submit process on each quiz slide. The value you are getting depends on:

  • Type of question (see below)
  • Numbering (if available) in the question. For several types you can choose between capital characters (A, B, ..), small characters (a, b, …), numbers or None.  None will result in the same value as numbers (my preferred numbering)

In the example file I used three types of questions, which are very common in surveys:

  1. True/False. For that type the value of cpQuizInfoAnswerChoice will be either a character or a number, depending on the chosen numbering type.
    Example: if learner choses “True” value will be A, or a, or 1 (also for None as numbering)
  2. MCQ with radiobuttons (one answer): value will be the character or number of the chosen answer. No problem when shuffling the answers. Although the numbering on runtime will be changed in that case, the original number, as seen in the editing environment, will be stored in the variable.
    Example: Second slide in the example had three answers. You may shuffle the answers on runtime, but if the learner selected this answer, the value of cpQuizInfoAnswerChoice will be ‘1’.
  3. MCQ with checkboxes (multiple answers possible): all chosen answers will be stored, using a separator (in my case a semicolon). If you use shuffling, the reported value will take the numbers originally assigned in the developing environment:
    Example: first slide in the example file looked like this. With the shown selection, the value of the variable will be ‘2;3;4’ even if due to shuffling the numbering was different on runtime.

Short description of the other Question types:

  • Matching: the chosen corresponding  numbers in the first column, with separator(s) will be reported similar to MCQ with multiple answers.
    Example ‘A;C,B’ indicate that in the first column those were chosen to connect with A, B, C in the second column.
  • Sequence: I couldn’t figure out what the meaning was of the reported value, very strange. Look like IDs (like Interaction IDs) separated by semicolumns. Maybe someone can explain?
  • Fill-in-the-Blank: the text chosen for the blanks will appear, with separators.
  • Short Answer: text entered by the learner.

Due to the fact that Captivate’s variables can store strings as well as numbers, if you choose for numbers you can perform calculations (Expression command). I used that feature in an old post about Graded Surveys. Tha particular technique  has not been used in this example.

Used Techniques

I will not explain every detail in this example file, just some tips about the used techniques.

Decision Tree – Branches

Before starting the development, I did sit down to see how many branches I would provide in this survey. The present example results in three main branches, ending up in three different end slides. Those are the slides surrounded by a red box in the screenshot of the Advanced Interaction panel (will blog about its use ASAP). The Survey slides are included in a blue box:

Choice of the branch to follow is tracked by a user variable. Three variables, starting with an empty value:  v_swf, v_cptx, v_scratch. Those variables can have different values, because each main branch has sub-branches.

Example: The branch which will end on slide 12 (SWF_workflows), starts with a value=1 when the learner indicates that the output SWF is the only asset remaining from the legacy file. Based on answers to the other questions, this value can be incremented to 2 or 3. Each of them will lead to different content on slide 12.

Multistate objects

The information on the end slides (12-14) is stored in multi-state containers. The On Enter action of each slide uses the tracking variable for that branch to show the appropriate state. Look at the screenshot of the action triggered On Enter for slide 12:

There are only two decisions  (not 3) because the Normal state is valid for the situation where v_swf==1.

Embedded variables

The result of the poll can navigate to slide 14, with the recommendation to start from scratch. However it is possible that legacy assets can be used: documented/branded theme, assets like graphics files (PS/AI), audio clips, video clips, GIFT or CSV files for questions. To show this information, user variables are inserted in the states on the slide. Their value is either empty, or has a value due to the choices on the very first survey slide. Look at this screenshot, which shows the Normal state (no external library available) for the Scratch slide:

More?

Do you have questions? Please post them in a comment. Maybe we’ll meet at Washington DC, will try to help users struggling with conversion of their legacy projects due to the demise of the SWF player.

Question for you: any idea why a slide seems to be missing in the Advanced Interaction panel (slide 11)?

Use Hyperlinks as Interactive Object.

Intro

Quite a while ago i have blogged about using Hyperlinks as interactive objects. Those blogs included examples. However the articles were written in the SWF era… which is almost over.  I'm talking about these posts::

More is in a hyperlink – Dropdown menu

More is in a hyperlink – Close button

Later on I used the Dropdown menu workflow in all the interactive videos which I posted here, to create a Bookmark menu. Here is one example: Custom Play/Pause button

Last week, a user asked questions about the same topic. That was the incentive to check out if the described workflows for SWF output were still valid for HTML5 output. 

Example file

You can have a look at this example file, where I show 4 use cases; or watch the embedded version below (fixed resolution, whereas the link goes to a rescalable HTML output):
  • Navigation buttons
  • Show/Hide workflow
  • Close button for a popup
  • Forced view

I did keep the typical Underline for the hyperlinks (but often edited the color). You will find tons of them. The design of the slides was taken from the Quick Start Project included with version 11.5, labeled ‘Rhapsody’. It always reminds me of the epoch of the Hippies…

No audio, sorry.  There is no playbar, nor TOC. Navigation is done with SVGs, which have a tooltip (added in the Rollover state) for those who use a desktop/laptop. It is a rescalable, non-responsive project. I  checked  out the workflows in a Fluid Boxes project as well, because they may be very interesting for that type of project.


Setup

Navigation menu

The list with commands which you can open when clicking the down arrow next to the field 'Web page' looks shorter than the Simple Actions list under the Actions tab for an interactive object:

Some commands are indeed missing, but most Slide commands can be found under the unique 'Slide' command. In this screenshot you see how to translate the Jump to Slide command, which you'll need to create navigation buttons (see Menu slide, second slide in the example project):

Comparing with interactive objects

The big advantage of using hyperlinks is that everything could be done with one text container, in which you mark several items as hyperlinks . Great way for a custom Table of Contents, which you can have sliding in/out. Especially for responsive projects: click box over text is not possible in a normal fluid box; limiting number of objects make setup much easier for Fluid Boxes workflow as well as for Breakpoint Views.

Alternative for buttons? Advantage is that you don't have shrinking of the text when pressed, you don't have to configure InBuilt states. Disadvantage: you miss the Visited state to indicate that an item has been visited.

Show/Hide

The slide with the hyperlinks in ellipses, was created as a 'dynamic' hyperlink (to be compared with Dynamic buttons). Text in the ellips are user variables, used as hyperlink. 

The user variables v_fx and v_KC  have a default value of 'Show', while the text shapes with the info are hidden with the On Enter action of the slide. A simple conditional action (similar for both) is used:

It would also be possible to have all the info boxes in one multistate object (which I use in the next two use cases).

Comparing with interactive objects

Similar to the navigation solution, if you don't like shrinking nor styling of InBuilt states this could be a solution. Again, since a Visited state is missing, that can be a drawback.

Another drawback is that you cannot use shared actions, which I would have done in this case. You need to use duplicate advanced actions.

Close button

Normally it is not possible to add an interactive object to a state in a multi-state object. You cannot create a hyperlink neither. However it is possible to have the same hyperlink available in all states, with the same triggered action. On the Close Box - slide, The info multi-state object is a shape with 6 states. Here is a screenshot:

Just FYI, the second state (QSP) looks different in the Object State panel, but that is just a  glitch. It is exactly the same on the state. To create this multistate object you need to follow carefully this workflow:

  • Create the shape (Tx_Info is the label I used) with a close hyperlink (big X), which I aligned to the bottom, centered. That will become the Normal state. You need to choose a command, but will have to edit that command later on. 
  • Go into the Object State panel and duplicate the state, the X hyperlink will be included in this second state.
  • Close the Object State panel and edit the hyperlink. It need to be 'Change state of Tx_Info to Normal'. 
  • Change the color of the X character to a color from the background, so that it will be invisible; if there is a Fill and/or a stroke, set Alpha and Stroke both to 0. The Normal state will now seem 'invisible'.
  • Return to the Object State panel.
  • Select the second state, style the X hyoerlink to a visible color. Add the necessary text and/or background fill.  Double check by previewing if the hyperlink action is functional.
  • Duplicate the second state, and edit the text/fill
  • Continue the duplication until you have all needed states.

I have tried with Hide for the hyperlink, but had lot of issues, seemed not to be functional. That is the reason why I switched to an invisible Normal state.

In the ellipses you find more hyperlinks. They change the multi-state object to the appropriate state. Here is an example for the first category 'QSP':

Comparing with interactive objects

As far as I know this is the only way to have an action propagating to other states in a multi-state object. Shared actions are not possible nor are Visited States (although with a more complicated advanced action possible).

The action triggered by the hyperlink can be rather complicated. A not so complicated example follows

Forced View

Setup of the multi-state object is quite the same as in the previous slide. In this case the change of state is triggered by real 'buttons', which seemed logical with this content. That also allowed me to use a Shared action. To track the clicks, a user variable is needed for each of the buttons. The shared action is visible in these two screenshots:

The X hyperlink, which was propagated to all states, triggers an advanced action with two decisions. The Back to Menu button is hidden with the On Enter event of the slide, and made visible when all variables have been toggled to 1. That meant that they all have been clicked:








Interactivity in Captivate (Back to basics)

Intro

Recently I presented a webinar about Interactivity in Captivate. It was not a public webinar, but composed of Adobe Community Professionals. Lot of the attendees were new to Captivate but well versed in other Adobe applications. However there were also some CP-experts. As usual I don’t present with Powerpoint, but with a Captivate presentation.  That makes it possible to publish later as an interactive tutorial, which you'll be able to view. It needed some editing of course to allow full control to the learner. Narration was added as well.

The design is based on the Quick Start Project 'Wired' included in the Assets panel of 11.5.1.499. Based on it I  created a personalized Theme, since that project in its non-responsive version has no master slides. The original fonts were replaced by two Adobe fonts (Termina and Filson Soft family). The interactions were recreated with workflows which I prefer over the embedded ones. 

The goal was to show popular workflows to create interactivity. You will see: Branching (menu), Forced viewing,  Progress bars, Click&Reveal, Drag&Drop, Knowledge Check slides, Games. In the webinar the presentation was used along demonstrations of the used workflows in simple examples, with lot of good practice tips. Lot of multi-state objects were used, Guides, import of source Photoshop files, shared/advanced actions and variables.

The menu slide after the start slide is the pillar. When you see a Back to Menu button appear, you'll be navigated back to this slide. The tooltip for this back button is part of the Rollover state.

Click to see the presentation in a rescalable version or watch the embedded version (fixed resolution) below:

Feedback

Did you like this presentation? Would you like more 'back to basics' blogs, or tutorials? Do you have questions? Are you able to recreate the demonstrated workflows? Lot of questions where I would like to see some answers.


Find the differences (game)

To all readers: best wishes for a healthy and enthralling 2020!

Have some fun with this small game, created from an Adobe Stock image, using Illustrator (for assets) and Captivate 11.5. Again SVGs are used extensively. You can play the embedded game (fixed resolution) but I recommend to play it from this link which is a rescalable version. It may be easier to find the differences, especially if you are using a big screen.


Lot of SVGs, some multistate objects, one shared action, two small advanced actions + two variables. If you follow me since a while you know that I had lot of fun with all my favourite Captivate tools.  I didn't use any Javascript directly (actions are converted to JS on runtime) but I’m sure this can be done with JS as well.

The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, game and end image are all on the second slide.

Setup

Objects and Timeline

SVGs reign as you can see in the screenshot of the Timeline panel of the game slide:

The stacking (z-order) of the objects is important. From bottom to top you see:

  • Two instances of the same image (SV_Correct to the left and SV_NOK to the right.
  • Two text containers which show the two titles (Tx_Correct and Tx_Difference).
  • A click box CB_Wrong: it is important that this click box is below all other interactive objects, and that its pausing point is at the same time as the other ones (here 1.5secs).
  • 7 SVGs functioning as buttons. Those are the correct hotspots (if you want to cheat... look at the labels). They need to be on top of the click box, but the stacking sequence of those SVGs is not important. The Rollover and Down states of those SVGs have been deleted. One custom state 'Down' has been added, which has the Chinese character for 'OK'.
  • A multistate object functioning as progress bar. The Normal state is invisible (Alpha set to 0), and you see all the states in this screenshot:

    Just a note: there are some display problems with SVGs in the present version, and that can make the previous screenshot bit confusing. Although the circles have the same size in all states, they seem to be smaller when more circles are present. Moreover something seems to be wrong with the C4 state: total width seems smaller than for the other states. Reason was that originally that state switched to 'Custom', instead of Original.
    In this case it is very important that the option 'Original' size is forced for each state.
  • A shape 'Cover', which is rectangular filled with Solid dark gray, with Alpha = 70%.
  • Final image 'SV_Eind' (sorry for the Dutch label). 

Variables 

Two user variables were created:

  • v_counter: with a start value of 0, will be incremented when a correct hotspot has been clicked.
  • v_hotspot: will be set to the number of hotspots minus 1; in this case it is set to 6 since there are 7 hotspots.

Advanced Actions

Two advanced actions are used:

EnterGame triggered by the On Enter event of the Game slide

As usual this standard action will prepare the correct situation for the slide:

WrongAct triggered by the Success event of the Click box CB_Wrong

Another rather simple standard action, to let some audio play and have effects with the cover:


Shared Action 'CorrectHotspot' triggered by the SVG buttons (Success event)

The most important script for this game. Several actions happen when a correct hotspot is clicked:

  • An effect is applied to emphasize the clicked SVG, in this example I used a ScaleTo effect.
  • Secondary an audio clip is played (sort of congratulation)
  • The hotspot needs to be disabled, to avoid having it clicked multiple times.
  • To track the number of discovered hotspots, the counter variable needs to be incremented.
  • Progress has to change in the indicator (yellow circles multistate object)
  • When all hotspots have been found, the final image has to appear (with an effect).

This is a Preview of a filled in action, where the 5 necessary parameters are marked in a color rectangle:

None of the candidate parameters need to be a parameter: the two variables (v_counter and v_hotspot) nor the literals. As I have emphasized many times, it can be tricky to define a literal as parameter. In this particular case it could have been possible to indicate the Delay time needed to listen to the audio clip being defined as parameter. That would be necessary if you want to use audio clips with very different lengths for the the individual hotspots. The parameters are visible in this screenshot:

Why shared action instead of duplicate advanced actions?

You can use exactly the same shared action if you have a different number of hotspots (differences). Just edit the action EnterGame to replace the value to be assigned to the variable v_hotspot. It is the reason I replaced the literal '6' by a variable v_hotspot. Several parameters are used multiple times in the shared action: the name of the progress bar, the hotspot, the audio clip. When using duplicate advanced actions you would have to edit quite a lot. 

One of the disadvantages is the fixed status of the applied Effects. If you want another effect, use the shared action as template for an advanced action, replace the effects and save it as a new Shared action. If you are new to shared actions: contrary to advanced actions it is perfectly possible to save a new action with the same name, provided the older one is no longer used.