Using State Numbers in Formula question

Intro

Review the output tutorial published in this post. The two first use cases were about a knowledge check question where the learner needs to create physics formulas, by clicking the terms in the formula. Those terms are multistate objects, used as buttons. In a previous post we created one shared action to get the 'State number' which is stored in an associated variable for each multistate object. That same post also explained how to choose the sequence of the states.

The first use case has 3 terms in the formula, the second one has 4 terms. The terms are identical multistate objects, at the start of the exercise they show the same Normal state.

In this article youi'll see how to create the action for the Submit button, and the On Enter action which is needed to reset the slide and thus allow multiple visits to the slides.

Submit actions

Those are advanced action triggered by the Success event of the Submit buttons.

Formula with 3 terms

To the left of the equal sign the term should be 'Force', which is state 3 in the multistate object.

To the right of the equal sign we need 'Pressure' and 'Area', sequence is not important. Those are states 1 and 2. The easiest way is to calculate the sum of the two state numbers, which should be 3. To avoid confusion, create another user variable v_right to calculate the sum. The condition will be very simple: v_1 (state number to the left of the equal sign) needs to be equal to v_right.  To show the result, another multistate object SS_Feedback was created with these three states:

This feedback shape is on the slide (not hidden) but the Normal state is invisible to the learner. I used the same feedback for the next slide (4 term formula) by timing it for the rest of the project. It will be hidden after the two formula slides.

The Submit action doesn't need much explanation; I used the Delay command to mimick the default time a feedback is shown, allowing a new attempt:

Formula with 4 terms

Due to the sequence of the states, a correct formula will also have the same sum to the left and to the right of the equal sign. Of course we need another user variable v_left  to store the sum to the left. However, checking the sums will not be sufficient in this case. If the learner chooses exactly the same states on both sides, the sums will also be the same. Example: if only the states for the 'oval 'are chose on both sides. To exclude that situation, I use another expression with a multiplication of the state numbers. For the result of the multiplication two extra user variables a; re defined: v_leftM and v_rightM

Example: if only 'oval' states are used sum will be: 5 = 2 + 3. However the multiplication will result in 6 = 2 * 3. Whereas for the drum the sum is 5 = 1 + 4  but the multiplcation will result in 4 = 1 * 4.  Look at the Submit action in this case:

Enter actions (reset)

Those are advanced actions triggered by the On Enter event of the slides, to reset the situation. 

Formula with 3 terms

The 3 variables storing the state numbers need to be reset to their default value (1: corresponding with the Normal state). That is not necessary for the v_right, because it is always calculated. The option 'Retain state on revisit slide' is not activated, which means that on revisiting the slide the Normal state is reset automatically. The variable v_states needs to be redefined.

Since the multistate object SS_Feedback is timed for more than one slide, and can be hidden by actions on later slides, it is important to show this object and put it back in the Normal state. The automatic reset to the Normal state is not happening due to the timing. The Next button needs to be hidden.

Formula with 4 terms

The 4 variables storing the state numbers need to be reset to their default value (1: corresponding with the Normal state). That is not necessary for v_right, v_left, v_leftM and v_rightM because they will be calculated. The option 'Retain state on revisit slide' is not activated, which means that on revisiting the slide the Normal state is reset automatically. The variable v_states needs to be redefined.

The resetting for the feedback object is for the same reason as in the other Formula slide.

More?

I used a similar workflow in this small project, which is meant as exercise for the math's class about Multiplication tables.

It is a responsie project, uses the same shared action I have used in the use case I described here. The Submit actions are a little bit more complicated. Your challenge: try to replicate this project. This is the link:

CrunchNumbers










Drag&Drop: Using Types and InBuilt States (Captivate tutorial)

Intro

This course offers a detailed (video) workflow how to create and use for Drag&Drop objects.

The video is also available as standalone on YouTube, can be skipped in the interactive Captivate tutorial. The tutorial has also a Table of Content in Overlay, to allow complete free navigation.

