H5P.MatchPairs

Colin D's picture
Forums: 

I have created an h5p for matching images with text and audio. I modified the image pairing content type to achieve this. We will be using this new content type for language learning purposes. I thought it might be useful for others too.

Below is a screenshot of the output.

Output view

Here is a screenshot of the authoring form.

Feel free to use this code as you see fit, and I will do my best to fix any issues found.

 

H5P file: 
BV52's picture

Hi Colin,

This is really cool! Thank you for sharing it.

-BV

Hi Colin,

I've been playing around with your audio matching game. One alternative that I think would be useful is having the audio on images rather than the words (for learning to read a word, if that makes sense).

To try this, I reversed the code in h5p-match-pairs-card.js. Everything looks like it is working, however there is no way to click on the play button. (The exception is that if you click a word, you can then click the play button, but that is not ideal). I wonder what else needs to be changed to make the play button clickable on the images.

Here is the code I reversed, but there must be something else that prevents the images and the play button from being clickable. 

 

      if (textCard == true) {

        //we add the image & audio

        console.log(audioPath);

        audio = new Audio(audioPath);

        if (audioPath !== undefined) {

          console.log('going to add audio play button');

          //create the card

        self.$card = $('<li class="h5p-match-pairs-item">' +

        '<div class="image-container">' +

        '<img src="' + path + '" style="width:' +

        width + ';height:' + height + '"/>' +

        '<div class="h5p-match-pairs-overlay"></div>' +

        '</div>' +

        '<div class="playButton"><button class="audio_button" style="z-index: 9; position: absolute;" onclick="var audio = new Audio(\'' + audioPath + '\'); audio.play()"></button></div></li>').appendTo($container);

        } else {

// if no audio then image only

self.$card = $('<li class="h5p-match-pairs-item">' +

        '<div class="image-container">' +

        '<img src="' + path + '" style="width:' +

        width + ';height:' + height + '"/>' +

        '<div class="h5p-match-pairs-overlay"></div>' +

        '</div>' +

        '</li>').appendTo($container);

        }

      } else {

//make a text-only card

console.log('no audio play button');

self.$card = $('<li class="h5p-match-pairs-item">' +

        '<div class="image-container"><div class="associated-text">' + alt +

        '</div><div class="h5p-match-pairs-overlay"></div>' +

        '</div>' +

        '</li>').appendTo($container);

      }