Sorting exercise : Drag and Drop

dragdrop

(Krystèl) #1

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)


Drag and Drop question
(René) #2

You can take a look at this example in this forum. Or download your updated document, take a good look at the added javascripts :slight_smile:
DragandDropWords.hype.zip (20.3 KB)


(Krystèl) #3

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,


(René) #4

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)


(Krystèl) #5

Good morning Renée. Thank you for your help! That’s what I need :slight_smile:

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,


#6

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()
}

(Krystèl) #7

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,


#8

Yeah sure, would you like me to cook you dinner also? :smiley: :smiley:

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 :wink:

Move to Scene 2.hype.zip (2.3 MB)


#9

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.


#10
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);

#11

Great, problem solved, thank you!28 @DBear