Memory game setup - version 2021

Intro

As new year's blog I offered a simple memory game in this portal

Let 's Play and Dream

The setup however is not explained in the blog. Since another user asked about the creation of such a memory game, this blog will explain shortly the workflow. It will be limited to the game itself, not to the consequences of having succeeded it.

Setup slide

Besides the use of ONE shared action and ONE advanced reset action, all is based on using multistate objects, groups and variables. It can easily be extended to more than 6 pairs as in the example file. The background image, which in this case is only a static image of all the small images, can be replaced by another image (or a random image if you use JS), which can be included in the game itself. To see what I mean, I have to refer to my first version of this game, 10 years ago: 

Concentration game created exclusively with Captivate

If you want to play that old game, I warn that it is a SWF.

Timeline

Have a look at the timeline of the game slide

The two buttons with the same back image are in a group. There are 12 buttons, so you end up with 6 groups. The buttons themselves indicate where they are. The expanded group Gr_6 has the second button on the third row and the fourth button on the second row.  However you can set up labels as you want.

Each button is a multistate object. Normal state is the symbol for the virus, the Back state has the image. 

Variables

Each group has a tracking variable: v_1 - v_6. Their default value is 0.

The variable v_click starts with a default value of 0. It will track the button clicks (first or second).

The variable v_counter will track the number of correct paired images. It starts at 0, and the game is finished when reaching 6.

The variable v_first is needed to reset the slide, will store the frame number of the first slide frame. For more information check: Replay or Reset?

Shared action 'ButtonAct'

This action is triggered by the 12 buttons, and has only 3 parameters as you can see in the preview of the action:

You see 4 decisions:

Always  is a standard action, it shows the back state of the clicked button and disables it. The tracking variable for the group and v_click are both incremented by 1.

WrongAct (conditional) checks if this is a second click, and it didn't match the first click (because v_1 is equal to 1). In that case the Reset workflow is used. The advanced action 'EnterGame' (see below) will reset what is necessary.

CorrectAct (conditional) if both clicks pointed to the same image, the variable v_counter is incremented. The group with the two buttons will be hidden, to reveal the background image. 

Done: (conditional) checks the value of the variable v_counter and navigates to the conclusion slide if it reaches the value 6, which means the game has been completed successfully.

Advanced action EnterGame

This action is essentially resetting the slide. 

 Since buttons can have been disabled (see ButtonAct) all buttons need to be enabled. A group tracking variable can have a value 1, needs to be reset to 0. The variable v_click needs to be reset to 0 as well. The only variable keeping its value is v_counter.

Extension tips?

More possibilities will not need a lot of work. If you want to reuse the workflow in more projects a shared action has a lot of advantages.  If you import that action in a new project, the variables v_counter, v_first and v_click will be created automatically including their default value and description. Personally I would use the present advanced action ‘EnterGame’ to create a new shared action, keeping only the variables to reset, not the buttons. If you import that new shared actions at the same time as the first shared action, you don’t have to create the group tracking variables neither. You only have to set up the multistate objects and the groups in the slide.

Want less or more groups? 

It is logical that you’ll need to edit the EnterGame action. What about the Shared action ButtonAct?  Since I wanted to make the workflow simple, I kept the literal ‘6’ for the number of groups. Two possibilities for editing:

Use the Shared action to create an advanced action. Delete the shared action in the Library. Edit the literal to the wanted number, and recreate the shared action. You can even use the same original name.

If you want to reuse this action in multiple projects, replace the literal by a variable (v_max) which you can edit in the variables dialog, or by adding an Assign command on a slide preceding the game slide. 

Background image can be replaced, as I mentioned above.

It is also possible to create a more complicated game, maybe with groups of 3 buttons to match. 

Have fun!

Custom review text for Random questions.

Intro

Another Quiz tweak blog, answering a question in the Adobe forums found under this ‘link‘.

None of my previous blogs about tweaking quiz slides (like Custom feedback) or using Random question slides (Do’s and Don’ts) could answer this question directly. But the workflow below did use some of the ideas of older blog posts, and addressing the limitations of random questions.

Goal: show a custom review message for random question slides. Follow this step-by-step workflow. Of course I used a shared action since it is a repetitive process. You’ll see a short example project.

Example project

Watch this quiz, either the embedded version (fixed resolution) or a rescalable version using this link. This short project has 3 random slides which will be selected from a question pool with 8 question slides. There is a score slide at the end, where you can click the Review button. There is no slide after the score slide, which means the Continue button has only the functionality to pause the score slide.



Problems to be solved

Three limitations/problems need to be addressed by the workaround:
  1. In the default Review design of Captivate the Review area is only used for questions which have not been answered.  The default messages which you can still define under  Quiz Preferences, Settings, button ‘Question Review messages’ do not appear anymore since the design with checkmarks has been introduced. You will need to create custom text messages.

  2. Although you can add custom objects to question pool slides, you cannot address those objects using an action.  It is possible to use an Advanced or Shared action for the On Enter event, but you cannot hide/show custom objects.

  3. A random question cannot have any triggered action in a Captivate project.

My first conclusion:  the custom text container cannot be in the question pool slides nor in the random question slide. It needs to be outside of them. But the message itself needs to be different for each quiz slide, somehow it needs to be attached to each question in the pool.

