Hi, I am new to Hype and in love with it. I have created my first interactive piece and I find myself needing something I cannot find in the documentation, but I know it can be done. I am not a coder… but I can hack together pieces as needed from other people’s scripts. The person who wrote the code for full-screen here in the forums did a brilliant job and I love his code and use it.
This being said, I guess I need to dive into javascript a bit. Here is what I am trying to do. Any advice would be appreciated
I want to declare variables for a series of buttons on the screen. When you press the buttons, it ads numbers to a couple of variables, one that is a counter for how many you have pressed and one is the value of the button.
Once you hit 4 buttons, you move to a new scene.
On the next scene, you hit 4 buttons again and it ads up their number values. If they match the stored variable, then you move on. If not, you go back.
It seems pretty simple to me, but I do not know how to make Hype branch or make decisions based on Javascript variables or conditions. Heck, for that matter, I don’t know JS, so I have a bit to do here.
But, I do know what I want to accomplish.
Any ideas? Can Hype get to a point where it makes a conditional if/then and branches based on that decision?
In Hype, any logic (math, variables, conditionals, loops, etc.) requires JavaScript. There are sometimes clever ways to do specific tasks with timelines/custom behaviors but even then code is usually more clear.
The basic method to integrate javascript code with Hype is through the Run JavaScript… action you can find in event handlers. In your example above, you would probably have an On Mouse Click handler from the Actions Inspector. You might also want to have a little bit of code on the Scene Inspector’s On Scene Load event handler, as this could reset specific states. Hype has an API that allows manipulation akin to the built-in UI handlers; for example you can write code that would change scenes given your conditions being met. In fact, this code can also be called from contexts outside of the event handlers (head html, script files, etc.) though it doesn’t sound like you’d need this in your case.
That’s the primer; ultimately you’ll need to learn some some basic JavaScript to accomplish what you want. A shortcut may be to have someone write it for you would require very explicitly spec’ing out all the behaviors – but it turns out writing explicit instructions is what coding is all about, and is just in a specific syntax computers can understand. Thus, I like recommending people trying to learn if they have the time .
Thanks for the reply. I am not afraid of setting the variables in JavaScript… should be easy enough. What I am not understanding is how to “set specific states” or decisions in Hype on a if/then decision in javascript. If A = B then navigate HERE. that is basically what I see as the most difficult task, but it just sounds to me like knowing those hooks in the tool to call and where to call them. That is what I am having trouble finding.
The “w3schools” web site is an excellent Javascript resource with (typically) several examples for a given topic - geared towards beginners & intermediates.
Here is a simple Demo of a conditional statement using variables (from values in text fields) that determine which Scene to go to when a button is clicked on: Conditional Demo.hype.zip (39.0 KB)
Thank you so much for the reply and for the demo file. This should be of great help as I am pretty good at learning from examples. I am just now getting time to dig into this and do some testing.
Photics… thank you! I think your examples will be quite helpful too!
This is my second time looking for help in this forum. I saw your conditional demo and was very useful but I couldn’t solve some specific issues with the tasks I am trying to solve in the work I am doing.
I am a beginner using Tumult Hype and Javascript and I am having trouble trying to write a simple script that does the following tasks:
Keep a record of how many times an element receives a click.
Check if every element desired has received more than one click and if so transfer the control to a specific scene (almost always the next one).
The idea is to prevent the user from jumping to the next scene before he tries each and every element on the present scene. It doesn’t matter the order he follos or if he gives more than one click to an element.
The steps I followed:
I managed to keep a record of the clicks that each element receives in the array named “cont”. The first part of the script “camino1” takes the ID of the clicked element, compares it with a list and adds one to the count of the element
The next step is to ask, using a while command, if each element has more than one click. If so, a +1 is added to the counter “sumar”. This step is in the second part of “camino1” script.
Finally, if “sumar” is equal to 7 (which is the number of the desired elements), the scene is changed to “llegaste”. This step is also in the second part of “camino1” script.
The script with the 3 steps won’t run. If I disable the second part of the script putting slashes from lines 37 to 45 to make their content in a comment, the counter of clicks works!
I don’t know if I am forgetting a line or statement that is necessary. I followed the parameters showed in the java section of w3schools but I don’t know if there is a special treatment of javascript language in Tumult Hype.
Can you please help me? I am attaching the hype file.
If you want to store a variable that is global to your hypeWidget but doesn’t interfere with the page you can always use hypeDocument todo so… use a underscore to make sure you know it’s a private variable.
/* first time init of array */
hypeDocument._count = [];
You can the access it in every function because hypeDocument is always passed in. Even better way… you don’t need an additional init function you can also just use this directly in your click handler
if (hypeDocument._count == undefined) {
/* first time init of array */
hypeDocument._count = [];
}
But in your case I would forget the above and rather use an object instead of an array as you can use named keys instead of index numbers.
if (hypeDocument._count == undefined) {
/* first time init of object */
hypeDocument._count = {};//obj
}
Now you can do this
if ( hypeDocument._count[ element.id ] == undefined) {
hypeDocument._count[ element.id ] = 0;
}
hypeDocument._count[ element.id ]++; // a++ is the same as a=a+1 the same
To check if you have a certain number of hits do something like this
var sum = 0;
for (var key in hypeDocument._count) {
if (hypeDocument._count[key] > 0){
sum++;
}
}
if (sum>7){
hypeDocument.showSceneNamed("llegaste", hypeDocument.kSceneTransitionCrossfade, 1.1);
}
Code untested but you get the idea as I am writing this from on the go.
Hope this helps.
Thank you very much for the code and the demo. It fits perfectly the task I was trying to solve with the advantage of being more compact. It took me some time to understand its logic and to see the way javascript gives better solutions. I’m not a skilled programmer, I know only the basics and learning to code is being a pleasure for me.
@jonathan Excellent 'Call-To-Action' for all users aiming to do more with Hype. This recommendation written by Jonathan is worth to be pinned at the top of the Javascript topics list, right?
They have great tutorials, but what I use this site mostly for is their "reference" section. When You get far enough along the curve of a basic understanding of how JavaScript works many times You want to know the details of a specific aspect~topic of Javascript, or CSS, etc. I have found the "w3schools" particularly useful as they have extensive interactive examples of that topic written in style that non-programmers can understand - avoiding "geek speak" except where absolutely necessary.
I’ve been studying and testing the code and example you generously sent me inside my hype exercise and I have a simple question. What I see is that the counter-variable “sum” is the key factor for jumping to the next scene. Nevertheless, using the same tracking script in this next scene needs to reset the counter to zero, in order to work in the same way. I have tried reseting “sum” to zero using another javascript attached to the beginning of the new scene but I see the value prevails. How can I fix this? I suspected this was related to global or local variables and I have tried searching for their uses and conditions. Can you give me an orientation?
Thanks in advance for reading this message
Key is reseting hypeDocument._count to a fresh object with no data so hypeDocument._count = {}. You can do this either just before you change the scene like this …
if (sum>7){
hypeDocument._count = {}; /* <-- this is the new line */
hypeDocument.showSceneNamed("llegaste", hypeDocument.kSceneTransitionCrossfade, 1.1);
}
OR you can create a function that runs on Scene load if you want to contain the code belonging to one scene in the scene itself containing only this …
Thanks a lot for the explanation and the example. It worked perfectly and now I understand it much better this reseting and the use of case instruction!
Best regads
.