Interactive elements in Moodle Book content

The Book module in Moodle allows you to easily create a series of pages of online content, with text, images, embedded videos, etc.

One major limitation of the Moodle Book is that you can't include any questions to check learners' understanding or to introduce a pause for reflection.

If you want to include a lot of questions, you should consider using the Moodle Lesson module, but what if you're happy with the Book but want to include at least some simple reflection questions? You can indeed do this!

Here's an example. Click the buttons below the question.

What do you understand by the term 'quality'?

Like what you see? Below is the code you have to put in a Moodle Book page (or chapter) in HTML view to create buttons like the ones shown above and the show/hide text. I've highlighted the show/hide text that's the only thing that needs to be customized.

<div id="showtext">
</div>
<script>
function displayResult() {
    document.getElementById("showtext").innerHTML = "'Quality' is a loaded word...<br><br>";
}
</script>

<script>
function reset() {
    document.getElementById("showtext").innerHTML = "";
}
</script>

<button onclick="displayResult()">Reflect and click</button>
<button onclick="reset()">Reset</button>

If you're going to use more than one show/hide feature on the same page, you can reuse the code but you have to remember to change the names of the functions - displayResult() and reset() - as well as the <div> element "showtext" for any new instance of the feature.