Workaround summary:

  • Text container will be a shape, timed for the rest of the project. It needs to be on a normal content slide immediately before the first random question slide. That ‘dummy’ slide can be very short (I used 0.1 secs) and even set to fade so that it will barely be visible to the learner. The shape will be the custom text container and it is outside of the question slides. This workflow has an extra advantage: it will be on top of the embedded objects of the quiz slides if you activate 'Place object on top' in its Timing Properties.

  • The shape is not filled with a text feedback message but with a user variable set up to show sufficient characters (I used 250). Text style and size of the shape are edited so that those characters can be displayed.

  • The value of the variable (feedback) is assigned with a Shared action On Enter for each quiz slide in the question pool(s). 

Step-by-step workflow

Step 1 (question pool): in scratch area

Use the scratch area for each quiz slide to add the feedback message.  By using copy/paste the text to fill in a parameter in the shared action. That is a lot more comfortable than having to type the (long) text in the small parameter field. Here is a screenshot of one pool question slide:

Step 2: import the Shared action

You can download the Shared action here:

https://shared-assets.adobe.com/link/f63df322-5037-479a-42b8-86506a7f1b7e

Import this shared action to your project library. If you have already created a library to be used as external library in any project, add it to that library as well. I will explain the action functionality later. Importing this action in this early step,  results automatically in the creation of the user variable v_review which you’ll need in the next step.

Step 3: create dummy slide

Create a short slide immediately before the first random slide. On that slide you insert a shape (labeled Tx_Review). Time it for the rest of the project. in Timing Properties.

Go into Text Edit mode (F2 or double-click) and use the X button in the Character part to insert the user variable v_review. Be sure to increase the default duration. I used 250 characters which was sufficient for the feedback messages created under step 1. Here is a screenshot of that slide and its Timeline. You see the double arrow at the end of Tx_Review timeline, indicating it is timed for the rest of the project, and the very short duration.

Because you don’t want to show the text container Tx_Review from the start, use the On Enter event of this dummy slide to ‘Hide Tx_Review’.

Step 4: Shared action On Enter in Question pool

On each slide In the question pool add the Shared action (downloaded in step 2) to the On Enter slide event.  This is the preview of this action, with indication of the two parameters:

The functionality is self-explanatory. In the first decision 'Always' the variable v_review gets the feedback text (first parameter). Use copy/paste from the message in the scratch area (step 1) to define this parameter. The second parameter is always Tx_Review.  

Step 5: Hide Tx_Review

you don't need the text container, timed for the rest of the project, on the following score slide and/or content slides.You’ll need to hide Tx_Review similar to the dummy slide (step 3). In the example project that was done on the Score slide.

Step 6: testing!

Use only F11, Preview HTML in Browser, and preferably test in multiple browsers.

Fluid Boxes and Interactive Video? (Position Properties panel)

Intro

With CP2019 the Position Properties panel, originally used only in Breakpoint Views workflow, can also be used for a Fluid Boxes project. From recent questions on the forum I detected that this can lead to confusion, especially for starting users. Some use only the Position Properties panel to create slides and ignore the Fluid Boxes setup.  That was not the goal of adding access to this panel. 

If you choose to set up a responsive project with Fluid Boxes workflow, it is compulsory that you leave the layout to be monitored by Fluid Boxes control as primary. Only for specific situations Fluid Boxes should be overridden by using Position properties. It is similar to the use of Static fluid boxes: their use should also be limited as much as possible or you lose most of the fluidity which is typical for Fluid Boxes.  Besides object stacking, one of the excluded items in a normal fluid box is Interactive video. This blog tries to explain best practice for such a slide, which will not have any fluid boxes. 

Position Properties panel can also be used for objects which are unlocked from any fluid box. 

Interactive video slide

It is not compulsory to have fluid boxes on each slide. Be careful: if you use a packaged tresponsive heme, it is possible that the theme provides fluid boxes on the master slide(s). Same is valid when you use slides and theme from one of the Quick Start Projects.  The savior in this case in any correct Captivate theme is the Blank master slide. It shouldn never have fluid boxes. 

Recommendation: use the Blank master slide to insert an interactive video. That is the case for the example screenshots. The video was taken by night, hence very dark. For that reason I changed the background color of the Blank master slide to black instead of the default white. That way it could blend more easily with the video if it is not filling the slide (setup 1). This has consequences for the overlay slides as you'll see later.

In a normal fluid box you cannot have slide video.  Similar to bitmap images it is very important that the width/height ratio is maintained whatever the browser resolution on the device. That is where Position Properties are important. Two possible setups, to have the video adapting to any browser resolutions will be described.. 

The images are for a video in 4:3 format. The desktop resolution is 1024x627 as you can see in this screenshot. The width of the video is 1024, which means that part of the height (765) is outside. 

I turned on the feature ‘Preview Height’ under the Style tab, which results in the yellow surrounding box and the indication of the device size.  When the resolution changes, there are two ways to keep an acceptable view, while not distorting the video. The setup is realized using the Position Properties panel. If you don't see that panel, turn it on using the Window menu.

Setup 1: Width = 100%, Height = Auto

This will result in having the video  always completely visible. The following screenshot shows the iPad situation. Due to the black background the empty slide pixels blend in well with the video. Next to the result you’ll see the Position Panel setup, with Advanced part expanded. Vertical and horizontal alignment are turned on, reason why the % for Left, Right, Top and Bottom are greyed out

Setup 2: Width = Auto, Height = 100%

This will result in cropping the video as you can see in the setup and the screenshot of the same iPad situation as in the first setup:

The choice between both setups  depends on the video and whether you need to preserve it to be fully visible or not. For the second setup, if you want to keep another part than the central part, you can add specific setting for the X and Y position of the video, instead of using the center horizontally option.

