From buttons to drag and drop

I want to show to my students how articulations work in music scores. Now I made a simple page with two buttons: if I click on each button, the score changes with the correct articulation:

Now I’d like to make it without buttons, but with drag and drop. Is it possible in Hype or I need a Javascript function? I’d like to drag the first articulation on the score, and then the score should change. The same with other articulations.

articolazioni.hype.zip (105,5 KB)

You would have to use Hype’s API (javascript) in order to add drag functionality. This would mean creating a function that would check what element is being dragged (articulation or staccato) and then change the image according to which element.

So, yes. It’s possible with Hype but you will need to add the code yourself.

Here’s a quick vid showing you a drag and drop technique using the draggable elements ID to set the image.

Password: 12752

3 Likes

Wow, thank you DBear for this videotutorial, it’s very clear and I can understand the great potentiality of Hype using functions. I really need to learn how functions work! I will try to create the new template and I will show you the results. :blush:

1 Like

:flushed: I tried to copy exactly your code, but perhaps I missed something: I can’t change the image. I upload my document.<a class=“attachment” articolazioni 2.hype.zip (105,7 KB)

The document you’ve uploaded is just the same as the original one. Do you have one that you worked on? Even if it’s wrong, it saves time to upload a wrong version because it may be a small thing.

Here is a document showing you a similar technique. p.s I added the functionality of the pictures resetting to their beginning position. :wink:

articolazioni-vDBear.hype.zip (104.0 KB)

ops! Sorry, I made a copy but I modified the original one. Here is my document.
articolazioni_new.hype.zip (101,6 KB)

Wow @DBear, this one is really good! It’s a completely new function! :open_mouth: