I’m reasonably familiar with Hype, but Javascript has got me beat. Here’s what I want to do:
Set an action on a graphic (actually a button) so that when clicked, the button changes to a different state - using different artwork.
I then want to be able to click another button that will evaluate the state of the 6 main buttons, reporting whether or not the correct ones have been clicked. If they have, I want to go to one scene, if they haven’t, I want to reset and restart the current scene.
Does anyone have the patience to tell me what to do?
The main thing I need to do is for a script to monitor the state of six buttons, determining if they have or have not been pressed. I don’t think I can do this with custom behaviours, can I?
the simplest approach is to assign an id or class to every button and on touchstart or click start a script that defines a global var for it as clicked (true). results in:
//assign any class to some buttons we will get this class here:
var thisClass = element.classList.item(1);
//check if var exists
if(typeof myGlobal === 'undefined')
{
//create it if not
myGlobal = {}
}
//the checkbutton id expected of class 'check'
if(thisClass === 'check')
{
//get all keys and join them to a string
var allKeys = Object.keys(myGlobal).join(', ');
//write the result in a div with class 'result'
document.getElementsByClassName('result')[0].innerHTML = allKeys;
//reset the global
myGlobal = {};
}else{
//reset the result
document.getElementsByClassName('result')[0].innerHTML = '';
//create a property for the clicked button
myGlobal[thisClass] = true;
}
assign this script to every button onClick or touchStart
I am not clear from your description about evaluating the states of the buttons. Do all the buttons need to be clicked and then an evaluation is made - or as soon as one wrong button is clicked the scene should reset itself? Does this data need to be retained~used for purposes other than triggering a scene reset or change?
If it is the latter option (“one wrong button”), and the data does not need to be retained - then I think it might be possible to craft a simple non-javascript solution using timelines.
@h_classen: I keep learning new things from your posts (“Object.keys” in this case) - Thank You!
JimScott: It’s the former. The user can press any number of the six buttons, and only if the correct three are pressed does Hype go to the next scene; otherwise, it clears the pressed buttons and the user starts again. It’s for a game I’m devising.
Well, I couldn’t resist. If Hans solution works well for You excellent… in any event here is another approach - mainly timeline based - but I did need a wee bit of JavaScript.
Assumption in this Demo: If there are only three correct answers there is no reason to wait for a fourth button click, as that would automatically doom the player with at least one wrong answer. You could allow for more buttons clicked but it is not the case here; after the third button is clicked an evaluation is made. Nor have I bothered to prevent the same button from being clicked twice (though easy enough to do).
Two timelines:
One tracks the total number of button clicks (“Btn Total”) - in this Demo (3) clicks is the magic number.
One tracks the total number of right answers (“Correct Answer”).
Each time a button is clicked the “Btn Total” timeline advances. Each time a “correct answer” button is clicked the (you guessed it) “Correct Answer” timeline advances. Three correct answers will advance the “Correct Answer” timeline to 1 second.
After a third button has been clicked, an action on the “Btn Total” timeline runs triggering a JavaScript “if… else” function that checks to see if the “Correct Answer” timeline is at 1 second ( = three “correct answer” clicks). If it is 1 second then we go to Scene 2 otherwise back to a reset Scene 1.
I think I have a similar problem with Steve. I 've tried to copy your code in my project and play a timeline when the 6 green buttons are clicked but with no luck. I 'm attaching the file. As you can see from my efforts, I don’t know javascript but I still try! If you believe that you could help me with no big effort, I would appreciate it.
your document is throwing a bunch of javacsript-errors, so i did not try anything with it …
But it short run sthg like this on click/touchstart of a correct button
//common class is 'check':
var thisClass = element.classList.item(1);
//check if global obj exists
if(typeof myGlobal === 'undefined') myGlobal = {};
if(thisClass === 'check')
//the advantage of storing in a object instead of array is that multiple clicks on the same element are not counted ...
myGlobal[element.id] = true;
if(Object.keys(myGlobal).length === 6)hypeDocument.startTimelineNamed('bravo', hypeDocument.kDirectionForward);
Thank you very much! My project is about an app for iPad, for learning Greeks in Kids of 5-7 years old.
It’s about the presentation of my postgraduate work for my Diploma in the Hellenic Open University.
As I don’t know coding and you helped me (not only this time, but I 've used another code of you on the blog about drag & drop in a specified position), I wonder if you are interested to be credited in my presentation as a person that helped me work it out.
When the app is ready, I 'll send you a demo to see and tell me if you are interested in my proposition.
I used the code you sent me on the next scenes too, but only the first time works well. When it jumps to the next scene and after clicking the correct buttons, it doesn’t play the “bravo” timeline. I’ve tried to preview just the scene with the problem but it’s working well. The problem appears again on the next scene. Can you figure out where is the problem?
I’m attaching the file.
if you wanna reuse those lines on different scenes you’ll have to reset the var storing the results …
//common class is 'check':
var thisClass = element.classList.item(1);
//check if global obj exists
if(typeof myGlobal === 'undefined') myGlobal = {};
if(thisClass === 'check'){
//the advantage of storing in a object instead of array is that multiple clicks on the same element are not counted ...
myGlobal[element.id] = true;
if(Object.keys(myGlobal).length === 6){
hypeDocument.startTimelineNamed('bravo', hypeDocument.kDirectionForward);
myGlobal = {};
}
}
no need to mention anywhere …