How do you treat the overlay slides? They need to be created individually, should you use a master slide with or without fluid boxes? Read on.

Content overlay slides

After a lot of exploration, I detected that you get the best result when creating Overlay slides without using Fluid Boxes as well. For the layout, use a similar approach as you used for the video with the Position Properties.  Using Fluid boxes could mess up the slides when they appear in the interactive video. Here is a screenshot of such an overlay slide, when using Setup 1 (Width set to 100%):

It has been set up without vertical alignment in this case. As you may know, the black background (because the video is on a black background) will become transparent when the overlay slide appears to allow the dimmed video to be visible (more about this in an older post).

This screenshots shows the same overlay slide for setup 2:

Knowledge Check  Overlay slides

The situation is different now. This is a Fluid boxes project, so it is impossible to create those KC slides without using the responsive masters for quiz slides.  I tested this out in the same short (dirty) example project and everything works as expected. Just a warning: do NOT use a playbar, because it causes a lot of flickering when a Knowledge Check slide appears.  If you want navigation possibilities for the overlay slides (when you want a sequence of slides) create custom navigation. 

Similar use cases

Background images for slides or master slides can be treated the same way. 

Position properties panel can also be useful when taking out objects from a fluid box, to attach it to the one of the slide edges, or to another item. A company logo is a typical example. 

Those use cases have been treated in many videos, but I never found one about the workflow for an interactive video. since you have to deal with the overlay slides as well, suspected this could be a useful blog.

Using SVGs instead of bitmap images in or out of fluid boxes in a responsive project can lead to weird situations. Stuff for another blog.

The example project is not provided. If you want to play with it, contact me by mail or through my website. It is just a trial and error project, not an example of a nice interactive video.

Tips for troubleshooting

Intro

Quite a while ago i created this blog post, explaining how to restore some customisation after having cleared the Preferences:
Keep your Customisation!

That blog is still fully valid for the most recent versions. This one offers some additional tips which still seem to be unknown to many. I deducted this from my daily visits to the Adobe forum and the eLearning community. Often you see these recommendations, to solve a possible corruption:

  • Clear the cache, but be careful because the cache of a recent project can be used as backup
  • Clean the Preferences

I will not repeat how to do both – you’ll find that easily –  but want to offer some less-known tips. Even though some of those tips are over a decade old (will refer to the original authors).

Cache

You don’t need admin rights on Captivate for cleaning the cache. The cache folder is used to speed up the opening of existing projects and should be on your system, never on a networked drive. It can grow very quickly, if you are short on disk space take the time to clear it regularly.

Clearing the complete Cache is easy: use the button ‘Clear cache’ in Preferences, General settings. But:

  • If you do this from the Welcome screen, all cache folders will be deleted.
  • If you do it when one or more projects are opened, the cache folders of the opened projects will not be deleted.

That could be a way to preserve those caches for eventual backups.

However it is less known that the team provided an AIR application (in 2010) to delete selectively cache folders, based on the name of the projects (instead of the cryptic generic names used in the cache folder). The blog announcing this app is still available, the app is labeled ‘dCache‘ and can still be downloaded:

New utility for deleting Adobe Captivate project cache folders – eLearning

Yesterday a user asked if it would still be functional after the demise of Flash Player. This is due to a common confusion between the authoring tool Flash Builder (now renamed to Animate) and the Flash player needed to play SWF output. AIR application can be built with Animate and do not need the Flash Player. I double-checked it with version 11.5, all works as expected. Look at its UI.

The cache folders of all the projects since previous clearing are shown. The one which is dimmed (blue rectangle) means that it is open in Captivate. I have checked two caches (red rectangle) which I can now clear using the Clear button. It is very simple, but avoids having to search for the folder linked with a project.

Preferences

To clean the Preferences you need admin rights for Captivate. You find two clean options under the ‘utils’ subfolder in Captivate’s installation folder. Run the file appropriate for your OS.

Doing that you are deleting a folder in your profile.  I am on Windows and that folder is under AppDataLocalAdobe and it is named ‘Captivate 11.5’ (for the most recent release). When deleting that folder (can also be done manually) Captivate needs to be closed. A fresh copy of the folder will be restored when you restart Captivate. Do not import the previous Preferences, because they may have been corrupted, reason why you cleaned them.

Problem with deleting that folder is that you lose some customization, because they are stored in that folder. Have a look at the structure of the folder ‘Captivate 11.5’ in my profile:

I have marked the most important subfolders with customized items:

  • objects: will store saved custom shapes
  • PhotoshopTextEffects:  custom Text Effects
  • Themes: I never use a custom theme in this folder, but maybe you did.
  • Workspace: custom workspaces if you are working in the Expert UI. The default UI is the Newbie UI (has big buttons for Library and Properties next to the Assets button).

If you want to keep some custom items, make a backup before cleaning the Preferences. You can move the backup back to the subfolders (in AppData) after cleaning. Personally I always keep the workspaces stored somewhere if I need to reset them because Preferences needed cleaning. It saves time. I always store the custom Themes with the projects, not in the subfolder of the Preferences.

What cannot be restored is the choice for the Expert UI. You will have to repeat that workflow, by activating the option ‘Enable custom workspaces….’ under Preferences, General Settings.

(SWF to HTML) Replacing Rollover Caption/Image

Intro

From what I learned on the forums in  2021, many developers are still busy with conversion of legacy courses (SWF output) to HTML5 output. That can be very boring and time consuming.  This blog gives a quick overview of three solutions for a common issue: the HTML Tracker (under Project) will detect all Rollovers and flag them as incompatible. That means for Rollover Slidelet, Rollover Caption, Rollover Image.

