{"id":40,"date":"2024-02-01T11:13:31","date_gmt":"2024-02-01T18:13:31","guid":{"rendered":"https:\/\/blogs.ubc.ca\/h5pflo\/?page_id=40"},"modified":"2024-02-13T19:50:36","modified_gmt":"2024-02-14T02:50:36","slug":"content-presentation","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/h5pflo\/content-presentation\/","title":{"rendered":"Course Presentation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>This example has been adapted from a <a href=\"https:\/\/h5p.org\/tutorial-course-presentation\">tutorial on H5P.org<\/a><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this demonstration, we will walk through the creation of a Content Presentation content type.   This is how it will appear:<\/p>\n\n\n\n<p><iframe loading=\"lazy\" src=\"https:\/\/pressbooks.bccampus.ca\/17jcheng\/wp-admin\/admin-ajax.php?action=h5p_embed&#038;id=2\" width=\"959\" height=\"565\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"Cloudberries - Course presentation\"><\/iframe><script src=\"https:\/\/pressbooks.bccampus.ca\/17jcheng\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script><\/iframe><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use Cases<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Course presentation enables you to create and present interactive course content through a web browser. It is comprised of slides which can be embedded with text, multimedia and interactions that can foster engagement.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Course presentations are ideal when you would like to package educational content in an organized and interactive structure. Learners navigate through slides, actively participating in quizzes or viewing videos and other media as they progress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They can be considered as a dynamic substitute for traditional formats like PowerPoint presentations, PDFs or text-based websites.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Topic <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Wikipedia article on Cloudberries will be sourced as content for this demonstration. We will also use images from Wikimedia Commons.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will create two slides and a test at the end of this course presentation:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Slide 1: Cloudberries<\/li>\n\n\n\n<li>Slide 2: Uses<\/li>\n\n\n\n<li>Slide 3: Assessment<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Creating a Course presentation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you are using Pressbooks, navigate to the <strong>H5P menu<\/strong> on the left sidebar and click <strong>Add new<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"864\" height=\"602\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1.png\" alt=\"On Pressbooks, navigate to the H5P menu on the left sidebar. Select 'Add new' \" class=\"wp-image-61\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1.png 864w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1-300x209.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-1-768x535.png 768w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Search for Course Presentation and select <strong>Details<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are using H5P.com, you will be prompted to <strong>Create New Content<\/strong>.  Search for Course Presentation and click <strong>Details<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-2-1024x558.png\" alt=\"Search for Course Presentation and select Details\" class=\"wp-image-63\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-2-1024x558.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-2-300x163.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-2-768x418.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-2.png 1210w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Select <strong>Use<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-5-1024x710.png\" alt=\"Select Use\" class=\"wp-image-66\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-5-1024x710.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-5-300x208.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-5-768x533.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-5.png 1494w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Title and Course Presentation editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Enter a unique <strong>Title<\/strong> for your Course Presentation. This title will be used to distinguish other H5P Course Presentations and content types you create.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, let&#8217;s use the title <strong><em>Cloudberries<\/em><\/strong> <strong><em>&#8211; Course Presentation<\/em><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"634\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-7.png\" alt=\"Enter Cloudberries - Course Presentation in the Title field. The Course Presentation editor appears below.\" class=\"wp-image-74\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-7.png 810w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-7-300x235.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-7-768x601.png 768w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The Course Presentation has a WYSIWYG (What you see is what you get) editor below the Title field. Much like Google Docs, Word, PowerPoint editors, the published end-user view will be similar to what is created and displayed in the editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Slide 1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s add slides to the slides panel on the left. Slide titles can be used to navigate between slides and help organize your content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Press the <img decoding=\"async\" style=\"vertical-align: middle;\" src=\"https:\/\/h5p.org\/sites\/default\/files\/styles\/square_thumbnail\/public\/02_2.jpg?itok=CO0MVJSu\" alt=\"\" width=\"50\">&nbsp;button to open the &#8220;Slides&#8221; menu. <br>Press the pen next to &#8220;No title&#8221;&nbsp;<img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: middle;\" src=\"https:\/\/h5p.org\/sites\/default\/files\/03_0.jpg\" alt=\"\" width=\"30\" height=\"30\">&nbsp;to&nbsp;add a slide title.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Type&nbsp;<em>Cloudberries&nbsp;<\/em>as the title. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-8-1024x628.png\" alt=\"Course Presentation editor with Slide 1 titled Cloudberries\" class=\"wp-image-79\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-8-1024x628.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-8-300x184.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-8-768x471.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-8-1536x942.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-8-2048x1256.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s add some images to the first slide. We will use these images from Wikimedia:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/File:Rubus_chamaemorus_LC0151.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">cloudberry flower<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Cloudberry-cropped.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">cloudberry<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">When you click on the links above, they will open into a new window. Right-click each image and save them onto your computer.  Note the license information and URL for each image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add these pictures by using the&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" style=\"vertical-align: middle;\" src=\"https:\/\/h5p.org\/sites\/default\/files\/cp-img-4_0.jpg\" alt=\"\"> button in the top toolbar. Press this button, drag it to where you want the image to be placed and drop it there. A dialog will automatically open:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"652\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-9-1024x652.png\" alt=\"Image upload dialog box. The dialog box includes fields to add the image, metadata, alternative text, hover text, comments and a setting for background opacity.\" class=\"wp-image-82\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-9-1024x652.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-9-300x191.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-9-768x489.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-9-1536x977.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-9-2048x1303.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Press the&nbsp;<img decoding=\"async\" style=\"vertical-align: middle;\" src=\"https:\/\/h5p.org\/sites\/default\/files\/06.jpg\" alt=\"\" width=\"80\">&nbsp;button, browse to where you saved the&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/File:Rubus_chamaemorus_LC0151.jpg\" target=\"_blank\" style=\"font-size: 16px;\" rel=\"noopener\">cloudberry flower<\/a>&nbsp;picture and select it for upload.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember to add multimedia license information. Add the following information to the <strong>Metadata&nbsp;<\/strong><img loading=\"lazy\" decoding=\"async\" width=\"80\" height=\"51\" style=\"vertical-align: middle;\" src=\"https:\/\/h5p.org\/sites\/default\/files\/08.jpg\" alt=\"\">&nbsp;dialog:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"997\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-10-1024x997.png\" alt=\"Image Metadata Dialog Box\" class=\"wp-image-89\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-10-1024x997.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-10-300x292.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-10-768x748.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-10-1536x1495.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-10.png 1799w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, we have to add an&nbsp;<strong>Alternative text<\/strong>&nbsp;and a&nbsp;<strong>Hover text<\/strong>. The&nbsp;<strong>Alternative text<\/strong>&nbsp;is used to describe the image as an alternative to being displayed. The&nbsp;<strong>Hover text<\/strong>&nbsp;will show up on devices using a mouse when the cursor hovers over the image.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alternative text:\u00a0Rubus chamaemorus<br>Hover text:\u00a0Rubus chamaemorus<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should now have something like this:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-11-1024x628.png\" alt=\"Slide 1 - Cloudberries with picture of a cloudberry flower\" class=\"wp-image-90\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-11-1024x628.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-11-300x184.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-11-768x471.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-11-1536x942.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-11-2048x1256.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Resize the picture by pulling in the lower right corner of the image. Make the image slightly smaller in size. You can move the picture by using drag and drop. Place it in the top left corner, so you get something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-12-1024x628.png\" alt=\"Resized and repositioned cloudberry flower photo placed in the top left corner of Slide 1\" class=\"wp-image-91\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-12-1024x628.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-12-300x184.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-12-768x471.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-12-1536x942.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-12-2048x1256.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, add a second picture. This time, we&#8217;ll use the cloudberry picture and place it beneath the cloudberry flower picture. Use the same procedure as above.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You should now have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-13-1024x628.png\" alt=\"Slide 1 - Cloudberries with photos of the cloudberry flower and cloudberry\" class=\"wp-image-93\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-13-1024x628.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-13-300x184.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-13-768x471.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-13-1536x942.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-13-2048x1256.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To finish slide 1, we&#8217;ll add the following text, which is paraphrased from the Wikipedia article:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>The Rubus chamaemorus is a herb producing amber-colored edible fruit similar to the raspberry or blackberry.<\/em><\/li>\n\n\n\n<li><em>The cloudberry grows to 10\u201325 cm high.<\/em><\/li>\n\n\n\n<li><em>The leaves alternate between having 5 and 7 soft, handlike lobes on straight, branchless stalks.<\/em><\/li>\n\n\n\n<li><em>After pollination, the white flowers form raspberry-sized berries.<\/em><\/li>\n\n\n\n<li><em>Each fruit is initially pale red, ripening into an amber color in early autumn.<\/em><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use the <strong>Text tool<\/strong>&nbsp;<img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: middle;\" src=\"https:\/\/h5p.org\/sites\/default\/files\/cp-img-10_2.jpg\" alt=\"\" width=\"30\" height=\"30\">&nbsp;to add a block of text to the slide. Once you have dropped the text box, a dialog will appear. Insert the text above in the <strong>Edit text<\/strong> dialog:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"806\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-14-1024x806.png\" alt=\"Text tool dialog box\" class=\"wp-image-95\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-14-1024x806.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-14-300x236.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-14-768x605.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-14-1536x1209.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-14.png 1552w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Leave the other fields blank and press&nbsp;<strong>Done<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can place and resize the text block in the same way as images.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, position and size the text block so that you end up with something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"628\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-15-1024x628.png\" alt=\"Completed slide 1 with cloudberry flower image, cloudberry image and accompanying text\" class=\"wp-image-98\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-15-1024x628.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-15-300x184.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-15-768x471.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-15-1536x942.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-15-2048x1256.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Slide 1 is now complete! Click <strong>Create<\/strong> to save your progress. Clicking <strong>Create<\/strong>\/<strong>Update<\/strong> anytime in the H5P editor will take you to the published version of the content type you&#8217;re working on.  If you are viewing the published version, you can click on the <strong>Edit<\/strong> Button to go back to the H5P editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Slide 2<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Press the&nbsp;<img decoding=\"async\" width=\"80\" style=\"vertical-align: middle;\" src=\"https:\/\/h5p.org\/sites\/default\/files\/13.jpg\" alt=\"\">&nbsp;button to add the third slide.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Slide 2 will describe various uses of the cloudberry. Add the slide title&nbsp;<em>Uses&nbsp;<\/em>in the slides panel.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Again, we&#8217;ll use text and images to deliver our message. In addition, we&#8217;ll add a link to a website where the learner can find recipes using cloudberries.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the links to the Wikimedia Commons pictures we&#8217;ll use:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Leip%C3%A4juusto_cheese_with_cloudberry_jam.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">finnish cheese with cloudberry jam<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Homemade_cloudberry_jam.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">spoon of cloudberry jam<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Swedish_cuisine-Oatmeal_with_cloudberry.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">oatmeal with cloudberries<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We add the pictures by using the&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" src=\"https:\/\/h5p.org\/sites\/default\/files\/cp-img-4_0.jpg\" alt=\"\">&nbsp;button in the top toolbar. As on slide 1, we&#8217;ll place the pictures in a column on the left side of the slide. Insert the three pictures, add the appropriate license information, place and resize them so you have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"490\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-21.png\" alt=\"Slide 2 with images of finnish cheese with cloudberry jam, spoon of cloudberry jam and oatmeal with cloudberries\" class=\"wp-image-107\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-21.png 788w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-21-300x187.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-21-768x478.png 768w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The text we&#8217;ll use, is again paraphrased from the Wikipedia article:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>In Finland, the berries are eaten with heated, local cheese<\/em><\/li>\n\n\n\n<li><em>In Sweden, cloudberry jam is used as a topping for ice cream, pancakes, and waffles<\/em><\/li>\n\n\n\n<li><em>In Norway, they are often mixed with whipped cream and sugar<\/em><\/li>\n\n\n\n<li><em>In Atlantic Canada, cloudberries are used to make &#8220;Bakeapple Pie&#8221;.<\/em><\/li>\n\n\n\n<li><em>In Alaska and Northern Canada, the berries are mixed with seal oil, reindeer or caribou fat, and sugar to make &#8220;Eskimo Ice Cream&#8221; or &#8220;Akutaq&#8221;.<\/em><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use the&nbsp;<strong>Text tool<\/strong>&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" src=\"https:\/\/h5p.org\/sites\/default\/files\/cp-img-10_2.jpg\" alt=\"\">&nbsp;to add a block of text to the slide. Once you have dropped the text box, a dialog will appear. Insert the text above in the&nbsp;<strong>Edit text<\/strong>&nbsp;dialog.&nbsp;Press&nbsp;<strong>Done<\/strong>&nbsp;when you&#8217;re finished. You should now have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"490\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-20.png\" alt=\"Slide 2 with images of finnish cheese with cloudberry jam, spoon of cloudberry jam and oatmeal with cloudberries and corresponding text\" class=\"wp-image-106\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-20.png 810w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-20-300x181.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-20-768x465.png 768w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, we&#8217;ll add a link. Use the&nbsp;<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/cp-img-21_0.jpg\" alt=\"\" width=\"30\" height=\"30\">&nbsp;button on the toolbar and place the link onto the slide.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can find a selection of Cloudberry desserts on yummly.com. Here&#8217;s the URL:&nbsp;<a href=\"https:\/\/h5p.org\/show%20solution%20buttons\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.yummly.com\/recipes\/cloudberry-dessert<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use the link text&nbsp;<em>Cloudberry dessert recipes<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-18-1024x723.png\" alt=\"Link dialog box\" class=\"wp-image-103\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-18-1024x723.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-18-300x212.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-18-768x543.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-18-1536x1085.png 1536w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-18.png 1863w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Press&nbsp;<strong>Done<\/strong>. then resize and place the link box so you have something like this:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember to click <strong>Update<\/strong> to save your progress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"472\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-22.png\" alt=\"Completed Slide 2 with cloudberry images and text.\" class=\"wp-image-109\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-22.png 788w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-22-300x180.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-22-768x460.png 768w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;re now finished with slide 2. Finally, we&#8217;ll add a&nbsp;<strong>Summary<\/strong>&nbsp;to finish the Course presentation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Slide 3<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Press the&nbsp;<img decoding=\"async\" width=\"80\" src=\"https:\/\/h5p.org\/sites\/default\/files\/13.jpg\" alt=\"\">&nbsp;button to add a third and final slide. Add the slide title&nbsp;<em>Summary&nbsp;<\/em>in the slides panel.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The&nbsp;<strong>Summary<\/strong>&nbsp;will allow the learner to make an interactive summary of the most important aspects of the previous three slides.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On the toolbar, press the&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" src=\"https:\/\/h5p.org\/sites\/default\/files\/07_0.jpg\" alt=\"\">&nbsp;button and drag a summary onto the slide. Once you have dropped the&nbsp;<strong>Summary<\/strong>, the editor will appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enter a unique Title for the Summary. This title will be used to distinguish other H5P Summaries and content types you create. Here, we entered <em><strong>Cloudberry Summary.<\/strong><\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"203\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-23-1024x203.png\" alt=\"Summary Editor - Enter a unique Title for the Summary.\" class=\"wp-image-112\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-23-1024x203.png 1024w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-23-300x59.png 300w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-23-768x152.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-23.png 1496w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now we&#8217;ll add a statements to the Summary. Press the&nbsp;<strong>Add statements<\/strong>&nbsp;button to add one more statement group.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Introduction text:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Choose the correct statement about Cloudberries.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Statement group 1:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Cloudberries are similar in shape and size to raspberries and blackberries.<\/em><\/li>\n\n\n\n<li><em>Cloudberries are similar in shape and size to blueberries and redcurrants.<\/em><\/li>\n\n\n\n<li><em>Cloudberries are similar in shape and size to strawberries.<\/em><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Statement group 2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>In Atlantic Canada, cloudberries are often used to make &#8220;Bakeapple pie&#8221;.<\/em><\/li>\n\n\n\n<li><em>In Atlantic Canada, cloudberries are mainly eaten with a heated local cheese.<\/em><\/li>\n\n\n\n<li><em>In Atlantic Canada, cloudberries are mainly eaten with a heated local cheese.<\/em><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-25-894x1024.png\" alt=\"Cloudberry Summary - Add Statements Button\" class=\"wp-image-116\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-25-894x1024.png 894w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-25-262x300.png 262w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-25-768x880.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-25.png 1288w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Press&nbsp;<strong>Done<\/strong>&nbsp;when you have added the statements. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Remember to click <strong>Update<\/strong> to save your progress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then position and resize the&nbsp;<strong>Summary<\/strong>&nbsp;so you&#8217;ll have something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-26-894x1024.png\" alt=\"\" class=\"wp-image-118\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-26-894x1024.png 894w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-26-262x300.png 262w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-26-768x880.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-26.png 1288w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Select &#8216;Behaviour settings&#8217; to override any default settings for the Course Presentation content type. Consider hiding the Summary slide or disabling the &#8216;Show Solution&#8217; button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7: Wrapping Up<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f56f613f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-cde32994 wp-block-columns-is-layout-flex\" style=\"margin-bottom:0\">\n<div class=\"wp-block-column has-text-color has-background has-link-color wp-elements-f2ea25c467a6dfa52126b10df5e1ef3e is-layout-flow wp-block-column-is-layout-flow\" style=\"color:#000000;background-color:#ffe97d;padding-top:2em;padding-right:2em;padding-bottom:2em;padding-left:2em\">\n<h2 class=\"wp-block-heading\" id=\"single\" style=\"font-size:clamp(24.034px, 1.502rem + ((1vw - 3.2px) * 1.814), 40px);\"><strong>Reminder<\/strong><\/h2>\n\n\n\n<p class=\"has-normal-font-size wp-block-paragraph\" style=\"line-height:1.5\">Add Metadata to your H5P content.  This is key to determining how your H5P creations can be adapted, shared and reused.  Select&nbsp;<strong>Metadata<\/strong>&nbsp;next to the Title of your content and add any relevant information including Title, License, License Version, Source and Author\u2019s name and role.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-css-opacity has-background is-style-wide\" style=\"background-color:#000000;color:#000000\"\/>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s add Metadata to this Course Presentation. Select <strong>Metadata<\/strong> next to the Title and add some to your example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"1024\" src=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-28-894x1024.png\" alt=\"\" class=\"wp-image-133\" srcset=\"https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-28-894x1024.png 894w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-28-262x300.png 262w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-28-768x880.png 768w, https:\/\/blogs.ubc.ca\/h5pflo\/files\/2024\/02\/image-28.png 1288w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Select <strong>Update<\/strong> to view your finished Course presentation.&nbsp;You should now have the same result as the&nbsp;example&nbsp;on top of the page.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This example has been adapted from a tutorial on H5P.org In this demonstration, we will walk through the creation of a Content Presentation content type. This is how it will appear: Use Cases Course presentation enables you to create and present interactive course content through a web browser. It is comprised of slides which can [&hellip;]<\/p>\n","protected":false},"author":12724,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/users\/12724"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":45,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/pages\/40\/revisions\/238"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/h5pflo\/wp-json\/wp\/v2\/media?parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}