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.

Analog Clock #2 – An Advanced Experience

This project is a little more than I put into a typical submission. Hopefully you enjoy.
This is the second of two projects with an analog clock as the main attraction.

Project is not designed for mobile devices.

This project features the following things.

  1. Audio with On/Off toggle switch – Default is off.
  2. Analog clock with snap positions at every 1 minute increment
  3. Analog clock has draggable hands in order to modify the time
  4. Two learner tasks of higher difficulty
  5. A label to display the time as currently set by the clock
  6. A button to toggle the time display on and off
  7. A subtle tip when you are close to the right hand positions
  8. An option to perform the tasks again will become available upon successful completion of both tasks
  9. A short video explaining the creation of the JavaScript code
Play

Discussion is welcome.

The post Analog Clock #2 – An Advanced Experience appeared first on eLearning.

Export Captivate Learner Notes with JavaScript

A learner can add notes to the text they’ve already typed up. Once they are ready they can export their notes in a new window and they can copy and paste these notes into a word processor, send it to their printer, or save it as a PDF. This project uses an easy to use three lines of JavaScript to make it work.

Need to Simulate Look Ahead in Search – Help?

Hello,

I need to simulate a look ahead function in search. Let’s say I have 4 account numbers:

  • 1234567
  • 1236784
  • 1267398
  • 1873495

I need them all to show when the user presses 1 in the text box. I also need them all to be clickable as a link to another slide.

When the user enters the 2 following the 1, only the top three show (and again are clickable) entering the 3 has only the top two showing and so on.

I could simulate this with a ridiculous number of slides and a massive kluge but what I want is a text entry box with javascript matching each keypress to an array that I have previously created (or pulled in from XML) and displaying just those entries still in the running as it were. Text boxes in Captivate only seem to fire off javascript on success (or failure) not with each keypress.

How do I do this?

Thanks,

Greg

The post Need to Simulate Look Ahead in Search – Help? appeared first on eLearning.

Gamified Learning – “Kitchen Quest”

Play

This is Kitchen Quest, a small gamified learning demo my team and I built at our little eLearning company.

Our goal was to create a retro Gameboy style game to help technicians learn how to troubleshoot different appliances in commercial kitchens.  To accomplish this goal, we used multiple combinations of Advanced and Conditional Actions, Variables, and JavaScript.  This is the result.

Check it out and let me know what you think!  If you have any questions on the different elements of the game or how we got certain parts to work, please don’t hesitate to ask!

Kitchen Quest  Overworld  

The post Gamified Learning – “Kitchen Quest” appeared first on eLearning.

Converting Seconds to Hours, Minutes and Seconds

In a previous tutorial, I showed how to use the Modulus operator (https://elearning.adobe.com/2020/04/learn-about-the-operator-modulus/) This tutorial will show an example of how Modulus can be used when converting a given number of seconds to hours, minutes and seconds. This can be handy when you want to time a learner in a section or on a specific screen. 

Cheers

The post Converting Seconds to Hours, Minutes and Seconds appeared first on eLearning.

Learn About the Operator Modulus

Most people are familiar with basic operators within a language. These operators include addition (+), subtraction (-), multiplication (*) and division (/). However, there’s another operator which is very useful. Programmers use this a fair bit. It’s called Modulus. The symbol that represents modulus is the percent sign (%).

This video will give you an explanation of modulus and show you a number of examples. Then you will be shown an example of how modulus is used when you want to create a random flip coin project to help teach probability.

Cheers

The post Learn About the Operator Modulus appeared first on eLearning.

Old Fashioned Car Radio – Part 2: The Code (WARNING – Major Nerd Post)

Ok everyone. Here is how I managed to pull off the car radio.

All graphics were created in PowerPoint and saved as  PNG  files. The only exception here is the orange bar to mark placement for the radio station. That is just a simple smartShape.

Rotating Knobs
Since Captivate does not offer simple sliders or rotating dials, both of the knobs are inserted as HTML5 Animations. I used some code – with the help of  Greensock – to do the heavy lifting. Here is how it looks for the tuning knob. The volume knob does the same thing for the rotation but uses different variables

<html>
<head>
  <script src=”gsap.min.js”></script>
  <script src=”Draggable.min.js”>
  gsap.registerPlugin(Draggable);
  </script>
</head>

<body>
<img id=”simKnob” src=”plainKnob.png” width=”125″ height=”125″>

<script>
setTimeout(function() {
Draggable.create(“#simKnob”, {
  type: “rotation”,
  liveSnap: gsap.utils.snap(7),
  bounds: {minRotation: -1610, maxRotation: 1610},
  onDrag: function() {
    getRotVal=this.rotation;
    window.top.station=getRotVal;
    window.top.moveLine();
    }
  });
},500);
</script>

