Adding Resources

1.8. Add a click-to-reveal activity to a Moodle book page

Click-to-reveal is the type of activity useful for posing a question or scenario for learners to think about and possibly write about before they click to see a discussion piece of further perspectives.

Moodle book is Javascript-friendly, so you can experiment with JS functionality to add click-to-reveal activities. 

The following Javascript code can be added into the book page html for a click-to-reveal activity (there are a couple of appearance choices below):

Javascript: click-to-reveal

<script type="text/javascript">

    function toggle(obj) {

        var obj = document.getElementById(obj);

        if (obj.style.display == "block") obj.style.display = "none";

        else obj.style.display = "block";

    }

</script>

<p><a href="javascript: void(0);" onclick="toggle('reveal')">Click here to read more</a>.</p>

<div id="reveal" style="display:none;">

    <hr>

    <p>Reveal text here</p>

    <hr>

</div>

The above code produces the following click-to-reveal format:

Click here to read more.

Note: If you are including more than one click-to-reveal per page, please give the highlighted div id attribute a different name for each, e.g. "reveal1", "reveal2" etc.

Activity with comment (Javascript)

<table width="100%" border="1" style="background-color: #d9e2f3">

    <tbody>

        <tr>

            <td width="" valign="top">

                <p><img src="https://www.open.edu/openlearncreate/pluginfile.php/687993/mod_book/chapter/28050/reflection_icon_35.png" alt="" width="32" height="32" class="img-responsive atto_image_button_text-bottom"></p>

                <p><strong>Activity name</strong></p>

                <p>Text here</p>

                <script type="text/javascript">

                    function toggle(obj) {

                        var obj = document.getElementById(obj);

                        if (obj.style.display == "block") obj.style.display = "none";

                        else obj.style.display = "block";

                    }

                </script>

                <p><a href="javascript: void(0);" onclick="toggle('comment')">View comment</a></p>

                <div id="comment" style="display:none;">

                    <p>Comment</p>

                </div>

            </td>

        </tr>

    </tbody>

</table>

The above code produces the following click-to-reveal activity:

Activity name Text here View comment Comment

Note: If you are including more than one activity-with-comment per page, please give the highlighted div id attribute a different name for each, e.g. "comment1", "comment2" etc.