Site: | OpenLearn Create |
Course: | How to use OpenLearn Create |
Book: | Adding Resources |
Printed by: | Guest user |
Date: | Friday, 28 March 2025, 6:55 AM |
Resource types enable almost any kind of web content to be inserted into the course.
The book module enables you to create a multi-page resource for learners in a book-like format, with chapters and subchapters. Books, which are not interactive, can contain media files as well as text and are useful for displaying lengthy passages of information which can be broken down into sections. A book can be printed. A book may be used:
You will need to ensure you keep the styling of content consistently formatted in Moodle book, so keep a list of useful/regularly used html formatting tags to copy and paste.
Moodle book uses Moodle’s standard Atto editor for formatting of content on each page in the book.
To read more about Atto, please visit ‘Atto editor’.
Clicking the arrow on the top-left of the Atto editor menu reveals more options, including HTML mode.
The Atto editor includes buttons for various formatting functions.
Top line: Paragraph styles, Formatting, Subscript/superscript, Block quote, Font family/size, Unordered/ordered list, Horizontal rule.
Middle line: Link/unlink, Prevent auto-link, Insert/edit image, Insert image description, Embed media, Align, Outdent/indent, Undo/redo.
Bottom line: Insert equation, Insert character, Table, Font colour, More font background colours, Clear formatting, HTML, Accessibility checker, Screenreader helper.
In the Moodle book you are building, you might need to add boxes around text.
Box 1: This is a basic box with a black border and some text inside it.
<div style="width: 200px; border: 1px solid black; border-radius: 5px; padding: 10px; margin: 10px;"><p>This is an example.</p></div>
This is an example.
Box 2: This is a basic box with a black dotted border and some text inside it.
<div style="width: 200px; border: 2px solid black; border-style: dotted; padding: 10px; margin: 10px;"><p>This is an example.</p></div>
This is an example.
Box 3: This is a basic box with a red dashed border and some text inside it.
<div style="width: 200px; border: thick red; border-style: dashed; padding: 10px; margin: 10px;"><p>This is an example.</p></div>
This is an example.
Box 4: This is a basic box with a double black border and some text inside it.
<div style=" width: 200px; border: 5px double black; padding: 10px; margin: background-color: lavender"><p>This is an example.</p></div>
This is an example.
Box 5: This is a blue left border and some text.
<p style="border-left: 5px solid blue">This is an example.</p>
This is an example.
There are many style options for your boxes. You can adjust the width, border size, border colour, padding, margin, border corners, background colour and border type, using standard inline CSS.
If you are new to CSS, this CCS tutorial is a good starting point.
You can add an html table into a Moodle book page. Providing a table as an html table rather than an image of a table, which is not screen readable, is much more accessible for those who use screen reader software and is often better for everyone than an image of a table, which might not be very good definition.
Please note: it is good accessibility practice to add a caption to a table and to use the appropriate content tags for headings, paragraphs and lists within tables. This helps screen reader software.
<table width="100%" border="1">
<tbody>
<tr>
<td width="" valign="top">
<p>Text here</p>
</td>
</tr>
</tbody>
</table>
Text here |
<table width="100%" border="1">
<tbody>
<tr>
<td width="" valign="top">
<p>Text here</p>
</td>
<td width="" valign="top">
<p>Text here</p>
</td>
</tr>
<tr>
<td width="" valign="top">
<p>Text here</p>
</td>
<td width="" valign="top">
<p>Text here</p>
</td>
</tr>
</tbody>
</table>
Text here |
Text here |
Text here |
Text here |
<table width="100%" border="1" style="background-color: #d9e2f3">
<tbody>
<tr>
<td width="" valign="top">
<p>Text here</p>
</td>
</tr>
</tbody>
</table>
Text here |
You may need to add images into book pages. Please note, images are not readable by screen reader software which makes them inaccessible for some users. Therefore, it is good accessibility practice to provide a long description (alt text) for each image, and if the image is purely decorative, it is helpful to indicate this by checking the box, so screen reader software knows to ignore it.
For storage reasons, videos should be embedded from a host site (e.g. a YouTube or Vimeo channel) rather than directly uploaded to the Moodle site. With this in mind, please link to videos to embed them in a book page rather than upload them to OpenLearn Create.
You will need to copy the embed code from the video where it is hosted on a video channel.
In a book page, switch on the html editor in the Atto editor, then paste the embed code for the video into the appropriate place in the html view of the page.
If there is any text to go with the video, please remember to put the text in the html editor with the <p> and </p> tags.
When you switch back from html mode in the Atto editor for the page, you should be able to see the video embedded in the page.
It is good accessibility practice to add a transcript of the video just below the embedded video in your book page.
You may need to add an audio file to a page in book.
<audio controls>
<source src="LINK HERE" type="audio/mpeg">
</audio>
It is good accessibility practice to add a transcript of the audio just below the audio player in your book page.
It is good accessibility practice to provide a transcript of video and audio material in your course. Many learners find transcripts helpful, even if the audio or video file is fully accessible to them.
<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('transcript')">View transcript</a></p>
<div id="transcript" style="display:none;">
<p>Transcript</p>
<hr>
</div>
Tip: If your transcript has many paragraphs, here is an easy workaround.
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):
<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:
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.
<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 |
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.
You can insert an HTML5 activity in a Moodle book page.
The HTML5 file will need to be uploaded to your course before you embed it in a book page. The process of uploading the HTML5 to OpenLearn Create can be a bit lengthy. If the HTML5 is in a zip file, you cannot upload the zip file to your course and expect the HTML5 interactive to work (if you click on the uploaded zip file, you’ll just be prompted to download the zip file), as the zip is just a container for the interactive rather than the interactive itself. So instead, you need to extract the zip file and copy across everything inside it which makes up the HTML5 interactive.
Note: When embedding the HTML5, it’s very helpful to already know the interactive’s width and height. This will save you time tweaking the HTML5 to be the right size.
<iframe class="responsive-iframe" width="600" height="600" frameborder="0" src="LINK HERE"></iframe>
Importing from Microsoft Word is another way to add content to your Moodle book. With this function, Moodle book automatically tags up your Word doc into HTML.
New chapters are created based on ‘Heading 1’ styles.
Subchapters can be created based on ‘Heading 2’ styles.
This means you need to ensure the Word document you want to upload is using styles consistently, otherwise you might get content in the book on the wrong pages.
The export function gives you a Word version of the Moodle book (obviously without the interactive or video content which won’t play in Word). This can be useful for the following purposes:
The file module enables you to provide a file as a course resource for learners. Where possible, the file will be displayed within the course interface; otherwise learners will be prompted to download it. The file may include supporting files, for example an HTML page may have embedded images.
Note that learners need to have the appropriate software on their computers in order to open the file.
You can choose to display the file size, such as '3.1 MB', beside links to the file. If there are multiple files in this resource, the total size of all files is displayed.
You can also show the type of the file, such as 'Word document', beside links to the file. If there are multiple files in this resource (i.e. if you have uploaded a whole folder of files), the start file type is displayed. If the file type is not known to the system, it will not display.
Click on ‘Save and return to course’
The file will appear on the course page.
A heading enables text and optional icons to be inserted among the activity links on the course page.
The label module enables text and multimedia to be inserted into the course page in between links to other resources and activities. Labels are very versatile and can help to improve the appearance of a course if used thoughtfully. Labels may be used
In a label, you can add images to the text when you are editing the text.
In a label, you can embed a video in the text when you are editing the text. The video is not hosted in the course, it needs to be hosted on another platform, such as Youtube.
The page module enables a course author to create a web page resource using the text editor. A page can display text, images, sound, video, web links and embedded code, such as Google maps. Advantages of using the page module rather than the file module include the resource being more accessible (for example to users of mobile devices) and easier to update as a page can be edited in the course and doesn't involve having to re-upload a revised file.
For large amounts of content, it is recommended that the book module is used rather than a page.
A page may be used:
You can do this either by setting up a text or button link to the next page or previous page.
A subpage is a smaller version of the main course page. Subpages were used to create sections and add activities to group activities together. Please note, we have withdrawn add subpage function as it is no longer compatible with core Moodle. Existing subpages are still visible in courses on the site.
PLEASE NOTE: the old subpage function is no longer compatible with core Moodle, especially as adding a subpage means the Add topics option disappears. For this reason we have withdrawn the ability to add subpages to courses as of 16 March 2023 and are investigating the functionality of the new generation version of subpages which are being used on the OU student VLE.
Click on the ‘Add’ button
The ‘Adding a new Subpage’ screen will appear.
Unlike a page, you can add activities and resources to the
subpage and can rearrange their order. You can also move other activities and
resources from elsewhere in the course to the subpage.
The URL module enables a course author to provide a web link as a course resource. Anything that is freely available online, such as documents or images, can be linked to; the URL doesn't have to be the home page of a website. The URL of a particular web page may be copied and pasted or an author can use the file picker and choose a link from a repository such as Flickr, YouTube or Wikimedia (depending upon which repositories are enabled for the site).
There are a number of display options for the URL, such as embedded or opening in a new window and advanced options for passing information, such as a student's name, to the URL if required.
Note that URLs can also be added to any other resource or activity type through the text editor.
In the course space switch editing on.
Click on Add an activity or resource under the main course home page or below an existing heading.
The ‘add an activity or resource’ screen will appear.
Under Resources select ‘URL’.
Click on the ‘Add’ button
The ‘Adding a new URL’ screen will appear.
Enter a name for the URL and a short description into the relevant boxes, then paste the URL in the external URL box.
Please note, if you want to embed a video in the course, it is better to do it in a label or page rather than a direct URL link, as the embed function doesn’t display properly in OpenLearn Create with a direct URL link.