Hello — I am new to Hype and JavaScript. Trying to learn both at once.
I’ve had some luck, but have now hit a wall using the ‘else’ statement. (I’m using the latest version of Hype.)
Basically, I want a user to
Perform some action (which changes a variable)
Then perform another action (which plays an animation), and
If action #1 was NOT performed, action #2 will
Play a different animation
I’ve got the ‘if’ part working, but not the else part.
I’ve made an example file. You’re asked to click a green box. Doing so changes a variable from false to true. When you click a button, it looks at the variable. If the variable is true, a green circle animates. If the variable is false, the red circle is supposed to animate.
In other words,
if (variable == true), then animate green circle
else animate red circle
The code looks like this:
function playGreenIfElse(hypeDocument, element, event) {
if (green == true) {
hypeDocument.triggerCustomBehaviorNamed(‘play_circleGreen’);
} else {
hypeDocument.triggerCustomBehaviorNamed(‘play_circleRed’);
}
}
This seems like it should be pretty simple. Is there something I’m missing?
Note: I cannot get else statements to work in Edge Animate either.
I was able to get this working (both in Hype and in my Edge Animate version of this file).
One more question: Is it possible to set a variable as global when I create the variable? Or do I just have to use window.green in every function it appears?
But by writing window.string you are clearly declaring it global.
Where as just omitting var could be a mistake and you have created a global variable.
Also string =“blah”; will look up the scope chain for string and if it finds window.string will redefine window.string with “blah1”, if it does not find it it will create a new global var.
window.string will look only for window.string and not the varstring
So to be safe and to be able to read clearly what is going on in the code use window.varName when you want the var to be global.
You need to look at device performance for this, and how each browser uses memory.
I was always taught that if a mobile device would be used, then having too many variables stored in window.var will slow the device down. Whereas you have greater scope with using the browser. Which is why you have both available, that are for different application types.
So I would consider what you are doing, the end users device, and the number of global variables you are going to have, and the size of them.
I would also consider using sessionStorage or localStorage, and if you are going to have a number of string variables you use browser storage with JSON. This is a much neater way of storing variables, and is global. i.e
//This saves fb user data as json
sessionStorage.setItem('user', JSON.stringify(res));
// This makes the user id global
uid = getStorageItem('user', 'uid');
// This function finds a variable saved in an Array within SessionStorage
function getStorageItem(name, field) {
var obj = JSON.parse(sessionStorage.getItem(name));
//console.log(obj);
return obj[field];
}
For storing information i found it much easier both performance, and coding wise, to use the browser storage, because the browser is then working its best for memory it uses.
Thanks for letting me know about sessionStorage and localStorage. Very interesting, especially because…
My ultimate goal is to use Adobe Captivate (or something similar) as a shell or container for a series of HTML5 interactions which can all read the same set of variables. (Captivate works like a kind of advanced PowerPoint, it’s a series of slides.)
For example, I might make an e-Learning course with 25 slides in Captivate, and each slide is simply loading an HTML5 interaction created in a development tool like Hype. There are a couple key obstacles:
How do I make a button in a Hype animation cause the Captivate presentation to jump to another slide?
How do I make a variable available to all HTML5 animations.
These issues are probably bigger than this thread, but I’m looking into sessionStorage and localStorage as a first step.
BTW, There are numerous advantages to this modular approach to building courses.
We can leverage the special abilities of various tools (like physics in Hype animations).
We can farm out each slide to a different designer or developer.
In the future, we can update the parts individually.
We can use the parts across multiple courses.
If anyone can point me in the right direction for reaching that ultimate goal, I would very much appreciate it. My company has people researching CMS / LMS tools such as Adobe Experience Manager or Xyleme, and we have a full time CMS administrator, but no one has looked into specifically how to string together a series of HTML5 interactions and make them work as one seamless course.
Not sure i can help you as I have never used Captivate, as this software allows importing of HTML5 animations, one would assume there would be an API that allows the HTML5 to talk to Captivate, but I am not sure. I did a quick search and found this, which could explain a way to do it.
If you are putting a Hype Doc into a Captivate, then i would test it by adding this code to the Hype Document on Scene Load
//check if window.cpAPIInterface is available
if(window.cpAPIInterface)
{
//check if window.cpAPIEventEmitter is available
if(window.cpAPIEventEmitter)
{
console.log("Interface is current and correct");
}
}
Start the captivate software and check the console.
If all you are wanting is a single toggle button. Then you do not need all the javascript or behaviours to achieve that.
Also you can use the transform origin offsets to keep the button in place instead of origin left
Here is an example with the above (both origin offsets set to 30% ):