Best way to create interactive text

Hi everyone - 1st post!

I’m creating a website about Shakespeare aimed at GCSE and A-level students. As part of the website, I would like to have interactive excerpts from Shakespeare’s plays where users click key words and out pops a dialog box giving a translation or further information.

I’ve created a simple animation of the box popping out, and am using invisible boxes with transparency set to 100% hovering over the key words that will trigger the animation to run.

I tried setting up different timelines for each word, but when I change the written content of the box in the different timeline sections, this then changes the writing of all the other timelines.

Can anyone help? And is there a better way of doing this more generally?

1 Like

Did you want an audio file, or the speech synthesis which is available on Chrome and Safari ?

Either way i would use Javascript if there are more than 5 words, so when the click event happens, the word sets a small script running.

Do you have an example file you can upload ?

I would also check this out: Javascript Audio not working

I think a better way is to use different timelines for each text box that you need to open up. Were you animating the innerhtml of elements?

Wow! Thank you for your kind replies - I wasn’t expecting anything so quickly!

MrAddy - I’m still very much a novice at both website design and Hype, so please accept my apologies for my inevitable ignorance! I have uploaded the first draft of my file with just a couple of the words highlighted from the speech I’m experimenting on. I would like eventually to record someone performing the lines and have the option to play this back if they wanted to. I’m trying to learn Javascript but have to admit being a bit bewildered by it all. Unfortunately I’m a dumb English teacher and my brain doesn’t like being forced to think this logically!

Daniel - Thank you for your ideas. I was hoping to do what you suggested with different timelines for each text box (see the file attached), but for some reason when I changed the content for one text box on one timeline it changed the content on the other.

As you can see, I’m working on the prologue of ‘Romeo and Juliet’ and have highlighted the words ‘household’ and ‘dignity’ from the first line. I have one timeline called ‘household’ and another, surprise surprise, called ‘dignity’. I initially updated the textbox that appears when ‘household’ is pressed, and then did the same for the ‘dignity’ timeline. However, now the ‘household’ textbox shows the same content as the ‘dignity’ one. What am I doing wrong? Also, could you explain what you meant by animating the innerhtml of elements?

Thanks again for all your help. I appreciate your patience with me!

interactive-prologue.hype.zip (53.0 KB)

I’m such an idiot! Just worked it out now! I’ve attached the new file for anyone who is trying to do a similar thing to me and having problems. Although I doubt very much anyone on these forums will have such an embarrassingly basic knowledge of Hype and HTML as I do… :smile:

interactive-prologue.hype.zip (44.1 KB)

Try this:

interactive-prologue.hype.zip (117.7 KB)

All you need to do is this. Create a window over the word you want a definition, and name it the same as the word, under “Unique Element ID” like I have below for this test:

Then create the timeline, and again, call it the same name as the window element:

When you create the window for the definition, make sure you use the window element name again, for the text box, and follow it with this “_text”, like this:

Then, on the window element, over the word you want defined etc, you put an “On Click Event”, like this:

This is the script, but you will not need to change it, as it uses the window elements ID to do all the work:

//Start the correct Timeline for the word, so the definition box scrolls in.
hypeDocument.startTimelineNamed(element.id, hypeDocument.kDirectionForward);

//Create new Speech API 	
var u = new SpeechSynthesisUtterance();

// Set Voice
var voices = window.speechSynthesis.getVoices();
 u.voice = voices.filter(function(voice) { return voice.name == 'Karen'; })[0];
 
// Get the words from the current showing definition.
 u.text = $('#'+element.id+'_text').text();
 u.lang = 'en-UK';
 u.rate = 0.7;

// Read it out.
 speechSynthesis.speak(u);	     

Do this for each word, and then thats it :smile:

1 Like

MrAddy - that’s wonderful! Thank you! I am currently a teacher for a hospital school, and so this is an excellent feature for students with visual impairments. Can I ask, would it be possible to add controls so the user can switch the speech on and off?

Thanks again for this - I’m going to have a play around with it this afternoon! :smile:

Here I have added controls. Remember as this is all on one page, you cannot duplicate element ID’s, so you would need to be handy with perhaps another time line opening and closing the controls when a definition is played.

interactive-prologue-2.hype.zip (133.4 KB)

That is stunning. Thank you so much!

It’s made me realise just how much more I need to know. Thank you again - I really appreciate the time you have taken to put this together.

More than welcome :smile:

Here are 2 timeline actions to keep the dialogues from overlapping
interactive-prologue.hype 2.zip (58.0 KB)

1 Like

Thanks Nick - this is a fantastic community. It has really inspired me to learn more about Hype and web programming more generally. Its difficult knowing where to start though. The javascript and jquery additions that MrAddy put in were amazing, but also quite confusing for me to try and follow. I couldn’t, for example, hope to replicate something like this for myself. Is YouTube a good place to start learning? I appreciate that with anything on YouTube content will be variable. You have all obviously put in the hours and know your stuff - is there anything you would recommend?

I think it depends on what area you want to look at. Javascript is fantastic, for browser side functionality, but the range is huge.

The whole Speech API is new, and really still in its infancy, so has a long way to go. So learning that would be much harder than, say, a click event, or something dynamic. But Hype does much of this dynamic stuff for you using timelines.

youTube is a great place to start, but search for a pacific function in mind. Or even better google it. Many blogs out there that will help. On here, if you have code you do not understand, just ask and I am sure it will be explained step by step with perhaps greater detail :smile:

1 Like

Yes - of course. That makes sense - for example I would like to produce some matching games later for the website (eg. matching a character name to the correct quote and so on). Is this something that might be produced in Hype do you think? Or would I need some Javascript thrown in too?

Take a look at this spelling app I did for me lil girl and her class:

Spelling App.hype.zip (920.7 KB)

Using drag and drop, you have to match the letters in order to make the word :smile:

6 Likes

That’s fantastic - really impressive work. I definitely need to get to grips with Javascript and jQuery - I notice that you’ve added your own file in with the resources. I’ll bet your daughter and her class loved it!

It was certainly fun, and she can spell them all without the app. Was designed for car journeys only really, something for them to do while in traffic :smile:

Thanks very much for sharing your resources - its very kind. I’m going to try and get my first webpage together now. I’ll post the first version back up here when its ready. I’d really appreciate any thoughts you might have on it.

Thanks again for all your help! :smile:

The best place to learn Hype so far has been on the Forums.
We have lots of folks willing to share and help out.
I have always approached my software education by just jumping in on a project and trial and error until I get stuck and then I start asking for guidance.
And I always save a backup of what works before I break it :wink:

For instance with Hype Pro during the beta I just did a small project every day focused on one part of the element inspector.
I would make an animation that used buttons for example and then added physics, filters etc etc. Some of the documents would not make sense to anyone but I learned a lot from each experience.

When I teach applications such as Hype I always have my students work on personal projects that mean something to them. A book about their family, a music playlist etc. And then we apply the technology to their project. That seems to cement all the new technology into their long term memory so they can apply it later on in their daily workload.

Feel free to contact me anytime and I will do my best to share a link or a tip if I have it.

4 Likes

Hi Nick - yes that makes good sense. It sounds like we are quite similar - trying to work things out as you go along. Its both a frustrating and rewarding process!

I’ve got a couple of Hype elements ready now that I am going to try and incorporate into my first webpage - another first step! I have a nav bar and the interactive prologue. Fingers crossed - I may well be back on here in a couple of hours asking for some more help!

1 Like