Best way to create interactive text

Getting Started
28

@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)

29

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

30

@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.

31

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

32

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.

Roles test_1.hype.zip (110.2 KB)

2 Likes
33

@MrAddy Thank You. I am trying to learn.

34

This thread has become a bit complex – Does anyone want to create a separate thread for this to distill the best examples?

35

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

Navneet_Spelling App.hype.zip (116.2 KB)

36

The issue is the line of code that iterates through the solutions:

$.each($(element).closest('.HYPE_scene').find('.home_' + element.innerHTML+':not(.used)'), function(ind, homes) {

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.

1 Like
37

Thanks so much for your help jonathan! super star!!!

2 Likes
38

MrAdy:

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.

39

@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)

40

If you look at the developer console, you’ll find there is an error:

TypeError: undefined is not a function (near '...hypeDocument.startMutationObserver...')

It looks like you are missing some javascript that was in the other project necessary to run correctly.

I would try:

  1. In the Resources Library, select HypeDragAndDropEnabler.js and uncheck “Include in document <head>”

  2. In the Document Inspector, choose “Edit Head HTML” and add these script tags that were in the other document:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeMutationObserver@1.1/HypeMutationObserver.min.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/HypeDragAndDropEnabler.js?toEnsureLoidingLatestBuilt"></script>

I’m at least able to see the next button now, though I don’t know enough about the document to test further.

1 Like
41

Thanks for taking a look and offering some suggestions Jonathan. I followed your advice but the timeline showButton is still not being triggered. My understanding of Andrew’s code is that if the number of letters in the scene name matches the number of used letters in the scene it should trigger the timeline. Did this timeline work for you on drag-drop word completion? Again, many thanks Jonathan.

42

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
43

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

1 Like
44

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
45

Muchas gracias, aprecio mucho su ayudo

46

Muchas gracias

47

No problem Fausto! Happy building :wink: