Game: using JavaScript in a Shared action

Intro

Last week I presented at the Adobe eLearning World 2020 “Deep dive into Captivate with Advanced and Shared actions’. I had prepared 3 different scenarios, to be ready for any audience. Due to the poll before the session I decided to go for the ‘newbie’ scenario because the majority was new to Shared actions, and a considerable amount of attendees even to Advanced actions. That means that intermediate and advanced users were perhaps disappointed. To remediate I plan some blogs and examples as illustration. This is the first one.

Javascript and Shared actions

It is possible to have the command ‘Execute Javascript’ embedded in a shared action. When talking about games, randomization is mostly used but not a ready-to-go feature in Captivate. In the session I showed a very simple board game where the tossing of a dice is simulated, and the board cursor advances based on the result of the dice toss. That was realized with one shared action.

This game uses random numbers as well. It is a memory game which can be used in many variations due to the flexibility of shared actions, variables and multistate objects.

Game

You will learn about the game rules in the game. There is an easy and a more complicated way to play the 3 games. Hope you don’t keep only the easy one if you are in for some memory training:

Play with the rescalable version using this link or with the embedded (fixed resolution) version:

Have fun!


Tips and Tricks: Advanced to Shared action (intermediate)

Intro

Recently i presented ‘Deep dive into Captivate with Shared and Advanced actions’ at the Adobe eLearning Word  202 conference.  During that presentation I used the ‘newbie’ scenario because the start poll pointed out that the majority of attendees were not really familiar with those actions. For the intermediate or advanced user, will try to post some blogs about tips which I would have included in my alternative scenario.  You may have seen the memory game which I published yesterday, and shows how you ca n include short JS scripts in the shared action.

The following tips are linked with my more than 19 years history of using Advanced actions, and 6 years with Shared actions. My viewpoints have changed quite a lot in that period. Presently my natural attitude is to reflect in most situations whether a Shared action is not appropriate. Why? One of the reasons is of course rIusability (with an external library), but even more important: it forces me to find better workflows. 

Throughout the presentation I used a demonstration project (include d here as well) FlipCard.   It started with an original slide from the Quick Start Project ‘Alliance’. I added two slides where the functionality of the original slide was extended  to have more functionality (toggle flipcard, forced view, reset of slide on re-enter). I used two different workflows for the Advanced action and the Shared action slides. Why? You’ll discover it below.

You can download the project file using this link.

FlipCard

Actions in the slides

Advanced interaction panel (F9) shows all actions on the 3 slides

Slide 1 (original from the QSP)

As you can see in the screenshot above, this slide has no action On Enter (normally meant to Reset), only   3 similar advanced actions for the flipcards. Those cards are shapes used as buttons, with two states: an image in the Normal state and the explanation in the Active state. Here is a screenshot of the advanced action for one flipcard:

The state Active is shown instead of the Normal state, a spin effect is applied and the shape button (flipcard) is disabled.  This means:

  • You cannot flip back to the image, because the shape button is disabled
  • Nothing happens when all flipcards have been flipped. Without a default playbar or adding a custom Next button, the learner will be blocked
  • When revisiting the slide:
    • the images will show up again, because the option ‘Retain state when slide is revisited’ is not activated
    • the shape buttons remain disabled, no clicking possible
    • which also means there is nothing to pause the slide, after moving throughout the duration (3seconds) of the slide the playhead continues to the next slide

 Slide 2 (extended Advanced actions)

To fix the issues of the first slide, the advanced actions used here look like this example:

This advanced action has two decisions. The changes in a nutshell:

  • The command ‘Go to state ‘Active” has been replaced by ‘Go to Next State’; this means that clicking act a s a toggle, since the shape buttons have only two states. It would also have been an advantage if this action was converted to a SA, one parameter less.
  • To track the clicks, a variable is needed for each of the flipcards, in this screenshot it is v_one. Its default value = 0, is toggled to 1 when the flipcard is clicked and that value remains 1. It is a so-called Boolean variable.
  • The second decision is conditional, checks the value of all the tracking variables and shows in this case a Next button.

When revisiting the slide, some issues are now automatically solved, but to have the slide behave completely like the first time, an action On Enter for the slide was used. 