The mastered skills are used for two games, which also take advantage of the available InBuilt states for Drag&Drop objects. More detailed workflow for the games will appear as blog posts. I used Ready-to-go slides from the Quick Start Project 'Business', non-responsive version.  Some licensed images from Adobe Stock were used as well. 

You can watch the tutorial as scalable HTML output from this link (recommended- or watch the embedded fixed resolution output below:


Button states - Basics and Tips

Intro

Recently I answered several questions about button states, which proved that some information is missing. For that reason I checked the official Captivate document, and indeed to me it is not at all complete especially for buttons which are the most used interactive objects. You can have a look:

Work with multi-state objects in Adobe Captivate

Some examples: the InBuilt state 'Visited' is not mentioned at all. I couldn't find any information about the lock of InBuilt states for buttons and how to circumvent it. The recent added button types - SVG and Bitmap images - are not even mentioned. What is the meaning of the blue and red selection rectangles in button state objects? Several years ago I published an extensive blog about the InBuilt states for Drag&Drop objects (Inbuilt D&D states) to fill in gaps in the Help document.  With this blog I will try to summarize tips and workarounds for InBuilt states for buttons. After a short recapitulation of typical features of Button states, you'll get some examples.

Typical features

InBuilt states

Buttons of any type have by default three InBuilt states: Normal, Rollover and Down. Those three states are part of the object styles for text buttons, image buttons, transparent buttons and shapes (because they can always be converted to shape buttons). However no object styles can be created for bitmap images and SVGs used as buttons, the most recent types added in version 11.5. 

Less known is the fourth InBuilt state: Visited, probably because you always need to create that state. It cannot be included in the object style for the four mentioned button types neither which is a pity. Audio can be attached to the Visited state and Normal state, while that is impossible for the Rollover and Down state

InBuilt states will appear in specific situations. Rollover when hovering over the button, Down while button is pressed, Visited after the button has been pressed and released. However the Visited state can also be set using the Change State action which is impossible for any other InBuilt state (for buttons and D&D objects). Like with custom states, you can add Audio to the InBuilt states. Here are two tips based on that knowledge:

Tip 1: The Down state will disappear when you release the button. If you want to keep the down state after release, use the Visited state, looking identical to the Down state. This is valid for both responsive and non-responsive projects.

Lock Size/position

The size and position of the button is the same for all InBuilt states, based on what you designed for the Normal state. That is the reason for the lock symbol which you see on the stage when Rollover, Down or Visited are selected. 
The Normal state defines the clickable area, hence the Lock symbol. For all buttons, except the SVG used as button, this will always be the bounding box of the button. You can always edit or replace the content in a state but that content will be rescaled to the bounding box defined in the Normal state. In the example screenshot that content was a SVG where the clickable area was kept to the bounding box. That vector image type always keeps its height/width ratio. If you want to use another SVG in the Rollover or Down state, which needs more space, be sure to create a bounding box which is bigger than what is needed in the Normal state. Here is an example, the SVG in the Rollover state is wider, so the bounding box in the Normal state has a larger width.
In this example a different SVG was used in all the states. You cannot replace a SVG by a bitmap image, each replacement needs to be of the same type.

Tip 2: (answer to this thread in the eLearning community: Word Search) to create a highlight appearing after a click, use a shape button with 2 (or 4, the Rollover and Down are not important) states, one is the Normal state and the shape has no fill nor outline, the second one is a custom state where the shape has an outline. Use the action 'Go to Next State....' for that button. First click will show the custom state (outline), second click will revert to the Normal state.

Extra objects

Contrary to audio which can only be added to the InBuilt states Normal and Visited, you can add extra objects to all InBuilt states. However this is only possible in non-responsive (Blank) projects and in static fluid boxes. Normal fluid boxes do not allow adding extra objects to a state (due to the stack prohibition). 

This aspect opens a lot of tweaking possibilities. Those extra objects are not locked, nor do they need to be of the same type. Contrary to the locked button states which have a blue outline marker, extra objects will have a red outline marker (see screenshot under Tip 3). There is no real limit to the number of objects you can add. Whereas audio cannot be added to Rollover or Down states, you can add extra objects to those states.

Tip 3: Create a tooltip for a button by adding a text (or other object) to the Rollover state.

Tip 4: Quick Click/Reveal workflow, using a button with a custom state derived from the Normal state but with the Reveal objects added to it. Use 'Go to Next State' for that button, and you have a toggle button, which will hide the revealed objects when clicking again. When using a variable as explained here, you have even more control.

Tip 5: Can you increase the size of a shape button in Rollover state, was another recent question? The forementioned trick with a bigger bounding box in the Normal state is not functional in that case. Here is another possibility:

  • In the Rollover state make the shape button invisible. Depending on its setup this means Alpha for Fill set to 0, border width set to 0 and eventually take out the text.
  • Add a bigger image of the shape button to the Rollover state and align it as wanted.

Of course you can this also apply on the Down state and/or with a smaller version of the button, see screenshot:

Tip 6: Starting with an invisible Normal state for a shape button (Alpha and stroke set to 0) and adding an object to that state within the bounding box of the shape button, allows you to create a rotating button. A full description of the workflow can be found in this blog post. Of course this means the clickable area will be greater than the image itself, but most learners will not detect that incongruity.


Conclusion

You'll for sure know about more examples to use button states in a creative way. Feel free to post your ideas in a comment, always appreciated.

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

Intro

The Quick Start Projects (QSP) available under the Assets button in Captivate 11.5 are popular. It is understandable that new (and other) users look for inspiration and to save some time by using existing design layouts and interactions.

In the past I already posted some articles with tips about inserting Slides from those projects in your project. To customize those slides you often want to edit texts and replace images. If you are new to Captivate, finding an image can be frustrating. You expect to be able to select an image by clicking it on the stage, but that is not always the case. This article will try to help you in your search. Follow the steps in sequence. Depending on the situation you will not need all steps. Meanwhile you may discover some ‘tools’ as well.

Text mostly is not that hard to find, although there are some exceptions which will be mentioned. All steps here, except when indicated, are valid both for non-responsive (blank) and responsive projects. Example screenshots are taken from the available Quick Start Projects.

If you find this helpful, will write another article about customizing interactions. That will be not as easy, and may need more learning about tools.

Steps

Step 1: Timeline panel

In the newbie UI the timeline panel is collapsed at the bottom, and you see only its title bar. Open the Timeline panel by clicking the Title bar. This is your primary tool. You may ignore that this panel can also be used to select objects like images and text containers instead of clicking them on the stage. Especially when you have a lot of objects, which overlap, this may be an easier for selection. Selected objects have a different color (darker blue) than unselected objects.

If you can select the image on the stage or on the Timeline panel, and you want only to replace that particular image, it is easy. Look in its Properties panel, where you’ll see the name of the image. Click that name and point to the new image. I would recommend to have it imported to the Library (see further), but you can also find it on your system. Once it is imported, it will automatically appear in the Project Library.

Screenshot is for the slide ’70/30 Layout with image horizontally’ from the QSP ‘Alliance’.

Tips:

  • Best practice is to have an image with exactly the same size in px as the original image. Click the button Edit image, to see the size of the image.
  • If you have several slides where you want to replace this same image, it is better to find the image in the Library. Use ‘Find in Library’ from the right-click menu on the image. Edit the image in a graphics application, where you can replace it. Keep the original name and all instances of that image will be replaced in your project.

Extra

I didn’t encounter this other possibility yet on a Ready-to-go slide but have not checked all of them. It is possible to have an image as background on a slide. In that case it will be visible on the state, but not on the Timeline. You can only see that image as shown in this screenshot:

You see that a Custom background is used. It is an Image, and under ‘Slide Color’ you see a preview of the image. Clicking the small triangle at the bottom allows you to choose another image.

Step 2: Image on Master slide

If you cannot select the image on the stage, nor in the Timeline it may be on the used Master slide.

Click the Master slide button, and the Filmstrip will be replaced by the Master Slide panel. The master slide on which your slide is based will automatically be selected. It is possible that need to scroll to see that selection, it is a thick blue border.

Keep the Timeline panel, it is also used by master slides. Try to select the image either on the stage or in the Timeline. If you are able to do so, you can replace that image the same way as on a slide. All slides based on this master slide will be updated automatically and show the new image.

Screenshot is for the slide ‘Image 1’ from the QSP ‘Wellbeing’.

Extra:

Similar to slides (and more used) an image can be used as Custom background in a master slide.


For a Fluid Boxes project it is also possible that a Fluid box is filled with an image. Same comment as with the background for master slide. I have not detected this use of images in the QSP-slides which I have screened.

Step 3: Multistate objects

No luck so far, no images on timeline of slide nor master slide? You are able to view that image when previewing the course, but it is not visible in the editing environment on the stage? In that case the mysterious image is probably in a state of a Multistate object. Same can be possible for text, which appears when previewing but is invisible on the stage when editing.

Find the multi-state object for hidden images?

Preview the slide (in browsers) and try out the interaction, mostly by clicking buttons or arrows. Try to remember one of the images which you want to replace.

When back in the editing environment, you probably will have an image on the stage. Use the right-click menu to ‘Find in Library’. The developers of the QSPs will have labeled the images in a consistent way. Try to find the image by scrolling in the neighbourhood of the selected image.

To see if it is used in a multistate object, click the Usage button in the Library. If this confirms that the image is on the same slide, you have found the multistate object.

Screenshot: this is the slide ‘Slideshow Layout’ from the QSP ‘Business’. The image which shows on the stage is labeled ‘photo_1’.  Near that image I found the one needing to be switched ‘photo_4’ and it is confirmed that this image is also used on slide 2., in state4.

Open the Object State panel by clicking the State view button in the Properties panel for the Multistate object.

In the Object State panel, find state4.  You can now follow the same workflow to exchange for another image as described on top for the very first step:

When you are finished editing states, you can return to more editing for the slide after clicking the Exit State button on top (bit far away IMO).

To find a hidden text, it is not so easy because texts are not in the Library. You need to preview. If the hidden text appears after having clicked some interactive object (button, arrow) try to remember its location and size. In that location you may have another text or image, but it can also be an invisible shape. In editing environment try clicking in the remembered location. If you see a selection rectangle with handles, try its State view button.

Typical slides with multistate objects are the Flipcard slides and the Accordion slides.  If you cannot find a text… ask here or in the Adobe forums. I have helped identifying multistate objects for multiple users.

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.

Matchstick Game (Shared Actions)

Intro

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

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

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

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

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


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

Setup

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

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

Slide Game - Timeline and Layout

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

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

You see on this timeline: 

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

Variables

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

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

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

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

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

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

Events and Actions

EnterIntro

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

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

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

EnterGame

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

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

Match_NOK (shared action)

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

The action has three conditional decisions.

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

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

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

Match_OK (shared action)

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

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

More?

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

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

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

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






Create Review State for scored Drag&Drop slide

Intro

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

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

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

Setup

Checkmarks

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

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

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

Review Navigation buttons

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

Variables

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

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

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

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

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

The system variable cpInReviewMode was used as well.

Events – Actions

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

CorrectActDD

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

WrongActDD

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

EnterDD

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

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

Intermediate Score Slides in 2020

Intro

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

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

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

Example file

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

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

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


Overview and logic

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

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

Setup

Variables

Quite a bunch of variables were necessary.

Part 1 (Timeline)

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

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

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

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

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

Part 2 (Quiz)/ Part 3 (Theme)

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

Other

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

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

Events and Actions

Dashboard slide

On Enter event triggers: EnterDash (Advanced action)

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

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

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

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

Quiz Slides (all)

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

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

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

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

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

First Quiz Slides

On Enter event: EnterFirstQuestAct (Shared action)

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

Last Quiz Slides

Success event Back shape button: BackAct (Advanced action)

Same advanced action is used for all Back buttons:

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

Intermediate Score slides

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

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

Final Score slide

On Enter event: Enter: EnterFinal (Advanced action)

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

More?

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

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