I thought I'd share this in case it's useful to others. I found a method to wrap an H5P in an HTML container and to add a timer so that the H5P is hidden after the time expires. Here's the HTML (which I just added to a Moodle page):
<strong>Timed Activity in H5P</strong>
<div id="timer-display"></div>
<div id="h5p-container"></div>
//get the path to your local resizer script from the H5P iframe embed code and add it below
<script src="<Path to h5p-resizer.js>" charset="UTF-8"></script>
<script>
// Set the time limit in seconds
var timeLimit = 30; // 30 seconds
// Get the container elements
var container = document.getElementById("h5p-container");
var timer = document.getElementById("timer-display");
// Create the iframe element
var iframe = document.createElement("iframe");
// Set the source URL of the iframe - edit this with the URL of your H5P in Moodle
iframe.src = "<URL to your H5P in Moodle goes here>";
// Set any additional attributes for the iframe - you can get these from the iframe code generated by the H5P element
iframe.setAttribute("width", "xxx");
iframe.setAttribute("height", "xxx");
// Append the iframe to the container - this makes the H5P display on the page
container.appendChild(iframe);
// Start the timer
var countdown = setInterval(function() {
// Display the remaining time in minutes and seconds
var minutes = Math.floor(timeLimit / 60);
var seconds = timeLimit % 60;
// Update the timer element with the remaining time
timer.innerHTML = "<p>Time remaining: " + minutes + "m " + seconds + "s</p>";
// Check if the time has run out
if (timeLimit <= 0) {
// Stop the timer
clearInterval(countdown);
// Time's up - replace the H5P with a new message
container.innerHTML = "<p>Time's up!</p>";
}
// Decrease the time limit by 1 second
timeLimit--;
}, 1000);
</script>