That action will hide the Next button, and reset the tracking variables to their default value, 0.

Slide 3 (Shared Actions)

Many expected that I would convert the Advanced actions of the second slide to shared actions (at least for the flip act), but I used another workflow. If I use the Shared action ‘FlipAct’ as template for an advanced action for the first flipcard (as demonstrated in the session) it would have looked like this (Preview window):

That looks more complicated:

  • The command ‘Assign var with 1’ has been replaced by an Increment command
  • A new variable v_counter was added to keep track of the clicks. It is only incremented on the first click as you see in the second decision. For shared actions I don’t mind so much about needing more variables. Whe they are not defined as a parameters, they are created automatically when importing the action. Moreover this makes the last decision easier
  • since I need only to check the value of v_counter. Instead of comparing with a literal (which should have been 3 in the first project), another variable v_max was used which will be populated with the On Enter action. That will make the shared action more flexible. 

Result of this workflow is that only 3 parameters are needed for the shared action FlipAct:

For the Reset issue, I could have used an Advanced action, slightly different from the second slide. However I also converted it to a Shared action. Why?  When I drag that SA to another project, all variables (none are parameters here) will be created. For that same reason, I added some variables (here  7). This is a filled in action to be used On Enter, only the last two commands need a parameter. One of them is the number of flipcards (value fo v_max):

Not convinced?

For those who are not yet sure that the second workflow is better for shared actions, have converted the first Flip advanced action to a shared action. These would have been the needed parameters:

This is the situation if you have only 3 Flipcards. If you have 5 flipcards, you’ll will have 2 extra parameters: tracking variables.  The risk of missing to indicate the correct parameters when attaching the shared action to the shape buttons is much bigger than with the shared action I used in the third slide.

 

'Advanced Interaction panel' - Q&A

Why?

Some panels in Captivate are ‘under-used’, perhaps because they never show up automatically in the Newbie UI which is the standard after installing the application. You may have discovered the Branching view panel, but from what I hear on the forums the Advanced Interaction panel is much less visited.  Personally I use it very frequently, find it very useful (contrary to the Branching view) in many circumstances. Both panels will open as floating panel.

You have 3 ways to open the Advanced Interaction panel::

  1. By using the shortcut key F9
  2. From the Project menu which has Advanced Interaction as option
  3. As expected, since it is a panel, you can also open from the Window menu.

Although it looks like most l panels, it is a ‘passive’ panel. You cannot really edit an field in this panel, but that doesn't mean you have to skip reading the rest of the post. 

Exploration of the panel

Name of this pane can be confusing. It is not limited to information about Advanced Actions (often confused with interactions).Let us explore it in-depth.

Control bar

In the top of the panel you’ll see the control bar. of this screenshot.  I ‘translated’ the tooltips:

From left to right:

  • Next to view you see ‘All Scorable Objects. That label is not correct, because you can show not only scorable objects. This is a button, when you open the panel, default is the ‘pressed’ state. That means that all the filters (icons further on the bar) are selected. There is no way to deselect them all at once, has to be done manually. But if some or all of the filters have been unselected, pressing this ‘All Scorable Objects’ will activate all Filters. I really wished this was a toggle button to select/deselect all filters but that is not the case.

  • Next to ‘Filter by’ you have icon buttons,. The explanation is visible in the screenshot above. Those icon buttons are toggles. In the screenshot all filters are active with the exception of  two which I deactivated: 'Interactive Widget'  because since 11.5 there is no interactive widget (learning interaction) packaged with Captivate anymore, and Hidden Slides because I don’t have hidden slides. Two of the item categories in the filters can never be scored: Hidden slides and Hyperlinks. The other categories can be scored, but need not to be scored. Think about Drag&Drop slides which can be used as Knowledge Check slides. Same for Text Entry Boxes, buttons, click boxes. Knowledge Check and Pretest slides will appear in the same style as normal Question slides.

  • In the center you see ‘Total…x points’. Beware; this is the total of the scores of the items shown in the table using the filters. If you show only the questions, you’ll see the total score of the questions, but scores of  other scoreable objects will not be included. 

  • At the end you see three buttons: first will collapse all items to the highest level (which is slides), second will expand all items and the last allows you to print the table which can be useful.

