{"id":2380,"date":"2024-03-20T12:02:25","date_gmt":"2024-03-20T12:02:25","guid":{"rendered":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/?p=2380"},"modified":"2024-03-20T12:05:01","modified_gmt":"2024-03-20T12:05:01","slug":"using-h5p-interactive-books-for-be-ready-orientation","status":"publish","type":"post","link":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/2380","title":{"rendered":"Using H5P Interactive books for BE Ready Orientation"},"content":{"rendered":"\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1915\" height=\"1069\" class=\"wp-block-cover__image-background wp-image-2388\" alt=\"\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/cover-1.png\" data-object-fit=\"cover\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/cover-1.png 1915w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/cover-1-300x167.png 300w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/cover-1-1024x572.png 1024w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/cover-1-768x429.png 768w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/cover-1-1536x857.png 1536w\" sizes=\"(max-width: 1915px) 100vw, 1915px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-large-font-size\"><\/p>\n<\/div><\/div>\n\n\n\n<p>For the start of the 2023\/2024 academic year a new orientation module needed to be developed on UCEM\u2019s VLE to provide a stable foundation for the future studies of new and returning students. I worked on the development alongside Sharvari Balagate Ramesh, Learning Designer, and the project was led by Sarah Jarvis, Quality Controller. The previous post by Sharvari &#8216;<a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/2342\" data-type=\"link\" data-id=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/2342\">Setting out the student journey &#8211; Launch of BE Ready<\/a>&#8216; describes the development of the orientation area, BE Ready. This post deals with the technical part of choosing a suitable tool to build the content and design a good user experience.<a id=\"_msocom_1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Needs assessment<\/h2>\n\n\n\n<p>As UCEM is an online educational institution all administrative and support information is provided on the VLE. On the one hand this is an efficient way to store information in a place frequently accessed by students, on the other hand the sheer amount of information available can be overwhelming. Previously collected feedback indicated that students sometimes struggle to find what they need. BE Ready Orientation was designed as a VLE course to guide the students in their journey &#8211; both as an induction for new students and as a reference point at any time of the academic year for returning ones.<\/p>\n\n\n\n<p>The UCEM VLE is Moodle based and BE Ready orientation uses the Moodle grid format. A tile is allocated to each study level \u2013 4, 5, 6 and 7. The rest of the tiles contain information about new and returning student welcome events, digital capabilities, Sustainable Development Goals (SDGs) and a space for feedback. Each study level section is divided in two \u2013 Get started (for the beginning of the semester) and Get ahead (for during the semester). To create this kind of sublevels we needed to find a suitable tool.<\/p>\n\n\n\n<p>The tool needed to meet the following criteria:<\/p>\n\n\n\n<ul>\n<li>user-friendly and intuitive;<\/li>\n\n\n\n<li>interactive;<\/li>\n\n\n\n<li>compact and able to display bite-sized content in a variety of formats: short texts, links, embedded videos, infographics (minimal reading);<\/li>\n\n\n\n<li>allow for both linear and non-linear use<\/li>\n\n\n\n<li>available on our Moodle VLE or free externally;<\/li>\n\n\n\n<li>can be embedded on the page to minimise clicks and create visual interest at the top of the page.<a id=\"_msocom_1\"><\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Choice of format<\/h2>\n\n\n\n<p>The following were considered: H5P accordion, H5P presentation, Moodle lesson, and H5P Interactive book. All tools are either part of core Moodle or available free from the H5P plugin. I would consider them to be user-friendly (when accessibility rules are followed) and intuitive to use. Unlike the other considered tools, this is the first time we have used H5P Interactive books on the VLE, but by design they contain other H5P formats that we already use. <a id=\"_msocom_1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">H5P Accordion<\/h2>\n\n\n\n<p>The accordion is a good way to neatly present small chunks of information within a category and eliminate \u2018the scroll of death\u2019. However, it doesn\u2019t allow embedding of images and videos or interactive elements like quizzes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Accordion.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"409\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Accordion-1024x409.png\" alt=\"An example of the BE Ready Orientation's content built in the H5P Accordion tool.\" class=\"wp-image-2382\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Accordion-1024x409.png 1024w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Accordion-300x120.png 300w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Accordion-768x307.png 768w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Accordion.png 1148w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Figure 1<\/strong>: Example H5P Accordion&nbsp;<em><br>Source<\/em>:<em> <\/em>UCEM (2023)<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">H5P Presentation<\/h2>\n\n\n\n<p>Previously we&nbsp;have developed our own H5P Presentation template, so this content type is widely used on the VLE. Images and videos can be embedded in it; however, it doesn\u2019t allow the use of quizzes or other interactive elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Presentation.png\"><img loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"450\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Presentation.png\" alt=\"An example of the BE Ready Orientation's content built in the H5P Presentation tool.\" class=\"wp-image-2383\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Presentation.png 799w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Presentation-300x169.png 300w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Presentation-768x433.png 768w\" sizes=\"(max-width: 799px) 100vw, 799px\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Figure 2<\/strong>: Example H5P Presentation<em><br>Source<\/em>: UCEM (2023)<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Moodle Lesson<\/h2>\n\n\n\n<p>The Moodle Lesson would have been the second best choice for this project. It allows embedding of videos and images, quiz questions can be added and the side menu enables both linear and non-linear use. It would have worked for the \u2018Get started\u2019 and \u2018Get ahead\u2019 sections within the study level tiles. However, we wanted to have some information embedded on the BE Ready home page, just above the tiles, to welcome students into the page and provide information on navigation. Moodle Lesson wouldn&#8217;t have been suitable for that purpose.<a id=\"_msocom_1\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Lesson-screenshot.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"345\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Lesson-screenshot-1024x345.jpg\" alt=\"An example of the BE Ready Orientation's content built in the Moodle Lesson tool.\" class=\"wp-image-2385\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Lesson-screenshot-1024x345.jpg 1024w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Lesson-screenshot-300x101.jpg 300w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Lesson-screenshot-768x259.jpg 768w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Lesson-screenshot-1536x518.jpg 1536w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Lesson-screenshot.jpg 1595w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Figure 3<\/strong>: Example Moodle Lesson<em><br>Source<\/em>: UCEM (2023)<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">H5P Interactive book<\/h2>\n\n\n\n<p>Finally, we chose the H5P Interactive book for this project. This format allowed us to construct a book of different H5P content types. We have utilised content formats such as accordion, text, image, different question types, video, and image hotspots to create an engaging block of information. The side bar helps students to navigate the different sections, allowing for non-linear use of the tool. This is particularly useful in the \u2018Get ahead\u2019 activities, where the books can serve as a reference point during the semester.<\/p>\n\n\n\n<p>As Interactive books allow embedding of images, we have made use of this to add visual interest and help students relate to the content. This has been achieved through informative infographics and as decorative images. In instances where an image contains text, we have provided an alternative format for accessibility.<a id=\"_msocom_1\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Interactive-book-screenshot.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Interactive-book-screenshot-1024x662.png\" alt=\"An example of the BE Ready Orientation's content built in the Moodle Lesson tool.\" class=\"wp-image-2386\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Interactive-book-screenshot-1024x662.png 1024w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Interactive-book-screenshot-300x194.png 300w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Interactive-book-screenshot-768x496.png 768w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2024\/03\/Interactive-book-screenshot.png 1297w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\"><strong>Figure 4<\/strong>: H5P Interactive book<em><br>Source<\/em>: UCEM (2023)<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Acknowledgement<\/strong><\/p>\n\n\n\n<p>Cover photo by <a href=\"https:\/\/unsplash.com\/@maxvdo?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash\" target=\"_blank\" rel=\"noreferrer noopener\">Max van den Oetelaar<\/a> on <a href=\"https:\/\/unsplash.com\/photos\/and-breathe-neon-sign-on-tre-buymYm3RQ3U?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash<\/a> embedded into an H5P Interactive book.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For the start of the 2023\/2024 academic year a new orientation module needed to be developed on UCEM\u2019s VLE to provide a stable foundation for&hellip;<\/p>\n","protected":false},"author":29,"featured_media":2388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[219],"tags":[139,226,181,227,213,224,217,216,225],"_links":{"self":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/2380"}],"collection":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/comments?post=2380"}],"version-history":[{"count":7,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/2380\/revisions"}],"predecessor-version":[{"id":2396,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/2380\/revisions\/2396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media\/2388"}],"wp:attachment":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media?parent=2380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/categories?post=2380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/tags?post=2380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}