</body>
</html>

Let’s talk about it just a bit.

Blue Portion
We start off by pointing to the Greensock (GSAP) animation libraries needed for this to work. As you can see, they are relative links because I packaged them up in the zip file so that I did not have to modify the published index.html file to go and grab them. I preferred this method because I did not have to continue making that edit whenever I wanted to publish a change and test it. These are script tags within the head tags up front.

Green Portion
Here is the body of it all. I am simply calling out the image I created in PowerPoint. This is what I will be animating with the code. Be sure to give the image an id (simKnob in this case) so that you can reference it for the animation.

Red Portion
Here is the code the does the majority of the work.
We start with a short half second setTimeout so that the inserted HTML5 animations have a chance to fully render on the screen. If they are not fully rendered, the code breaks because there is nothing there yet to animate. So within this setTimeout, let’s go line by line.

Draggable.create(“#simKnob”, {

This is GSAP syntax – but it is very simple compared to making a rotating knob from scratch. So you see the #simKnob in quotes there? I am simply saying create a draggable object out of that element. You’ll notice I am referencing the ID of my knob graphic from the green portion above.

type: “rotation”,

Next we are telling the object that it will have a rotating behavior when we drag on it.  (Nice!)

liveSnap: gsap.utils.snap(7),

This is a GSAP utility that allows the dragged object to snap to every 7 degrees of rotation. Perhaps that seems like an odd value to you… let me explain it because you may very well need to use a different value here in your own project. In order to do that – let me bring in the next line…

bounds: {minRotation: -1610, maxRotation: 1610},

This sets the boundaries for my ability to rotate the knob. A total range of 3220 degrees. 1610 to the left and 1610 to the right based on the placement of the orange bar in the center of my radio as a starting point. Ok. Now. My radio station range in pixels on the Captivate stage is a total of 460 pixels. I determined this by placing the orange bar at the furthest position I wanted it to travel on each end and looked at the difference in X values.

OK so that means my tuning knob with 3220 degrees of range needs to correspond with 460 pixels of distance. Doing the math we find that 3220/460 = 7  and that is why I have the snap value set to every 7 degrees.

If you thought that math was scary – wait until we cover the onEnter JavaScript. The math is scarier than the code!

onDrag: function() {

Next we set up a function that is called as we drag (or rotate) the knob. This function will perform three things for every 7 degree turn of that knob. (See how this is playing out?)

getRotVal=this.rotation;

First, the function will grab the current rotation value, in degrees of the knob. It will be a value between -1610 and +1610. We are assigning that value to a variable I am calling  getRotVal  for get rotation value.

window.top.station=getRotVal;

Next, I am basically sending that value out of the animation and to the Captivate stage (window.top) to another variable called station.

window.top.moveLine();

Finally, I am calling a function called  moveLine  which does what you might expect. It moves the orange line on the radio. Notice I am using window.top again. This function is defined in the onEnter action of the slide.

Then we just close everything up and use the value of 500 for the setTimeout which is a half second. This means that when the setTimeout is executed it will wait a half second to perform all the stuff inside.

Last we close up the body and html tags.

Whew!

OK – so this html file, my knob image, and the js libraries get zipped up and inserted as an HTML5 Animation.

onEnter Code
Now here is a little extra to make this work and it is perhaps a little bit scarier if you are not a fan of algebra but let’s put on our 8th grade sweater vests again and dodge a few spit balls OK?

cpCmndVolume=20;

function moveLine() {
station=Math.floor(station);
linePos=((station*1+3563)/7)-509;
$(“#myLinec”).animate({left: linePos},10);

if (linePos==121) {
document.getElementById(“preset1”).click();
}

if ((linePos<119) || (linePos>123)) {
document.getElementById(“preset1Stop”).click();
}

}

function adjVol() {
volume=Math.floor(volume);
cpCmndVolume=(Math.floor(((2*volume)/9)+20));
}

Let’s investigate. Basically we have a short statement to set the volume at 20 followed by two functions. The first function is the scarier one. This is the function that moves the line. Let’s break that into three parts.

function moveLine() {
station=Math.floor(station);
linePos=((station*1+3563)/7)-509;
$(“#myLinec”).animate({left: linePos},10);

In this first part we name the function moveLine. Remember this is called by every 7 degrees of turn on this knob. Our second line takes the station variable and chops off all the decimal places using Math.floor. We are doing this because the knob grabs the rotation value out to a boat load of decimal places and that was too messy.

The third line is scary and is where the algebra comes in but it was really necessary to create a smooth moving line as you rotate the knob. The key is in using the slope-intercept formula of a line. ( y=mx+b )  Don’t throw up on me. Hang in there. I had found the relationship of the knob range to the line range which was 7 degrees turn for every pixel of line range but now I needed to translate that as a full set of points like you would have on that line between (279, -1610) and (739, 1610).

So I can figure out the slope of this line using rise over run – change in y over change in x – or in this case 7 over 1. My  X  value (run) is my left and right of the line which makes my  Y  value (rise) the degrees of turn. Remember? We have 7 degrees turn for each pixel horizontally.  So the slope of the line is 7/1 or just 7.

Now we have y=7x+b. Recall that b is equal to the y-intercept which is whatever Y equals when  X  is at 0. We can solve for b by plugging one of the known (x,y) values. Let’s use the positive numbers.

1610 = 7(739) + b

1610 = 5173 + b

-3563 = b

Awesome! Now I know my complete equation.  y = 7x – 3563

Remember this because we need it to calculate the animation of the line now. Let’s look at it.

linePos=((station*1+3563)/7)-509;

Here I have a variable called  linePos  which will basically track the x value of the object on the screen and move it to that position based on the rotation of the knob.

In this equation linePos is our  X  and station is our  Y.  Solve our equation for  X.

y = 7x – 3563

y + 3563 = 7x

x = (y + 3563)/7    (notice if you solve for x when  y = 0  that   x = 509)

We need a start value of zero for the line so we can travel left and right from there. So we take the station variable and sub it for  Y  (that was the rotation value with decimal points cut off) and multiply it by 1 so that it can be used in number form rather than string form and add our 3563 and divide by 7 as you see in the solved equation. At the end I am subtracting 509 so that my x value becomes 0 which is the starting reference for the line movement.

OK – breathe now.

$(“#myLinec”).animate({left: linePos},10);

Now we go ahead and move the line to the calculated value for the  linePos variable in 10 milliseconds. Every 7 degree snap is a single pixel and it moves that pixel in only 10 milliseconds so it helps it to look pretty smooth and realistic. At least I think it does.

Ok – A couple of if statements now.

if (linePos==121) {
document.getElementById(“preset1”).click();
}

if ((linePos<119) || (linePos>123)) {
document.getElementById(“preset1Stop”).click();
}

The first one is where our line position is 121 pixels to the right of the starting position. This is where I guessed that 103.7 would roughly be. When we get there, I use the code to click an invisible button to play the audio. That button simply has a play audio event on it. In the next if statement, I give a few pixels of range before shutting that audio off because you are too far from the station. Again, I just use an invisible button to stop the audio. That is an old school trick but it was the easiest to implement in this scenario.

function adjVol() {
volume=Math.floor(volume);
cpCmndVolume=(Math.floor(((2*volume)/9)+20));
}

The final function is for tracking the volume range of 0 to 100 across the rotation range I have set up on that knob which was just short of a turn and a half but I won’t put you through that one unless you’re really interested.

I hope you found this interesting.

Feel free to ask any questions you might have.

The post Old Fashioned Car Radio – Part 2: The Code (WARNING – Major Nerd Post) appeared first on eLearning.

Recognize the mysterious animal with Captivate…

Hello Captivaters !…

Today I want to share with you my last project… It’s about the animal world…

It’s mainly inspired by Greg’s project you can find here :

https://elearning.adobe.com/2019/07/random-reveal-effect/

But I want to clear areas instead of revealing ones…  No difficulty here… But, especially, I don’t want the same area to clear many times…

(It’s in french so I would tranlate some words for you first :

a tapir = un tapir //a pangolin = un pangolin // a pelican = un pélican // a dragonfly = une libellule // an octopus = une pieuvre // a cheetah = un guépard)

Then let’s take a look on the project  :

Play

As you can see, I reveal 12 areas randomly and for this I use some javascript added to the entering slide action…

This is it :

function shuffle(arr) {
var i,
j,
temp;
for (i = arr.length – 1; i > 0; i–) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
};

var myClik = [‘1′,’2′,’3′,’4′,’5′,’6′,’7′,’8′,’9′,’10’,’11’,’12’];

var myClik2 = shuffle(myClik);

=> “myclik2” returns the sequence of “myClik” in a random order… !!!… Magic !…

I just have to select the numbers one by one in the new serie and trigger the actions as Greg provided us !…

If you need more details, don’t hesitate to ask in the comment !…

Stay safe !… And happy Captivating !…

			</div><!-- .entry-content -->
	    
	<footer class=