Play timeline after pressing onsubmit button using Javascript


(Dimitriy) #1

Dear friends,

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>""

#2

The most current version of our documentation can be found here: http://tumult.com/hype/documentation/

To run a defined function onsubmit, you would run this ‘On Scene Load’ to define it first:

function myFunction() {
    hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
}

Then, you would be able to target this function if the following is within the inner HTML of an element within your scene:

<form onsubmit="myFunction()">
 Enter word: <input type="text">
 <input type="submit">
</form>

#3

Hi friend!

I’m confused by your code. It’s all commented out. What’s with the slashes?

Anyway, I’m in a rare mood tonight, so I decided just to create a template…

input-colors.hypetemplate.zip (34.5 KB)

Basically, I used the following code…

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!


Type in quiz , help finishing
(Dimitriy) #4

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.


(Dimitriy) #5

Thank you for the project, Michael, I need some time to understand what you did there but it will be of much help to understand how all it works.


#6

@dimitriyvolchenko

• 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.


(Dimitriy) #7

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…


#8

@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

intupFormvDBear.hype.zip (17.8 KB)


(Dimitriy) #9

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!


(Dimitriy) #10

@DBear
Thank you very much, it works great and I could make a similar project, following your steps,
Thank you vert much for the time spent!