Launch a timeline VIA javascript

Hi everybody!
I need some help with a drag and drop project that i’m doing for my a design class.
I’ve been working with hype for a few months, with almost 0 knowledge of javascript or coding, mostly reading threads of this forum.
Using one of the project that i took from the user @MrAddy, i got stuck in the final part when i need to check the task was completed and later launch the timeline via. I leave you the project if someone could help me.

Thanks in advance!

search_DnD.hype.zip (561.1 KB)

I have not look at you initial problem as I do not have time to root through the code and work out what is supposed to happen…??.

May be a good Id to explain a bit more about what is going on in you given code and where you want things triigered.

But one other thing you probably want to do is uncheck ‘Allow text Selection’ in the Action inspector of the Text that is dropped onto.
This will stop someon accidently selecting all the text and seeing the answers…

The end of the function is looking to see which are complete, but it is conditionalizing based on the text color. You aren’t matching that color, so it doesn’t see it as complete. Thus you should change this block of code:

		$.each($(element).closest($('.HYPE_scene')).find('.used'), function(ti, va) {
			if(va.style.color == '#0096FF') {
				ccount++;
			}
		});

to just this:

		$.each($(element).closest($('.HYPE_scene')).find('.used'), function(ti, va) {
			ccount++;
		});

Then, the code that does things when complete is trying to play/pause audio and run a timeline that doesn’t exist. Therefore you should change this code:

		if(ccount === letterCount) {
			var awesome = document.getElementById("bien"); 
			awesome.pause();
			var myAudio = document.getElementById("correcto"); 
			myAudio.play();
			hypeDocument.startTimelineNamed('buttonShow', hypeDocument.kDirectionForward);
			
		}	

To this:

		if(ccount === letterCount) {
			hypeDocument.startTimelineNamed('SHOWBANNER', hypeDocument.kDirectionForward);
			
		}	

That will invoke the SHOWBANNER timeline.

That’s the coding, but note that we can’t really write the whole thing so taking some time to learn JavaScript will help immensely with this project!

2 Likes

Hi there! Thanks a lot both @MarkHunte & @jonathan for given me a hand with this. I think i fix the problem =)
Right now i’m working on find the way to return to the initial place when the answer is wrong. More javascript lessons for me, please haha.

Thanks a lot again!
Fabián

So if you look at the letterDropped() function in Hype, you’ll find this part:

	// Check distance from letter too unused home
		
	if(Math.abs(letterC.left - homeC.left) <= 100 && Math.abs(letterC.top - homeC.top ) <= 100) {

Inside the { bracket is what happens when the word is dropped successfully. You’ll later find this part of the code:

} else {

Which is the block of code called when it is not dropped successfully. Here is where you’ll want to put code that can move the item back to the original place. Luckily because you’re using symbols the positioning is pretty easy since it is relative to the symbol element. So you could basically just replace this part of the code:

		} else {
		
	//console.log('not close');	
		// Not close enough
		 $('#'+homeid).removeClass('used');
		
		var myAudio = document.getElementById("mal"); 
		myAudio.play();
	}

With this:

		} else {
			hypeDocument.setElementProperty(element, 'left', 0, 0.33, 'easeinout');
			hypeDocument.setElementProperty(element, 'top', 0, 0.33, 'easeinout');
		}

This sets the top and left positions of the element to 0,0 and uses a little animation for the snapping.

search_DnD-fixed.hype.zip (538.8 KB)

Thanks @jonathan
Luckily i could adress the problem, but i will take a look to your example. Right now i having problems reseting the javascript If the user returns to a previous finished stage. At the moment if he/she returns, nothing happens. Is there any way to reset the intial positions to zero?

Thanks a lot!

The script currently is setting states on elements that are persisting across scene changes.

There are many ways to structure code to solve this, but given the code that exists you can probably just write an On Scene Load function that runs javascript to resets the states. It would probably just look like:

	$(".letter").css("display", "block");
	$(".used").removeClass("used");

But if you’ve made modifications or add complexity this could change for you, so you’ll have to know what the scripts are doing and undo it.

Thanks a lot @jonathan, I appreciate all your tips and support.

@jonathan or @MarkHunte is there any way to drop the draggable element in two different correct destinations?

Not the way the code is setup. You’d need to entirely rewrite the code for that feature.

Ok, thanks a lot @jonathan. I suppose that would be very hard with this code.

Cheers!