Using Text and HTML in a Course
A Text/HTML Module is a truly blank canvas. You can use it to build anything you'd like to include in your course. It is similar to creating a Site Page; you can do anything in a Text Module that you could do on a webpage. It's possible to add elements like tables or images directly in the Content area. With custom HTML, there are even more possibilities!
Let's get started by expanding upon the five basic components of a Text/HTML Module:
- Name (Highlighted in the Red Box)
- The name of the module.
- Slug (Highlighted in the Blue Box)
- The unique URL where the module can be found. When first creating a module, this field will not be present as it is autogenerated based on the name. Once the module has been created, you may go back and edit it.
- Content (Highlighted in the Green Box)
- This is where the magic happens. In the next section of this article, we will go through how to add content.
- Track Completion (Highlighted in the Black Box)
- This requires a student to scroll to the end of the content before the module is marked as completed. If left off, the module will be marked as completed the moment the page loads.
- Choose Categories (Highlighted in the Yellow Box)
- The category/categories the module belongs to.
Now we have a general idea of our options within the Text/HTML module. Let us dive deeper into adding content.
There is a three-level hierarchy when it comes to content:
- Used to separate different parts of the content
- Nested within sections vertically
- Can be divided into multiple columns
- Nested within rows vertically
- Holds the actual content like Text, Images, Videos, PDFs, Buttons, and Code
Every newly created Text/HTML module comes with a single section in the content box. The section is the entire blue box in the image below.
We can add multiple sections to our content by clicking the blue + button.
Within sections, we can add rows; to do this, click the green + button. How rows differ from sections is that they can be added within a section and can be divided into columns. In the example below, we will be creating a row with two columns. Within each column is a block. The row is green and the blocks are grey.
To add a block to a row's column, click the grey + button. Below are the options when adding a block:
For this tutorial, I added three blocks to the row: Text, Video, and Image.
To edit the blocks, please double click on the gray rectangle they are hosted in or on the settings cog icon. Below is what would be presented if you edited the Text Block.
Within different block types, there will be tabs to edit and customize the block to your liking.