Sound effects on HTML events

Submitted by Citizen on Sat, 11/21/2020 - 01:00
Forums: 
Developers

Hello

I'd like to be able to integrate custom HTML event handling into for example Drag and Drop question sets. In other words do something based on an action taken. For example:

1. Play a sound effect when element A is dropped on the correct zone or not.

2. Check answer and provide feedback when element dropped on zone.

Basically this is current H5P Drag and Drop behaviour, but with some level of custom event handling.

Is there a way to do this in H5P already?

Built into the plugin I would see it as a form mapping events to actions and somewhere within the plugin to insert custom js/css/html. I.e. a restricted and safer way of modifying the plugin code I suppose..

I can code it standalone in HTML and embed into the site but would like to integrate into h5p / learnpress for course management and tracking purposes. Don't mind coding something up if someone is willing to guide me in the right direction..

Thanks

Content types: 
Drag and Drop
otacke's picture

otacke

Mon, 11/23/2020 - 18:29

Hi Citizen!

Someone has already created that feature for his/her own needs and is willing to contribute it to the official code base. It will depend on the core teams decision, but maybe you don't have to code anything yourself at all.

If you want to do it yourself without touching the orginal code, you can use the alter_scripts hook to inject your own scripts (don't think it's fully documented, buy you should get the idea at https://github.com/h5p/h5pmods-wordpress-plugin/blob/master/h5pmods.php), wait for the content to be instantiated (either wait for the document ready state being "interactive" at least or use the H5P.externalDispatcher to listen for "initialized" instead of "xAPI" ) and then get hold of the objects of the draggables that each trigger a "dragend" event (https://github.com/h5p/h5p-drag-question/blob/master/src/draggable.js#L145) and check whether it's in a correct dropzone. Hope this helps, I can't give step-by-step tutorials unfortunately.

Best,
Oliver

long241191

Mon, 11/08/2021 - 05:07

Hi

I followed your instruction, but dragend event fire without data. How can I get dragend draggable and droped dropzone, result (true/false) from event ?

I have check in xApi event and dragend event but nothing to archive it.

dragend event data: {

  type: 'dragend',

  data: undefined,

  preventBubbling: ƒ,

  getBubbles: ƒ,

  scheduleForExternal: ƒ

}

otacke's picture

otacke

Mon, 11/08/2021 - 17:56

Hi!

I did not say that the events contain the information that you require, but you will need them in order to know when you need to check the instance variables in order to retrieve what element was put where (correctly/incorrectly).

Best,
Oliver

long241191

Mon, 11/08/2021 - 05:10

Hi. 

dragend event fire, but event data have no infomation about selected draggable and dropzone, state (true/false).

How can I archive it ?

Event data: {

  type: 'dragend',

  data: undefined,

  preventBubbling: ƒ,

  getBubbles: ƒ,

  scheduleForExternal: ƒ

}