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.

Uploading the HTML5 to Moodle

1. If not done already, extract the zip folder for your HTML5.
2. Make sure the extracted folder contains a file called ‘index’ (if it’s a Storyline interactive, this file may be called ‘story’, in which case please rename it).
3. In your draft course on OpenLearn Create, go to the topic tab where you wish to upload the HTML5 and select ‘Add an activity or resource’.
4. Select ‘File’
5. Name the resource (this is just for your reference as the name will be hidden from learners).
6. In the ‘Select files’ area, copy across everything within the extracted zip folder.
7. This will include manually creating the subfolders and copying across everything inside of those. You can create these subfolders by clicking the folder icon at the top of the section.
8. Once everything has been transferred, it will probably display several folders and files in the Select files screen, for example folder for html5, mobile, story_content and some other files including one called ‘index.html’.
9. Select the file ‘index.html’ and choose ‘set main file’.
10. Open the ‘Appearance’ tab and change Display to ‘In pop-up (do not use)’.
11. Open the ‘common module settings’ tab and change ‘Availability’ to ‘make available but not shown on course page’.
12. Open the ‘activity completion’ tab and change ‘completion tracking’ to ‘do not indicate activity completion’.
    Note: if you do not see the activity completion tab, this will be because you have not yet switched on completion tracking for your course.
13. Choose ‘Save and display’.
14. A page with an index.html link should display. Open the link (it should open the HTML5 in a pop-up) and check that it works.
15. Copy the link in the pop-up’s address bar and paste this into a text document to keep it in readiness for the next step.

Embedding the HTML5 in the Moodle book page

1. Go to the page in the Moodle book where you wish to embed the interactive and switch to HTML mode.
2. Copy and paste the code below into the text document, then swap the placeholder text in it (where it says ‘LINK HERE’) with the HTML5 address you had previously pasted into the text document. You will need to add the correct width and height attributes. Then copy the code and HTML5 address into the correct place in the book page.
3. Click ‘Save changes’ and check how the interactive looks in the book page.

<iframe class="responsive-iframe" width="600" height="600" frameborder="0" src="LINK HERE"></iframe>