Columns

Some of the column headings are confusing.  Let us start with a very simple state of the table, which can be supplementary to or an alternative for the Filmstrip. All filters are deselected in this screenshot (marked in purple). Advanced interaction panel is floating, you can resize it. This is the minimum size which is possible, the missing columns are not relevant in this status.

In this situation you see only the slides (top level item)… with the exception of the Question slides. The first column shows the slide numbers, the second the name if you edited the name. The missing slides 4-11 are quiz slides. It is a bit strange that the Results slide is showing. 

The column ‘Success’ heading is misleading. On slide level this column shows eventual actions triggered by the On Enter event.   The actions are identified: simple action (slide 1, 13), Advanced action  (slide 2) or Shared action (slide 3). 

The panel is dynamically linked to the Filmsbrip. If you click another slide, it will be selected in the Filmstrip and its Properties panel will appear. 

Similar the column ‘Failure is showing the actions triggered by the On Exit event of the slide.

When the filters of the first screenshot (control bar) are activated (sorry Hidden slides i added here, but is not relevant), this will be the result:

All objects from the filter categories are now visible, with their actions. The type of object is in the  second column. ‘Smartshape’ is a shape button, Image is a bitmap image used as button, SVG is a SVG used as button. I don’t have click boxes, TEBs nor Drag&Drop in this example.

When you select an object in the table, the dynamic link will result in the object being selected on the stage and its Properties panel popping up. A nice enhancements would be to have the Quiz Properties being selected when you choose a quiz slide. 

Success column shows the action triggered by the Success event in this case. It doesn’t matter whether there is a score or not.

“Failure” column is still not a correct heading for most instances. Only when the number of Attempts is set to 1 it will be a real Failure event. For attempts higher than 1, the name should be replaced by ‘Last Attempt‘ action. If the number of Attempts is Infinite, there will never be a Failure attempt, you can ignore that column.

