Three Learning Interactions from One JavaScript Function

Click to Launch Project: Play

Learning Interactions are components of Adobe Captivate 2019 that provide the learner with a specific way of viewing information or interacting with published courses. For example, a Glossary is a Captivate Learning Interaction that presents terms in a list and allows learners to search the list using an input field or scrollbar. A number of contributors have created videos and blog posts on Learning Interactions, and I’ve listed them in the reference section, should you want to view them yourself.

You may be tempted to call Learning Interactions “widgets”, and you wouldn’t necessarily be wrong. However, as Leive Weymeis notes,  within the Captivate environment a “Widget” refers specifically to components compatible with Adobe Flash (.swf) while Learning Interactions refer to those compatible with both Flash and HTML5. A subtle, but important distinction when you’re developing courses.

Learning Interactions have a number of advantages, including improving engagement through the organized presentation of content and increased opportunities for user interactivity. Another advantage is that you don’t have to create them, as there are a number of Learning Interactions in Captivate ranging from a simple Table to games, such as Jeopardy and Who Wants to be a Millionaire.

While Captivate’s Learning Interactions provide great features and functions, you could find yourself in a situation where you don’t need all the bells and whistles or want greater control over slide layout and content. Learning Objects require that you cover the entire slide, and while some configuration and use of alternative themes is available, the basic slide layout is standardized.

Recently, I found myself in a situation where I wanted some of the functionality that Learning Interactions provide, but couldn’t find a Learning Interaction that was consistent with my overall graphic design concept. After giving it some thought, I decided to create my own, and while they don’t contain all the functions of the onboard Captivate Learning Interactions, they worked for me. JavaScript is a personal preference for me, and you could likely create something similar with Captivate’s Shared Actions.

This article presents three simple interactions created with Captivate 2019 and JavaScript:  A Tabs interaction, a Timeline interaction and a Process interaction. The code is set up in such a way that all three interactions used the same JavaScript function, provided a structured naming scheme was used for a relatively common set of multi-state objects.

If you’re familiar with JavaScript and multi-state objects, you can jump to the JavaScript code later in the post. I’ve included comments that explain how it works. If you’d like more detail on the reasoning behind the code, I’ve included additional detail and pictures in the following sections.

Component Objects: Multi-State Rectangles and Circles

The fundamental components of the interactions in this article are multi-state rectangles and circles, with one dedicated object each for titles, text and pictures. Each multi-state object was a container of sorts for all the content of its type. In the figure below, the highlighted rectangle (ttp2_pic) contains a series of states each having a picture corresponding to a “Milestone” in the Timeline interaction. For example, “pic_1” corresponded to a picture for “2010” while “pic_9” corresponded to picture for “2014”.

In order to make the JavaScript function work, without resorting to additional scripting, each Learning Interaction was limited to one multi-state object for title, text and pictures. In other words, all content for a single interaction was displayed in the same objects, a “single” display of sorts.

In contrast, there were as many buttons in each interaction as needed, with each button serving as a trigger for a specific state. For example, there were 9 buttons in the Timeline with each corresponding to a specific point in time. When a button was clicked, such as the “2010” button (i.e., ttp2_button_1), it would change the state of the related title, text and picture objects to the state associated with 2010 (i.e., title_1, text_1 and pic_1).

Naming Conventions

In order for the buttons to “call” the appropriate title, text and picture states, a standard naming scheme was used. While the end result was that there was no need to use variables in Captivate, it did mean that care had to be taken in naming each multi-state object and button across the three interactions. The general scheme is shown in the figure below.

In short, the slide was the name of the Learning Interaction, with “ttp” signifying “Tabs, Timeline and Process”. To ensure each interaction had a unique name, a number was added to the end. For example, the Timeline was the second interaction so it was named “ttp2”.

In turn, the Learning Interaction name (e.g., “ttp2”) served as a prefix of sorts for all display objects and buttons on the slide. This ensured they could be uniquely identified by Captivate and the JavaScript function. In addition to the Learning Interaction name prefix, each button received a number at the end to distinguish them from other buttons on the screen.

Invoking JavaScript

Clicking on a button resulted in calling the f_tabTimeProcSing() function, named for interactions “Tab”, “Timeline” and “Process”. The “Sing” text string indicates a single set of display objects (i.e., title, text, picture). The function sends three key arguments:

  • numberButtons: The number of buttons used in the specific interaction (e.g., “9” for the Timeline)
  • charWidgetName: The number of characters in the “prefix” of the button name corresponding to the “widget” (Learning Interaction) name (e.g., “4” for “ttp2”)
  • numbCharStem: The number of characters excluding the number at the end of the button name (e.g., “12” for “ttp2_button_”).

Example: f_tabTimeProcSing(“9”,”4”,”12”);

For the three interactions in this post, much depends on correctly naming the objects, especially the buttons. While a bit tedious, it resulted in only about 12 lines of code and allowed for the creation of a  large number of independent Learning Objects within the same project.

JavaScript Execution

There are three general areas of execution in the JavaScript:

  1. Extracting the active button’s name, its “prefix” (i.e., interaction name) and “suffix” (i.e., ending number)
  2. Change state of all button states to “inactive” using a loop limited by the number of buttons (numberButtons).
  3. Change state of all objects associated with the button “prefix” and “suffix” to “active

Invoking JavaScript Function

//Invoke Function via Button Click

f_tabTimeProcSing(numberButtons,charWidgetName,numbCharStem);

Executing JavaScript Function

/*

Tab, Timeline and Process Widget – Single Set of Display Objects

Parameters: Number of Buttons, Widget Name, Number of Characters Excluding Number at end of Button Name

*/

function f_tabTimeProcSing(numberButtons,charWidgetName,numbCharStem) {

//Extract Active Button Name, Widget Name and State Number

var v_buttonName = this.document.activeElement.getAttribute(“id”);  //Get Id of active button

var v_widgetName = v_buttonName.slice(0,charWidgetName);  //Extract widget name from button

var v_contentNumber = v_buttonName.slice(numbCharStem);  //Slice state number off  button’s end

//Deactivate Previously “active” Button by Setting all Buttons States to “inactive”

//Note: Number of Buttons is Used to Limit the Loop

var i=1;

while (i<=numberButtons){

cp.changeState(v_widgetName+”_button_”+i,”inactive”);

i++;

}

//Set State of Clicked Button to Active

cp.changeState(v_buttonName,”active”);

//Create Target Names of Multi-State Display Objects Using Widget Name and Content Type

//Create State Using State Type and Unique Number at End of Button Name

cp.changeState(v_widgetName+”_title”,”title_”+v_contentNumber);

cp.changeState(v_widgetName+”_pic”,”pic_”+v_contentNumber);

cp.changeState(v_widgetName+”_text”,”text_”+v_contentNumber);

}

Conclusion

While the Learning Interactions created weren’t as sophisticated as the those within Captivate 2019, they did serve the requirements of the project, especially in terms of creating a common graphic design theme across the slides. While some of the additional Captivate features, such as animated process boxes or a responsive design, would have been nice, they weren’t needed.

References

Adobe eLearning | Create learning interactions in Adobe Captivate

Lieve Weymeis | Tips – Learning Interactions

The Captivate Team | Introduction to Drag-and-Drop interactions

Allen Partridge Ph.D. – Adobe eLearning | Smart Learning Interactions Tutorial

Paul Wilson | Adobe Captivate – Make Your eLearning Interactions Experiential

Media

Daniel Jacobs | Sydney Opera House

Jeremy Galliani | Sydney Opera House

Wallpaper Flare | Green and Black Floral Textile, Colorful, Abstract

The post Three Learning Interactions from One JavaScript Function appeared first on eLearning.

Mars Colony 01: A Journey Into JavaScript and Gamification

Launch the Mission: Mars Colony 01 Project: Play

Adobe Captivate 2019 incorporates a rich variety of accessible features and functions that allow developers to produce effective eLearning courses. However, whether the result of client requirements, or your own professional development goals, you may want to extend Captivate’s capabilities through the use of JavaScript or JQuery.

My interest in using JavaScript and JQuery was twofold. First, I wanted to brush up on my JavaScript skills, as I don’t specialize in JavaScript programming. I use JavaScript when a communication or training solution requires it, and sometimes its just not needed.

Second, I wanted to explore how JavaScript and JQuery worked within Captivate 2019. As I said, you may not need to use JavaScript, as Advanced Actions and Shared Actions within Captivate may get the job done quite nicely. However, there might be situations in the future when using JavaScript could work for me.

This showcase presents “Mission: Mars Colony 01”, a Captivate 2019 project created to explore using JavaScript to create simple Gamification functions. As my objectives were mainly professional development, I kept the style more on the “fun” side. Key feature highlights include a:

  1. Learner selected avatar and name
  2. System assigned performance “Level” based on quiz performance
  3. Timed perceptual speed task that includes automatic scoring

