{"id":39,"date":"2022-01-12T11:20:51","date_gmt":"2022-01-12T18:20:51","guid":{"rendered":"https:\/\/blogs.ubc.ca\/h5psymposium\/?page_id=39"},"modified":"2023-05-19T14:34:36","modified_gmt":"2023-05-19T21:34:36","slug":"getting-started-with-h5p","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/h5psymposium\/getting-started-with-h5p\/","title":{"rendered":"Getting Started with H5P"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2023\/05\/h5p-01-1024x473.png\" alt=\"Step1: Create H5P objects in Open H5P. Step 2: Embed the H5P in canvas, WordPress, Pressbooks or UBC wiki \" class=\"wp-image-650\" srcset=\"https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2023\/05\/h5p-01-1024x473.png 1024w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2023\/05\/h5p-01-300x139.png 300w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2023\/05\/h5p-01-768x355.png 768w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2023\/05\/h5p-01-620x287.png 620w, https:\/\/blogs.ubc.ca\/h5psymposium\/files\/2023\/05\/h5p-01.png 1034w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There are two major steps to get started with H5P. First step is to create H5P interactive element using the Open UBC H5P Hub, and the next step is to share the H5P that you have created to your choice of learning technology platform (such as Canvas, UBC Blogs, PressBooks)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">H5P.org has a&nbsp;<a href=\"https:\/\/h5p.org\/getting-started\">Getting Started Guide<\/a>&nbsp;which is a good place to start. The following are things to consider when you are starting to use H5P.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Will you using an existing interaction, modify it or create your own?<\/li>\n\n\n\n<li>Explore the H5P.org and other H5P object repository sites, such as&nbsp;<a href=\"https:\/\/h5pstudio.ecampusontario.ca\/\">eCampusOntario H5P Studio<\/a>&nbsp;or the&nbsp;<a href=\"https:\/\/h5p.org\/oer-hub-coming\">H5P Global OER Hub<\/a>&nbsp;(once ready).<\/li>\n\n\n\n<li>Think about how interactive media will enhance your course as far as presenting information or helping learners with formative assessments and feedback.<\/li>\n\n\n\n<li>Decide on how you will be accessing H5P? What do you have available? And what meets FIPPA requirements if you are considering it for student&#8217;s use for assignment content creation?<\/li>\n\n\n\n<li>Consider accessibility. If you are using an interaction that is focused on visual information, have you included that information in text or audio modes? Will the interaction type be accessible on most devices?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Create<\/h2>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#e3e3e3\">Note: If you are outside of UBC, you can go to <a href=\"https:\/\/h5p.org\/\">H5P website <\/a>to create H5P content.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Log In <\/strong>button located at the top right to login to Open H5P Hub<\/li>\n\n\n\n<li>Under UBC Faculty, select the faculty you belong to. Then click <strong>Update Profile<\/strong>.<\/li>\n\n\n\n<li>Go to <strong>H5P Content<\/strong>&gt;<strong>Add new <\/strong>to create new H5P content <\/li>\n\n\n\n<li>Choose H5P content types. For more information on each content type,refer to<a href=\"https:\/\/h5p.org\/content-types-and-applications\"> the H5P documentation here. <\/a><\/li>\n\n\n\n<li>After you create your H5P, click <strong>create<\/strong>. <\/li>\n\n\n\n<li>You have create your H5P element! To share this H5P element to your choice of learning technology platform, click <strong>Embed<\/strong> and copy the embed code. Then move to Step2:Share.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Share<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Share to your Canvas Course<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your Canvas Course that you want to embed the H5P element that you have created. <\/li>\n\n\n\n<li>Go to the page that you want to add your H5P element. On that page, go to <strong>View&gt;HTML Editor <\/strong>to switch to HTML Editor. <\/li>\n\n\n\n<li>Paste the embed code that you have copied in  Step1: Create. <\/li>\n\n\n\n<li>Click <strong>Save<\/strong>. <\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Share to your WordPress(Blogs\/CMS) site<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your WordPress(Blogs\/CMS) site.<\/li>\n\n\n\n<li>Go to page\/posts that you want to add your H5P element.<\/li>\n\n\n\n<li>Add <strong>Custom<\/strong> <strong>HTML<\/strong> blocks.  <\/li>\n\n\n\n<li>Paste the embed code that you have copied in Step1: Create.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong>. <\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Share to your PressBooks<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the PressBook that you have created.<\/li>\n\n\n\n<li>On the page that you want to add H5P element.<\/li>\n\n\n\n<li>Click <strong>Text(HTML)<\/strong> to switch to HTML editor.  <\/li>\n\n\n\n<li>Paste the embed code that you have copied in Step1: Create.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong>. <\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Other <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can share your H5P elements to any other learning technology platforms so long as it allows you to paste HTML\/iframe code.   <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reusing H5P<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The simplest way to use H5P interactions, is to repurpose existing H5P interactions. The interactions can be reused by getting the embed code and using it on your course or web page. The code can be accessed by the&nbsp;<strong>&lt;&gt;Embed<\/strong>&nbsp;link on the bottom right of the interaction itself.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">P<em>age attributions:<\/em>H5P Graphics by UBC (CC by 4.0). Logos displayed in the graphics are protected with trademarks. <a href=\"https:\/\/www.svgrepo.com\/svg\/32040\/share\">Share<\/a>,<a href=\"https:\/\/www.svgrepo.com\/svg\/39632\/pen\">pen<\/a>,<a href=\"https:\/\/www.svgrepo.com\/svg\/2086\/laptop\">laptop<\/a> icons used in the graphics are <a href=\"https:\/\/creativecommons.org\/share-your-work\/public-domain\/cc0\/\">CC 0<\/a> license. Text on this page was adapted from the <a href=\"https:\/\/wiki.ubc.ca\/Documentation:H5P#Reusing_Interactions\">Documentation: H5P by Parm Gill<\/a>, shared under a <a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC-BY-4.0<\/a> License.<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>There are two major steps to get started with H5P. First step is to create H5P interactive element using the Open UBC H5P Hub, and the next step is to share the H5P that you have created to your choice of learning technology platform (such as Canvas, UBC Blogs, PressBooks) H5P.org has a&nbsp;Getting Started Guide&nbsp;which [&hellip;]<\/p>\n","protected":false},"author":10679,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/users\/10679"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":21,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":651,"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/pages\/39\/revisions\/651"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/h5psymposium\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}