Watch the other columns having an entry, they summarize the settings for scored items and quiz slides: score (Points), penalty (Negative score), whether the score is added to the Quiz total (default quiz slide’s score is always added, but not marked here), if they are included in the quiz and reporte (get interaction ID-. All settings of the Reporting section for interactive objects.

Missing

Advanced Interaction panel is fantastic. When using Drag&Drop slides the Success column will show the action ‘On Success’. When you have a limited amount of Attempts, the ‘Failure’ column will sow the ‘Last Attempt’ action. But if you are a fan of the Object Actions  (like me) you have to know that they will NOT appear in this panel. Maybe in a future release?

Use cases

Quiz result

A question often appearing in the forums ‘I have answered every question correctly, but I don’t have a score of 100%’. 

Answer; use F9 to open the Advanced Interaction panel. Check the total score on top (all filters are selected by default). Is that what you expected or is it higher? If it is higher look for other scorable objects in the Points column.

Working with Advanced/Shared actions

Having an overview of all events to which you have attributed actions is a time saver.  Moreover, due to the dynamic link, you can navigate immediately to a ‘suspicious event’.

Example 1: You have created some enhanced advanced actions to replace the present ones. To double-check if the replacement has been done for all the events, use this panel.

Example 2: After testing out an advanced action, you’ll replace it with a shared action. Did you not forget some?

Example 3: some slides do not reset on testing. Check if they have (or need) an On Enter action. Find the slide without On Enter action in this dialog box.

Example 4:  because your project now needs to be viewed on multiple devices and browser resolutions, you decided to replace all images used as buttons by SVGs. Filter on the buttons and you have a good overview of tthose image buttons (at least if you use a consistent labeling system).

Find the Twins - Game (Shared Actions)

Inttro

Looking back in my blog history, I remember very well the first Memory Game created 10 years ago (with version 5.5). It was quite an adventure, because I wanted to prove it to be possible without having to use ActionScript  (since only SWF output was available).

Now 10 years later, ActionScript has been replaced by JavaScript but  I still try to create games without having to use JS.  That is possible when randomness is not necessary as is the case for this game. However newer features like multistate objects, SVGs which can be used as buttons, and most important 'Shared Actions' make it a lot easier now. Kudos to the Captivate team!

Have fun with the embedded version (fixed size), or the rescalable version using this link



Extensions possible?

The structure of this game allows a lot of flexibility. The two challenges have a different total number of shapes. Shapes can be replaced by images to convert it into a kid's game. It is also possible to increment the number of pairs, or to make a search for trios instead of pairs.

SVGs  used as buttons have several advantages. You can limit the clickable area to the image, instead of to the bounding box. They remain crisp ion all devices, whatever the browser resolution.  Disadvantage is that they take a while to redraw, which you may have seen when the slide was reset. 

As you could read I used:

  • 3 shared actions.  one of them was used 30 times!  If you are not yet convinced about the value of Shared actions over Advanced actions, I will present about both on 24th of June in the  Adobe eLearnng World 2020 conference.
  • 2 advanced actions for the Reset action On Enter for the challenge slides
  • 4 variables




Game: test your logical mind!

If you have watched my course about Using Shared Actions, you'll already know that this is one of my favorite features. It makes it possible for newbies to create rather complicated tutorials without need of programming skills. 

I already uploaded a game recently, here is another one. You can use this link or play with the embedded one:


It was created with SVGs (thanks to Illustrator), one shared action, two advanced actions (which could be converted to shared actions as well), Drag&Drop features, multistate objects. The setup makes the game very flexible. In the example sequences were all with 6 shapes, but you can create them with any number of shapes. You would have to find a new indicator for the degressive score if you have more or less shapes. The adult version can be converted to a kid's game, by using easier sequences . Have fun!

Who is afraid of ... Shared Actions? Crash course - Lesson 2 (step-by-step)

Intro

You prefer step-by-step workflow for this second lesson over a video. Great. Let us start with this second lesson,  explaining how to use the shared actions from the first project in your project. Believe me: it is as intuitive as the first lesson.

Workflow: (re)Use shared actions in your projects

Step 1: Preparation

To follow this workflow, you need a project with at least two slides:

  1. Content on the first slide is not important, it is meant to allow you to test the project.
  2. Second slide needs to have these objects:
    • Two multi-state objects. Content is not important: audio, video, graphics, text or combinations in the states. Only requirement: same number of states in both objects (although you can have some identical states). They are labeled Container1/SVGContainer in the Timeline below.
    •  A shape or caption which will be used to insert the variable v_counter. You will insert the variable later on. Labeled SS_Counter in the Timeline.
    • Two navigation buttons: Next and Back. They are labeled SB_Back and SB_Next in my project (shape buttons)
    • A button to jump back to slide 1, with the action ‘Jump to slide 1’ or ‘Go to Previous Slide’. I used a SVG as button, labeled SVB_Home.

Here is an example of the Timeline of the project I use, the names are mentioned above::

If you are eager to start but do not have time to create a custom project, you can download this one:
Lesson2Start

Please do not use the SVGs from SVGContainer in your projects. They were extracted from a licensed AI file.

Step 2: Variables

Have a look at the variables, using menu Project, Variables.  The default view will show you the two user variables which are added to each project:

Step 3: Open External Library

Use the File menu, option Import, External Library. You have to point to the original project which has the shared actions on board.  In this case that will be the start project which you used in the previous practice; “SlideShow”.

The project will not open, but its library appears as a floating window in the left top corner of your screen. You will probably need to increase its height, and collapse the Images folder to see the Shared Actions folder clearly. 

You can use any object directly from this external Library in your project. I used the Home button (SVG). However for the Shared Actions, it is better to not use this method. It can be done if there is only one independent shared action, but in this example the three actions are somehow linked due to the used variables.

Step 4: Drag shared actions to project Library

Select the three shared actions in the external Library, and drag them to the project library. They will appear in that library with the Usage set to 0. Be sure to drag all the actions  at once. Reason:  they share some variables. which could lead to the creation of multiple instances of the variables. You will check this in step 5.

Step 5: Check variables

Use Project, Variables and… surprise! The variables used in the shared actions have appeared, including their default value and description

You can now insert the variable v_counter  in the text (see Timeline) SS_Counter, using the X button in the Properties panel, Character part.

The text will look like this:

…. $$v_counter$$

Beware: if you see more than one instance of a variable, it means that you didn’t drag ALL the shared actions at once. In that case, please delete the shared actions, delete the variables and retry Step 4.

Step….

You can now repeat what you learned in the previous lesson: drag the shared actions to the slide and to the navigation buttons, and choose a ‘value’ for the parameters.

Do not forget to test if everything is working as expected. Use F11, Preview HTML I Browser for the best preview.

More?

The step-by-step workflows described in this and the previous blog (or in the video and the next video to be published soon)) can be used for all the interactions in the Demo project, provide you have the shared actions. Not only for those rather simple interactions! It is also possible for more complicated projects like the Matchstick game, which I published recently, and for many more use cases.

