Hello. I am developing a sorting activity for my students. I want them to drag all the words that start with letter A to the “Box A” and all the words that start with letter B to the “Box B”.
PS: I want the words to disappear when they drag them to the correct box.
Thank you for your help!DragandDropWords.hype.zip (13.1 KB)
You can take a look at this example in this forum. Or download your updated document, take a good look at the added javascripts 
DragandDropWords.hype.zip (20.3 KB)
Dear Renée. I highly I appreciate your help.
This is what I exactly need but since I am not familiar with JavaScript coding, is there a way to edit your code if I wanna create another similar activity?
For example, if i wanna change the words with pictures, the squares with boxes, how can i use your updated document to replace them? Can I do this by just editing the “element id” or something easy?
Again, thank you for your help.
Regards,
Yes, you can easily update the script. The script now checks for the innerhtml content of the dragged object (the text you’ve typed in). If you use pictures instead of words, you can use classnames for the draggable pictures, the element id is unique and can be used once for 1 element. So it’s better to use classnames. Although you can use just a letter like A, the className will return ‘HYPE_element A’, just slice off the first 13 characters. DragandDropWords-v3.hype.zip (76.0 KB)
Good morning Renée. Thank you for your help! That’s what I need
I still have a small question if possible; I want the user the automatically move to “Scene 2” after dragging the books to the grey rectangle. Any code that I can be using later for my activities? Move to Scene.hype.zip (2.3 MB)
Thank you.
Regards,
It seems you haven’t used René’s idea but gone with a jQuery draggable option.
Hype has a built in API to handle the majority of it’s actions via code so you can use
hypeDocument.showSceneNamed(sceneName, optionalTransition, optionalDuration)
in order to direct the user to a specific scene.
To do this after your user has dragged all elements to their correct positions you can add it into the “checkForCompletion()” function
function checkForCompletion(){
if (correctDrops === dropElements.length) {
$(message).html("Correct!");
hypeDocument.showSceneNamed('Scene 2', hypeDocument.kSceneTransitionCrossfade, 1.1)
}
}
If you want to do this after a specific element has been dropped then you would have to add to the “handleDrop()” function:
function handleDrop(event, ui) {
//Display the name of the dropped element in the console for testing purposes
//`ui.draggable` refers to the dropped element
console.log(ui.draggable.attr('id'));
//Snap the dragged element to the drop target
$(ui.draggable)
.detach()
.css({top: 0,left: 0})
.appendTo(this);
//Add one to the drop count
correctDrops +=1;
// this is the Hype API code to add to check the draggable and transition
// to scene. If it matches. i.e books = drop0; Scene 2 is whatever
// name you give the scene
if( ui.draggable.attr('id') == "drop0"){
hypeDocument.showSceneNamed('Scene 2', hypeDocument.kSceneTransitionCrossfade, 1.1)
}
//Check to see if all the elements have been dropped into the correct targets
checkForCompletion()
}
Thank you DBear. SInce I am not familiar with JavaScript coding, can you please apply this code to the following file? Move to Scene.hype.zip (2.3 MB). I want the user the automatically move to “Scene 2” after dragging the books to the grey rectangle.
Thank you.
Regards,
Yeah sure, would you like me to cook you dinner also? 
The above code I gave you for checking if a specific element has been dropped would be fine to replace your existing code.
// this is the Hype API code to add to check the draggable and transition
// to scene. If it matches. i.e books = drop0; Scene 2 is whatever
// name you give the scene
if( ui.draggable.attr('id') == "drag0"){
hypeDocument.showSceneNamed('Scene 2', hypeDocument.kSceneTransitionCrossfade, 1.1)
}
I made a little typo in the id to check against but this (if you knew even only a little) should be relatively easy to understand 
Move to Scene 2.hype.zip (2.3 MB)
setting Timeout for Scene transition
HI @DBear @JimScott
what would be the proper Hype JS syntax to inject setTimeout into this function.
The purpose is to prevent the scene transition starting too early, giving the user some time to read 'Your Answers are correct' - innerHTML message.
There was one example of setTimeout function provided by @JimScott in another topic, but I don't know how to tweak it to use in the function mentioned above.
function checkForCompletion(){
if (correctDrops === dropElements.length) {
$(message).html(“Correct!”);
setTimeout(function(){
hypeDocument.showSceneNamed(‘Scene 2’, hypeDocument.kSceneTransitionCrossfade, 1.1)
}, 2000) // 2 seconds
}
}
setTimeout is a built in Javascript function that needs a function as a callback. In this case an anonymous function is used (no name). You could also use
function myFunction (){
// run some code
}
setTimeout(myFunction, 2000);
These drag and drop demos seem to cause the screen to scroll in iOS Safari now when you try to drag the objects with your finger. This must be a recent OS change because I’ve seen this happen with my own drag and drop objects that used to not do this.
Hmm… I don’t think I see an issue on iOS. Do you mind letting me know which exact example you are using and which version of iOS and device you are on?
The one I looked at was “DragandDropWords-v3.hype.zip” on iOS 13.1.1 with my older iPad Air 2. It works fine in desktop browsers and in Reflect on the iPad, but in iOS Safari dragging the objects with my finger causes the screen to move down with the object and snap back when released unless I add some code to prevent it (Such as -> document.addEventListener(‘touchmove’, function(e) { e.preventDefault(); }, { passive: false }); )
Maybe “scroll” isn’t the operative word here.
Thanks - I can reproduce it now. Quite bizarre that it does not affect Hype Reflect, or even the iPhone. We’ll work on a fix for the next release (4.0.4).
