Digital Typography – or the how text is presented on a screen – is an often overlooked but important part of building Moodle content. Much emphasis is (rightly) placed on what you write, after all it’s this content that students are looking for when they log in, it’s also important however that we spent some time thinking about how to present your content.
We also explain a little about why you should choose to pay close attention to how your text is presented and what benefits it will give those who are reading it.
The headings shown below are available for you to use on your Moodle pages. You'll notice that Heading 3 is the main heading for you to use in your content as Heading 1 & Heading 2 are reserved for use by Moodle. Selecting the largest header you can in the Atto text editor it will use a Heading 3 tag for this reason. If you find you want to use a larger heading than the maximum Heading 3 size, please see the display styles section below.
Moodle with Bootstrap 4 allows you to create modals, which are pop up windows useful in some cases to provide extra information to the user.
To add a modal you'll need to add two portions of code to your Moodle module or course. Please be aware that certain types of content will suit being shown to the user with a modal, others will not. As always, be selective in the types of content you choose to add this feature too – it could become annoying to a user to find that every other paragraph is presented this way.
Firstly you'll need the code to add the button you'll use to show the modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
Then you'll need to add the code that contains the content for the Modal:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Click the button below to launch this example.
The best way for you to use this is to copy and paste the code above and edit it to your liking. Adding content to the modal is as easy as replacing the ellipsis (...) in the code above.
