How do I get 'else' to work?


#1

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

  1. Perform some action (which changes a variable)
  2. Then perform another action (which plays an animation), and
  3. If action #1 was NOT performed, action #2 will
  4. 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’ve attached the Hype file to this topic.

Thank you!

TestIfElse.hype.zip (91.8 KB)


(Mark Hunte) #2

You had 3 issues.

1, the 4th Box to click is linked to the wrong Function.
You need to link it to playGreenIfElse()

2, the green var is not set to be a global var so no other functions knows what it is. This was producing an error.

On any function you have this var write it as window.green

This will make it Global and accessible to other functions.

3, You do not need comparison operator equal to “==”

Just the var name since it is a BOOL.

if (window.green )

Being a BOOL either it is true or false


#3

Amazing! Thank you for the thorough response.

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?


(Andrew) #4

You can do this within Hype by setting the global variable on scene load:

var string = "I am a local string";  

If this is set within a function, the var is only accessible within the function.

string = "I am now a global string";

This means string is now accessible within any scene.

global Vars Example.hype.zip (32.7 KB)


(Mark Hunte) #5

from what I now understand

string = “blah1”;

And

window.string = "blah2";

Are the same in respect of being Global.

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 var string

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.


(Andrew) #6

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.


#7

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:

  1. How do I make a button in a Hype animation cause the Captivate presentation to jump to another slide?
  2. 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.

  1. We can leverage the special abilities of various tools (like physics in Hype animations).
  2. We can farm out each slide to a different designer or developer.
  3. In the future, we can update the parts individually.
  4. 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.


(Andrew) #8

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.


#9

I did a search for “cpAPIInterface” and I found this:
https://helpx.adobe.com/captivate/using/common-js-interface.html

Looks like Adobe has this covered but it’ll take me some time to understand it all.

Thanks for your help!


(Michael) #10

Hi,

Excuse my poor JS skills. I’m trying to do the same with a simple triangle (“twisty”), but something is wrong.

twisty.hype.zip (18.7 KB)


(Michael) #11

Ignore the prev. post. Here is a working copy.twisty.hype.zip (11.4 KB)


#12

Is it working now?

D


(Michael) #13

Yes, but i find it very awkward to do all this for such a simple thing. It whole "if …else"must be built into Hype.twisty_3.hype.zip (10.8 KB)


(Mark Hunte) #14

@nighternet,

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% ):

twisty_4.hype.zip (13.2 KB)

and also see:


(Michael) #15

Of course! I totally forgot about that. Thanks!