In reality non-compativility is only true for Rollover slidelets: those are SWF-based and are useless. However Rollover caption/image can still be used in courses provided they are accessed only from devices with rollover events: desktop, laptop (either with mouse or trackpad).  They will not be functional on mobile devices (tablet, phone) because those do not have rollover events. You don't have a click event, but a tap event. 

This article will give you 3 possible workflows to replace Rollover images or Rollover captions. They will not be an exact replacement. Rollovers typically have two 'events':

  • Roll over event: triggers the appearance of the image/text.
  • Roll out event: triggers the disappearance of the image/text.

Consequence: the learner has full control over the duration of the image/text screen using movements of mouse or trackpad.  The mouse movement needs to be replaced by a tap event (click). Tap events exist for interactive objects (and hyperlinks). 

To explore the three possible workflows (Success image, Two-state object, Shared action) you can choose between an interactive Captivate course (audio included) or reading a textual summary.

Captivate tutorial

In the tutorial I used some design elements from the Quick Start Project 'Earth'. All interactions are custom. You can watch the embedded version, but I recommend to use this link because it will give you a scalable version. To see the original rollovers, you need to use a laptop or desktop (with mouse or trackpad). Here is the link:

Converting Rollovers for HTML5 output

Embedded version:



Step-by-step workflows

1. Using Success feedback shape

An interactive object (button, click box, shape button) has the possibility for a Success and a Failure message. The Success message appears automatically when the object is clicked or tapped for a fixed duration. Default duration is 3 seconds. In recent versions those messages by default use Shapes, not captions  (see Preferences, Defaults).

Rollover Caption replacement (step-by-step)

  1. If possible, convert the object used to be 'rolled over' to a button. In version 11.5 that is possible for all images. Since version 6 that is possible for shapes and a shape can be used as text container and can be filled with an image. 
    If this is not possible, put a click box (or a shape with Alpha and Stroke set to 0) over the object. This may also be necessary if you want multiple rollover objects in one text container.
  2. In the Properties panel activate the 'Success' message on the Actions tab.
  3. Edit the text in the Success message on the stage to the text you want to appear.
  4. (optional) Go to the Timing Properties, and edit the duration if you estimate 3 seconds not to be sufficient.

