{"id":79,"date":"2018-05-24T01:07:42","date_gmt":"2018-05-24T01:07:42","guid":{"rendered":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/?p=79"},"modified":"2018-05-25T05:55:46","modified_gmt":"2018-05-25T05:55:46","slug":"rich-content-page-builder","status":"publish","type":"post","link":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/2018\/rich-content-page-builder\/","title":{"rendered":"Rich Content Page Builder"},"content":{"rendered":"<p class=\"intro-content\">As part of the journey of building for the <a href=\"https:\/\/www.rmit.edu.au\/study-with-us\/levels-of-study\/vocational-study\/certificates\/c3319\">Certificate III in Individual Support<\/a> we realised our team needed to build a large suite of inter-activities for text heavy content.<\/p>\n<p>Six months ago, RMIT was rolling out <a href=\"https:\/\/www.instructure.com\/\" target=\"_blank\" rel=\"noopener\">Instructure Canvas<\/a> university wide, the implementation was in it&#8217;s infancy, and very little customisation was available that would give content the appeal to keep students engaged.<\/p>\n<p>Despite being an online learning system, Canvas permits the embedding of limited front end technologies. These are the things that make online content sing. Simple click and reveal events were permitted but not others. The Canvas WYSIWYG editor will strip most css and javascript and only permit text, images and tables.<\/p>\n<p>From a learning design perspective, this is difficult. Especially for the subject matter on ethics, law, regulations and procedures in aged care and disability services. Some of this content is quite dry, but important to deliver as part of accreditation requirements. Making it engaging was our mandate.<\/p>\n<p>We decided to build our interactive content and embed directly into Canvas using iframes. We built a system to make iframes work cleanly in Canvas (<a href=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/2018\/02\/06\/thinking-inside-the-box\/\">you can read about it here<\/a>), and went to work building a page builder that would permit interactive tables, accordions, flip cards, quizzes, etc and<a href=\"http:\/\/h5p.org\" target=\"_blank\" rel=\"noopener\"> H5P content<\/a>.<\/p>\n<p>A showcase of these technologies in action can be seen below.<\/p>\n<div class=\"embed-responsive embed-responsive-16by9\">\n<p><iframe loading=\"lazy\" class=\"embed-responsive-item\" src=\"https:\/\/www.youtube.com\/embed\/15rVGt3lpa4\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div>\n<p>We&#8217;d spoken to other groups within RMIT and looked across how other teams were working to achieve the same rich experiences, many were embedding H5P, or using Canvas&#8217; own ungraded quizzes. Some H5P tools failed a lot of online accessibility requirements,\u00a0 RMIT needs to meet to ensure\u00a0 courses meet requirements set by federal legislation and the institutions own guidelines..<\/p>\n<p>As <a href=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/our-team\/\">our team<\/a> is essentially a build team, and we hand over content to course coordinators with no support it was really important that teachers would be able to edit content to ensure it remained up to date. Dropping code directly into Canvas would not permit this. Its essential for built resources without support to be sustainable.<\/p>\n<p>Our page builder is built on <a href=\"http:\/\/wordpress.org\">WordPress<\/a>, an open source CMS that powers about 27% of the internet. Its an easy to use, develop for, and supported by RMIT on RMIT servers. The backend is a form which guides the user through fields to help them build their interactive content.<\/p>\n<div id='gallery-1' class='gallery galleryid-79 gallery-columns-3 gallery-size-full'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-11.49.31-am.png'><img loading=\"lazy\" decoding=\"async\" width=\"1039\" height=\"633\" src=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-11.49.31-am.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-11.49.31-am.png 1039w, https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-11.49.31-am-300x183.png 300w, https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-11.49.31-am-768x468.png 768w, https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-11.49.31-am-1024x624.png 1024w\" sizes=\"auto, (max-width: 1039px) 100vw, 1039px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.35.03-pm.png'><img loading=\"lazy\" decoding=\"async\" width=\"743\" height=\"725\" src=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.35.03-pm.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.35.03-pm.png 743w, https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.35.03-pm-300x293.png 300w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.41.30-pm.png'><img loading=\"lazy\" decoding=\"async\" width=\"984\" height=\"481\" src=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.41.30-pm.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.41.30-pm.png 984w, https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.41.30-pm-300x147.png 300w, https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-1.41.30-pm-768x375.png 768w\" sizes=\"auto, (max-width: 984px) 100vw, 984px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>A content example in action can be seen embedded below. This is from a safety module, part of the Certificate III in Individual support.<\/p>\n<p><iframe loading=\"lazy\" id=\"C3319iframe\" style=\"border: 0px #ffffff none;\" title=\"\" src=\"https:\/\/emedia.rmit.edu.au\/C3319\/?p=3723\" name=\"Richcontent\" width=\"100%\" height=\"400\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>The page builder outputs responsive content, which if you&#8217;re on desktop can be illustrating by resizing the browser window or by rotating your tablet. We&#8217;ve found this important as the amount of visual real estate available in Canvas is limited, students may be undertaking their online program on any number of devices. You can see how the rich content element sits in canvas on desktops and tablets below.<\/p>\n<div id='gallery-2' class='gallery galleryid-79 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-4.15.43-pm.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-4.15.43-pm-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-4.15.25-pm.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-24-at-4.15.25-pm-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>Apart from simple click and reveal interactivities, the page builder is able to create complex branching scenarios like the following, a live example from a page in a course to show the student to defuse an emotional situation.<\/p>\n<p><iframe loading=\"lazy\" id=\"C3319iframe2\" style=\"border: 0px #ffffff none;\" title=\"Managing conflict\" src=\"https:\/\/emedia.rmit.edu.au\/C3319\/?p=140\" name=\"Richcontent\" width=\"100%\" height=\"400\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>We built the graphics in house with assistance with RMIT&#8217;s DSC <a href=\"https:\/\/dsctal.space\/\" target=\"_blank\" rel=\"noopener\">Learning and Teaching Team<\/a>.<\/p>\n<p>The page builder also permits the embed of any kind of HTML content, which has enabled us to store games and other interactivities built by 3rd party providers such as <a href=\"http:\/\/learninghook.com.au\/\" target=\"_blank\" rel=\"noopener\">The Learning Hook<\/a>. And because the content is served outside of Canvas, it can be delivered to other LMS&#8217;s like Moodle, Blackboard or Rise.<\/p>\n<p>When considering building outside the Canvas then embedding inside it, it&#8217;s important for students to have a consistent user experience, so all our UX borrows from the Canvas layout and picks some directly from RMIT&#8217;s Brand and style guidelines. To complete this user experience we brought the H5P style into line and dropped some of it&#8217;s &#8216;child&#8217;s tooth&#8217; interface.<\/p>\n<div id='gallery-3' class='gallery galleryid-79 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-17-at-1.46.37-pm.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-17-at-1.46.37-pm-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-17-at-1.46.11-pm.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-17-at-1.46.11-pm-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>To further ensure we&#8217;re providing support past project handover, we&#8217;re creating &#8216;How-To&#8217; videos for program coordinators and teachers with screencasts to assist with building rich content for emebedding in Canvas<\/p>\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe loading=\"lazy\" class=\"embed-responsive-item\" src=\"https:\/\/www.youtube.com\/embed\/Rf92rFWdL_U\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>The page builder allowed us to create over 400 interactive elements for the Certificate III not possible natively in Instructure Canvas that our course coordinators would be able to edit and update.\u00a0 The WordPress framework allows us to bulk edit and improve all of these and reuse them in future projects.<\/p>\n<p>This tool has been warmly received by other teams within RMIT and we&#8217;re hoping we can build it further or directly into Canvas for a native solution.<\/p>\n<p>RMIT staff with Stash access can request access the <a href=\"https:\/\/stash.its.rmit.edu.au\/users\/e37247\/repos\/c3319-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">page builder source code here.<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As part of the journey of building for the Certificate III in Individual Support we realised our team needed to build a large suite of inter-activities for text heavy content. Six months ago, RMIT was rolling out Instructure Canvas university wide, the implementation was in it&#8217;s infancy, and very little customisation was available that would give content the appeal to keep students engaged. Despite being an online learning system, Canvas permits the embedding of limited front end technologies. These are the things that make online content sing. Simple click and reveal events were permitted but not others. The Canvas WYSIWYG editor will strip most css and javascript and only permit text, images and tables. From a learning design perspective, this is difficult. Especially for the subject matter on ethics, law, regulations and procedures in aged care and disability services. Some of this content is quite dry, but important to deliver as part of accreditation requirements. Making it engaging was our mandate. We decided to build our interactive content and embed directly into Canvas using iframes. We built a system to make iframes work cleanly in Canvas (you can read about it here), and went to work building a page builder [&#8230;]<\/p>\n<p><a class=\"btn btn-lg btn-secondary understrap-read-more-link\" href=\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/2018\/rich-content-page-builder\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":3,"featured_media":91,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-79","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":34,"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":149,"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/posts\/79\/revisions\/149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/media\/91"}],"wp:attachment":[{"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}