jithin-space/h5p-image-pair

Hide and show CHECK button, show button to head to another Drupal Node

Opened this issue · 0 comments

I'm making a trade show game in Drupal 7. I'm using a simple webform to gather information and using that form submit button to enter the image pairing 'game'.

I'd like to hide the CHECK button initially and then show the button once pairing is complete. I'm a bit rusty and somewhat unfamiliar with H5P.

I've created a .css file and a .js file to override the game -- all good.

With 2 images to pair, I've managed to find the initialization of the process and figured out when the number of interactions equals 2.

I cannot -for the life of me- figure out the syntax to hide the CHECK button. I'd love a little assistance please.

Additionally, as you can see from my code, I'd like to turn the button on once the interactions reach 2. Same issue I need to turn the CHECK button on again.

Also once the SHOW SOLUTION is clicked I'd like to add a button to go to another Drupal node.

Thanks for your help.

.JS File

H5P.externalDispatcher.on('xAPI', function (event) {
console.log(event.data.statement);
//Initialization
if ( event.getVerb() == "attempted" ){
console.log('verb equals attempted');
window.globalInteractions = 0;
console.log('interactions = ' + window.globalInteractions);
}
if ( event.getVerb() == "interacted" ){
console.log('verb equals interacted');
window.globalInteractions = window.globalInteractions + 1;
console.log('interactions = ' + window.globalInteractions);
}
if (window.globalInteractions == 2 ) {
console.log('IN if !!!! interactions = 2 !!!!!');
// Turn OFF CHECK button here
}
if ( event.getVerb() == "completed" ){
console.log('verb equals completed');
}
});