I wanted to use a hype example saw on the forum from the drag and drop but I couldn't modify the functions, it doesn't work:
If I remove box B in the fOnLoad function and also remove it from the scene, it doesn't even work with words anymore.
Moreover, i wouldn't want to have buttons with letters A or B in an inner html.
Here I would just like to simplify without having buttons with words but just images (on my exemples: 3 pictures but it could be more) that I would put in the same way in a single box (not 2). While maintaining the effect of slight magnification and disappearance when the images are added to box A.
Then a description text of the image (which I would have defined before) which would be placed in the box would be written in a text block on the side.
If we put 2 images in the box, there would be 2 description texts. And so on for each image placed in the unique box. If one image has not been placed in the box, the corresponding text would not be displayed
How can I do this? In advance, thank you for very much for your answer !!!
Thank you very much but I found the example I posted easier to adapt in my case.
However I am completely wrong in the condition of the function fDrag() => I tried to replace for example:
&& element.innerHTML.charAt(0) == 'A'
by
&& hypeDocument.getElementById() == "rose"
So I thought I could give all the Id that could go into box A.
But I certainly didn’t use the right code to call the id of an image. Do you know what I could replace
&& hypeDocument.getElementById() == "rose"
to make it work?
In advance thank you!
You can use the built-in Matter engine to do intersection detection.
Concerning your file I am not the author of it… so if you want to stick to the approach, consider this a friendly hint for an alternative, much like the example from @h_classen
Currently, drag & drop is still a very code involved thing in Hype. Maybe a good next topic for the Hype Power Pack as @h_classen already suggested. We will see…
Your doc is great and I was able to partially solve the first problem:
I did like you did with 2 other images and two other texts: it works except that if I drag the second or the third image, it still makes the first image ("orange") disappear, even if i didn't put it in the box(see the attached doc)
My second problem would be that I would like to have the texts displayed in the same block of text.
And if one of the images has not been chosen to put in the box (for example the "rose" image),
this would result in the same block of text following with just a line break:
• Description text 1 on the first picture if orange was put in box A
• Description text 3 on the third picture if poire was put in box A
Thus, there would be no space between the text image descriptions, if one of the images was not put in the box.
I guess it would need a JavaScript function, but which one ??
You seem to solve the puzzles very well, can you help me by solving this last two?
Please!!! Draganddrop-images-3.hype.zip (1.7 MB)
I don't know why, but i replace the first image "orange" by an other and it solved the first problem (?) see my new doc in attachement
Rest : " My second problem would be that I would like to have the texts displayed in the same block of text.
And if one of the images has not been chosen to put in the box (for example the "rose" image),
this would result in the same block of text following with just a line break:
• Description text 1 on the first picture if orange was put in box A
• Description text 3 on the third picture if poire was put in box A
Thus, there would be no space between the text image descriptions, if one of the images was not put in the box.
I guess it would need a JavaScript function, but which one ??
You seem to solve the puzzles very well, can you help me by solving this last one?
Please!!! " Draganddrop-images-4.hype.zip (820.3 KB)
I am very sorry to disturb you again ! : as in my project, the drag and drop is in a symbol, the function, unfortunately no longer works (see my document in attachment)
Do you have a solution for this, it will help me a lot !!! Please (I don't bother you afterwards;) Draganddrop-images-test.hype.zip (787.0 KB)
Sorry, this is the good document in attachement that look like my project (the other timelines only exist in the symbol 3 but not in the 2 others (sreen1 ans screen2) please Draganddrop-images-test2.hype.zip (810.6 KB)
it's got nothing to with a symbol, but you can not use display none cause involved elements are tracked on scene load ...
use opacity instead ... or visibility
indeed it works if I delete the function with "block" or "none"
I tried with a visibility function because the opacity it generates me because we could click on the objects if they are just transparents (see my new doc in attachement) and also it doesn't work anymore => i continue to see the 2 symbols simultaneously
But unfortunately I really needed to switch from one symbol to another. Would there be another function which would not take into account "elements" but the ID instead and get the same result?
(and in this case I could stay on the function
screen1.style.display = "none";
screen2.style.display = "block"; on my precedent document...?? Draganddrop-images-test3.hype.zip (812.5 KB)
(see my document in attachment)