I sincerely hope that at least some Captivate users will realize possibilities.  Ask an expert to design shared actions which can be used by any Captivate developer,  without having to dive into advanced actions, variables etc. .

I may post an 'epilogue' to this short crash course, listing up some Q&A. If you have a question to contribute, do not hesitate to post it in a comment.

Who is afraid of ... Shared Actions? Crash course Lesson 2 (video)

Preparation

In Lesson 1 you started from an existing project, which had created objects for the Slide show AND shared actions in the project Library. Topic of the lesson: workflow to attach the shared actions to a slide event (On Enter) and to buttons (Success event). Lesson ended with the proposal to create a personal project with two slides. First slide is a title slide with only a Start button (Go to Next slide). Second slide needs two multistate objects. Number of states is not important but has to be the same for both objects (you can have identical states if wished).  Two navigation buttons (Back and Forward) and a button to get back to the first slide and your homework is done.

For this video lesson you need:

  • The original project, which I provided in Lesson 1. If you lost it, here is another link (dropbox)
    SlideShow

  • Your project. If you are really lazy, you download my project as used in the video. Please, do not reuse the SVGs, they are created from a licensed Adobe Stock file. You can use them only for practice the video workflow.
    StartLesson2

Video

You will transfer the shared actions to your custom project, and reuse them.

After finishing the workflow, you can compare your result with 'Lesson2'


Who is afraid of... Shared Actions? Crash course Lesson 1 (video)

Preparation

You have read the introduction and watched the Demo project. This lesson will explain the interaction 'SlideShow' which you did see in the demo. You may download this start project, which has two slides. Exploration is explained in the video:

SlideShowStart

Video

You will be exploring the start file, discovering the shared actions in the Library, and the variables. You will attach the shared action to  a slide event (On Enter) and to button Success events, in both cases you will choose the parameter values.

The result of the completed lesson should look like you can see under this link. I left the playbar for your convenience.

SlideShowEnd

Preparing Lesson 2

Lesson 2 will show how you can transfer and use the shared actions to your project. If you want tot follow, prepare a project:

  • with two slides
  • second slide needs two multistate objects with the same amount of states
  • second slide needs two navigation buttons (back/next) and a home button (jumping to slide 1)




Matchstick Game (Shared Actions)

Intro

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

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

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

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

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


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

Setup

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

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

Slide Game - Timeline and Layout

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

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

You see on this timeline: 

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

Variables

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

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

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

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

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

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

Events and Actions

EnterIntro

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

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

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

EnterGame

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

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

Match_NOK (shared action)

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

The action has three conditional decisions.

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

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

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

Match_OK (shared action)

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

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

More?

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

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

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

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






Intermediate Score Slides in 2020

Intro

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

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

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

Example file

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

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

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


Overview and logic

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

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

Setup

Variables

Quite a bunch of variables were necessary.

Part 1 (Timeline)

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

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

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

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

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

Part 2 (Quiz)/ Part 3 (Theme)

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

Other

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

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

Events and Actions

Dashboard slide

On Enter event triggers: EnterDash (Advanced action)

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

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

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

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

Quiz Slides (all)

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

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

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

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

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

First Quiz Slides

On Enter event: EnterFirstQuestAct (Shared action)

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

Last Quiz Slides

Success event Back shape button: BackAct (Advanced action)

Same advanced action is used for all Back buttons:

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

Intermediate Score slides

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

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

Final Score slide

On Enter event: Enter: EnterFinal (Advanced action)

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

More?

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

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