Best way to create interactive text

The problem is that you are setting the color like this:

home.style.backgroundColor  = '#FD7C7C';

And then checking the color if it is complete like:

if(va.style.backgroundColor == '#FD7C7C') {

Now, one would think this would be correct, but the browser under-the-hood is changing the backgroundColor value to rgb(253, 124, 124) so the check is failing.

The original code used ‘green’ as its value, which browsers apparently decide to preserve.

So the fix would to be to check via other means that is not up to the browser’s interpretation. In fact, the code is already filtering by the ‘used’ class name, so I do not know why this check exists at all (perhaps there is a reason I do not see). You could probably try removing the conditional and test it out to see if it works. I’ve done so here:

Andrew’s app-fixed.hype.zip (971.2 KB)

That being said, I tend to see quite a few other errors; for example immediately after the buttonShow timeline start code, you will get this error:

Error in undefined: TypeError: thumb.startTimelineNamed is not a function. (In 'thumb.startTimelineNamed("Main Timeline", hypeDocument.kDirectionForward)', 'thumb.startTimelineNamed' is undefined)
1 Like

Legend! Thanks so much Jonathan, your explanation and the file sent through for comparison made this learning accessible for me.

1 Like

Hey Fausto (and any interested Spanish language teachers),
I made this more basic version of Andrew’s app for you because I owe you for finding this thread. Key things to remember when duplicating assets: dragable letters need to be at the front of the scene and the scene name needs to match what you’re trying to spell for the voicing button to work. Not knowing which indigenous language you want to make your app for I have added a few Spanish features. Sorry I don’t have more time to teach you.
For Fausto.zip (197.1 KB)

2 Likes

Muchas gracias, aprecio mucho su ayudo

Muchas gracias

No problem Fausto! Happy building :wink: