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.
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!
@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?
@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?
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 …
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.
@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.
with use of hye:
create relative timelines that shows the way fo the dragcard to each answercard.
if the dragcard is dropped execute the timeline that matches the drop.
the id of the answercard will help you to identify the correct timeline …
guess you’ve got all you need to know in the existing js-part
Marko, what you have done, which is a common mistake, is copy the code without actually understanding what it’s doing.
You need to have a basic understanding of variables, what a variable is, and how to assign an object, element, or string. In this case element.
In your example you have a variable called ‘home’, but you do not define what ‘home’ is, and so the code would not work. You also did not include jQuery library.
Nobody can do work with code without understanding the very basics. If you unsure what each line of code does, its best to ask for a detailed explanation.
In my spelling example, once a element is close enough to the box, it then triggers a different response to the one when it’s not.
var answerElement = $(element).closest('.HYPE_scene').find('.answer');
var answerBox = document.getElementById($(answerElement).attr('id'));
var question = element.getBoundingClientRect();
var answer = answerBox.getBoundingClientRect();
if(Math.abs(question.left - answer.left) <= 30 && Math.abs(question.top - answer.top ) <= 30) {
// Close enough
element.style.display = 'none';
var symbolInstance = hypeDocument.getSymbolInstanceById('answer_A');
symbolInstance.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
} else {
// Not close enough
console.log('element is NOT close enough');
hypeDocument.startTimelineNamed('returnQ', hypeDocument.kDirectionForward)
}
This is all the code you need at the very basic, using relative timelines to return the question.
Dear MrAddy, apologies for throwing this topic back into discussion after its last reply over 3 years ago! I have used your Spelling App hype project to create my own however i am struggling!
I need to create a drag and drop exercise where names of presidents need to be matched up to boxes under photos.
I have stripped away code that isnt needed and kept the letters of alphabet which i thought i could just rename letter A to Abraham Lincoln, letter B to John F. Kennedy and so on.
However when i start to rename the Letters symbols the click and drag function breaks - your help will be greatly appreciated, thank you
There’s a few things to note - you are using the element.innerHTML to help name a class. This means:
Your class name of the drop zone needs to match the HTML of the drag element. In your document the class name is still home_A. You would need to change it to home_Abraham Lincoln to match, but:
The class name must be valid, and you can’t contain spaces in a class name.
So it may be better to not use a innerHTML approach and identify drag/drop targets either based on a lookup table that will associate innerHTML to class names or another approach.
My name is Fausto Sandoval Cruz, I am from Mexico and also a primary school teacher in a small indigenous community in the state of Oaxaca, I am doing interactive material in indigenous language to support the learning of reading and writing of my students, I just need to do one like the one you did for your girl and her class, I have tried to replicate it in indigenous language but after several days without success I have decided better to go to your generosity and ask, please, if you can make a step by step guide for a three letter word like “WHO” for my part I can send you a very nice interactive book so that your girl can learn to read and write in Spanish if she doesn’t know it or exercise it if she already speaks Spanish. Thank you.
@faustoj.o thanks for resurrecting this thread. I’ve had a day with @MrAddy’s spelling app and I’m loving it, loads of trial and error, but I’ve added some other code from another project and tried to fix the invisible yet usable next button using animation. Andrew, I could really use your assistance in understanding why //Check word is completed validation to start buttonShow timeline isn’t working. I’m missing something obvious. I’ve only modified the second scene Would Many thanks. Andrew’s app.zip (971.4 KB)
