{"id":1814,"date":"2021-02-16T15:55:26","date_gmt":"2021-02-16T15:55:26","guid":{"rendered":"https:\/\/jrdingwall.ca\/blogwall\/?p=1814"},"modified":"2024-02-19T22:52:41","modified_gmt":"2024-02-19T22:52:41","slug":"getting-h5p-into-canvas-without-wordpress","status":"publish","type":"post","link":"https:\/\/jrdingwall.ca\/blogwall\/getting-h5p-into-canvas-without-wordpress\/","title":{"rendered":"Getting H5P into Canvas without WordPress"},"content":{"rendered":"<p>One thing I&#8217;ve been trying to experiment with lately is getting H5P content types to work without having to fall ball on WordPress. Given my experience so far I think that is still my number one choice, after all I&#8217;ve been creating and sharing H5P activities that way for almost 5 years. Old habits are hard to break. One thing I&#8217;ve been trying is the H5P-StandAlone project, another will be trying to create static sites with the output from an app called <a href=\"https:\/\/next.lumi.education\/index.html\">Lumi<\/a>, but those posts are for another day (read: varying degrees of struggle and success).<\/p>\n<p>Today, the goal is just to jam an H5P content item into a Canvas (LMS) page without having to spin up a whole other WP site or placing it within a content repo. There might be a variety of reasons why you&#8217;d want to do this. One is that not every school that uses Canvas has access to an instance of WordPress, Drupal, or Moodle. They might also not have access to H5P.com which is a great solution for those who can&#8217;t host their own H5P activities. So, if this sounds like you then read on. What you can do &#8211; today I&#8217;m using MacOS so anything I talk about have that caveat &#8211; is download the free Lumi app to your desktop. Lumi is an application which allows you to create and run H5P activities without having to call a server. Well, you have to call the H5P hub to grab a content type library first, but then you&#8217;re free. The editor looks just the same as it does in WordPress and on H5P.org so that will be familiar to you.<\/p>\n<div class=\"su-image-carousel  su-image-carousel-has-spacing su-image-carousel-crop su-image-carousel-crop-4-3 su-image-carousel-has-outline su-image-carousel-adaptive su-image-carousel-slides-style-default su-image-carousel-controls-style-dark su-image-carousel-align-none\" style=\"\" data-flickity-options='{\"groupCells\":true,\"cellSelector\":\".su-image-carousel-item\",\"adaptiveHeight\":false,\"cellAlign\":\"left\",\"prevNextButtons\":true,\"pageDots\":true,\"autoPlay\":5000,\"imagesLoaded\":true,\"contain\":true,\"selectedAttraction\":0.025000000000000001387778780781445675529539585113525390625,\"friction\":0.2800000000000000266453525910037569701671600341796875}' id=\"su_image_carousel_69f16c2157232\"><div class=\"su-image-carousel-item\"><div class=\"su-image-carousel-item-content\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"841\" src=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-editor-1024x841.png\" class=\"\" alt=\"\" srcset=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-editor-1024x841.png 1024w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-editor-300x246.png 300w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-editor-768x631.png 768w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-editor.png 1185w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/div><\/div><div class=\"su-image-carousel-item\"><div class=\"su-image-carousel-item-content\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"812\" src=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-view-1024x812.png\" class=\"\" alt=\"\" srcset=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-view-1024x812.png 1024w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-view-300x238.png 300w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-view-768x609.png 768w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-view.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/div><\/div><\/div><script id=\"su_image_carousel_69f16c2157232_script\">if(window.SUImageCarousel){setTimeout(function() {window.SUImageCarousel.initGallery(document.getElementById(\"su_image_carousel_69f16c2157232\"))}, 0);}var su_image_carousel_69f16c2157232_script=document.getElementById(\"su_image_carousel_69f16c2157232_script\");if(su_image_carousel_69f16c2157232_script){su_image_carousel_69f16c2157232_script.parentNode.removeChild(su_image_carousel_69f16c2157232_script);}<\/script>\n<p>Once you&#8217;ve created your content type you can preview it in Lumi as well. From here you can save the activity as a .h5p file, the archive file type that you get when you use the <em>reuse<\/em> button on the online versions of H5P. One quick note, notice how the accordion in the sample piece does not have the H5P frame? Therefore there&#8217;s no chance to display the <em>reuse, embed, <\/em>or <em>copyright buttons<\/em>. Not that I&#8217;ve seen so far anyway. After you&#8217;ve saved the file you could upload it to your WordPress or other H5P repo using the upload feature, rather than create. If you&#8217;re still using WordPress to deliver your content, Lumi is a great option to work locally and not worry about keeping that wifi connection up during content creation. This also gives you local backups of all your content items.<\/p>\n<p>Here is the next level part. Lumi has an export feature to convert that content item into a fully\u00a0<strong>self-contained<\/strong> interactive activity. Which means I can turn off my wifi and still run the file in my webbrowser. This is really great, as the v1 of the H5P StandAlone project could only run on a server (still checking out v2). If you want to see what it looks like you can look under the hood using a text editor such as Sublime.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1818 size-large\" src=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-html-output-1024x496.png\" alt=\"\" width=\"1024\" height=\"496\" srcset=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-html-output-1024x496.png 1024w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-html-output-300x145.png 300w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-html-output-768x372.png 768w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-html-output-1536x743.png 1536w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-html-output.png 1909w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>If you scroll WAY down, you&#8217;ll eventually find the body tag. The file for this basic accordion is about 300KB. So now I have a moveable H5P content item, how do I get that to render in Canvas LMS? I&#8217;ll take just a second here to say I could scroll down to the <em>body<\/em> in this HTML file and add anything else I want around the H5P item, intro text, an image, etc. But if I&#8217;d rather just have the item, and use Canvas&#8217;s RCE to do the rest (because that can be a bit easier that going straight HTML) then I don&#8217;t have to open the H5P HTML file at all I can just move it around. So let&#8217;s upload that to Canvas in the course. I first went to the <em>Files<\/em> area in my course and created a new folder for H5P items. Doing this is a good way to make sure you know where those files are being housed.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1820 alignnone\" src=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/canvas-h5p-files-300x194.png\" alt=\"\" width=\"300\" height=\"194\" srcset=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/canvas-h5p-files-300x194.png 300w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/canvas-h5p-files.png 545w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Next, I&#8217;ll go to the page I want to insert the H5P item into (or create a new page) and using the create link button, choose <em>course files<\/em>, then navigate to the H5P.html file I want to insert.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1821 size-large\" src=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/find-h5p-html-file-1024x326.png\" alt=\"\" width=\"1024\" height=\"326\" srcset=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/find-h5p-html-file-1024x326.png 1024w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/find-h5p-html-file-300x96.png 300w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/find-h5p-html-file-768x245.png 768w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/find-h5p-html-file-1536x489.png 1536w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/find-h5p-html-file.png 1611w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Once you choose the file, you&#8217;ll notice Canvas just adds a link there. Not very helpful because I want to just be able to see the H5P item, not have to open a new tab. The link gives us some useful information though, in particular, the address for the file. If you click the HTML editor button you&#8217;ll see something like this:<\/p>\n<div class=\"dm-code-snippet dark default  dm-normal-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"wrap language-markup\">\n<p>&lt;p&gt;&lt;a class=&#8221;instructure_file_link&#8221; title=&#8221;lumi-test.html&#8221; href=&#8221;\/courses\/350\/files\/789264?wrap=1&#8243; target=&#8221;_blank&#8221; rel=&#8221;noopener noreferrer&#8221;&gt;lumi-test.html&lt;\/a&gt;&lt;\/p&gt;lumi-test.html<\/p>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p>What we can do from here is copy the URL from the <em>href<\/em> and with some slight editing make that the <em>src<\/em> for our iframe. So grabbing just the following, you can delete everything else:<\/p>\n<div class=\"dm-code-snippet dark default  dm-normal-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"wrap language-markup\">\n<p>href=&#8221;\/courses\/350\/files\/789264?wrap=1&#8243;<\/p>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p>If we try to just use this as the source Canvas will just delete everything except out <em>iframe<\/em> tag. We need to tell Canvas to preview the HTML file, so whip up your <em>iframe<\/em> tags and you&#8217;ll get something like this &#8211; notice that everything after the file number starting with &#8220;?&#8221; has been replaced with &#8220;preview&#8221;:<\/p>\n<div class=\"dm-code-snippet dark default  dm-normal-version\" style=\"background-color:#abb8c3;\" snippet-height=\"\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Copy Code<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">Copied<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"no-line-numbers\"><code id=\"dm-code-raw\" class=\"wrap language-markup\">\n<p>&lt;iframe src=&#8221;\/courses\/350\/files\/789264\/preview&#8221; width=&#8221;100%&#8221; height=&#8221;150px&#8221;&gt;&lt;\/iframe&gt;<\/p>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n<p>And TA-DA! You have a fully functional H5P item that lives in your Canvas course now. Enjoy!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1825 size-large\" src=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-accordion-in-canvas-1024x216.png\" alt=\"\" width=\"1024\" height=\"216\" srcset=\"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-accordion-in-canvas-1024x216.png 1024w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-accordion-in-canvas-300x63.png 300w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-accordion-in-canvas-768x162.png 768w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-accordion-in-canvas-1536x325.png 1536w, https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/lumi-accordion-in-canvas.png 1604w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<hr \/>\n<p>Photo by <a href=\"https:\/\/unsplash.com\/@clemhlrdt?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Cl\u00e9ment H\u00e9lardot<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/computer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One thing I&#8217;ve been trying to experiment with lately is getting H5P content types to work without having to fall ball on WordPress. Given my experience so far I think that is still my number one choice, after all I&#8217;ve been creating and sharing H5P activities that way for almost 5 years. Old habits are [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"webmentions_disabled":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[16],"tags":[],"class_list":["post-1814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-educational-technology-and-design"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/jrdingwall.ca\/blogwall\/files\/2021\/02\/clement-helardot-95YRwf6CNw8-unsplash.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts\/1814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/comments?post=1814"}],"version-history":[{"count":8,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts\/1814\/revisions"}],"predecessor-version":[{"id":3045,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts\/1814\/revisions\/3045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/media\/1826"}],"wp:attachment":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/media?parent=1814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/categories?post=1814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/tags?post=1814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}