Running a timeline based on input form a text box

Using JavaScript with Hype
1

I created a simple project which is supposed to trigger a different timeline based on the input provided in the text box. If you input "red’ in the text box and click ‘Check answer’ the timeline named ‘correct’ is supposed to run. If the answer is anything different than ‘red’ then the timeline named ‘incorrect’ is supposed to run. However, this code is not working :frowning:

    if (hypeDocument.getElementById('answer').value === "red") {
   hypeDocument.startTimelineNamed('correct', hypeDocument.kDirectionForward);
   } else {
    hypeDocument.startTimelineNamed('incorrect', hypeDocument.kDirectionForward); 
   }

Any help with making this work is greatly appreciated! Thanks!

Test.zip (74.0 KB)

2

you need to get the value of “name”, not of “answer”.
and remove the actions that stop the timelines. This way they’ll never start :slight_smile:

2 Likes
3

Hi Hans

Thanks! The statement now triggers the timeline but even if I put the correct answer the incorrect answer timeline is triggered.

Greg

4

you may like to upload your next attempt :slight_smile:

5

Here it is. Thanks!
Test V2.zip (73.8 KB)

6

you removed the id from the input-element … good attempt :wink: you can not get an element by id if its got none :wink:

2 Likes
7

Thanks Hans for pointing this out. I thought that it was sufficient to add the unique element ID in the Identity Inspector :slight_smile:

I also added a logical operator to compensate for case sensitivity.

Now I’m trying to find a way to disable the input element once an answer has been provided and the check answer button clicked. Maybe the disabled attribute will work? How would I add/remove that attribute tho?

Test V3.zip (93.1 KB)

8

good find :slight_smile:
yes, you can set the disabled attribute.

just run
hypeDocument.getElementById('name').setAttribute('disabled', 'disabled')
on top of the function.

2 Likes
9

Hi Hans

Thanks. I used the .set/removeAttribute :slight_smile:

1 Like