Memory games (Javascript IN shared actions)

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

Have fun!

The post Memory games (Javascript IN shared actions) appeared first on eLearning.

Find the Pairs (shared actions game)

Have some fun with a new game. It has been created with mult-colored SVGs created in Illustrator. No Javascript was needed.  I used:

  • Three shared actions: one fot he correct shapes (used  8 times), one for the incorrect shapes (
  • Two advanced actions to be used On Enter for the play slides
  • 6 variables.

Game rules are in the course. Lot more variations are possible: more pairs, trios…

Play

The post Find the Pairs (shared actions game) appeared first on eLearning.

Reusing Shared Actions

Intro

Recently I published two blogs  and a video in this community about ‘Use of Shared Actions’. .  Focus is not on the creation of Shared actions, but only on the use of existing actions. This is a perfect scenario for starting users, who want to insert interactions without  any scripting or creation of variables.  Here are the links to the published:

Use of Shared Actions: explaining the goal, and showing a Demo project with 4 typical interactions. All of them can be realized with the workflows explained in the following blogs and videos.

Parameters (back to basics):   this blog explains the role of ‘parameters’ and has a detailed step-by-step workflow how to use existing shared actions. One of the 4 interactions (slideshow) of the demo project is replicated. I offer a start project which has shared actions (in the Library) to allow you to practice.

Crash course – Lesson 1:  video as alternative for the previous blog.  The video shows the most intuitive workflow to use the shared actions, using the same free start project.  You will be amazed how simple this can be.

This article will explain step-by-step workflow to use the same actions in your project. Again very simple workflow. For the video fans: lesson 2 of the Crash course will also be a video, to be published soon.

Workflow: reuse 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 multistate objects. Content is not important: audio, video, graphics, text or combinations in the states. Only requirement: same number of states in both objects. 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::

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.

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 rehearse what you learned in the previous post: 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. .

The post Reusing Shared Actions appeared first on eLearning.

JavaScript to Change a Multistate Object

This video provides you a quick overview on how to apply some JavaScript to a screen and buttons to change the state of a multistate object. The file for this project can be downloaded at

https://elearning.adobe.com/2020/03/tour-of-kia-project/

The post JavaScript to Change a Multistate Object appeared first on eLearning.

Secrets of cpQuizInfoAnswerChoice.

Intro

Recently I posted an example project, where this quizzing system variable was used for Survey slides. If you missed it, use this link. The topic is a poll about the availability of assets when you need to edit a legacy project to make it ready for HTML5 output.

In this blog you’ll find some clarification about cpQuizInfoAnswerChoice.  Since the navigation setup, resulting from the survey is quite complicated I will limit the explanation to one of the branches. The poll is not yet complete, results at this moment in three end slides.

Intensive use of user variables, multistate objects and advanced actions were necessary.,

cpQuizInfoAnswerChoice?

This system variable belongs to the category Quizzing. Typical for that category is that the variables are read only, you cannot edit them in Captivate directly.

It is a reused variable, gets a different value after the Submit process on each quiz slide. The value you are getting depends on:

  • Type of question (see below)
  • Numbering (if available) in the question. For several types you can choose between capital characters (A, B, ..), small characters (a, b, …), numbers or None.  None will result in the same value as numbers (my preferred numbering)

In the example file I used three types of questions, which are very common in surveys:

  1. True/False. For that type the value of cpQuizInfoAnswerChoice will be either a character or a number, depending on the chosen numbering type.
    Example: if learner choses “True” value will be A, or a, or 1 (also for None as numbering)
  2. MCQ with radiobuttons (one answer): value will be the character or number of the chosen answer. No problem when shuffling the answers. Although the numbering on runtime will be changed in that case, the original number, as seen in the editing environment, will be stored in the variable.
    Example: Second slide in the example had three answers. You may shuffle the answers on runtime, but if the learner selected this answer, the value of cpQuizInfoAnswerChoice will be ‘1’.
  3. MCQ with checkboxes (multiple answers possible): all chosen answers will be stored, using a separator (in my case a semicolon). If you use shuffling, the reported value will take the numbers originally assigned in the developing environment:
    Example: first slide in the example file looked like this. With the shown selection, the value of the variable will be ‘2;3;4’ even if due to shuffling the numbering was different on runtime.

Short description of the other Question types:

  • Matching: the chosen corresponding  numbers in the first column, with separator(s) will be reported similar to MCQ with multiple answers.
    Example ‘A;C,B’ indicate that in the first column those were chosen to connect with A, B, C in the second column.
  • Sequence: I couldn’t figure out what the meaning was of the reported value, very strange. Look like IDs (like Interaction IDs) separated by semicolumns. Maybe someone can explain?
  • Fill-in-the-Blank: the text chosen for the blanks will appear, with separators.
  • Short Answer: text entered by the learner.

Due to the fact that Captivate’s variables can store strings as well as numbers, if you choose for numbers you can perform calculations (Expression command). I used that feature in an old post about Graded Surveys. It has not been used in this example.

Used Techniques

I will not explain every detail in this example file, just some tips about the used techniques.

Decision Tree – Branches

Before starting the development, I did sit down to see how many branches I would provide in this survey. The present example results in three main branches, ending up in three different end slides. Those are the slides surrounded by a red box in the screenshot of the Advanced Interaction panel (will blog about its use ASAP). The Survey slides are included in a blue box:

Which branch to be followed is tracked by a user variable, which is empty to start with: v_swf, v_cptx, v_scratch. Those variables can have different values, because each main branch has sub-branches.

Example: The branch which will end on slide 12 ‘SWF_workflows, starts with a value=1 when the learner indicates that the output SWF is the only asset remaining from the legacy file. Based on more answers, this value can be incremented to 2 or 3.

Multistate objects

The information on the end slides (12-14) is stored in multistate containers. The On Enter action of each slide uses the tracking variable for that branch to show the appropriate state. Look at the screenshot of the action triggered On Enter for slide 12:

There are only two decisions because the Normal state is valid for the situation where v_swf==1.

Embedded variables

If the result of the poll leads to the last slide, with the recommendation to start from scratch. However it is possible that some assets can be used: documented theme, other assets like graphics files (PS/AI), audio clips, video clips, GIFT or CSV files for questions. To show this information, user variables are inserted in the states on the slide. Their value is either empty, or filled in due to the choices on the very first survey slide. Look at this screenshot, which shows the Normal state (no external library available):

More?

Do you have more questions? Please post them in a comment. Maybe we’ll meet at Washington DC, will try to help users struggling with conversion of their legacy projects due to the demise of the SWF player.

The post Secrets of cpQuizInfoAnswerChoice. appeared first on eLearning.

Survey: Use of cpQuizInfoAnswerChoice

Intro

Eight years ago I wrote a blog post about ‘Secrets of cpQuizInfoAnswerChoice’. Of course the embedded example file was published to SWF at that moment. This specific quizzing variable is very useful when you need to evaluate the results of survey slides to make decisions. I created a new example file, partially based on slides from the Quick Start Project Alliance. It is part of a ‘decision tree’ which could be used for those who want/need to convert legacy projects to make them ready for publishing to HTML5.

Example file instructions

There is no audio in this example. All quiz slides are Survey slides, and navigation is based on the results of the Survey slides.  Type of slides used are True/False, MCQ with one correct answer, MCQ with multiple correct answers. At the end of each branch (there are quite a lot of possibilities) you will end up on a slide with possible workflows. In this example you’ll find only three ‘results’ slides:

  1. If you have only the SWF output of the legacy project.
  2. If you have the cptx-file but cannot use it directly in the present Captivate version
  3. If you have the cptx file, it can be opened in the present version.

To explore a new branch, please refresh the browser.

Play

Explanation needed?

How did I use cpQuizInfoAnswerChoice and which other features were used? It was rather challenging, due to the topic with its multiple navigation branches. Maybe in a next blog post? BTW I did only use variables and actions, no JS.

The post Survey: Use of cpQuizInfoAnswerChoice appeared first on eLearning.

Hyperlink Tips

Quite a while ago i have blogged about using Hyperlinks as interactive objects. Those blogs include examples, but from the SWF era… which is almost over.  Here are the links to those older articles:

More is in a hyperlink – Dropdown menu

More is in a hyperlink – Close button

I used the Dropdown menu workflow in all the interactive videos which I posted here, to create a Bookmark menu.

Last week, a user asked some questions about the same topic. Time to test if, what I described for SWF output is still valid for HTML5 output. You can have a look at this example file, where I show 4 use cases:

  • Navigation buttons
  • Show/Hide workflow
  • Close button for a popup
  • Forced view

I did keep the typical Underline for the hyperlinks (but often edited the color). You will find tons of them. The design of the slides was taken from the Quick Start Project included with version 11.5, labeled ‘Rhapsody’. It always reminds me of the epoch of the Hippies…

No audio, sorry.  There is no playbar, nor a TOC. Navigation is done with SVGs, which have a tooltip (added in the Rollover state). This is a rescalable, non-responsive project. I have created a Fluid Boxes project as well, check out the workflows.

Play

If you are interested, I will post a detauked description of the workflows in a blog post. I learned that you have to be a lot more careful with the HTML5 output than was the case for SWF output. Not every hyperlink was functional right away. Especially states in multistate objects have caused me issues.

The post Hyperlink Tips appeared first on eLearning.

2020 Game: Find the Differences

Have some fun with this game:

Play

Hope you can reach the final view! SVGs were taken from one Adobe Stock image, using Export Assets in Adobe Illustrator. Some SVGs are used as buttons. Multistate objects, one shared action and two small advanced actions + two variables is all you need. No JS, but I’m sure this can be done with JS as well.

The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, progress bar and end image are all on one slide.

Since I have stacked objects, this would not be possible to replicate in a Fluid Boxes project.

The post 2020 Game: Find the Differences appeared first on eLearning.

Quiz Tweak 7: Forced Audio feedback

Intro

In spring 2019 I have posted several articles about the default design of Quiz slides, and how to tweak them. Today a user posted a question, which was not completely covered in the Tweak posts, although it is bit related with the post ‘Quiz Tweak 4: Submit Process‘.   To understand this post, please make sure you have a full understanding of the Submit Process itself, explained in another post.

This was the question ‘Force Answer Feedback Audio to Play Through Before User Can Continue’. User wants to show feedback to the learner for any answer, correct or wrong and that feedback (image or text) has also an audio clip to emphasize the feedback. In the default setting, the learner cannot be forced to listen to the audio clip, since it is possible to click the slide immediately (or press Y) and skip it. That should be prevented. Even advanced answer option cannot force this.

Example

Just one question slide in this example file to show the result:

Play

Setup

I will often point to the previous post about Tweaking Submit Process, where some identical steps are described in detail and with screenshots:

Step 1: create quizzing master slide

Duplicate the MCQ master slide, and take out all feedback messages. You can leave the Review area which is only used when a question has been skipped. More details in the post referred above.

Step 2: insert MCQ slides and apply new master slide

See the older post.

Step 3: Continue button

Create the Continue button, which has to be a shape button, looking exactly the same as the embedded Quiz buttons. Since it is a non-responsive project you can put that button under the Submit button. More details in the other blog post.

Step 4: Timing Continue button

Time it at 1.5 seconds as described in the other post.

Step 5: Custom feedback

The feedback needs to have a different content and an audio clip for each of the answers, correct or not. I used a multistate object (shape), where the normal state is invisible (Alpha an Stroke = 0), and each answer has its state. Here is a screenshot of the Object States panel:

It is possible to attach and audio clip to each state. It will play when that state appears. Use the Options tab, from within the state, and add the audio:

Step 6: (Advanced ) Actions

Hide the Continue button with the On Enter action of the slide. It is not a good idea to have two interactive objects at the same location and the same moment.

SuccessAct

There is only one correct answer in the MCQ. The advanced action will show the correct state of the feedback multistate object (in this case AnswerC), the audio clip will start playing and the Submit button remains visible but will not be active anymore. The command ‘Delay Next ….’ is used to keep it that way until the clip is finished, the delay time is equal to the duration of the clip (or it shorter).

You see that I show the Continue button after the delay, then release the playhead (which will pause again at the pausing point of the Continue button). This is necessary to let the effects applied to the Submit button be activated (see Step 7).

WrongAct

In this case there are two wrong answers possible. It would have been possible to achieve this with one decision in a conditional action. However to make the action more ‘universal’ I preferred to use two decisions. If you have more than 2 wrong answers, you’ll need to have a decision for each answer. The system quizzing variable cpQuizInfoAnswerChoice has been used to find which state is needed for each wrong answer, and the duration of the delay time has been edited, since not all clips have the same length.

Step 7: Effects on Continue button

Please have a look at the older post. To get the Submit button out of the way, and inactive, I applied an Alpha and an Exit effect. This is not possible with advanced actions, because the Submit button is an embedded object, has no ID.

The post Quiz Tweak 7: Forced Audio feedback appeared first on eLearning.