Overview

I recently worked on a project where ‘balance’ was an underlying theme to the learning.  Without going into too much detail about the content, the learner needed to place several ‘statements’ into categories and through this process of categorizing would in turn understand the concept of balance.  Cue the obvious metaphor: the scale.

You can see the modified final product in the .cptx file I attached. Please feel free to modify or use it if you would like in your own projects.  This blog essentially explains some of the coding for those interested in learning more about javascript, web animation / .css, or Captivate.

DDBalance

Drag and Drop

I am assuming most people will know how to set up a basic drag and drop functionality.  I have 8 drag sources and 2 drag targets.  I have the drag sources snapped in a tiled position. For each drag target under ‘drag and drop’, ‘format’, ‘object action’, I have accept all and the 4 sources that are correct.  When any drag object reaches the correct target, it launches either advanced action ‘scale left’ or advanced action ‘scale right’.

Variables and Names

I have 5 custom variables.  eRot, sRot, eUpDown, sUpDown, and DDscore.  All set to 0

The balance bar is ID’d ‘bar’

The right and left scales are ID’d ‘scaleL’ and ‘scaleR’

The Rotation Animation Code

Have you ever tried to animate a rotation in Captivate just using the ‘RotateTo’ function?  My advice…don’t!  There are too many problems with it.  In particular if you need the rotation to happen multiple times.  In other words, if you want an object to rotate 7 degrees and then rotate 7 degrees back, it won’t happen.

I have a video post about using an external library called jQuery Rotate.  I also don’t recommend using this.  I am now generally trying to get away from jQuery and using external libraries and focusing on my Vanilla JS and .css skillz – that’s right with a ‘z’.

I do highly recommend reading up on css animation: https://css-tricks.com/css-animations-vs-web-animations-api/

Here’s the animation code I used just for the bar to rotate – not moving the scales up and down.  btw – I used an advanced action because I didn’t want to keep copying the same javascript over and over.

sRot = eRot;
eRot = eRot + 7;

barc.animate([
{
transform: “rotate(” + (sRot) + “deg)”,
},
{
transform: “rotate(” + (eRot) + “deg)”,
}
], {fill: ‘forwards’, easing: ‘ease-out’, duration: 1000});

When thinking of web animation, you need to think in terms of starting and ending frames.  Therefore you need to define the starting rotation in degrees and the ending rotation in degrees.  When this code is executed, sRot (starting rotation) equals the eRot (ending Rotation) and eRot adds 7 to its value.  Therefore if you executed this code 3 times the variables would change as follows:

0

sRot =0

eRot = 0

1

sRot = 0

eRot = 7

2

sRot = 7

eRot = 14

3

sRot = 14

eRot = 21

That’s what the first part of the code is doing.

The second part of this code – ‘barc.animate([‘ is basically declaring the starting frame rotation for the object barc (add a ‘c’ to all Captivate IDs you want to animate) and the ending frame rotation.

The last part of that code “{fill: ‘forwards’, easing: ‘ease-out’, duration: 1000})”  is saying that the animation will freeze on the last frame (fill forwards), the animation will change it’s speed out (ease-out) and the duration will take 1000 milliseconds (i.e. 1 second) to complete.

The Scales Moving Up and Down Animation Code

sUpDown = eUpDown
eUpDown = eUpDown + 16;

scaleRc.animate([
{
transform: “translateY(“+ (sUpDown)+ “px) “,
},
{
transform: “translateY(“+ (eUpDown)+ “px) “,
}
], {fill: ‘forwards’, duration: 1000});

scaleLc.animate([
{
transform: “translateY(“+ (sUpDown*-1)+ “px) “,
},
{
transform: “translateY(“+ (eUpDown*-1)+ “px) “,
}
], {fill: ‘forwards’, easing: ‘ease-out’, duration: 1000});

This is pretty much the exact same code as before, except instead of rotation, we’re dealing with the translateY position (moving up and down on the Y axis).  I also needed to apply the animation to both the left and right scale, but notice that as scaleR uses the sUpDown variable, scaleL uses sUpDown *-1.  This reverses the position because if sUpDown = 16,  sUpDown*-1 = -16.

Final Touches

I hid the Captivate submit button because I wanted more control.  I also could have added these final touches as part of the advanced actions but I forgot and wrote it in as javascript.

ddScore = ddScore+1

evaluate();

This means that every time a drag and drop source is successfully brought to the target, ddScore increases by 1.  It also executes the evaluate() function which I execute on enter slide.  That function is:

function evaluate() {
if (ddScore == 8){
cp.show(‘nextBtn1’)
};
};

Therefore if ddScore is 8 it will show nextBtn1 and the learner can continue.