Change class based on coordinates and/or hit?

Using JavaScript with Hype
7

Yes.

Hype Demo: DragDropChangeClass_JHSv2.hype.zip (22.7 KB)

Overview
This demo is slightly different in the set-up than my previous version...

There are now two scenes:

Scene 1
There are two elements now to drag on to the target square; and there is only one type of class change - from the original color to the new color (red) when moved on to the target square. When moving the element(s) out of the square they revert to their original color.

Scene 2
Basic scene with a back button to Scene 1.

New function "resetClasses"
Uses "querySelectorAll" to create a list all the elements with the class name "dropped".
A "for loop" then cycles through this "classList" and removes the "dropped" class from the given element.

"setTimeout" is used to control when this class removal happens (in the Demo 2000 milliseconds - 2 seconds). Please see below for an additional note.

This function is triggered by the "On Scene Unload" handler in "Scene 1".

Note
In order to hide the switching of colors when the "dropped" class is removed "setTimeout" is used in the function "resetClasses". This is done so the removal of the "dropped" class (i.e. the color change) is delayed by a set amount of time, and therefore not obvious when using Scene transitions other than "Instant".

So for transitions other than "Instant" make sure the "setTimeout" is longer than the Scene transition time You select for the Scene ("Jump to Scene") in the "Actions" menu. In the Demo the Scene transition is 1.1 seconds; in the function the setTimeout is 2000 milliseconds (2 seconds).
You must use milliseconds in the Javascript.

Please see the bottom lines of the code below showing this time set-up.

function "resetClasses"

setTimeout(function(){ // wait 2 seconds (i.e. 2000 milliseconds) before resetting the class(es)
		var resetClass = document.querySelectorAll(".dropped");
		var i;
		for (i = 0; i < resetClass.length; i++) { 
    	resetClass[i].classList.remove("dropped");
	        }
	}, 2000);
// make sure this time is longer than the scene transition time for transitions other than instant. This time is in milliseconds - so our time here, 2000, is equal to 2 seconds
4 Likes