tag:blog.lilybiri.com,2013:/posts Captivate blog 2021-07-22T06:19:11Z ir. Lieve Weymeis tag:blog.lilybiri.com,2013:Post/1705720 2021-07-07T18:41:28Z 2021-07-07T18:41:29Z Tip 2: Filtering (Advanced/Shared actions)

Intro

This second tip is closely related to the first tip about labeling. If you have read that post you'll have seen that good labeling could facilitate filtering for dropdown lists, using this screenshot. It shows the Parameters dialog box (Shared Actions) where filtering is used to limit the choices in a dropdown list.

Time to explain what I mean by the term 'Filtering'. Dropdown lists are all over Captivate's UI, not only in the Advanced/Shared actions domain. Some of those lists are sorted alphabetically, some are sorted chronologically (very annoying: most recent added item appears on top). They may show all items, but can have an automatic filter of items. That is the case within the Advanced Actions dialog box: when setting up a condition or a While loop, if you need to choose a variable, you'll only see variables in the dropdown list, for operators you only  operators. However, even when filtered and sorted alphabetically the lists can be very long and it takes time to find the proper item. Being able to reduce a list by manual filtering based on the names is a big timesaver! I remember older versions where searching was reduced to typing the first character, to scroll to the items starting with that character. That used to be the case for the variable dropdown list, reason why I started labeling user variables with v_ as first character, to differentiate from the system variables which started either with 'rd' or 'cp' (the first types disappeared from the lists).

Filtering workflow

It consists in typing a sequence of characters, resulting in displaying only items which have that sequence in their name. It doesn't matter where that sequence appears: at the start, at the end, in the middle. There is no case sensitivity, which is rather exceptional. Although names cannot start with a number, if you include a number in the name it will be very easy to use the number as part of the filter sequence. This will become easier to understand with some examples:

Show (Hide)

The dropdown list for those commands in advanced actions will show all objects on all slides, leading to a very long dropdown list. Using a filter and proper labels is very useful as you can see comparing these two screenshots of such an action before and after applying a filter. In this case the filter shows all groups, which are labeled as Gr_xxx

Change State

This screenshot (from the Memory game project) simplifies how to find the correct multistate object. In this case there were many multistate objects in the project:

Parameters

Although many dropdown lists are already filtered on the type of item needed, look at this example. You need to know that in the field here you need to click twice to be able to type in a filter: first click selects the field,  second click gets it in Edit mode (like with a text container). I added the Properties panel, because the label of the active button is used as reference for the 'active' button. Same example was shown at the start of this blog.

Availability of Filters

As you have seen the filters are available for all dropdown lists in:

  • Advanced Actions dialog box
  • Parameter dialog box

Too bad that it is not available for other dropdown lists:

  • Simple action (tab Actions)
  • Object actions (Drag&Drop)
  • Advanced actions list in the Advanced Actions dialog box (which would be very useful if you need to clean up)

Next tip?

It will compare the use of  Grouping (when using Show/Hide workflows) and multistate objects for similar goals.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1703302 2021-06-15T15:04:18Z 2021-06-15T15:04:19Z Tip 1: Labeling (Advanced/Shared actions)

Intro

Many Captivate developers use advanced actions, which is an easy way to extend the functionality of the application without need for learning the rules of a programming language. After publishing the project, those actions are converted to JavaScript. This is also the case for the more flexible (underestimated) shared actions.

However the  ‘point-and-click’ approach for scripts has rules and limitations.  If you start using advanced/shared actions,  understanding those rules will avoid frustrating situations.  This first Tip is all about the importance of customizing labels, the reasons for establishing a labeling discipline (especially when working with a team). Last week two questions in the Adobe forums about issues with advanced actions were due to lack of knowledge about correct labeling.

The terminology used in this blog is the same as in the Adobe documentation. You can check the in-depth exploration of the Advanced Actions dialog box in one of my previous blogs meant also for starters with actions: 

Advanced Actions Outfit since CP2017 – eLearning (adobe.com.

This article will first explain Generic names (labels) attributed by Captivate, continue with Custom labeling. At the end you'll see also an explanation of 'Smart labeling', term used by Adobe when copy/paste is used on items with a custom name.

Generic names (labeling) - Uniqueness

Almost all items in Captivate get a generic name when they are created in a course: objects, placeholders, groups, slides, states, decisions (in actions)... There are a few exceptions:

  • User variables: you need to define a custom name except for the variable associated with a Text Entry Box.
  • Advanced/Shared actions: they also need a custom name 

The first global ruleis fully respected in those generic names. 

 'Each name needs to be unique'
Names are case sensitive, so it is easy to use similar names, by changing one or more characters to uppercase from lowercase. Uniqueness applies also to items from different type: do not use the name for a button, which has already been used for a variable (common mistake), or the name of an action for an advanced action (another common mistake). There are some minor exceptions:

  • Generic name for a Text Entry Box and its associated variable are the same. I don't really like this, and tend to create a new user variable with a custom name, using the X button next to the generic variable name:
    It is not wrong to keep the generic name, but it bumps on the general rule.

  • If you define the name of a button, and use the same name for the action to be triggered by the Success event, it will not be flagged as an error. But if you do the reverse (first action, later the button) you do get an error. I would avoid doing this. 

  • States can have the same name for multiple multistate objects, because as identifier the combination of the object name and the object will be unique if the object has a unique name.

  • Similar for decisions within an advanced/shared action. Although years ago I had issues with an advanced action using the same name as a decision in another advanced action. But decisions can have same name in multiple advanced actions.

When using Generic names, and duplicating the item, the duplicate will have a similar name but ending on another number. Check this screenshot, showing the timeline of a slide with multiple objects and of a duplicate slide:

Custom names (labeling)

Why and when is replacing generic names worthwhile, because it takes time?

  • It will be easier to understand, especially for your clients and collaborators. Referring to the screenshots of the Timeline posted above, if you replace the name of the TEB which will ask for a name by 'TEB_name', and the button is named 'Bt_Next' reading the timeline is more comfortable. Have a look at this Timeline, which is from the Stopwatch tutorial to understand better.
  • When using the items in advanced or shared actions, where you often will need to choose from dropdown lists, it is almost impossible to identify the right item for your choice when working in a project with tons of items.
  • To take advantage of the filtering (see Tip 2) provided by Captivate, custom names can save you lot of time. Look at this screenshot from the Memory Game tutorial where a parameter needs to be chosen for the shared action. There are lot of shape buttons in this game. By typing out one or two characters (here _2) the long list is filtered to facilitate the choice.

Setting up a custom labeling 'system' is also a timesaver, not only when you are collaborating with a team. The global rule of Uniqueness will have to be respected. Names cannot start with a number, nor have strange characters. Try to keep to short names, avoid spaces and remember that names are case sensitive! Here is a short summary of my personal labeling system, however this is just an example. Over a decade ago I started labeling for user variables. At that moment the only way to find a variable in the dropdown lists was by using the first character, because they were sorted alphabetically. To have the group of user variables separated from the system variables (which started with r or c at that moment) user variables started with v_. The first character indicating the type of item, followed by an underscore (replacing a space). This meant the item was also identified by that first character, and I continued to follow the same logic for other items. Some examples:

  • Bt_: first characters of buttons of the three old types (text, transparent, image)
  • SS_: smart shape
  • SB_: shape used as button
  • Im_: bitmap image
  • Ib_: bitmap image used as button
  • SV_: SVG image
  • SVB_: SVG used as button
  • Gr_: group both for object groups and slide groups (Table of Contents)
  • Tx_: text caption
  • CB_: click box
  • ...

For advanced actions I don't have a fixed system. One exception: if an action is meant to be used On Enter for a slide, I will start its name with Enter. I am a frequent user of shared actions whenever possible, which avoids the need for names for multiple duplicate advanced actions,  since you need only one name for a shared action that can be applied multiple times with different parameters. 

For the other characters in the name I will use camel notation. The system allows you to have the second part identical for items which are linked. Example: SVB_Reset can be linked with an advanced action ResetAct, and a variable v_reset.

Maybe I'll add an extra extension to multistate objects in the future, because they are not easily identifiable.

Tip: for much used variables create a shared action as explained in Rare tips (tip 1). By importing that action in a new project you avoid lot of typing.

Smart labeling

When you copy/paste an item with a custom name, the custom name will be preserved, but an extra number is added to the name. This is indicated as 'smart labeling', was introduced some versions ago. 

Example: Duplication of the Next shape button (from the Timeline screenshot for the Stopwatch slide), will lead to this:

The duplicate gets the original name followed by an underscore and a number. In this case the duplicate of SB_Next, became SB_Next_20. It means that the numbers 1-19 had already been used. Same would happen if you copy that button to another project, but the number will be different. If I copy this button to a almost empty new project, the name becomes SB_Next_2, because only one object already existed ending on 1. Keeping at least part of the custom name can be very useful. However it can also become a problem as I learned when importing Shared actions using the same variables. If you don't import (or drag) those actions in one workflow, but in steps, you will end up with duplicate variable bearing another name. You also need to be careful when copying interactive objects which are triggering actions using variables.

Conclusion

I hope this article convinced you of the importance of consistent labeling. Be sure I do not label every item, but I will when they will be needed in an advanced or a shared action. For slides the names do not need to be unique, because internally they are identified by cpInfoCurrentSlide which is a number. However slide names are important if you want to use a Table of Content.

Next tip about Filtering is closely linked to this first tip, and will save you time when developing advanced and shared actions. You will get an overview of the locations where filtering is possible, and those where - saddening - it is not available.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1701924 2021-06-11T10:25:14Z 2021-06-11T10:25:15Z Quiz/Score slides in Quick Start Projects - part 2: Responsive projects

Intro

Recently I posted about using Quiz slides as ready-to-go slides from the available Quick Start projects, in their non-responsive version. The conclusion was not very positive, because most themes didn’t include the necessary master slides to allow you to create all types of quiz slides with the theme look/design. For the Score slides the situation is even worse, because they cannot be inserted as ready-to-go slide, they will appear automatically after insertion of a quiz slide, or after setting up the Quiz Preferences to show a score slide (for scored objects). If the Results master slide has not been created in a theme (as was the case for multiple QSPs) you’ll not be able to get them in your project, unless by using the long workaround I explained in that post.

This second part refers to the responsive versions of the Quick Start Projects. It is a relief to see that the situation is better for the used themes. You will be able to download a table, with the same indications as in the first post.

Table

The number of Quick Start Project with a responsive (fluid boxes) set up is more limited than for the non-responsive projects. You can find a similar overview like the one provided for the non-responsive projects in this downloadable table:

QuizQSPResp

Items marked in red need some explanation, have a look at the Tips below

TIPS

Similar to the non-responsive projects, there are QSPs (Quick Start Project) with a fully developed theme, including dedicated master slides for the score slide and the quiz slides. That group includes the projects Safety, Wellbeing and Alliance. A second group (Earth, Rhapsody and Wired) has master slides but only partially similar to the example slides. Mostly images are lacking, but since you are dealing now with Fluid Boxes, it will need some knowledge of that workflow to reproduce the look of the quiz and score slides.

The project Aspire  has several example MCQ slides, only one of them is using a dedicated master slide. It has also an incomplete Results master slide. The project League has incomplete quiz master slides.

The situation for the score slide is different. As told before, you cannot insert a score slide as a standalone slide. It will be inserted automatically after you have inserted a question slide of the same theme, or when you select the option ‘Show score at the end of the Quiz’ in Quiz Preferences, Settings.

The tips for the question slides, mentioned in the previous post, are valid here as well. For that reason, focus in the TIPS is only on the Results (score) slide. If you want to learn more about the Fluid Boxes layout for question slides, and about editing the feedback messages, have a look at:

Tips for Fluid Boxes quiz slides

Feedback Messages in Fluid Boxes question slides

Score slide

Three groups of Quick Start Projects, each with a different approach.

Group 1: Safety, Wellbeing, Alliance

These projects have a Results master slide consistent with the global Theme design. The content (inserted fields) is similar to Results slides in all themes packaged with Captivate. That means that you can use choose the to be inserted fields, using Quiz Preferences,  Settings, button ‘Quiz result messages. The screenshot below shows an example, where two fields (Max. Score and Attempts) have been unchecked. The Fluid boxes layout will adapt to those changes.

No problems with this group at all. When you insert any question slide from one of these QSPs the results slide will automatically be inserted and have the design of the master slide of that same QSP.

If you insert a question slide directly (using Quiz menu) the theme of the project will have priority and the project Results master slide will be used. This is due to the fact that version 11.5 supports the use of multiple themes.

Group 2: Aspire and Rhapsody

Those projects have two Results slides. This screenshot shows them for Aspire:

The first master slide (Result) is the default master slide used when the Results slide is inserted (due to insertion of a question slide). It has only partially adapted the Theme design.

The second master slide (Custom Result) is used in the Alliance project for the example results slide.  You can switch the existing Results slide to this master slide if you want. BUT! the big problem is that you’ll miss the Advanced action used for this results slide, and the text content for some text captions.  This is a big problem if you are not familiar with those features.

Group 3: Wired, Earth and League

These projects have no Normal Result master slide. By Normal I mean that you can add/delete fields as shown in the screenshot ‘Quiz Result Messages’ under Group 1. These projects have only a customized Result slide, which is using an advanced action.

This is a problem: when you insert a question slide from one of these projects, the companion Results slide will be that custom slide. That means that you will have to find the advanced action and attach it, after having filled in the missing information.

Two possible solutions: either you will replace the custom Results slide by the default Results slide from the project theme. These two screenshots may illustrate the workflow. It is a project using the ‘Cement and Steel’ theme packaged with Captivate.  A T/F question slide was inserted from the QSP ‘Earth’, which resulted also in the Results slide of ‘Earth’, and you can see the result here (missing Text, advanced action). You see the results slide at the back (with part of the missing fields in the scratch area), the Filmstrip and the Properties panel of the results slide. You see that the Results slide belongs to the ‘Earth’ theme:

To replace the Results slide by the one belonging to the theme ‘Cement and Steel’, use the dropdown list (showing Earth) to switch, and you’ll get only one possible master slide: the Results Master slide of ‘Cement and Steel.’ Select that master slide, and you’ll get all the fields back, no advanced action needed, although the design may need some editing.

Post a comment, if you want to learn how to recover the advanced actions for the custom results slides in groups 2 and 3.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1694584 2021-05-25T08:03:39Z 2021-05-25T08:03:40Z 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.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1689555 2021-05-11T12:47:50Z 2021-05-11T12:47:50Z 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!

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1678994 2021-04-15T10:27:48Z 2021-04-19T09:38:11Z 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.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1677791 2021-04-12T13:34:33Z 2021-07-22T06:19:11Z Fluid Boxes and Interactive Video? (Position Properties panel)

Intro

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

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

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

Interactive video slide

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

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

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

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

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

Setup 1: Width = 100%, Height = Auto

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

Setup 2: Width = Auto, Height = 100%

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

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

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

Content overlay slides

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

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

This screenshots shows the same overlay slide for setup 2:

Knowledge Check  Overlay slides

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

Similar use cases

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

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

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

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

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

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1664361 2021-03-11T16:25:50Z 2021-03-11T16:25:50Z 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.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1656064 2021-02-28T17:00:34Z 2021-02-28T17:00:34Z (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


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1649191 2021-02-08T16:45:21Z 2021-04-01T13:16:42Z 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.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1639722 2021-01-13T17:49:41Z 2021-01-13T17:49:52Z 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’.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1639188 2021-01-12T15:54:23Z 2021-01-12T16:43:37Z 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.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1633307 2020-12-29T20:10:19Z 2020-12-29T20:10:46Z 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.





]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1627197 2020-12-12T17:22:18Z 2021-05-11T13:43:03Z Retake (quiz) Tweaks

Intro

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

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

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

Sample Project

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

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


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

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

Workflow

Situations and events

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

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

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

Variables

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

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

Actions

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

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

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

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

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

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

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

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

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

EnterScore (Advanced Action) On Enter for score slide

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

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

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

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

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

Possible extensions

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

Force First View

Advanced to Shared action

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


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1618140 2020-11-17T17:53:50Z 2020-11-17T17:53:51Z Roundtripping with Adobe Photoshop in 2020

Meant for?

This blog is not meant for long-time users of Photoshop (and Captivate)!  I am addressing Captivate developers who are collaborating with graphics designers using Photoshop. Roundtripping with Photoshop is a long existing feature since and (at least to me) one of the best collaborations with CC applications.  I have been using and teaching Photoshop since decades and Captivate since 2005.

Collaboration ibecomes easier with good understanding. This blog aims at improving understanding between the Captivate developer and her/his team mate - Photoshop expert.  You'll start with typical Photoshop terminology, followedby the two import workflows to import source Photoshop files into . Watching some typical examples can help you to make suggestions to your PS expert. 

Goal:  make your Captivate use of their creative work more agreeable, and save time.

Photoshop terminology

Layers

As  Captivate developer you are used to layer, as they appear in the Timeline panel (doubles as Layers panel).  You probably use those layers for selection or for editing the stacking order (z-order) . You may also have locked layers and/or made them invisible on the stage for easy editing if you work with very crowded slides. Each layer in a cptx file can have only one object (in a cpvc-project it is bit different). Have a look at this screenshot of a Layers panel in Photoshop

A layer in Photoshop is always static (not linked to a timeline) but can have multiple objects on a layer (not possible in Captivate cptx files, where each layer is an object timeline as well). They have some added functionality compared with Captivate likes:

  • Mask on a layer can limit a region for applying editing or keeping it from editing.
  • The opacity of a layer can be changed (or part of it if masked).
  • Photoshop can have special type of layers interacting with other layers (you’ll see an example below, where Adjustment layers are used).
  • The way pixels on layers interact can be changed by blending modes. I will not expand on that powerful possibility.

Similar to Captivate, a layer can be locked and made invisible. In the screenshot layer ‘Failure3Trans is visible. Layers Failure1 and Failure2 are locked.

The active layer – like in Captivate – is the one you are busy editing. Grouping of layers is also possible. In the screenshot you see two groups of layers and one individual layer at the bottom.

Flattening

The default meaning in Photoshop is that all layers will be merged into one image (layer).

However in the Captivate dialog box for importing a source Photoshop file (see below) the meaning is slightly different. Only the ‘checked’ layers will be imported as one merged image. You will see a typical example in the last section.

Layer comps

A Photoshop document can have a multitude of layers of all kinds. Not all of them are content layers as mentioned before. This can make the decision on which layers to import for a certain goal in Captivate very difficult. For an easier, workflow the Photoshop expert can define ‘layer comps’. See them as a filter: when you choose a comp, some layers will be made visible and checked off, while the other layers remain invisible. Using a comp you’ll import exactly the right layers just by choosing a ‘comp’ name. You will see examples in the third section of this blog. Very useful!

Import Photoshop Source Document

Default way to import graphic assets is by using the Media button on the Big Button Bar. That is possible both for  (bitmap) Image and SVG. You will not find an option under that button to import a PSD-file (PSD is the extension of a native Photoshop file).  You need to use two possible workflows:

1. File, Import, Photoshop file (Shift-Alt-P)

Using this method will import both to the slide and the Project Library. Similar to importing images with Media button, on the stage it will be centered automatically both vertically and horizontally. In the Library you will see a new folder under the root. The folder has the same name as the Photoshop file, and includes what is imported.

In the screenshot you see the Library with 3 imported Photoshop files: FailureSuccess – the file for which the layer panel was shown in the previous screenshot; CompExampleCP which will be shown as example for use of comps; TemplateFlatten which you’ll discover as an example for flattening and non-flattening in the example section.

2. Import button in Library

Using this workflow only export to the library, not to the stage. In the screenshot the Import button is indicated with a red rounded rectangle.

The result for the Library is the same as with the first workflow. New folders will be created. The level below the folders are all PNG images. You can drag those PNG-images to any slide and location.

Which of the two workflows is better, depends on the situation. Have a look at the example section, where I will indicate which workflow may be better for each example. Photoshop files can be designed for multiple purposes to be used in Captivate.

Examples

1. Photoshop file as ‘Library’

The first screenshot (Terminology, Layersà with the Layers panel of ‘SuccessFailure’ is a typical example of what I mean by ‘Library’. Several images, each on their layer, are in one Photoshop file. In this example they have the same style. The Captivate developer can choose which images she/he likes best for the active project. Some of the images have a version with transparent, and another with white background (multiple background are possible of course).

Another example which I saw several times with clients: Photoshop was used as layout tool, each of the slides were on a layer in Photoshop. That may be considered also as a PSD file of this ‘Library’ type. When you open the Import Dialog box, with one of the two workflows, it will look like the screenshot to the right:

  • There are no comps, you leave it to ‘Simple’ (blue marker)
  • There is only one option in the Dropdown list:’ Last Document state’. It means the state when the Photoshop document was closed in Photoshop.
  • I recommend to check the option to scale (green), unless you have the images created exactly at the wanted size for use in Captivate (which is the best practice).
  • You will see all the layers of the Photoshop document. You can check the layers you need to import.
  • If you have multiple layers selected, you probably will not want them to merge to one image, since the images are choices, not part of a global image (red rectangle: Layers is the default setting).
  • About the workflow: if you want more than one layer Workflow 2 (Import button) is recommended here. If you choose Workflow 1 (file menu) all layers will be converted to PNG images AND inserted all in the center of the slide. Not what you want. Use workflow 1 only when you import one layer.

2. Flattening or not?

The screenshot shows the Layers panel (Photoshop) of the file ‘TemplateFlatten” which you also could see in the Library screenshot.

This file has 3 image layers which were extracted from 1 bitmap image. Each of them is exactly on the location as in the original bitmap image. I added a ‘template’ layer which can eventually be imported and used to restore the original combined image. But in most cases that will not be necessary.

In this case I recommend Workflow 1, whether you want to import the individual layers as PNGs (Layers in the Import dialog box) or the combined image by checking the option ‘Flattened’.

Reason: when the image are imported to the stage, they will in the correct (relative) location. When you import them only to the Library, you’ll need to use the Template to position the individual PNGs in the correct location.

Look back at the Library panel (Captivate) in the section ‘Import’: the four layers were imported as layers, and in a second process the flattened image was imported as well. That flattened image will be posted automatically in the correct library folder, and gets a generic name (FlatImage1) which you can edit of course.

3 Use of Comps

In the second example I used the same image as here for the comps example. In that example 2, each of the images has a text on the head scarf. The color of the images is gold. I wanted to make this file more flexible in two ways:

  • To have another ‘hue’ for the images, so that it better fits with a project color scheme.
  • To be used with the Texts in multiple languages.

That has led to a lot more layers, since text had to be on a separate layer (make it also editable), and to change the hue I used Adjustment layers which are a non-destructive way to change the ‘look’ of the layers below. In the screenshot below you see text layers in two languages (English and Dutch) and 3 adjustment layers on top. To keep it manageable for this blog, I kept only the global image, not the individual ones.  Next to the layers panel you see the Layer Comps panel. Each of those comps defines a situation. Presently ‘DutchSepia’ is active and reflected in the Layers panel: the visible layers (eye icon) are needed for this look, with Dutch text on the scarfs and a Sepia adjustment layers.


Captivate makes it really easy to import the wanted ‘comp’. Kudos to the team! In most instances you will want to import one comp, and it is possible with two different setups of the Import Dialog box.

In the left screenshot, next to ‘Photoshop Layer Comps’ the option ‘ Multiple’ is checked. If the comps were labeled well, you can easily select the wanted comp to import. It will be imported always as Flattened. The options for ‘Import as:’ are dimmed.

The result of comps import is visible in the Project Library screenshot (Import section). You see that I repeated the import process 4 times, because 4 comps are available, each being a merged image from the layers visible in that comp filter.

Second possibility is to keep the Single radiobutton checked next to ‘Photoshop Layer comps’. Have a look at the screenshot to the right which shows that situation.

Open the dropdown list under ‘Last Document State’ and you will see all the available comps.

Advantage of this second workflow is that you can see which Photoshop layers are selected for import. You could eventually edit those selections, but be careful. You can import layers in this case as well, but I would not recommend that if adjustment layers are used. They cannot be imported into Captivate, only the real images.

Since you will mostly import only one comp the choice for the Import workflow is free, whether with File, Import or with the Import button in the Library.

Updating

Not mentioned so far, because you’ll find this in all blogs and video about Photoshop roundtripping.  The ‘green’ checkmark next to the Photoshop folder, which indicates that the original PSD-file is in synch with Captivate. If your Photoshop expert updates that file in any way: adding layers, editing content on one or more layers, correcting typos in the text layers this will be reflected in Captivate by a color change in that round checkmark.  Clicking the red checkmark will allow you to update and have the changes automatically be imported and applied in Captivate.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1614855 2020-11-10T14:26:10Z 2020-11-10T14:27:03Z Images in a Matching question?

Intro

Not so long ago I posted a blog about replacing textual answers in a Multiple Choice Question by images. That worked quite well, by rearranging the embedded objects on the quizzing master slide, and on the quiz slides themselves.

Last week a similar question appeared here in the portal, about using Images in Matching questions. I posted an answer without having tested it out, because Matching questions are rather different. Today I found some time to double-check my answer, and want to post about the possible problems. You’ll get – as usual – an example project as result of the exploration.

Example

This published project uses the packaged ‘City Vibes’ theme (with some editing of course). You will see a Quiz with three Matching questions:
  1. Default Matching Type question: images are in the first column.
  2. Default Matching Type question: images are in the second column.
  3. Drag&Drop custom question slide as alternative.

There is one attempt on question level, and 3 attempts on quiz level. Review Quiz is possible after passing the quiz or having exhausted the attempts. You can use a scalable version using this link, or watch the embedded version below:



Workflow for Matching Type with Images

Similar to the MCQ workflow when using images, part can be done on the Quizzing master slide, part on the quiz slides themselves.

Editing Master slide

You need to make both column areas bigger, which means moving and reducing the space for other objects.  I also needed to create a duplicate Master slide for the second quiz slide, which needed a wider second column, whereas the first master slide has a wider first column. To emphasize the size of the two column areas I have added a dashed stroke.


Editing Quiz slide

It is not possible to re-arrange the individual answer size on the master slide, that has to be done on the quiz slides. Rearranging the answers in the first or the second column can be seen in these screenshots.  The first master slide (small second column) was applied correctly on a quiz slide, for the second one (small first column) I had to correct the size again on the quiz slides. This may be a bug.

Problems – limitations

For Matching type slides it is impossible to take out the numbering, which was possible for a MCQ slide.

You should not activate the Shuffle option, because that will not work if images are present.

Changing the vertical alignment for the numbering leads to problems. Often the numbering just gets lost.

As you may have experienced, it is not always easy to drag the item to the correct one in the second column, especially for the second slide.

Since the added images are custom objects, they are below the embedded objects on the quiz slides (z-order). That makes exact moving difficult, and editing the colors of the SVGs (second slide) as well. Some tips:

  • Do not try to select the custom objects on the stage, select them in the Timeline.
  • To resize a custom object, do not try to use the handles but use the Options tab of the object.
  • To move a custom object use the shortcut keys (with arrows). SHIFT-arrow moves 10px, CTRL-arrow 16px
  • To edit the colors of the SVGs move them to the scratch area. It will be very difficult to double-click while they are on stage. Of course you can use bitmap images.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1608418 2020-10-28T15:45:06Z 2020-10-28T15:58:57Z Editing Ready-to-go slides (Quick Start Projects) - part 2: Interactions

Intro

Many users wanting to take advantage of the Ready-to-go slides available through the Assets panel in 11.5, are blocked when trying to customize those slides. In a previous article I offered a step-by-step workflow to find texts or images you want to replace by your text or images. That was not so hard, and you learned to use several panels (Timeline, Master Slide, Object States, Library).

For Interactions the situation is more complicated. You will not find a complete 'How-to' in this blog. Some interactions are rather easy to understand and customize, other interactions however need an in-depth knowledge of Advanced actions and variables. Those slides never use Shared actions, which would be easily found in the Project Library. This blog will try to help you identify the components (actions) of the interactions, how to 'read' them and tips for customizing. The workflow will be explained using a Knowledge Check slide from the project 'Alliance'. The interaction can be told to be of intermediate level. Understanding this workflow will allow you to customize easy and intermediate level interactions. For more complicated interactions this may not be sufficient. Maybe find help from someone experienced in Advanced actions.

Step 1: Find Interaction components

On the slide with the Interaction to identify, open the Advanced Interaction panel from the Project menu or with the shortcut key F9. The slide will be selected in that panel and with the default setup you will see all the actions in that slide, and the events to which they are attached. Here is an example:
The selected slide is slide 26, labeled Knowledge Check in the Quick Start Project 'Alliance'. You see in the table that the On Enter slide event has no action attached, the field 'On Success' on the slide line mentions 'No Action'. This means that the interaction is only created using Success events of interactive objects, which you can also find in this panel.

The level below slide level shows all interactive objects and their Success actions (when clicked) in the 'On Success' column. In this case 5 Smartshapes have been defined with the option 'Use as button' and they all trigger an Advanced action. From the labeling of the objects and the actions you can suspect that 4 of those advanced actions are similar (on shapes KC1 - KC4) and one is unique (on the unlabeled Smartshape). When you select one of the lines associated with an interactive object, the object will be selected on the slide. 

Step 2: "Read" actions (components of interaction)

Let us continue with the same slide from the Alliance project. Select the object KC_1. Its Properties panel shows up, switch to the Actions tab. Open the Advanced action 'KnowledgeCheck_Select1' by clicking the Browser icon. It shows a list with 5 lines, which I will label as 'commands':

The first command line 'Assign.... true': gives a value 'true' to a user variable 'sales_knowledgeCheck_correct'. The name of this variable indicates that it needs to be true for a correct answer, 'false' for a wrong answer. You can check this by reading one of the actions on the three other objects (KC_2...KC_4), where you will read that the given value is 'false'. 

The other command lines are used to change states for the objects, to indicate which object has been selected (active). You can find more explanations about multi-state objects in the first part which I mentioned in the intro.

Open now the unique action 'KnowledgeCheck', linked to the unnamed Smartshape_337. In the Timeline you can see that it is the Submit shape button.  In the Advanced Actions dialog box you see that this is 'conditional' (marked in red). In that case "reading' will be easier if you switch to the Preview window, which you do with the arrow button top right, which I marked with a green box:

In the Preview window you see that the state of two multistate objects will be changed depending on the value of the user variable sales_knowledgeCheck_correct. Identifying those multistate objects allow you to edit the states as explained in the first blog.

Step 3: Customizing examples/tips

In the example the first answer is deemed to be correct.  You can move the shape buttons KC1-KC4 around, to put the correct answer in another location. No problem, the interaction will continue to work as expected.

Less answers

You can safely delete one of the wrong answers in this particular use case. That may not be the case for all interactions. Here however the final action (Submit button) is in no way checking or taking into account the number of answers. You only need at least one correct and one wrong answers.

More answers

If you want an extra answer, you'll have to decrease the size of the answer shapes KC1-KC4. For the 5th answer you can duplicate one of the answers with the right-click menu or the shortcut key CTRL-D (Cmnd-D on Mac). Use the Align options (or toolbar) in the right-click menu to put everything in place. The name of the duplicate answer will probably start with KC_ as well, but not necessarily be 'KC_5'. You don't need to edit the name but I did so (Properties panel) just to clarify. That duplicate answer will have the same states as the source answer. You can check using the Object State panel.

It is however necessary:

  1. To edit the existing action for the four older answers, because the state change for the new answer needs to be added.
  2. To create and edit a duplicate advanced action for this new answer.

Editing actions KnowledgeCheck_Select1....

Open one of those actions using the Browser icon in the Actions tab (see Step 2 for a screenshot).

The first command line is fine. The Change State lines set the state for the selected answer to Active, the other answers get state Normal. For all those actions a sixth command is necessary to set the state of the new answer to Normal. Steps for KnowledgeCheck_Select1 are indicated in the screenshot below and you'll find the numbers in the explanation:

  1. Select the last command line
  2. Use the Copy button
  3. Move to the next empty command line
  4. Use the Paste button
  5. Double-click the empty third field and type KC: only the items having KC in their name will appear. Remember: I named the new answer 'KC_5'
  6. Choose 'KC_5'
  7. Click the down arrow in the next field.
  8. Choose the state 'Normal'.
  9. Click the button 'Update action' at the bottom and the action is complete now, including the 5th answer.
  10. To save time editing the three remaining actions, use the Copy button again on the last command line which sets the state to Normal for the last answer KC_5..

Switch to the action KnowledgeCheck_Select2 using the top right dropdown list:

Go immediately to the first empty command line and use Paste (step 4), and save the action (step 9)
Repeat step 10 and do the same for KnowledgeCheck_Select3 and KnowledgeCheck_Select4.
Do not close the Advanced Actions dialog box, you still need a fifth action.

Creation of KnowledgeCheck_Select5

The new action will be created as a duplicate of KnowledgeCheck_Select4. Select that action in the Advanced actions dialog box, follow the steps in the screenshot below

  1. Duplicate the action
  2. Edit the name to KnowledgeCheck_Select5
  3. Set the state of KC_4 to Normal instead of Active
  4. Set the state of KC_5 to Active instead of Normal
  5. Save the action and close the dialog box.

You still need to attach this new action to the answer KC_5 and you are ready for testing:

Tip: if you want to explore the Advanced Actions dialog box, you can read this blog.

More?

This is only one example of customizing a Ready-to-go slide. Some interactions are more complicated in those projects, some are easier. If you are in for a challenge, look for the Flipcard interactions, Glossary interaction or some Click/Reveal interactions. 

Do not hesitate to post questions, comments if you are stuck. If possible I will try to help.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1608404 2020-10-25T17:06:24Z 2020-10-28T21:14:57Z 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.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1596913 2020-09-23T14:49:57Z 2020-09-23T14:49:57Z Replay/Reset slide 2 (Captivate tutorial)

Intro

Recently I published a blog about what seems to be 'hot' topic: how to replay a slide, how to reset a slide. That blog didn't include an example file.

When coaching a training I often use Captivate tutorials, more than videos. This particular topic needs such an interactive approach, to allow to experiment, to get a 'feeling' of the difference between Replay and Reset (with or without an On Enter action). For learners I provide the cptx-file. Here I will only share the HTML5 published output. 

You will see that I borrowed design elements from the Quick Start Project 'Safety'. The interactions were created from scratch.

Content and Tools

After a short rehearsal of terminology and the step-by-step workflows you'll be able to see 4 different examples:

  • Slide 5  which is only based on the Timeline: staggered objects and effects. 
    The info button will show you the Timeline and a relevant part of the Advanced Interaction panel
    This slide is followed by a T/F quiz slide to check your observations.
  • Slide 7: click/reveal slide, using multistate objects. The info button shows you the same information as for slide 5
    This slide is followed by a MCQ slide with multiple correct answers, to check what you learned.
    Both quiz slides are Knowledge Check slides. If you want to cheat you can go back to the previous slide. Navigation by TOC is also possible. The TOC is in overlay mode.
  • Slide 9 : flipcard slide (with thanks to the QSP Alliance). Rather simple but worth seeing the difference between Replay and Reset.
  • Slide 10: Drag&Drop slide set up as Knowledge Check slide.

You may detect several techniques like Forced view, which need using some user variables. Quiz slides do not use the default two-step Submit process, but show a Continue button when the Submit button has been clicked. 


Tutorial

You can watch the embedded version, or use this link to play a scalable version. I recommend to use the link. The embedded version seems to have long loading times. 



Animations?

You may have missed animations in the tutorial. There is a reason. While it used to be possible to Reset an animation, that feature is broken in the version 11.5.1. At least for the animated GIF which I created. I have already been searching since a couple of weeks for a workaround without success. I will create an OAM as well, to check if has the same issues. Too bad, it was a fun animation:

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1590335 2020-09-09T12:51:15Z 2020-09-09T12:51:15Z Penalty and Partial scoring in Quizzes - Q&A

Why?

This is an basic article because often questions about this specific feature appear on the social media. This week I had another one in this thread. The question was specific for Multiple Choice questions with multiple correct answers. It is a very basic post, not meant for advanced Quizzing users.

Terminology

Penalty

A penalty is a negative score linked to a question (or an individual answer for a MCQ, see below). It is essentially meant to avoid ‘guessing’.  Think about a T/F question where a learner always has 50% chance to choose the correct answer, without proving real understanding. In Captivate you can add a Penalty for each type of question in the Quiz Properties panel. You add it as a ‘positive’ number.  See this screenshot:

The Penalty will appear in the Advanced Interaction panel, column Negative points:

You can have a hands on experience with penalty, when playing with this short quiz (more explanation later on), has only MCQ type of question. The previous screenshot of the Advanced Interaction panel was for this example file. Either you watch this embedded version (fixed resolution) or you use this link to open a scalable version:



For this example I have used design elements from the most recent Quick Start Project ‘Business’.

Partial Scoring

Feature is only available for Multiple Choice Questions with one or multiple answers.  

For all other types of questions a learner gets the score  for a question only when everything is correct.  That can be very frustrating for learners if they just missed something.  That is certainly the case for a MCQ with multiple correct answers, but also for a Fill-in-the-Blank with multiple blanks, or a hotspots question with multiple hotspots. However those other types have no inbuilt  partial scoring.

MCQ with Multiple Correct Answers

To set up partial scores, you need to activate the option ‘Partial score’ and in this case the option ‘Multiple answers’ is of course also needed. If you do not specify the exact score for each answer, both score and eventually penalty will be equally distributed. But it is much better to identify the score and penalty, because each answer can have a different weight: some are more easy to detect than others. 

For that reason you need to:

  • select each answer
  • open its Properties panel
  • go to the Options tab
  • enter the ‘points’
  • for wrong answers you enter ‘negative’ points,

After entering individual score/penalty the score and the penalty on the Quiz Properties will look ‘dimmed’, but they are calculated as sums from the individual positive and negative scores of the answers. I prefer the expert UI because I can have both Properties and Quiz Properties next to each other, or at least both visible at the same time. Here an example for one correct answer, 6 points out of the total score of 15 points, because the two other correct answers have a score of 5 and 4points:

In this screenshot you see the ‘penalty’ or negative score for one of the wrong answers:

This wrong answer has a score of -4p, whereas the second wrong answer is estimated at -3p, which leads to a total penalty of 7points.

MCQ with One Correct Answer

It may be less logical for a MCQ with ONE correct answer, isn’t it?  However the term ‘partial score’ is also valid for ‘partial penalty’ as you could see above.  You may have several wrong answers, and some may considered to need a bigger penalty than other wrong answers. This means really differentiating the penalty which is available for MCQ with one correct answer. The first question slide in the example file was set up that way. The correct answer was rewarded with 10 points, the wrong answers had 3 different penalty scores. Here is an example:

Something is wrong with the ‘total’ penalty in the Quizzing Properties however.  It has been calculated as explained above: sum of all the negative scores. But in this case, the learner can only  mark one of the wrong answers, that penalty of 10 points can never exist.

Possible Issues

LMS reporting

When using SCORM 1.2 the LMS may not accept a score below 0. Just a warning

Attempts on Question level

The reason for the example file was the thread I mentioned in the introduction. In the example file, the Quiz attempts are set to Infinite, but the attempts on question level are limited to:

  • Two attempts for the Single Choice question
  • Three attempts for the Multiple Choice questions

The second and third question are identical, but the second has no partial scoring, the third has partial scoring turned on.  Captivate will see a question with a partially correct answer as a ‘correct’ question, and include it in the system variable cpQuizInfoTotalCorrectAnswers. That has also its consequence for the attempts. If you give only one correct answer, the attempts will be considered to be exhausted, you’ll not have the possibility to add correct answers. Try it out: you will see that you can use the 3 attempts always on the second question (as long as you don’t have all the correct answers), but not on the third question. That is a problem!

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1577246 2020-07-27T15:32:21Z 2020-09-28T09:43:54Z Replay or Reset slide?

Update

For a hands-on experience, have a look at the recent post with a Captivate tutorial about this topic.

Replay/Reset Slide tutorial

Intro

A frequently visited post on my blog is ‘Replay (slide) button‘, which was published 5 years ago. Such a button is not available out of the box in Captivate.  In that blog I explain two possible scenarios. The second scenario will be close to what is explained in this new post as a 'Reset' scenario. Since some features have changed, time to refresh. I will focus here more in-depth on the difference between Replay and Reset.

Companion tutorial:  to make this textual post more 'visible', I created a Captivate tutorial, which allows you to explore the difference between Replay and Reset (with or without On Enter action) on several examples. It can also be considered a summary of this blog, since the content slides (and assessment slides) treat this topic Replay/Reset. This is the link:

Replay/Reset using a Captivate tutorial

Replay slide

Many years before I already posted a simple way to replay a slide as well, and often I see users still using this two-line advanced action (which could also be a perfect Shared action, without any parameter):

Expression cpCmndGotoSlide = cpInfoCurrentSlide – 1
Continue

Whether you need the command Continue depends on the setup of the slide. If you leave it out, the play head will remain paused at at the first frame of the slide.

The advanced/shared action is essentially a translation from a still older action. , where more system variables starting with ‘rd’ existed, allowing a simple action instead of the one shown above. Reason: besides the cpInfoCurrentSlide, there was a second system variable rdInfoCurrentSlide. The first one was meant only to show the slide number, and for that reason starts its index with 1. The rd variable, like most system variables, starts its index with 0. , The simple action was:

Assign cpCmndGotoSlide with rdInfoCurrentSlide

Common misunderstanding is that this action will also ‘reset’ the slide which is NOT the case unless for very simple slides. Main reason: the play head never ‘re-enters’ the slide. Re-entering the slide is necessary to restore the original situation, either automatically, and/or by having an On Enter action being done again.

Reset slide

Hope we use the same terminology. Reset slide to me is to restore the slide to the situation it had when you first entered the slide.  During the first visit of the slide lot can have been changed. Here is a not exhaustive list:

  • Some object, originally hidden are now visible, or the reverse situation: originally visible, now hidden.
  • Multi-state objects were changed to another state, both custom state or InBuilt state (think about the Visited state of a button).
  • Effects have been applied to objects or groups, which can have those objects being in a different location if the effect included a motion path.
  • Knowledge Check slides have been answered. I will not talk about regular question slides, because those cannot be reset on slide level, only on Quiz level
  • Drag&Drop slides set up as Knowledge Check slides have been answered. Same restriction for D&D slides setup as scored questions (quiz level needed). I hear you! You can add a Reset button to a D&D slide, indeed, but that will not reset everything if you used Object Actions.

Essential for resetting is to re-enter the slide, to have the playhead revisit the On Enter slide event. For some of the described items that will be sufficient, for others it will be necessary to add an action On Enter. I demonstrated this situation in the recent presentation at Adobe eLearning World. You can find the recording still online in this portal. I will explain how to re-enter the slide (2 workflows).

Re-enter Slide (workflows)

Two workflows are possible (explained only the second one in the old post, but it has failed at least in one of the more recent releases and pushed me at the first workflow):

Dummy slide

Easy workflow, step-by-step:

  • Insert a duplicate of the present slide before the present slide
  • Take out all interactive objects of that slide, it should not have pausing points.
  • If there is an On Enter action, delete it and get back to ‘No action’ or ‘Continue’ (same result)
  • Reduce its duration to 0.1 secs which is the shorted possible duration.
  • Attach this  action to the Reset/Replay button:

Go to Previous slide

The play head will rewind to the dummy slide and since it is so short almost immediately (re)enters the present slide.

Drawback: you increase the number of slides. That may be annoying if you show the number of slides (cpInfoSlideCount) and/or if you use the TOC (where you’ll have to hide the dummy slides). I started using this approach in a version where micro-navigation had problems in HTML5 oiutput.

Tip: to avoid annoying flickering in case of low bandwidth, prefer a similar look for the dummy slide as for the present slide. I mostly use a duplicate, taking out all interactive objects and actions.

Micro-navigation

It is bit more complex but avoids adding slides. Workflow:

  • Create a user variable v_start. It will be used to store the first frame of the slide.
  • Use the On Enter slide event for this command (eventually to be combined with other commands) 
         Assign v_start with cpInfoCurrentFrame
  • For the Replay button use this command:
         Expression cpCmndGotoFrameAndResume = v_start – 1
    The play head will rewind to the frame before the start frame of the slide, which is the last frame of the previous slide. Due to ‘Resume’ in this system variable of the Movie Control category, the play head will continue and re-enter the slide immediately.
    It may prove necessary to increase the '1' to 2 or 3 if you don't get the expected result. It is possible that the value of the first frame is one or two frames wrong. In most cases however it works fine.

The variable and the actions can be reused on all slides.

What is reset?

As mentioned before, some items will reset automatically when re-entering the slide by one of the described workflows. Here a non-exhaustive list from my experience:

  • Multistate objects: if you keep the default setup where ‘Retain state on slide revisit’ remains unchecked. The normal state will re-appear as in the first visit of the slide. I have some blogs around which use that as an alternative for a Show/Hide scenario.  Drawback: if you use the InBuilt state ‘Visited’ it will also disappear in this situation.
  • Knowledge Check slides:  will be completely reset, ready for a new attempt. 
  • Drag&Drop slides: are completely reset, including eventually changes to objects due to Object actions. That is not the case with the generic Reset button which can be added to such a slide.
  • Effects: as you know they can be added with three types of triggers. The easiest one, based on timeline will not need a Reset action, will be reset with a simple Replay action. However both the button triggered Effects and Effects triggered by an advanced or shared action need to re-enter the slide to have them reset to their original situation.
  • Text Entry Boxes:  if you change the value of the associated variable, that change is never visible right away but will now be correct after re-entering. Same for the variables of learning interactions like checkbox and radiobuttons. Not really ‘reset’, more of a ‘refresh’.
  • Web objects: they will be reset to the first web page, which opens with indicated URL. If you use Replay that will not happen.
  • Animations like OAMs

What is NOT reset?

  • Multistate objects: if you check the option ‘Retain state on slide revisit’ for the object.
  • Hide/Show: items that have been shown or hidden during the Play head travel in the first visit will remain in that status.
  • Enable/Disable: if this command has been used for interactive objects, they will remain in that state. I showed this in the presentation ‘Deep dive with Shared and Advanced Actions’ at the Adobe eLearning world conference: if you disable all interactive objects, the pausing points disappear and nothing will stop the play head.
  • Variable values: they will not be reset to their original value.
  • Score: if you have scored objects on the slide, the total score including this score will not be decreased.

How do you reset these items: by creating or editing the On Enter action. That is beyond the scope of this shorter blog. You can see multiple examples in some slides of the Quick Start Projects, or on my blog including the sample project I added to the mentioned presentation. I include that project here as well. Check the On Enter actions (and the consequence of missing such an action on the first slide).

Look out for a Captivate tutorial to illustrate the difference for several of the mentioned items. It will be published soon on this blog.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1575941 2020-07-21T20:02:10Z 2020-07-21T20:02:10Z MCQ slides with images (back to basics)

Intro

Recently another request on the Adobe forums appeared about quiz slides:

"....insert images as the Options/Answers in the Multiple Choice Questions"

I answered within a short time showing a screenshot of such a question slide, quickly designed:
It is not really that difficult, but reminded me of the fact that many newbies have not really an idea about the way quiz slides are created. Although I have already published many articles about quizzes (see overview),  want to explain how I realized that quiz slides in minutes.

I would have posted this in the community as another Tweak post, but since 3 posts I entered since 2nd of July are still not approved, and i wanted to provide a clear answer to the OP on the Adobe forums, will only post in my personal blog.

Quizzing Master slides editing

All question slides are based on a dedicated master slide. One unique master slide is used in any theme for MCQ (one answer and multiple answers), True/false, Fill-in-the-Blank and Sequence questions. Typical for those master slides is that all the items are embedded, they have no individual timeline. You'll find more information in my other blogs. The most important part for this use case is the so-called Answer area:

That particular item is the container for the Question answers. It is however NOT possible to edit the individual question answer captions. 

Even with the default setting in Preferences which prefers Smart Shapes over Text Captions, all items on quiz slides are always captions! Question slides need a long due refurbishing, shape buttons as quiz buttons are also not allowed. 

To make place for images, you need to make the Answer area as big as possible. Move the buttons to the bottom, make the feedback messages as small as possible and move them downwards as well. Move the captions at the top as high as possible (Type of question, Progress indicator in this case as well, Question). Now you'll be able to increase the size of the Answer area:

Question slide editing

Only on quiz slides it is possible to edit the individual answers. I increased the number of answers to 4, and rearranged the answer captions to make them as big as possible. I took out the numbering and the text caption placeholder. You see the four answer captions inside of the (red) answer are:.

As most embedded items on the quiz slides, those answer captions have functionality built in. I would like to compare those captions with 'hotspots'. When you click a caption, the radiobutton will be selected. For a MCQ with multiple correct answers, it will be a checkbox that is selected. 

All embedded objects are always on top of the stack (z-order). If you insert an image in the area defined by the answer caption, it will be below the 'hotspot' and the functionality will be preserved. That is the only trick I used to have the resulting question slide with the maps of some European countries (SVGs). Since it is an original quiz slide, all functionality (Retake, Review) can be used. 

The workflow is also valid for quiz slides in question pools.



]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1570284 2020-07-07T08:52:33Z 2020-07-08T14:44:54Z How to Rotate a Button when clicked?

Intro

In a recent memory game which I published here last week, second variation of the game shows buttons which seem to rotate when clicked.  Users ask me how I made this possible? The InBuilt states of a button (Rollover, Down, Visited) and the custom states have their location and size locked to the Normal state. You can see this in a screenshot where the Rollover state is selected in a button created from a SVG:

Watch the lock symbol in the bottom right corner of the state on the stage (marked by a red circle). You see  the Properties panel, Options tab: Transform options are all dimmed. That remains the case even if you click the lock symbol a couple of times: it will disappear but you will still not have the Transform possibilities.

It IS possible to replace the image in a state using the style tab, as illustrated in this screenshot:

However using this possibility for a rotating button would mean creating multiple images (in this case in a vector application like Illustrator) for the different states of the button to be rotated. Clicking the button should trigger an action ‘Change State…’ where the appropriate Custom state is replacing the Normal state. You cannot replace the Rollover/Down states, they would have to be taken out or have a ‘neutral’. appearance

That type of cumbersome workflow (for the game 4 images for each button, 3 extra to be created in Illustrator) reminds me of the old processus for creating image buttons, or the old captions where you needed a graphics application and a text editor. That is the reason I looked out for an alternative to be done entirely in Captivate.

Secret = Empty Normal state

Lot of developers escape the problem by using a click box on top of a static (non-interactive) multi-state object. The click box, invisible by definition, is used to trigger the ‘Change State’ command for the multi-state object. That is functional, but why use two objects when it can be done with one. Another use of the ’empty Normal state’ which I will explain in a future blog for static objects.  Here you find the workflow step-by-step used for the rotating buttons in the game.

Step 1: invisible button

The example is for a SVG-button, but this can also be done with a shape or transparent button or eventually with a transparent bitmap image.  As visible in the screenshot below, the SVG (invisible) is in the state with Opacity set to 0%. The default setting ‘Enable click in Bounding box’ was kept, to be sure that the clickable area also covered the rotated versions of the SVG. Same Opacity approach can be used for bitmap image as button. For  a shape (or transparent) button set Opacity for Fill and Stroke width both to zero.

Delete the Rollover and Down states in the Object  State panel using the right-click menu. Don’t be confused by the fact that the Actions tab has disappeared when in Object State view, this SVG was activated as button:

Step 2: Image in Normal state

Make sure you have the SVGs in the Library (you cannot paste from the state in a state). Open the State view, and drag the image you want to be able to rotate to the Normal state. Use Align options (from align toolbar or right-click menu) to resize and align it with the invisible SVG-button. You may need to use the Arrange option to get the image to Front, to be able to recolor it as is the case here; it seems not to appear yet in the state but that is just a lag or refresh issue:

Step 3: Duplicate state and Rotate image

In the Object State panel duplicate the Normal state to a Custom state using the right-click menu.  The generic name will be NewState1, you may rename it but is not really necessary in this particular case. Select the image, not the SVG-button. Since it is unlocked (not a button) you can use the Options tab in its Properties panel to rotate the image.

Repeat this third step as many times as you need until you have all the required states (depends on the wanted rotation angle of course). 

Step 4: action and test

For the button use the simple action ‘Go to next State’ to be triggered by the On Success event of the SVG-button.  Deactivate the option ‘Continue playing Project.

Test using F11, Preview HTML in Browser (non-responsive project). SVG as button is only supported for HTML output. If you want to test in a Fluid Boxes project, you’ll need to use a static fluid box to be able to add the image to states. 

Limitations

You will not see the rotation as effect, because effects are not possible in states. If you really want to mimick such a rotation, make the rotation angle smaller and use a While loop. 

In fact this workflow is similar to using a Click box on top of a multi-state object: the role of the click box is taken over by the invisible SVG, and the static multi-state object is replaced by custom states in the button. It is not really necessary of course to use the same image for the invisible button and the added images. I just find it easier because you have a reference frame which is the bounding box of the invisible SVG. You have to be sure that clicking the SVG image in any position will be in the bounding box of the invisible button.

As you probably already understood, this workflow is only possible when the bounding box requirement is fulfilled. It is not a solution when you move the button to another location using a motion path. If you are on the most recent release (11.5) have a look at the Quick Start projects which have a horizontal accordeon layout. You'll see how complicated the advanced actions are due to the fact that you cannot move a button.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1567072 2020-06-30T13:56:04Z 2020-08-15T09:03:52Z 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!


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1567045 2020-06-30T13:48:38Z 2020-06-30T13:48:54Z 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.

 

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1561626 2020-06-19T10:34:23Z 2020-06-19T10:34:24Z '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).

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1557091 2020-06-10T14:43:36Z 2020-06-20T16:57:26Z 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




]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1551067 2020-05-28T19:27:59Z 2020-12-03T16:28:06Z Replace Rollovers: Click/Reveal interactions (back to basics)