Rollover Image replacement (step-by-step)

  1. Identical as for the Caption replacement
  2. Ditto
  3. Import the image to the Library. It needs to be a bitmap image, SVG is not possible.
  4. Check the size of the image
  5. Select the Success message on the stage. Delete the default text and use the Options tab (Properties panel to resize the shape to the exact size of the image.
  6. In the Properties panel for the message, Style tab, switch Fill to 'Image' and select the image to fill the shape.
  7. (optional) Edit timing if necessary in the Timing Properties.

Advantage: very simple solution since you use existing design with feedback messages.  The workflow to have a shape size fitting for the image can take some time but for text, no problem. This solution works for all versions supporting HTML5 output.

Drawback: problem with this very simple solution is that the learner has no control over the duration of the text/image which appears when they tap the rollover object.  You can add audio to the Success shape if wanted (options), it will play when the shape appears.

2. Using Two-state object (toggle)

This solution has been described in detail in this post.  Same workflow can be used to replace Rollover text and image. It is even possible to have both text and (multiple) image(s), and audio. In short:
  • Convert the text container or image to a button. For images that is only possible if you are on version 11.5.
  • Take out the InBuilt rollover and down states
  • Create a custom state where you add the items you want to show when tapping the button
  • Add the command 'Go to Next State' to the button. That will convert it into a toggle button: first click will show the items (as rollover event does), next click will hide them again because you return to the Normal state (as a Rollout event would do) since you have only two states.

Advantage: learner has control over the duration of the appearance, same as for the old Rollover items. You can add as many items as wanted in the second state: image, text, audio, even video.

Drawback: you need to instruct the learner about the toggle functionality. It may take bit more time than the first solution.

3. Shared action with flexible duration

Both previous workflows have some drawbacks, although they seem rather simple. Do not be afraid of this third workflow, because it may even be the quickest solution to replace rollover captions/images.  Once you have a functional shared action, adding it to replace rollovers in any project is a breeze.  Especially when you work in a team, you don't need to be an expert in actions to apply a shared action.

If you didn't watch the Captivate tutorial, watch this one-slide project. It  has been taken out of the complete tutorial. You will see three buttons to reveal popups. The popup will disappear automatically after a certain duration (like in Workflow 1). That duration is stored in  a user variable v_duration. In the example you'll see the default duration, but you can increase or decrease that duration with two small buttons.


You may have seen that an Entrance effect was applied, something what is impossible with the two other workflows.

The duration in the variable for the popup can be set:

  • by the developer (default duration or by using an On Enter action for the slide); 
  • default duration by developer, but ability for the learner to change (as in the example)
  • ask the learner the preferred duration using a Text Entry Box or a Scrolling Text Interaction.

Using Shared Action (step-by-step)

  1. Convert the rollover area to a button to be tapped/clicked. If that is not possible use a click box.
  2. Insert the content you want to pop up when the button is clicked. If you need more than one item, group them (CTRL-G).
  3. Make the group invisible in output (eye icon in Properties panel).
  4. Assign the shared action 'ShowItems' to the Success event of the button. You can download the one I used from this link:
    ShowItems
  5. The parameter is the name of the group you want to show.
  6. Set the value of the variable: either you use the definition of the variable (Project, Variables) or you can use the On Enter event of the slide with an Assign command.
  7. (Optional): If you want to replicate the setup of the example file, add two extra buttons with respectively the commands:
       Decrement v_duration by 1
       Increment v_duration by 1

Advantage: learner has some control over the duration of the appearance depending on the setup. You can group as many items of all nature: images, texts, video, audio.... You can add effects, and even sequencing the appearance with the Delay command.

Drawback: complete control of the duration is not possible. 

Conclusion

The tutorial was created with the most recent version (11.5.5.553) of Captivate, but the workflows can be used in Captivate 11, 10 and 9. That is also valid for the shared action. If you never used a shared action, you can find a short course in this blog. Look for 'Who is afraid of Shared Actions?'. 

All Click/Reveal workflows are a possible replacement for rollover text/image. My choice for these particular ones was made based on their timesaving features. With exception for the second workflow, the learner will not have total control over the duration of the reveal information which they have with a rollover. On the positive side, the second and third workflow allow to have multiple texts and images pop up which was not possible with rollover Caption/Image. It was possible with Rollover slidelets, but they died with the demise of the Flash Player.

The workflows suppose that you are able to open the legacy projects in your present version of Captivate, and that you still have access to the raw files (cptx). If that is not the case, have a look at this blog:

Conversion from SWF to HTML5


Simple Stopwatch with While Loop

Why?

Since a while I planned to:

  • explain the use of the Timer (or similar Hourglass) learning interaction
  • create a new example of using the While condition in an advanced or shared action

For some reason every blog I write about Timing (not timeline) seems to attract lot of viewers.  I have been using the Timer interaction several times, in combination with Time system variables. It is one of the rare interactions that allows you to have an action based on the expiration of a set time (jump to another slide) without having to play with variables and JS or advanced actions.

However that Timer interaction has several drawbacks:

  • You cannot pause.
  • You cannot control the start. It starts running whenever its timeline starts, even if it is hidden in output.
  • You cannot restart after a pause, since you cannot pause.
  • You cannot reset it.

Personally I am also bit frustrated by the While loop, because of the time lag between two executions of the command sequence in the loop. I could see a lot more possibilities if I could control that time lag. ‘Delay next actions’ is not always possible. However I suspected an unexplored possibility which I used in this example. Compare the time showed in the Timer interaction and the digital Stopwatch.

Have a look at the example file, it shows two very simple Stopwatches: a digital and an analog version. You are able to start them, to pause, restart after a pause and reset.  They are very simple, show only seconds.  Reason: for this first version I didn’t want to use JS, everything is done with advanced (or shared) actions.

The workflow step-by-step will be explained in a blog post. You’ll learn how to ‘break’ an eternal loop created with a While condition.

Example project

It is not a full course, only to show the created Stopwatches. There are multiple possibilities to include such a stopwatch in a course: to allows the learner to check time spend on slides, questions. Since the time is stored in a user variable it is also possible to use that to calculate total time…  I would appreciate your ideas. You can watch the project from this link (rescalable) or the embedded version:



While loop

Although this feature appeared with the refurbished Advanced Actions dialog post in CP2017, I rarely see projects using the While loop except for some games.  Such a loop can be eternal or limited to a a specific number or repeating commands. It is always based on a condition, but the result is different from the older ‘IF’ condition.
  1. Eternal loop:  uses the condition ‘IF 1 is equal to 1‘ or something similar, which results always in a positive result. The specified commands will repeat continuously. However! Contrary to the default behavior in advanced actions, where all commands run immediately and in sequence (top-down and left to right through the decisions), the commands in a While loop will be delayed for 1 second before the next run. It is this feature which I have used for the stopwatches.
  2. Limited loop: will need at least one variable. The condition ‘IF var is less than 6′ is an example. The variable ‘var’ needs to start with a number which you define in the variable definition or by another action. The variable will also need to be changed inside the commands. In this case it will probably be done with ‘Increment’. If var starts at 0, the commands will be run 6 times. In this case as well there is a delay of 1 second after each run.

Breaking a loop?

To break an eternal (or limited) loop, you need a combination of two conditions with the AND operator. The second condition will probably refer to a variable. I used a Boolean variable as you’ll see below. That variable needs to be changed by another action. Example:

IF 1 is equal to 1 AND
     v_stop is equal to 0

As long as the variable v_stop has the valueo 0, the loop will continue. But if the variable is toggled to 1, the loop will be broken.

Workflow Step-by-Step

Variables

No system variables were used, just 3 user variables:
  • v_time: stores the number of elapsed seconds. It starts with a value of 0, also after Reset.
  • v_stop (Boolean) has a default value of 0 and is used in the combined condition of the While loop. It will be toggled to 1 when the Pause button is pressed.
  • v_start: stores the frame number of the first frame of the slide. It is necessary for the Reset functionality, where I used the workflow described in this recent post ‘Replay or Reset‘.

Events and Actions

EnterAct triggered by the On Enter event

Both v_time and v_stop are reset to their default values (0). The frame number in v_start is needed for the Reset action.

Start actions triggered by the Success event of the Start buttons

These actions are slightly different for both stopwatches. This is the digital version:

The button used in this version has a custom state to replace the Normal state when the Pause button is used. It has the text Restart. The variable v_stop needs to be reset to 0, because it could have been toggled to 1 when the Pause button was used.

The combined condition for the While loop has been explained before.

The version for the Analog stopwatch:

Needle is a shape with a transparent part to be able to apply a rotation effect. The technique has been described in this blog ‘Reference point in Captivate‘.

The rotation effect was defined as a custom effect. If you want more information, have a look at:

How to use a Custom effect in an (advanced) action

ResetAct, triggered by the Reset buttons

As explained in the Replay/Reset blog, this action needs only one command:

In this use case the Continue command is superfluous, since Captivate is waiting from the first frame for a click on a button.


Tweak Remediation: get out of the eternal loop

Intro

The Remediation feature was introduced with Captivate 6. There are many YouTube videos explaining the setup. I still prefer the original one by Shameer Ayyappan. 

The idea is that a learner when failing a Question will be navigated back to a content slide. When clicking the Next button on that content slide learner will return to the Question, and be able to change the answer. That is not a normal behavior for quiz slides, by design answers are blocked and attempts considered to be exhausted when leaving such a slide. 

There are some issues with the feature:

  • The learner will need to give a correct answer before being able to continue to the next slide. Result is an ‘eternal’ loop until the correct answer is given.
  • Each learner will have a 100% score at the end. Not always what you want as developer.

Quite a while ago I designed a workaround to break the ‘loop’. Yesterday a user in the Adobe forums asked for such a workflow. This is the thread.

As usual I checked if the workflow still is functional on the most recent release (I am on 11.5.5.553) and if it could be improved.  You can guess that I replaced the former advanced actions by the much more useful and flexible shared actions.

Example 

Watch this example: it has two content slides, and two quiz slides. For the first question (T/F) remediation feature is used, but after a second failed attempt the learner will proceed to the next question. Remediation for the first slide is using the first content slide. Similar for the second quiz slide (MCQ): remediation is using the second content slide, and learner will go to the next slide (score) after the third attempt. Watch it using this link (rescalable) or the embedded fixed resolution version below:



Step-by-step workflow

The limitation for the workaround is the same as for the default Remediation feature: you cannot use partial scoring for the MCQ slides, because a partially correct answer is considered to be correct by Captivate.

Sort summary of the default Remediation setup:

  1. The next button on the content slide has the command ‘Return to Quiz’ for its Success event. That command will only be done when the slide is visited from a quiz slide. If that is not the case, the Next button uses the action ‘Go to Next Slide’.
  2. Attempts for the question slide is set to 1.
  3. The Last Attempt action for the Quiz slide has the action ‘Jump to Slide, pointing to the appropriate Content slide

To break the eternal loop:

1. User variables

Create two user variables:

  • v_attempt: starts with a default value of 0 and is reusable for each quiz slide (will be reset to 0). It tracks the number of attempts on question level. There is no system variable possible. Only on quiz level you can use cpQuizInfoAttempts.
  • v_max: will get assigned the number of attempts allowed for each question. In the example file, for the first question it has the value 2, for the second one the value 3. That makes it flexible.

Once you have the shared actions in an external library, no need for this first step. Just drag the shared actions (together) from the external library to the project library and they will be created automatically. Since they are in both shared actions, even if you replace the EnterQuest action by an advanced action, it will still be done by importing the second shared action FailureAct.

2. EnterQuest (Shared action)

This (standard) action is triggered by the On Enter event of the quiz slide.

For each quiz slide you’ll need this action to set the value for v_max and to increment the value of v_attempt by 1 to track attempts. This shared action has only 1 parameter: the literal which is the value of v_max for this particular quiz slide. If you want the same number of attempts for all the quiz slides, you can replace this shared action by an advanced action of course.

3. FailureAct (Shared action)

This (conditional) action is triggered by the Last Attempt event of each quiz slide. 

It has one parameter as well: the content slide which needs to be used for remediation.

4. Next buttons

Similar to the default Remediation, you need a Next button on each content slide with the action ‘Return to Quiz’.


Let's Play and Dream

Intro

I want to try to keep the tradition to offer a special blog at the start of a new year. Like last year it is a game, hiding my greetings card. There is some nostalgia here as you will read.

On my personal blog you can still find the very first game I every created exclusively with Captivate: no Javascript, no use of widgets nor other applications. That was almost a decade ago. Since that  game used Captivate 5 , it took me quite a number of hours to get a satisfactory result. If you still have a browser with Flash Player plugin enabled, you can even watch the embedded game in this post:

http://blog.lilybiri.com/concentration-game-created-exclusively-with-c

With version 11.5, all interactive learning interactions were taken out (lack of use), including the games. You will recognize the former ‘Memory game’ in this game which I offer as an interactive Greetings card for 2021. Last year I also offered a game for the Chinese New Year.

Using version 11.5,  this version took me only about 20% of the time I spent in 2011 for the original version. This game uses only one shared action with 3 parameters, one advanced action for reset (and another one to restart the game). It is also much more flexible than the original game. Creating another game with more or less pairs will be a breeze due to the shared action. Finding or creating the images will take lot longer than adding the actions. It is possible to create 'pairs' that are not identical images: for language learning you can pair an image with a word (and maybe even audio), you could pair words in different languages, acronyms with their description etc...

Personally I would have used CpExtra to reduce the statement lines in the Advanced actions, because that wonderful widget allows to Assign, Show, Hide, Disable multiple objects in one statement. However, for the sake of consistency I have created the advanced actions  in the default way.

Have fun in 2021!

Game

As usual, I provide both a link to a rescalable version, and an embedded one with a fixed resolution.



Invite

I want to organize a webinar about this topic:

Remodeling Advanced actions to flexible Shared actions

This would be for developers with some experience about variables and  Advanced actions. If you are interested, please add a comment. From exploring Shared actions I learned to use a different mindset and could offer practical tips. You can even send me an advanced action you estimate to be appropriate to convert to a shared action.


Embed Software Simulations (Knockout slide)

Intro

Over 10 years ago I posted a blog 'Create/Use a Knockout Master slide'. At that moment SWF was the only way to publish a Captivate project, and in versions 5 and 5.5 Themes were not ‘grown up’ yet to their present power. Meanwhile I have pointed many users to that old article, and many claimed it was still useful. However time to clarify the slight differences and offer updated tips., Of course I will use a HTML example. 

Example Tutorial: 'Shared actions as Template'

This is a Captivate tutorial explaining how you can use a Shared action to create variables and as template for advanced actions. There are two versions. Here is a screenshot showing the difference in sim slides between version 1 (Full-size) and 2 (Embedded)

Version 1: Default software simulation

Personally I never use a software simulation in Demo mode, because it is better replaced by a Video Demo for its quality and advanced editor. I created a Training simulation, meant to learn about this Captivate topic. The UI of Captivate is rather complicated, hence my choice of a resolution 1600x900px. The ratio is important, here the common 16:9. In the limited space here, I don't want to embed the simulation because that would be almost useless. I published it as a HTML rescalable project. You can watch it using this link:

Full-size tutorial

In this first version, instructions are given using Audio. The captured Backgrounds (see Library) are filling the slides. Although this tutorial is rescalable, you will realize that using this on the limited space of a smartphone with a phone browser is not appropriate. It may be used on tablets (no incompaté:ible features), but the preferred devices are laptop/desktop. 

Version 2: Embedded in a content slide

I used the workflow explained below to create a second version, where the software sim slides are rescaled and embedded in content slides (1280x720px). On those slides there is space for a logo and more. The narration was replaced by text instrutions on the same slide as the software sim. Published project is also rescalable HTML. Even a tablet will probably be impractial in this version. Use this link:

Embedded tutorial


Setup for Embedded sim slides

For this example the simulation slides need to be embedded in a project  with a resolution of 1280×720 pixels. The captured slides were created with a resolution of 1600x900pixels, which is larger than the final resolution.  

To embed the sim slides, they need to be rescaled. If the original simulation slides have the correct resolution ready for embedding, you can skip Step 0.

Step 0 in Captivate (only if captured resolution is not correct)

Rescaling the software simulation to 2/3, which leads to a resolution of 1066x600px. You choose the resolution needed for your project, but keep 'Maintain Aspect Ratio' and 'Rescale all objects'.  Those are the default settings.

Step 1 (in Photoshop or other app) – create the Knockout image

In Photoshop I created images on two layers: the first one (FullTexture' will be used for normal content slides, the second one is the 'Knockout' image which has a transparent part.  Size of the file is same as the end resolution (1280×720). I used one of the provided textures in Photoshop as Fill. In the second layer I deleted a rectangle of 1066x600px to create a ‘knockout’ part in which the sim slides would fit. You see the size of the margins (with texture) in the screenshot: to the left – a vertical bar with a width of 200pixels, to the right one with a width of 14px; at the top another with a height of 90 pixels and a the bottom a bar with a height of 30 pixels. 

You can import the Photoshop file, and will have both layers as PNG images. See 'Roundtripping with Photoshop'.
You can use another graphics application if you cannot use Photoshop. You could also create a freeform filled shape in Captivate, start with the hexagon, which has 6 points.

Step 2 (in Captivate) 

Some maths to start with:
  1. calculate the difference between the widths of the vertical bars:     200 – 14 = 186 pixels
  2. new width project will be 1066 + 186 = 1252 pixels
  3. calculate the difference between the heights of the horizontal bars:   90 – 30 = 60 pixels
  4. new height project will be 600+ 60 = 660 pixels
Rescale the project using these settings:
  • deselect ‘Maintain aspect ratio’ and introduce the new dimensions
  • under ‘New Size is Larger’, select ‘Keep project the same size and position project Bottom Right; I choose this because the bottom bar and the right bar have the smallest dimension; you can choose another option if your smallest margins are elsewhere.

The result will look like this:


Step 3 (in Captivate)

 Rescale now to the final size, for this example to 1280x720 pixels, with settings:
  •  deselect ‘Maintain aspect ratio’ and introduce the final dimensions
  • under ‘New Size is Larger’, select ‘Keep project the same size and position project Center

After this rescale of the project it will look like this:

Step 4 (in Captivate): Master slides

 In the original blog post it was possible to create a master slide which is partially transparent, but that is no longer possible in the present versions with the Themes (new since Captivate 6).  Here is the master slide panel, where you see some master slides of the custom Theme 'Knockout' which I created:

I used the two imported PNGs from the Photoshop file to create:

  1. The Main master slide, where the FullTexture image is set as background image. You see the setup in the Properties panel:
  2. Based on that Main master slide, I created some content master slides. You see acouple of them in the master slide panel above (Title, Light). The Blank master slide always has to remain Blank, it is not using the Main master slide.
  3. The Knockout master slide. You cannot use the KnockoutTexture image as was done in the Main master slide, it needs to be a separate image as you can see in the Timeline and in the Properties panel. I added some objects and placeholders:

Step 5: Apply Knockout to simulation slides

Up till now the simulation slides used the Blank master slide. Change the master slide to the Knockout Master slide. It is very important that you do NOT check the option 'Master slide objects on top', because you'll lose the textured parts of the image.





Retake (quiz) Tweaks

Intro

In the recent weeks a lot of questions about tweaking Quizzes appeared. 

Themes, Timelines and Shared actions are amongst my favourite topics, and I needed a long sample project, for this blog about combining two tweaks for Retake Quiz:

  1. The quiz slides are not all in sequence, but distributed in the project in between content slides. How can the learner see only the quiz slides during Retake, not the content slides which are in between the quiz slides?
  2. On the score slide on failure, how to offer the learner the choice between Retaking only the quiz, or retake the full course including all content slides?

Sample Project

This project has 3 sequences of quiz slides in between content slides. Question slides have one attempt, on Quiz level you have 6 attempts. On the score slide you have the possibility to Retake quiz, or to choose to retake the course. When passed or after the last attempt on quiz level, you have the Review functionality, using the customized Review message described in an other article Customized Review Message.

In this example project design elements (not interactions) from the Quick Start Project “Wellbeing” have been used. You can watch the embedded version below or use this link to watch a scalable one.


The project was created with:
  • 5 advanced actions
  • 6 shared actions, replacing 45 duplicate advanced actions

In this post I will only explain the actions for the two Retake Tweaks, not the actions for the multiple Forced view cocntent slides.

Workflow

Situations and events

In this course 3 different situations occur for the quiz:
  1. First view: the tutorial will be followed as designed. It is not a linear course, because the slide with the 3 topics is a sort of dashboard, from which branching occurs. Each branch ends with a question slide. The return to the dashboard slide is configured using the Success and Last Attempt action of that last quiz slide.
  2. Not first view with Retake Course: is a Retake but including all content and quiz slides. All quiz slides, and the dashboard (Topics) slide need to be reset to their initial state. Difference with 1: the number of attempts on quiz level.
  3. Not first view with Retake Quiz (only): this is the default Retake situation, but needs actions to skip the content slides situations in between quiz slides.

This screenshot of the Advanced Interaction panel shows the relevant interactions and events needed to cope with those 3 situations; the relevant actions are marked with a colored highlight box:

There is one special Advanced action, invisible in this panel: On Enter event for the first question slide has an advanced action FirstQuestion. On Enter actions for question slides do not show up in this panel, because the Success column is linked with the Success action of the question slide.

Variables

There are several reusable variables (v_1, v_2…. and v_counter) needed for the multiple Forced View content slides, and the system variable (cpInReviewMode) for the custom Review message. For the Retake tweak workflow these variables are used:

  • v_course: has a default value of 0. That value is valid for situations 1 and 2, where content slides need not to be skipped. The variable will be toggled to 1 for situation 3, where content slides need to be skipped.
  • cpQuizInoPassFail and cpQuizInfoAttempts: both quizzing system variables
  • v_themev_timelinev_shared  are used to track the completion of the three topics, on the Topcis slide (3). I mention them because they will appear in the advanced action EnterTopics.

Actions

EnterTopics (Advanced action) triggered On Enter for slide ‘Topics’

This action checks the values of the variables associated with completion of the three chapters. Only when all have been visited, the learner will be navigated to the score slide. That score slide shows the results of the complete quiz.

There was no possibility to use the variables (v_1, ….v_6) on this slide. Since the action is only used once, it made no sense to use a shared action neither. For situation 2, this Topics slide needs to be reset. Reset is happening with the RetakeAct action (see further).

FirstQuestion (Advanced Action) triggered by On Enter  First question slide

Only the second decision (RetakeCourse) is relevan for the Retake tweak, first decision is for the custom Review message. That second decision is required for Situation 2. Since the Retake button is used in that situation, by default the learner will be sent to this slide, the first question slide. But in Situation 2 the learner wants to see the full course. For that reason learner is redirected from the first question slide to the Topics slide.

EndQuestion (Shared action) for Success and Last Attempt of last question in each sequence

Each decision corresponds with a situation (same sequence as situations).

This action skips the content slides in Situation 3 – ‘Decision SecondNormal’. In that situation the last question will be followed by the first question in the next sequence of questions. The two other decisions - situation 1 and 2 - navigate to the Topics slide.

There is one exception: the last question slide of the last sequence needs to navigate to the score slide. I could have used the same shared action and give the second parameter the value of the score slide. However due to my experience with low bandwidth situations, it is better to use Continue for the Success/Last Attempt actions on question slides. For that reason, I used the shared action as template to create one Advanced Action:

EnterScore (Advanced Action) On Enter for score slide

As explained under Variables, the user variable v_course is tracking whether a normal Retake will be done, or a full course Retake. Of course the button to Retake full course is not needed when the quiz is passed. If the learner failed, the value of v_course is toggled to 1. That stands for a normal Retake (no content slides). The start value was 0, which meant that all slides were viewed the first time. That value will be reset to 0 by the RestartAct.

RestartAct (Advanced Action) for Success Event custom button (Bt_Restart)

If the learner fails, Bt_Restart will appear on the score slide. It is a shape button, having the same look (style) as the Quiz buttons. It will trigger this action:

It is a standard action, inviting the learner to click the Restart button.  At the same time it will reset the variables for the course situation (v_course) and for the items on the Topics slide, both variables and states. That slide was the only ‘forced’ slide where the ‘Retain State on Slide Revisit’ was checked, hence the need to reset the states.

The state change for the button is to pop up the explanation text, inviting to click the Retake button. As usual I did drag the Review button under the Retake button. Review button will only appear after the Quiz is Passed or all attempts on Quiz level are exhausted.

Possible extensions

It would have been possible to restrict the Force View on the content slides to the first view. That workflow is described in these two posts presenting yet another Shared action:

Force First View

Advanced to Shared action

Of course Narration could have been added as well. And that same shared action could also improve the second view of a content slide by skipping that narration with the same micro-navigation.