Rewards/points for dragging an element into a particular position

1

Hi Hype community,

I’m interested in developing a game (or learning activity) in which the user is rewarded (e.g receives points) when s/he drags an element into a particular position.

I imagine a script that has the following logic,

  • if “elementX” is at [plot points], then scoreDisplay + 1"

Does anyone khow this can be done? @darren_pearson, do you have any ideas in relation to this?

In the meantime, I’ll work on mocking up example Hype document.

Appreciate any help/ideas.

Eric

2

There's a few Drag + Drop examples on the forums you should be able to adopt for this. Here's a great place to start:

And this thread has all you might need to know about counting and displaying scores:

3

:clap:

4

Eric,

I put a simple example here and a more complex example here.

The Hype files are compressed here.

For the first one called DragExample1, I set the “On Drag” action for both the apple icon and the house icon to first “Control Element Position” and to run a function I called checkPosition. The code for check position is shown below. I only did two icons but you could easily add more, jus make sure to define the top and left position for each and give each icon a unique ID.

The second example, DragExample2, has a few more lines of code to check if the icon has already been placed to prevent someone from dropping and dragging an icon multiple times to the same position to increase there score.

Let me know if you have questions.

var documentWidth = 800;
var snapDistance = 10;
var houseLeft = 600;
var houseTop = 400;
var appleLeft = 600;
var appleTop = 170;

if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
	var objectTop = document.getElementById(element.id).getBoundingClientRect().top;
	var objectPadding = (window.innerWidth - documentWidth)/2;
	var objectLeft = document.getElementById(element.id).getBoundingClientRect().left - objectPadding;
	
	if (element.id == "house") {
		var targetLeft = houseLeft;
		var targetTop = houseTop;
	} else if (element.id == "apple") {
		var targetLeft = appleLeft;
		var targetTop = appleTop;
	}
	
	var deltaX = Math.abs(targetLeft - objectLeft);
	var deltaY = Math.abs(targetTop - objectTop);
	var totalOffset = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
	if (totalOffset <= snapDistance) {
		var score = parseInt(document.getElementById("scoreValue").innerHTML);
		document.getElementById("scoreValue").innerHTML = score + 100;
		alert("GOOD JOB");
	}
}
4 Likes
6

Thanks, Darren. This is very very helpful.

Over the next few days, I’ll be working through different implementations.

I’ll share (and ask questions) once I have fleshed things out a bit more.

Cheers,

Eric

7

Thanks @darren_pearson,

Everything has worked liked a charm with the two object (as per your example). I’m trying to add a few more object, and I am wondering if I’m encountering a syntax error.

For each additional item, (a) I defined the targets in the appropriate section of the code, and (b), then, commenced with multiply “else if” structure. Is there something wrong with that syntax?

var documentWidth = 600;
var snapDistance = 10;
var syllableALeft = 240;
var syllableATop = 162;
var syllableBLeft = 418;
var syllableBTop = 162;
var soundWLeft = 226;
var soundWTop = 266;
var soundAWLeft = 303;
var soundAWTop = 266;
var soundTLeft = 404;
var soundTTop = 266;
var soundERLeft = 481;
var soundERTop = 266;

if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
	var objectTop = document.getElementById(element.id).getBoundingClientRect().top;
	var objectPadding = (window.innerWidth - documentWidth)/2;
	var objectLeft = document.getElementById(element.id).getBoundingClientRect().left - objectPadding;
	
	if (element.id == "syllableWA") {
		var targetLeft = syllableALeft;
		var targetTop = syllableATop;
	} else if (element.id == "syllableTER") {
		var targetLeft = syllableBLeft;
		var targetTop = syllableBTop;
	} else if (element.id == "soundWcopy") {
		var targetLeft = soundWLeft;
		var targetTop = soundWTop;
	} else if (element.id == "soundAWcopy") {
		var targetLeft = soundAWLeft;
		var targetTop = soundAWTop;
	} else if (element.id == "soundTcopy") {
		var targetLeft = soundTLeft;
		var targetTop = soundTTop;
	} else if (element.id == "soundERcopy") {
		var targetLeft = soundERLeft;
		var targetTop = soundERTop;	
	}
8

Looks good at first glance. Make sure each element has a unique Element ID like “syllableWA” and remember it’s case sensitive. Email me the Hype file if you are still having problems. Good luck!

9

Ha ha!! I discovered the problem … I forgot to “Run Javascript” on drag for some of the drags.

So … whilst I was trying to find issues with the code, it turns out that I needed to remember to activate the script for each of my draggable items.

All is working. I’ll keep refining and share in due course.

Thanks for the help,

Eric

2 Likes