Multiple drop zone quiz

Using JavaScript with Hype
1

I have a image quiz wMultipleDragDropQuiz.hype.zip (395.4 KB)
here you have to drag the answers to the drop zone. I want any answer to be acceptable and upon finishing it to then check if it is right. I’ve searched all over and cannot find anything similar and also can’t figure it out. My alternate would be to enter the answer and then submit which I also can’t seem to function. Any help would be appreciated as I’m not good at code. Looking to take a class this year if anyone has any suggestions of what to take that would be great too. Thanks!

2

There are some solutions searching for "Drag and Drop Quiz" - this one looks pretty similar:

3

I did see this one but it tells you when you are wrong and I don’t want that until all of the boxes are complete and it is submitted. Plus it is super involved when I don’t know code. I seriously went through all of the drag and drop examples on this site.

4

Here is the completed working file if anyone is interested. MultipleDragDropQuiz-fixed-v2.hype.zip (505.6 KB)

7 Likes
5

Very nice, thanks for sharing!

1 Like
6

Thank you very much for your generosity.

If possible, a little help might be appreciated .
I am trying to adapt your work to other sizes.
It does not work directly when you simply add a given size.
I figured that it might be an ID conflict but it is probably more related to my false reasoning somewhere!
Anyhow, I just decided to duplicate your functions, rename them and change variable names and ID as well.
For the desktop size, for example, I used the new HitTestDesktop(), onSubmitDesktop(), onLoadDesktop() functions. Unfortunately it is not working as you can check in the attached file.
What would be then your recommendations to make it work?

Thanking you in advance.

MultipleDragDropQuiz-fixed-v2-3sizes.zip (444.4 KB)

7

I agree with your assessment that it is an ID problem. Note that all IDs will need to be different - this includes ones like “drop6” and ones that are in Inner HTML as well. And then there are references in the code to them that will also need to be changed; for example there’s code like $('#'+answers[drop]) that you need to examine to see how it works. This isn’t an easy task since it wasn’t designed for multiple sizes; perhaps it would be simpler to apply some flexible layout to achieve the size you want?

8

Hello Jonathan,

Many thanks for your answer.

Indeed, I used your flexible layout suggestion and it works fine for me.

I grouped everything and used the zoom option combined with the shrink to fit one. Voila!

Have a good day.

Pierre-Y. Plourde

Envoyé de mon iPad

1 Like
9

Great, glad that was an easier route to success!

10

Morning Jonathan,

I just wanted to check one more thing with regard to this topic.
I attached two hype files (ungrouped and grouped) which are modified versions of JWaschow work.
The drag and drop works fine when the elements are ungrouped.
However, in the grouped one, as soon as your select a drag box (green rectangle), the element position shifts several pixels right whenever you start the drop action. It works fine otherwise.
Is this related to the responsive layout settings? Is it possible to make it work like the ungrouped file?

Many thanks.

quiztestdrag.zip (2.0 MB)
quiztestdraggroup.zip (2.0 MB)

11

I like the way you change the text of the Submit button and I’m trying to understand the code behind it. I would like to be able to change the text of a button with a if/else statement but I’m struggling with the code.

Here is what I came up with but this is not working unfortunately:

if ($('#button').text() === 'Submit') {
	$('#button').text('Start Over');
	
} else {
	$('#button').text('Submit');

Appreciate any help with this.

Greg

12

This is related to the Flexible Layout settings. The event['hypeGestureXPosition'] values are based on the position in the window. This worked previously because 0,0 was always your origin, but when you have the shrink to fit setting enabled, it may no longer be the origin of your document and you are offsetting by the wrong amount. You'll need to find a different way (probably looking in the event) to figure out the mouse position relative to the element making sure to account for the fact that it has been scaled. There might be some other properties in the event structure.

13

Does the web developer console show any specific errors?

It would be useful if you could attach a zip of your .hype document -- nothing stands out glancing at the code, but it might have to do with the surrounding context and where it was placed.

14

Wow! This looks and works awesome. Great work and inspiration. Thanks!