Checking that Multiple Drops Have Completed

[votp]

My first post - please bear with me: I’m a writer, not a coder (yet!) I’ve read documentation forums for Hype, jQuery, JavaScript, looked at about 10 other Hype projects, and checked 7 books on JavaScript/jquery - and can’t find answers. If there’s some reference I’m missing, could you please direct me to it? I’ve probably spent 20 hours searching for answers …

Background: I’ve written my first coded hype project, aimed at both an iBook widget and web use;

1. I added jquery ui and touch punch to my file (the widget with touch punch works in an IBA book on iPad but crashes iBooks for Yosemite - not my main concern, but any advice would be appreciated);

2. I created 6 draggable images (jpgs) using

   $("#angry").draggable({ revert: “invalid”, zIndex: 1 });

3. I created 6 droppable rectangles using Hype’s drawing tool and

$("#boxAngry").droppable({ accept: "#angry", zIndex: 2, drop: function() { hypeDocument.playTimelineNamed("angry"); } });
[In the timeline, the droppable rectangle changes color and the border grows]. This all works as designed. Each droppable signals success.

Problem: Now I want to let the player know that the game is over and s/he’s won by shifting to another scene. To know when to trigger this, it is necessary to determine if all of the draggables have reached their droppable. I can imagine several ways to do this:

• I assume there’s some way to check if the drop has occurred for each droppable;

• I imagine that it’s possible to check for one of the changes implemented by the drop: function() timeline being completed in all cases.

I decided to try the second, but immediately ran into a problem. The color of the main body of the rectangle is called “fill style” in Hype, but background is called “background-color” in CSS - so first big question: how do I know how to refer to various properties of elements when using Hype?

I tried wording like:

if("boxAfraid").fillStyle == "#efa17b" && ...){
hypeDocument.showSceneNamed(Win);
}

and a similar construction using

if("boxAfraid").style.background-color == ...

but neither works. Question 2: How is this properly done (or should I be checking for completion in some other way?)?

Question 3: When the code - whatever it is - is added, where does it go? Is it part of

function dragAndDrop(hypeDocument, element, event) (

or

$(document).ready(function(){

or is it something new?

Question 4: If there’s something else I haven’t asked about properly setting up a multiple drag/drop game with a change to the droppable in each case and a final scene change to indicate winning, could you please let me know what I’ve failed to take into account?

Question 5: I’d like to get the draggable to snap to the appropriate droppable, but the documentation for snap suggests that draggables can only snap to other draggables (e.g., for a puzzle), but in general, the documentation for jQuery UI is so curt that I have trouble interpreting it, so I may have misunderstood. Any advice, would be most welcome.

Thanks very much.

[strmiska]

this is a lot - could you load an example?

[votp]

Full example of working code: (sorry - I was trying to be somewhat succinct (!). Thanks in advance.

function dragAndDrop(hypeDocument, element, event) (

$(document).ready(function(){

$("#angry").draggable({ revert: "invalid", zIndex: 1 });
$("#afraid").draggable({ revert: "invalid", zIndex: 1 });
$("#annoyed").draggable({ revert: "invalid", zIndex: 1 });
$("#confused").draggable({ revert: "invalid", zIndex: 1 });
$("#happy").draggable({ revert: "invalid", zIndex: 1 });
$("#sad").draggable({ revert: "invalid", zIndex: 1 });

$("#boxAngry").droppable({
    accept: "#angry", zIndex: 2,
    drop: function() {
          hypeDocument.playTimelineNamed("angry");   
    }
    }); 
    $("#boxAfraid").droppable({
    accept: "#afraid", zIndex: 2,
    drop: function() {
          hypeDocument.playTimelineNamed("afraid");   
    }
    }); 
$("#boxAnnoyed").droppable({
    accept: "#annoyed", zIndex: 2,
    drop: function() {
          hypeDocument.playTimelineNamed("annoyed");   
    }
    }); 
$("#boxConfused").droppable({
    accept: "#confused", zIndex: 2,
    drop: function() {
          hypeDocument.playTimelineNamed("confused");   
    }
    }); 
$("#boxHappy").droppable({
    accept: "#happy", zIndex: 2,
    drop: function() {
          hypeDocument.playTimelineNamed("happy");   
    }
    }); 
$("#boxSad").droppable({
    accept: "#sad", zIndex: 2,
    drop: function() {
          hypeDocument.playTimelineNamed("sad");   
    }
    }); 

});

}

Sorry - I can’t get this to all be formatted as one block of code …

[strmiska]

just create a new function and put:

    $("#angry").draggable({ revert: "invalid", zIndex: 1 });
   $("#boxAngry").droppable({
accept: "#angry", zIndex: 2,
drop: function() {
      hypeDocument.playTimelineNamed("angry");   
}
}); 

and so on.
remove (don´t need this)

$(document).ready(function(){

then in hype choose this function on sceneLoad

[kerguelen]

Hi strmiska,
I’m really interested in this. Could you post a Hype document that put this in practice ? thanks !

[strmiska]

here´s a drag and drop example to change styles.
drag_change_style.hype.zip (113.9 KB)

[votp]

Hi strmiska,

I very much appreciate the effort, but perhaps I am too new at this to see how it answers my questions. You have implemented one box being dragged with different results depending on the droppable. I can understand this, but not how it helps what I am trying to do.

My game has 6 pictures that have to be dragged to 6 boxes - each picture matches 1 box.

They can be dragged in any order.

After each one is dropped, the box changes color.

So far so good.

Now, how do I determine when all the items have been dragged and dropped? I want to use the color change, but I don’t know how. Perhaps there is a better way. I would appreciate some tips.

Thanks!

[kerguelen]

Ho ! That is really interesting.
Now, I’ve to dig into the code to understand how it works
Thanks btw !

[h_classen (Hans-Gerd Claßen)]

Hi vopt,

may be this one may be of any help …
drag the pictures to there right place …
from left to right, from bottom to top

they’ll swap on dropped …

dragDropGame.hype.zip (869.7 KB)

[votp]

Thank you, h_classen! I see that in the script checkFinish() you are doing the kind of thing I need to do.

I don’t yet understand everything you did, but I’ll work at it.

Can you say how you knew how to do this or where you got the code from?

[h_classen (Hans-Gerd Claßen)]

Nothing is better documented in the web then html, css, and javascript …
One first entrypoint for a basic understanding often is www.w3schools.com. like there approach

[markus (Markus Bjerre)]

Awesome game you’ve done h_classen! Any idea on how to lock the div’s after you’ve “hit” the correct answer?

[h_classen (Hans-Gerd Claßen)]

well, within ths APi you’ve got two methods: destroy and disable

[markus (Markus Bjerre)]

Thanks for your reply! Well that’s cool Will take a look!

[Olof (Olof Pock)]

Hi Hans,

the swap on drop function (revert) is very useful. Any idea how the prevent the swapping of both pictures in that case the right picture is in place. The doubling effect is irritating for some people and it would be useful to prevent to drop in the picture two times.

Cheers Olof

    $( '#' + currContainer).draggable({//ui
		revert: true,
		revertDuration: 500,
		
		start: function(event, ui) {//start
		      		this.parentNode.style.zIndex = 999
		window.dragStoppedId = this.id ;
						},//start
		
		stop: function(event, ui) {//stop
			this.parentNode.style.zIndex = 1;
		},//stop

[h_classen (Hans-Gerd Claßen)]

Hi Olof,

if i get you right you want to disable drag- and/or drop-functionality when the right picture is in place.

there’s a simple method for this:

$( ".selector" ).droppable( "disable" );

same for

$( ".selector" ).draggable( "disable" );