General developer forum

Customizing H5p modules summary slide

Picture of Mahtab Hussain
Customizing H5p modules summary slide

May you all live in peace!

I am using H5P Moodle plugin to create a course presentation. I now need to customize my summary slide. For the purpose, I overridden hvp_renderer in my active theme and added following function to overridden renderer:

public function hvp_alter_scripts(&$scripts, $libraries, $embedType) {
global $CFG;
if (
isset($libraries['H5P.CoursePresentation']) &&
$libraries['H5P.CoursePresentation']['majorVersion'] == '1'
) {
$include_file = 'customSum.js';
$scripts[] = (object)array(
'path' => $CFG->wwwroot . '/theme/academi/js/' . $include_file,
'version' => '?ver=0.0.1',
and within my customSum.js file, I added following code:

(function ($) {
// Replace Show solutions button with feedback.
var dashboardURL = '';
var passPercent = 70;
var feedbackPass = 'Bien joué. Vous avez réussi la formation.';
var feedbackFail = 'Pardon. Tu ne pouvais pas réussir. Veuillez réessayer.';
var obtMarks = parseInt(document.getElementsByClassName('h5p-joubelui-score-number-counter')[0].innerText);
var maxMarks = parseInt(document.getElementsByClassName('h5p-joubelui-score-max')[0].innerText);
var percentMarks = (obtMarks / maxMarks) * 100;
if (percentMarks < passPercent) {
document.getElementsByClassName('h5p-show-solutions')[0].outerHTML = '<p class="h5p-show-solutions">' + feedbackFail + '</p>';
} else {
document.getElementsByClassName('h5p-show-solutions')[0].outerHTML = '<p class="h5p-show-solutions">' + feedbackPass + '</p>';
//Replace Retry button with Exit Training button
document.getElementsByClassName('h5p-cp-retry-button')[0].outerHTML = '<a class="h5p-exit-training-button h5p-joubelui-button" href="' + dashboardURL + '">Sortie</a>';

This implementation has following flaws:

1) When I try to edit my H5P course presentation, the editor does not load and in console tab of browser I get an error 'Unable to load ajax'.

2) When I access Summary slide as a student, at the first load, my changes are not reflected but if I reload the page, the changes appear there.

Any help how to avoid ajax error and how to make the changes appear on loading of summary screen very first time.

Warm regards,

Mahtab Hussain

Average of ratings: -