The main focus of the project was a perceptual speed task based on an ability test that measures how quickly a person can scan objects and detect similarities and differences. In this case, the user reads a pair of 6 digit numbers and must determine if they are the same or different. This section of the project required the most coding in order create the functions for the countdown timer, the toggle buttons used in the test and the calculation of test performance.

General Strategy

The general scripting strategy was, to the extent possible, to call all JavaScript and JQuery functions within an Advanced Action created for each slide. Back in the day, this was basically how we set up OpenScript within the Toolbook object hierarchy.

Once the Advanced Action is created and assigned to a slide for the “On Enter” event, the Advanced Action could be easily accessed, along with the JavaScript. This made updating and debugging the JavaScript code easier.

The bulk of the JavaScript was contained in the “my_java_code.js” file and linked to the Captivate “index.html” file via an include, as described by TLC Media Design. The .js file was written with Atom, with debugging accomplished with a combination of the Python Tutor and Developer Tools within Google. Note: I backed up my “index.html” file before altering it.

Avatars, Timers and Quizzes

It is worth noting that the coding for the project was based on the strategy or actual code for a number of Adobe Community contributors.

Selecting Avatars: To setup the avatars, avatar name and performance level, I used a method similar to that recommended by Paul Wilson that involved setting the state of a multi-state smart object based on a variable’s value. However, where Paul Wilson used advanced actions, I used a combination of advanced actions and JavaScript.

Countdown Timers: The script for the timers was based on Greg Stager’s 10-Second Timer 3000, with some modifications. First, since it was used to set a time limit for the perceptual speed task, some of the buttons weren’t needed. However, as I found out, the script for the “Cancel” task was essential for ensuring the timer was reset prior to continuing navigation. Second, in addition to the countdown clock, I included a countdown bar.

The Perceptual Speed Task: My original concept was to use radio buttons for the perceptual speed task, but I couldn’t find a solution. I did find a great article by Steven Warwick where he used JavaScript to create a custom true / false quiz using toggle buttons and this code did the trick. It is worth noting that Quiz slides contain very special objects that Captivate uses to communicate with the LMS. Its best to avoid deleting slides or objects, rather use the onboard options to hide objects or hide them within the screen using formatting or other objects.

Wrapping it Up

All in all I enjoyed creating the Mars Colony 01 project. I certainly brushed up on my JavaScript tools and learned a thing or two about JQuery in the process.

Files for Download

Captivate 2019 .cptx document: Mars Colony 01

JavaScript Code: my_java_code

References

TLCMediaDesign | Using External JavaScript libraries in Adobe Captivate

JavaScript.Info | Debugging in Chrome

Paul Wilson | Adobe Captivate – Allow Learners To Select Their Own Avatar

Greg Stager | Countdown Timer

Steven Warwick – Health Decisions | Building a fully custom quiz in Adobe Captivate using JavaScript

Graphics

BiZkettE1 – Freepik | Arabic Night Landscape 

Vectorpocket – Freepik | Set of Cartoon Spaceman Kid

Vectorpocket – Freepik | Set with Cartoon Astronaut Girl

Vectorpocket – Freepik | Cartoon Spaceman

Vectorpocket – Freepik | Spaceman Family with Space Ship

Vectorpouch – Freepik | Cartoon Solar System

NASA- JPL Caltech – MSSS | Telephoto Vista from Ridge in Mars’ Gale Crater

Sound

Mark DiAngelo | Wind Sound 

The post Mars Colony 01: A Journey Into JavaScript and Gamification appeared first on eLearning.

Help a Javascript Noobie!!! JavaScript in Adobe Captivate

I have very little experience with JavaScript and am trying to write some code for an interaction I am developing.

What am I doing wrong???

// JavaScript Document for Tic-tac-toe check for 3 in a row

//Code for Customer Retention returns wrong as wrong answer

//Code Checking for 3 correct in a row

/*

This code is for a tic-tac-toe interaction. The changing of object states is controled within Captivate. This script follows the actions of Assigning the the variable true or false changing the state of the object (box in the tic tac toe game) and jumping back to the game slide. This script is then run in that same action. The “ShowFeedback” is an object with states that reveal a connection line stating they won

*/

if(window.A1Answer==true, window.B1Answer==true, window.C1Answer==true) {

cp.changeState(“ShowFeedback”,”A1_B1_C1″);

}

