Quiz/Score slides in Quick Start Projects - part 1: Non-responsive projects

Intro

I already published blogs to help you using and editing content slides from the Quick Start projects which you find under the Assets. Those individual slides are also indicated as ‘Ready-to-go Slides’.  The first blog was about the static objects, second one treated the interactions:

Editing Ready-to-go slides (Quick Start Projects) - part 1: Text and Images

Editing Ready-to-go slides (Quick Start Projects) - part 2: interactions

In the forum a question was posted about customizing Quiz and Score slides in Quick Start Projects.  You can consider this post as a third part, because those particular slides are tricky compared with normal content slides. If you know the ins and outs of quiz slides, you can skip the next part and go immediately to the Practical tips. Since the Quick Start Projects are coming in two flavors: responsive (fluid boxes) and non-responsive, this blog will focus on the non-responsive ones, the next blog on the responsive projects.

Quiz Refresher – Overview table

Quiz and Score slides are always based on dedicated Master slides, which are compulsory in each Theme: 4 master slides for questions and one for the Results slide. Those master slides have a lot of embedded object with inbuilt functionality. An embedded object has no individual timeline, and should not be deleted if there is no way to uncheck its presence on the slide.

Those master slides are also used for Knowledge Check slides and for Pretest slides. You cannot convert a slide created as one of the three types to another type. That is the reason you’ll find in the QSPs both Knowledge Check and normal Quiz slides.

The Results or Score slide will appear automatically when you insert a question slide, but you may also choose to create a score slide when you have only scored objects using the Quiz Preferences. It is impossible to delete a score slide, it can only be hidden. Reason: it is still providing functionality even when it is hidden. This blog post can clarify what I mean.

Tables

You can download this table identifying the Score, Quiz and Knowledge Check slides in the QSPs available at this moment (May 2021).  In the table you’ll see the slide number of the slides, type of question and whether they have a dedicated master slide (which should be the case in a custom theme). The score slide and its possible master slide is mentioned separately (see first Tip).

QuizQSPNonResp  is the table for non-responsive Quick Start Projects. Red-colored items can cause problems.

Tips

Score slide

It is NOT possible to insert a results (score) slide from any QSP in a custom project at all.  This may come as a disappointment. They are dimmed in the Assets panel. If you want them as standalone slide in your project this is the only possible workflow:
  • Open the QSP as a project.
  • Delete all slides you don’t want to use; even if you delete all quiz slides in the QSP, the results slide will still remain. Of course the inserted fields (system variables) will only get a value if you have at least one scored object or question slide.
  • Add your slides to the project. If you have quiz slides or slides with scored objects which are set to include in the total score, the results slide will get the values of the uses quizzing system variables on runtime.

You don’t like this (neither do I)? If the QSP of your choice has a complete custom theme you are lucky: the results slide has been edited and will be used once you add the first quiz slide from this QSP. On adding a quiz slide, the results slide will be added automatically and will use the results master slide of that theme. Bad news: only a limites group QSPs are in that situation, Safety and Wellbeing. The QSPs League and Earth have a master slide which is partially customizedand you can easily make it look like the one in the Assets panel. But the other themes fail for score slide design.

There may be another issue with a custom score slide, if you want to add more system variables. I will explain that more in detail in the second part (responsive projects), because it is even more important for Fluid Boxes projects.

Quiz slides

Inserting a quiz slide as ready-to-go slide is possible, if the type you want is available. All the QSPs in the table have slides for Multiple Choice questions. Sometimes you’ll find both MCQ with one correct answer, and MCQ with multiple correct answers but changing from one to multiple correct answers can be done easily.  Some projects also have a True/False question. Three QSPs (Safety/Wellbeing/Alliance) also have a Matching slide.

Why is this important to know?  Reason is the same as for the Score slide: if the theme has master slides used to create the example slides this is not important. Once you have the master slides of the QSPs you can add quiz slides from the quiz menu, they will get the look which you expect, similar to the downloaded quiz slide. That is even true for other types of questions. The two excellent QSPs for that feature: ‘Safety’ and ‘Wellbeing’ are in that situation. They have designed three out of the 4 quizzing master slides: “MCQ:T/F,…  “, “Matching” and “Hotspot”. Only the Likert type (getting deprecated since unusable in responsive projects) is missing.

For those two QSPs, once you have the theme (which is the case when you have one imported slide) you can safely add Quiz slides of all types. They will get the expected look, same as the score slide.

However that is not the case for the other QSPs. The QSPs “Earth” and “League” has some editing to the quizzing master slide, but the top image (normally visible in the Ready-to-go quiz slides) is not there, can easily be edited.  For the other QSPs you can only use the quiz types offered in the project, but not add any other question types because the master slides are not available. It is possible to duplicate quiz slides, but you will not be able to add a (True/False for some), Matching, Sequence nor a Hotspot quiz slide having the same look. Look at this last screenshot, showing the master slides from the QSP “Wired” which normally has dark blue backgrounds. Not only the backgrounds are missing, but even the object styles are different from  those shown on the example quiz slides:

You will be able to edit some features after insertion of a Ready-to-go question slide: feedback messages, score, penalty, shuffling, switching from one to multiple correct answers for a MCQ, actions and when available Advanced answer feature.

Summary – conclusion

What are the possibilities if you want to use a quiz, Knowledge Check, Score slide from one of the Quick Start projects? Look at the table I provided above and you’ll see that there are two groups of Quick Start projects, based on the availability of master slides reflecting the ready-to-go slides:

Group 1: ‘Safety’, ‘Wellbeing’ and – with some restrictions - ‘League’ and ‘Alliance’

I would first recommend for ‘League’ to add the images (which you can easily find in the Library using the right-click menu) to the quizzing master slides.

  • You want an available question slide: no problem, you can even insert them directly from the Quiz menu, because the master slide has all the design of the question slides.
  • You want question slide which is not available: with the exception of ‘Likert’ use the Quiz menu to insert the question slide, it will have the look of the available question types in the QSP.
  • You want a score slide: you cannot insert the available score slide as an individual slide. However if you have at least one question slide, the automatically inserted Score slide will have the design of its dedicated master slide.

Group 2

All the other QSPs are in this group.  Repeating the same choices:

  • You want an available question slide: insert them as individual slides from the QSP. You can duplicate the question slide (for a scored slide check the Interaction ID, but normally it will be changed) to have more slides of that type.
  • You want question slide which is not available: that is a problem since you don’t have edited master slides. Some workarounds are possible: you can use a MCQ slide to mimick a T/F slide. However that is not possible with Sequence, Fill-in-the-Blank, Matching (if it is not available).
  • You want a score slide: impossible unless you use the full project workaround described before. You will get a score slide, but it will use the master slide of the project itself, which will for sure not have the look you expect.


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 responsive theme, 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.