Intro

There are many ways to create a Click/Reveal interaction. Some are very old (with jump to slide), others are pretty old (show/hide) and lot depends on the exact situation. It is possible that I will make a complete analysis, although  I don’t think this will appeal to many users.

However my sense of justice is too keen, and I cannot  leave this type of comment (newbie)  without reacting:

This is basic stuff right! Why is it so complicated?  “

If you want to know more, explore the discussion link.

I created a quick example of the most basic workflow which can be used. Will explain step-by-step.

Example

A two-slide project. The Click/Reveal interaction is on the second slide. You see three characters, which act as toggle buttons. When you click a character, a speech bubble will show up, when you click the character again, the speech bubble will disappear.

There is a Back button top left (but you can also use the Back button on the playbar which I have left in this project). You'll see that when revisiting the slide, the original situation is reset: no speech bubbles. Even if you leave the slide with one or more speech bubbles opened.

You can use this link to view a rescalable version or watch the embedded one below (fixed resolution):


Step-by-step

Step 1 Characters to button

Download the Characters and insert them on the slide.  Check the option ‘Use as button’ in the Properties panel (red outline in screenshot below). Leave the option ‘Retain state on slide revisit’ unchecked (green outline)
TIP: you don’t have to do this three times. Select the three inserted Characters (using CTRL button to add to the selection, or by creating a selection rectangle which cuts the three characters. Check the option in the Properties and it will be done for all the Characters.

 

Step 2: Custom state

Select one of the Characters. Click the State view button in the Properties.  Look at the screenshot above, where you see the button with a Blue outline. The  Object state panel will appear, which will have 3 states because you have a ‘button’: Normal, Rollover and Down. I deleted the last two ‘InBuilt’ states. They were identical to the normal state. You can do that with the right-click menu as shown in this screenshot. The Down state was already deleted, here the Rollover state will be deleted. 

Now add a Custom State using the New State button. Make sure to choose Custom under the first dropdown list (click the triangle button). You can edit the default name (NewState1). You have seen in the previous screenshot that I labeled it ‘Answer’.

That state will be selected, and you can add the speech bubble (eventually even with audio attached to it) and or any other object you want. Use the stage, where all will be dimmed in the background except your new custom state:

Close the Object State panel using the Exit State button at the end of the top Big Button Bar:

Step 3: Actions

Select the Actions tab in the Properties panel for the selected Character button. For the On Success event  set up this action:

You may see how easy it is to detect the multistate object to choose from the second dropdown list, since its name appears at the top of the Properties panel.

IMPORTANT! You have to uncheck the option ‘Continue playing the Project’ (red outline). That will prevent the playhead to be released. Will not expand in this article on pausing the timeline.

Your toggle button (character) is ready.  Start testing using F11, Preview HTML in Browser.

Comparison with Show/Hide

What are the advantages of the described workflow over the older Hide/show workflow which was chosen by the user:

  • Show/Hide will need a lot more objects on the slide. In the multistate workflow the character is the only object: it is used as button, and the bubble (eventually the audio and/or other objects) is in a state of the character.
  • Since using 'Go to Next State' will loop between the Normal and the Custom state, there is no need for a close button. If you want to achieve the same with Show/Hide you can also create such a toggle button, but that means a tracking variable and a conditional advanced or shared action. If you don't want a toggle button, you need to add a close button to the group to be shown.
  • One of the biggest advantages is the automatic reset when revisiting the slide. Because the option 'Retain state when revisiting the slide' is unchecked, revisiting the slide will result in having the Normal state for each of the Character buttons. If you use a Show/Hide workflow, you have to use the On Enter event of the slide to reset everything, which means another advanced or shared action.

Hope you understand why I labeled this post as being a 'super easy' workflow. Multistate objects are available since version 9, there is no reason why you want a more complicated workflow in the 3/4 last versions.

To be honest, there is one disadvantage: you cannot apply an effect to the Speech bubble when appearing.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1547571 2020-05-21T09:07:53Z 2020-05-21T09:13:52Z 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!]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1544187 2020-05-13T19:14:15Z 2020-05-13T19:14:15Z 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.

]]>
ir. Lieve Weymeis