in a rectangle figure I embedded the following code, which I made based on the documentation on the site http://tumult.com/hype/documentation/2.0/javascript/ where all the code put in capital letters so I can not understand what it should look in reality, in this code I need the following action, so that if the submit button is pressed the timeline starts to play, could you help to edit this code? :
<script>
function myFunction () {
HYPEDOCUMENT.STARTTIMELINENAMED('Main Timeline', Forward);
}
</script>
<form onsubmit="myFunction()">
Enter word: <input type="text">
<input type="submit">
</form>""
color = hypeDocument.getElementById('field').value;
color = color.toLowerCase();
console.log(color);
hypeDocument.showSceneNamed("" + color + "", hypeDocument.kSceneTransitionCrossfade, 1.1);
When the “Go” button is pressed, it checks the value of the text field. If it matches the name of a scene, that corresponding scene is loaded. I used the “.toLowerCase” method so that it’s not so particular about the typing… there are scenes for “black”, “red”, “green” and “blue”.
WARNING – This is not a sanitized input… https://xkcd.com/327/ …Using fields without sanitizing the data could be very dangerous. This is just a quick example of how to change scenes based on input data.
If it’s a standalone page, where the input field is like a password code to load a game level locally in the Hype project, then maybe it’s not such a high risk. If this is being used to write to a database, the input value should be sanitized. Posting data to a server that is not cleaned could be very VERY bad!
Thank you so much for the link to the new documentation, if I understood you correctly I placed the code as in the screenshot, but the code won’t work, I probably do something wrong (probable this pause the Main Timeline on load, which I want to trigger with the function, but it starts every time the page is loaded while I need it to be started only on submit, I am sorry for such questions, but I am almost completely new to JS as well as to Hype.
• Add an action under your Pause Timeline… action by clicking the + sign next to “On Scene Load”
• Choose “Run Javascript…” --> “New Function” (name this whatever you want.
• inside the function write the code Daniel gave
function myFunction() {
hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
}
• now wherever you put your form you can call this function with the onsubmit property. Again as Daniel has said above
<form onsubmit="myFunction()">
Enter word: <input type="text">
<input type="submit">
</form>
If you share your document we could fix this in no time for you.
intupForm.hype.zip (15.5 KB)
There is the file.
You see whenever I load the page the timeline starts animating, while I need it to be animated only after pressing the submit button. So, I am confused as I said I am very new to JS and Hype…
@Daniel
This returns a brief flash of an error before reloading “Can’t find variable myFunction” (at least in Safari).
@dimitriyvolchenko
Here is a edited version of your document. I’m using a built in Hype button to simulate the submit button. Also in anticipation of you wanting to do something with the input text I have added a “how to” get the text and use it.
var inputText = hypeDocument.getElementById('textBox'); // THIS IS THE INPUT TEXT ELEMENT
var message = hypeDocument.getElementById('messageBox'); // THIS IS THE <span> WHERE THE TEXT IS OUTPUTTED
message.innerHTML = inputText.value; // ACTION TO OUTPUT THE TEXT
hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward); // YOUR ORIGINAL ACTION FOR THE TIMELINE TO FIRE
Thanks, I got loaded with work and didn’t have time to get through the project, but thank you very much for the time spent, I hope I will be able to follow your steps!