if else(window.A2Answer==true, window.B2Answer==true, window.C2Answer==true) {

cp.changeState(“ShowFeedback”,”A2_B2_C2″);

}

if else(window.A3Answer==true, window.B3Answer==true, window.C3Answer==true) {

cp.changeState(“ShowFeedback”,”A3_B3_C3″);

}

if else(window.A1Answer==true, window.A2Answer==true, window.A3Answer==true) {

cp.changeState(“ShowFeedback”,”A1_A2_A3″);

}

if else(window.B1Answer==true, window.B2Answer==true, window.B3Answer==true) {

cp.changeState(“ShowFeedback”,”B1_B2_B3″);

}

if else(window.C1Answer==true, window.C2Answer==true, window.C3Answer==true) {

cp.changeState(“ShowFeedback”,”C1_C2_C3″);

}

if else(window.A1Answer==true, window.B2Answer==true, window.C3Answer==true) {

cp.changeState(“ShowFeedback”,”A1_B2_C3″);

}

//Code Checking for 3 wrong in a row

if(window.A1Answer==false, window.B1Answer==false, window.C1Answer==false) {

cp.changeState(“ShowFeedback”,”A1_B1_C1″);

}

if else(window.A2Answer==false, window.B2Answer==false, window.C2Answer==false) {

cp.changeState(“ShowFeedback”,”A2_B2_C2″);

}

if else(window.A3Answer==false, window.B3Answer==false, window.C3Answer==false) {

cp.changeState(“ShowFeedback”,”A3_B3_C3″);

}

if else(window.A1Answer==false, window.A2Answer==false, window.A3Answer==false) {

cp.changeState(“ShowFeedback”,”A1_A2_A3″);

}

if else(window.B1Answer==false, window.B2Answer==false, window.B3Answer==false) {

cp.changeState(“ShowFeedback”,”B1_B2_B3″);

}

if else(window.C1Answer==false, window.C2Answer==false, window.C3Answer==false) {

cp.changeState(“ShowFeedback”,”C1_C2_C3″);

}

if else(window.A1Answer==false, window.B2Answer==false, window.C3Answer==false) {

cp.changeState(“ShowFeedback”,”A1_B2_C3″);

}

if else(window.A3Answer==false, window.B2Answer==false, window.C1Answer==false) {

cp.changeState(“ShowFeedback”,”A3_B2_C1″);

}

//Code Checking for draw game

if else((window.A1Answer && window.B1Answer && window.C1Answer && window.A2Answer && window.B2Answer && window.C2Answer && window.A3Answer && window.B3Answer && window.C3Answer)==false||true) {

cp.changeState(“ShowFeedback”,”draw”);

}

The post Help a Javascript Noobie!!! JavaScript in Adobe Captivate appeared first on eLearning.

Help a Javascript Noobie!!! JavaScript in Adobe Captivate

I have very little experience with JavaScript and am trying to write some code for an interaction I am developing.

What am I doing wrong???

// JavaScript Document for Tic-tac-toe check for 3 in a row

//Code for Customer Retention returns wrong as wrong answer

//Code Checking for 3 correct in a row

/*

This code is for a tic-tac-toe interaction. The changing of object states is controled within Captivate. This script follows the actions of Assigning the the variable true or false changing the state of the object (box in the tic tac toe game) and jumping back to the game slide. This script is then run in that same action. The “ShowFeedback” is an object with states that reveal a connection line stating they won

*/

if(window.A1Answer==true, window.B1Answer==true, window.C1Answer==true) {

cp.changeState(“ShowFeedback”,”A1_B1_C1″);

}

if else(window.A2Answer==true, window.B2Answer==true, window.C2Answer==true) {

cp.changeState(“ShowFeedback”,”A2_B2_C2″);

}

if else(window.A3Answer==true, window.B3Answer==true, window.C3Answer==true) {

cp.changeState(“ShowFeedback”,”A3_B3_C3″);

}

if else(window.A1Answer==true, window.A2Answer==true, window.A3Answer==true) {

cp.changeState(“ShowFeedback”,”A1_A2_A3″);

}

if else(window.B1Answer==true, window.B2Answer==true, window.B3Answer==true) {

cp.changeState(“ShowFeedback”,”B1_B2_B3″);

}

if else(window.C1Answer==true, window.C2Answer==true, window.C3Answer==true) {

cp.changeState(“ShowFeedback”,”C1_C2_C3″);

}

