More than welcome 
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
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 
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
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!
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 
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
OK - knew I’d be back!
@Mr Addy - in the example files you sent to me, there is a ‘Retina @2x’ underneath each graphic file. I assume this is for upscaling to Retina resolution displays? Could you explain how you added this to each graphic, and how it works? (Do I need, for example, two copies of each graphic with one at x2 resolution?)
EDIT - sorry - I’ve just seen that my images have this added automatically as well? How does it work? I’ve been dutifully exporting double copies of all my web images. Is this not needed?
Yeah, Hype does it for you
2 Likes
@MrAddy I am trying to build a quiz where someone could drag multiple text boxes to a column and find out the correct answer. The outline of the text box would be colored green for correct and red for incorrect. Can anyone help I have no programming experience and would like to learn how to build this type of interaction? The quiz would be a widget for a book that I am putting together.
I have the files from the spelling app. How do I get one symbol to recognize its correct location and give the user feedback that it is the correct answer?
hi,
you can’t do this without scripting. Give yourself a kick and start your project -> then ask questions to specific problems you have. I’m sure you’ll find lot of help here! But don’t expect someone to offer a ready file for you …
I’ve also posted a drag and drop example here: Checking that Multiple Drops Have Completed
1 Like
In the spelling app, you would look at the function ‘letterDropped’ and the answer would need to be a class. If you look through the spelling app, you can see each letter of the word has its own class name, so when the letter is dragged it know what class name it’s looking for. In your case, you would want to call the class ‘answer’, and the draggable element ‘questions’ and replace the names from my code to those.
I’ll try and do a mock up a little later, see if it helps, but as above, to learn is to do, so ill do
@MrAddy @h_classen Thank you for your feedback. I didn’t mean to imply that I wanted anyone to do the work for me or to script it for me. I can build the text box and drag the text box but the problem is I don’t know the string of code or the Javascript function to make one text box recognize that where it is dragged to is the correct answer. I can build the rest just needed the staging point for the Javascript. Thanks again for all of your help.
@MrAddy @h_classen Here is what I have been able to do thus far. The background is not changing. Roles test.hype.zip (36.4 KB)
checkWhenDropped.hype.zip (59.8 KB)
tried to simplify it.
drag the questionelement to an answer, then drop it.
if the answer is right the answerelement will get green …
check the js and the answerelements class to see how it works.
hope this’ll work for you to get further
@h_classen This is great! How do I change it so that when the box is dropped it stays in the place because I want the user to see all of their answers.