
One of the great features of Moodle is how it can be easily extended. One way to do this is by using code snippets, which are small blocks of HTML code that you can insert into the HTML source editor to add features to your course that will enhance its usability. Teaching you how to create code snippets is beyond the scope of this resource; however, using a precreated code snippet is as easy as copying the code from this post and pasting it into an HTML source editor in the course you are building.
In this series of posts, you will learn how to insert code snippets of four commonly used features for displaying course content in Moodle: modals, collapsibles, pills, and tabs. Before we begin, it is important to emphasize a couple of things. First of all, Moodle does not allow these code snippets to be used in some locations (such as the profiles). Therefore, if the code snippets are incompatible in the location you are trying to use them, they may be automatically removed or may not function as expected. Also, make sure that you are using the HTML source editor instead of the standard text editor when customizing the text for the code snippets. If you use the standard text editor, it may not work as expected.
To access an HTML source editor, click on the “HTML” icon in the editing window. Then, paste the code snippet into the HTML source editor. After that, customize the text that appears in orange in the code snippet.
Modals
A modal is a dialog box or popup window used to display small blocks of content that may not fit as seamlessly in a Moodle book or lesson. In Horizon’s Designing for Online Learning course, for example, modals labeled “Design Choices” appear throughout the course with explanations of why we made the design decisions we did.
Modal code
To add a modal to your course, copy and paste the following code snippet into your HTML source editor in the desired location in your course:
<!– Button to Open the Modal –>
<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”>
Open modal
</button>
<!– The Modal –>
<div class=”modal” id=”myModal”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<!– Modal Header –>
<div class=”modal-header”>
<h3 class=”modal-title”>Modal Heading</h3>
<button type=”button” class=”close” data-dismiss=”modal”>×</button>
</div>
<!– Modal body –>
<div class=”modal-body”>
Modal body.
</div>
<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-danger” data-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
You will notice that there are three places in this code snippet with orange text, which means that you need to customize the text that will be displayed. The first is the name of the button that students will click on to open the modal (e.g. “Design Choices”). The second is modal heading, that is, the text that appears at the top of the popup window when the modal is opened. The final piece that you need to customize is the “Modal body” which is the main text that appears in the modal when it is opened. After you have customized the highlighted text in the code snippet to your liking, save your changes and try it out!
Collapsible Accordions
A collapsible accordion allows users to hide (or show) blocks of content, which gives them the freedom to focus on certain portions of the content that are most important to them at the time and reduces the amount of scrolling that they need to do to access this information. This feature is modeled most prominently in Unit 2 of Designing for Online Learning.
Collapsible accordion code
To add this feature to your course, copy the code snippet below and paste it into the HTML source editor in the location where you wish to use it:
<div id=”accordion”>
<div class=”card”>
<div class=”card-header”>
<a class=”card-link collapsed” data-toggle=”collapse” href=”#collapseOne” aria-expanded=”false”>
<h4>Card 1</h4>
</a>
</div>
<div id=”collapseOne” class=”collapse” data-parent=”#accordion” style=””>
<div class=”card-body”>
Some content for card 1.
</div>
</div>
</div>
<div class=”card”>
<div class=”card-header”>
<a class=”card-link collapsed” data-toggle=”collapse” href=”#collapseTwo” aria-expanded=”false”>
<h4>Card 2</h4>
</a>
</div>
<div id=”collapseTwo” class=”collapse” data-parent=”#accordion” style=””>
<div class=”card-body”>
Some content for card 2.
</div>
</div>
</div>
<div class=”card”>
<div class=”card-header”>
<a class=”card-link” data-toggle=”collapse” href=”#collapseThree” aria-expanded=”false”>
<h4>Card 3</h4>
</a>
</div>
<div id=”collapseThree” class=”collapse” data-parent=”#accordion” style=””>
<div class=”card-body”>
Some content for card 3.
</div>
</div>
</div>
</div>
The collapsible accordion feature uses cards that display as headings when they are collapsed and reveal a block of text under the headings when they are expanded. The above sample uses three cards with corresponding content. To customize it for your purposes, substitute the card titles in orange (Card 1, Card 2, Card 3) with titles of your own and the orange content text with the content that you wish to include in each card. If you wish to add more cards, simply copy the code for one of the cards, paste it after the code for Card 3 and make the necessary changes to the text.