if else(window.A1Answer==true, window.B2Answer==true, window.C3Answer==true) {

cp.changeState(“ShowFeedback”,”A1_B2_C3″);

}

//Code Checking for 3 wrong in a row

if(window.A1Answer==false, window.B1Answer==false, window.C1Answer==false) {

cp.changeState(“ShowFeedback”,”A1_B1_C1″);

}

if else(window.A2Answer==false, window.B2Answer==false, window.C2Answer==false) {

cp.changeState(“ShowFeedback”,”A2_B2_C2″);

}

if else(window.A3Answer==false, window.B3Answer==false, window.C3Answer==false) {

cp.changeState(“ShowFeedback”,”A3_B3_C3″);

}

if else(window.A1Answer==false, window.A2Answer==false, window.A3Answer==false) {

cp.changeState(“ShowFeedback”,”A1_A2_A3″);

}

if else(window.B1Answer==false, window.B2Answer==false, window.B3Answer==false) {

cp.changeState(“ShowFeedback”,”B1_B2_B3″);

}

if else(window.C1Answer==false, window.C2Answer==false, window.C3Answer==false) {

cp.changeState(“ShowFeedback”,”C1_C2_C3″);

}

if else(window.A1Answer==false, window.B2Answer==false, window.C3Answer==false) {

cp.changeState(“ShowFeedback”,”A1_B2_C3″);

}

if else(window.A3Answer==false, window.B2Answer==false, window.C1Answer==false) {

cp.changeState(“ShowFeedback”,”A3_B2_C1″);

}

//Code Checking for draw game

if else((window.A1Answer && window.B1Answer && window.C1Answer && window.A2Answer && window.B2Answer && window.C2Answer && window.A3Answer && window.B3Answer && window.C3Answer)==false||true) {

cp.changeState(“ShowFeedback”,”draw”);

}

The post Help a Javascript Noobie!!! JavaScript in Adobe Captivate appeared first on eLearning.

How to Animate Buttons (and lots of other cool Javascript stuff!)

Preamble

Something that I noticed with Captivate’s built in effects is that you cannot (or at least it is challenging) animate buttons.  In other words, a user clicks on a button, that button animates, and at the end of the animation, it fires off a function or advanced action. There might (or might not be) ways of doing this with invisible buttons, objects, and effects but this is one method.

Please note that if you are very uncomfortable using javascript, or absolutely hate any kind of programming this might not be ideal for you.  This blog is also LONG because I wanted to explain as much as I could at a beginner level.  I hope it will be useful.  In addition, I have posted some helpful links and the .cptx file at the bottom of this blog.

Step 1: Find and modify your cool animation

Head over to http://animista.net/play and find your perfect animation. Copy and then modify the code to your liking.  I modified the ‘wiggle’ animation and put it into the Web Animation API (WAAPI) format.

The animation script I used created was:

var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

All of this script goes into the slide’s on ‘enter slide execute javascript’.

A few notes about this animation script.  There are two variables: ‘options’ and ‘keyframes’.  ‘Keyframes’ basically specifies WHERE the object will move – like x and y position and rotation.  The ‘Options’ variable states HOW the object will move, like timing and repetitions.  If you copy and paste any .css animation code, just make sure it is exactly in the correct format.

 

Step 2: Create Your Buttons

For this example I created 3 buttons. Just basic smart shapes converted into buttons. I turn off ‘continue playing the project’, the clicking noise, and delete the ‘rollover’, and ‘down’ states. Each button will have it’s own function but the same applied animation.

I gave my buttons the ID ‘btn’, ‘btn1’, and ‘btn2’.

Oh – I also created a second slide with a button going back to the first slide.

Step 3: Create Your Buttons Functions

I don’t want to go into too much in detail about javascript functions, but essentially I want each button to ‘do’ something different.  If you really hate javascript you could always create advanced actions on a button and call them through javascript (that’s for another blog).  I’ll run through each function here briefly:

All of these function also go into the

Function 1:

function nextSlide(){
window.cpAPIInterface.next();
}

The function is titled ‘nextSlide’. It uses the captivate API interface to jump to the next slide.

Function 2:

function message(){
alert(“You pressed the Message Button”)
}

The function is titled ‘message’. When the function is called it creates an alert message with the “You pressed the Message Button” text.

Function 3:

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

Ok this one is a bit trickier but it still uses some of Captivate’s built in function.  The function is titled ‘unHide’. When called it toggles the variable ‘t’ (which I’ll mention later) from ‘true’ to ‘false’. In other words, if ‘t’ initially equals ‘true’, the “t =!t” toggles ‘t’ to equal ‘false’.  Then it checks if t == true (the double ‘==’ means ‘is it equal to’. If ‘t’ is true it will “cp.show(‘hidden’) which means it will show an object I have given the ID name  ‘hidden’.  If ‘t’ is not equal to true “else” it will hide the object with the ID ‘hidden’

Step 4: Create the Animation Function

Here is the function that will trigger the animation. This also goes into the ‘enter slide execute javascript’ window.

function playAnim(e,f,g){

pAnim = e.animate(keyframes, options);
pAnim.play()
pAnim.onfinish = function(){
cp.enable(f);
g();
}
}

This one gets really complicated if you are a beginner at functions but I believe in you .  The function is titled ‘playAnim’ and it ‘passes through’ three bits of information ‘e’, ‘f’, and ‘g’.  I declare what those bits of information are when I ‘call’ (ask to start) the function.

pAnim = e.animate(keyframes, options);  This creates a new variable titled pAnim.  It states that whatever bit of information ‘e’ is, it will create an animation (.animate) ‘e’ with the ‘keyframe’ and ‘options’ variables.

pAnim.play() starts the animation

pAnim.onfinish = function(){   This means that when pAnim finishes it’s animation it will call a new function which is titled function and does…

cp.enable(f);  The function enables whatever bit of information ‘f’ is and…

g();   Launch whatever bit of information ‘g’ is.

 

Step 5: Program your buttons

Now you need to execute javascript for each button. But because we did all the work on ‘on enter frame execute javascript’ window, the rest is easy.

For button 1, I put this code in and that’s it.

playAnim(btnc,’btn’,nextSlide)

cp.disable(‘btn’)

playAnim(btnc,’btn’,nextSlide)    This is calling the function playAnim (the one that had e,g, and f)  If you look at that code you can replace ‘e’ with ‘btnc’, f with ‘btn’ and ‘g’ with ‘nextSlide’ to see how it all works.

You might be asking what is ‘btnc’.  If you ever want to animate something in Captivate, just add a ‘c’ to the end of the ID and it should work.  That could be a discussion for next time.

So playAnim(btnc,’btn’,nextSlide)  will essentially animate ‘btnc’, will enable ‘btn’ and will call the function ‘nextSlide’ when the animation ends.

The second line of the code: cp.disable(‘btn’) tells Captivate to disable the button.  It’s annoying if a user can click a button multiple times before the animation ends and it looks bad.  That’s why it nice to disable the button, play the whole animation, and then re-enable the button.

For button 2, the code is this:

playAnim(btn1c,’btn1′,message)

cp.disable(‘btn1’)

 

And button 3, it is this:

playAnim(btn2c,’btn2′,unHide)

cp.disable(‘btn2’)

 

Step 6: Add the ‘t’ Variable

Add the top of the execute on enter frame script add:

t = true;

This will declare the variable ‘t’ as true and will alternate when the toggle function is called.

_____________________________

 

That is all.  I hope that you find some or all of this useful.  All the best,

Jeremy

 

All the Execute on Enter Frame Code (in one place)

t = false
var options = {
iterationStart: 0,
endDelay: 100,
duration: 700,
fill: ‘forwards’,

}

var keyframes = [
{ transform: ‘translateY(0) rotate(0)’},
{transform: ‘translateY(-30px) rotate(-6deg)’},
{transform: ‘translateY(15px) rotate(6deg)’},
{transform: ‘translateY(-15px) rotate(-3.6deg)’},
{transform: ‘translateY(9px) rotate(2.4deg)’},
{transform: ‘translateY(-6px) rotate(-1.2deg)’}
];

function playAnim(e,f,g){

pAnim = e.animate(keyframes, options);
pAnim.play()
pAnim.onfinish = function(){
cp.enable(f);
g();
}
}

function nextSlide(){
window.cpAPIInterface.next();
}
function message(){
alert(“You pressed the Message Button”)
}

function unHide(){
t = !t
if(t ==true){
cp.show(‘hidden’)
}
else
{
cp.hide(‘hidden’)
}
}

 

Useful WAAPI Animation Sites

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts

https://css-tricks.com/css-animations-vs-web-animations-api/

 

The .cptx file

animateBtns