{"id":47,"date":"2017-03-17T16:28:33","date_gmt":"2017-03-17T16:28:33","guid":{"rendered":"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/interactive-content-h5p\/"},"modified":"2020-05-15T01:04:44","modified_gmt":"2020-05-15T01:04:44","slug":"interactive-content-h5p","status":"publish","type":"chapter","link":"https:\/\/integrations.pressbooks.network\/pressbooks101\/chapter\/interactive-content-h5p\/","title":{"raw":"Interactive Content: H5P","rendered":"Interactive Content: H5P"},"content":{"raw":"<div class=\"textbox shaded\">\n\nAnother benefit to using Pressbooks to create a book is the ability to add plugins to customize your book and add interactivity. This chapter highlights the H5P plugin that allows you to create high-quality, interactive content using HTML5. H5P allows you to create interactive content like flashcards, image hotspots, and quizzes.\n\nIn this chapter, you'll learn how to:\n<ul>\n \t<li>Activate H5P in your Pressbook\u00a0instance<\/li>\n \t<li>Add H5P to your Chapter<\/li>\n \t<li>Create H5P and access H5P tutorials<\/li>\n<\/ul>\n<\/div>\n<h4>Activating H5P<\/h4>\nIf your Pressbook\u00a0is missing an option for H5P Content on the left side menu, you can activate it for your book by navigating to Plugins also on the left side menu. This will display the list of plugins available for your book, beneath the option for H5P you'll see a link to Activate it.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-activate-H5P-plugin.png\"><img class=\"aligncenter wp-image-40 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin.png\" alt=\"Plugins pane with H5P activation highlighted\" width=\"1887\" height=\"394\"><\/a>\n\nOnce you've activated the H5P plugin, the option for H5P Content will be available on the left side menu.\n\n&nbsp;\n<h4>Creating H5P<\/h4>\nIn order to create H5P and add it to your book, you have two different options.\n\n1) you can click Add New on the left side menu from under H5P Content:\n\n&nbsp;\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-add-new-H5P.png\"><img class=\"aligncenter wp-image-41 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P.png\" alt=\"Selection bar - &quot;Add H5P Content&quot;\" width=\"291\" height=\"199\"><\/a>\n\n2) you can click Add H5P directly from the chapter you're editing:\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/V2-add-H5P-from-chapter.png\"><img class=\"aligncenter wp-image-42 size-full\" style=\"font-size: 14pt;\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/V2-add-H5P-from-chapter.png\" alt=\"\" width=\"210\" height=\"158\"><\/a>\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-add-H5P-from-chapter-part-2.png\"><img class=\"aligncenter wp-image-43 size-large\" style=\"font-size: 14pt;\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-1024x255.png\" alt=\"\" width=\"1024\" height=\"255\"><\/a>\n<h4>Creating H5P and Accessing Tutorials<\/h4>\nAfter clicking Add New or Add H5P, you'll be on the initial H5P interface where you'll (1) create a title for the H5P activity, (2) select the type of H5P from the drop down menu, (3) make sure the option Create is bulleted or select upload to add an existing H5P to your book, and (4) select the display options for your H5P.\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-add-new-H5P-content.png\"><img class=\"aligncenter wp-image-44 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P-content.png\" alt=\"&quot;Add New&quot; button for H5P content\" width=\"256\" height=\"64\"><\/a>\n\n<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-H5P-select-content-types.png\"><img class=\"aligncenter wp-image-45 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types.png\" alt=\"H5P Content Types\" width=\"883\" height=\"680\"><\/a>\n\nOnce you've selected the H5P content type you want to create the interface for the content loads. You'll use that interface to build your interactive content. Look for the blue \"Tutorial available\" link next to the content type dropdown box to get access to an in-depth tutorial from the H5P website. These tutorials will take you through the H5P creation process step by step, and often with video support. They're a great resource to rely on while creating H5P for your book!\n\n[caption id=\"attachment_425\" align=\"aligncenter\" width=\"525\"]<a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-H5P-adding-questions-to-a-quiz.png\"><img class=\"wp-image-46 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-adding-questions-to-a-quiz.png\" alt=\"H5P Quiz Formatting\" width=\"525\" height=\"738\"><\/a> <em>This is an example of the formatting window for multiple-choice quizzes.<\/em>[\/caption]","rendered":"<div class=\"textbox shaded\">\n<p>Another benefit to using Pressbooks to create a book is the ability to add plugins to customize your book and add interactivity. This chapter highlights the H5P plugin that allows you to create high-quality, interactive content using HTML5. H5P allows you to create interactive content like flashcards, image hotspots, and quizzes.<\/p>\n<p>In this chapter, you&#8217;ll learn how to:<\/p>\n<ul>\n<li>Activate H5P in your Pressbook\u00a0instance<\/li>\n<li>Add H5P to your Chapter<\/li>\n<li>Create H5P and access H5P tutorials<\/li>\n<\/ul>\n<\/div>\n<h4>Activating H5P<\/h4>\n<p>If your Pressbook\u00a0is missing an option for H5P Content on the left side menu, you can activate it for your book by navigating to Plugins also on the left side menu. This will display the list of plugins available for your book, beneath the option for H5P you&#8217;ll see a link to Activate it.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-activate-H5P-plugin.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-40 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin.png\" alt=\"Plugins pane with H5P activation highlighted\" width=\"1887\" height=\"394\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin.png 1887w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin-300x63.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin-1024x214.png 1024w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin-768x160.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin-1536x321.png 1536w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin-65x14.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin-225x47.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2017\/03\/v2-activate-H5P-plugin-350x73.png 350w\" sizes=\"auto, (max-width: 1887px) 100vw, 1887px\" \/><\/a><\/p>\n<p>Once you&#8217;ve activated the H5P plugin, the option for H5P Content will be available on the left side menu.<\/p>\n<p>&nbsp;<\/p>\n<h4>Creating H5P<\/h4>\n<p>In order to create H5P and add it to your book, you have two different options.<\/p>\n<p>1) you can click Add New on the left side menu from under H5P Content:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-add-new-H5P.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-41 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P.png\" alt=\"Selection bar - &quot;Add H5P Content&quot;\" width=\"291\" height=\"199\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P.png 291w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P-65x44.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P-225x154.png 225w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/a><\/p>\n<p>2) you can click Add H5P directly from the chapter you&#8217;re editing:<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/V2-add-H5P-from-chapter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-42 size-full\" style=\"font-size: 14pt;\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/V2-add-H5P-from-chapter.png\" alt=\"\" width=\"210\" height=\"158\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/V2-add-H5P-from-chapter.png 210w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/V2-add-H5P-from-chapter-65x49.png 65w\" sizes=\"auto, (max-width: 210px) 100vw, 210px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-add-H5P-from-chapter-part-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-43 size-large\" style=\"font-size: 14pt;\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-1024x255.png\" alt=\"\" width=\"1024\" height=\"255\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-1024x255.png 1024w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-300x75.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-768x191.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-65x16.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-225x56.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2-350x87.png 350w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-H5P-from-chapter-part-2.png 1153w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<h4>Creating H5P and Accessing Tutorials<\/h4>\n<p>After clicking Add New or Add H5P, you&#8217;ll be on the initial H5P interface where you&#8217;ll (1) create a title for the H5P activity, (2) select the type of H5P from the drop down menu, (3) make sure the option Create is bulleted or select upload to add an existing H5P to your book, and (4) select the display options for your H5P.<\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-add-new-H5P-content.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P-content.png\" alt=\"&quot;Add New&quot; button for H5P content\" width=\"256\" height=\"64\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P-content.png 256w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P-content-65x16.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-add-new-H5P-content-225x56.png 225w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-H5P-select-content-types.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-45 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types.png\" alt=\"H5P Content Types\" width=\"883\" height=\"680\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types.png 883w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types-300x231.png 300w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types-768x591.png 768w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types-65x50.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types-225x173.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-select-content-types-350x270.png 350w\" sizes=\"auto, (max-width: 883px) 100vw, 883px\" \/><\/a><\/p>\n<p>Once you&#8217;ve selected the H5P content type you want to create the interface for the content loads. You&#8217;ll use that interface to build your interactive content. Look for the blue &#8220;Tutorial available&#8221; link next to the content type dropdown box to get access to an in-depth tutorial from the H5P website. These tutorials will take you through the H5P creation process step by step, and often with video support. They&#8217;re a great resource to rely on while creating H5P for your book!<\/p>\n<figure id=\"attachment_425\" aria-describedby=\"caption-attachment-425\" style=\"width: 525px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wisc.pb.unizin.org\/app\/uploads\/sites\/67\/2017\/03\/v2-H5P-adding-questions-to-a-quiz.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-46 size-full\" src=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-adding-questions-to-a-quiz.png\" alt=\"H5P Quiz Formatting\" width=\"525\" height=\"738\" srcset=\"https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-adding-questions-to-a-quiz.png 525w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-adding-questions-to-a-quiz-213x300.png 213w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-adding-questions-to-a-quiz-65x91.png 65w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-adding-questions-to-a-quiz-225x316.png 225w, https:\/\/integrations.pressbooks.network\/app\/uploads\/sites\/100\/2020\/05\/v2-H5P-adding-questions-to-a-quiz-350x492.png 350w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/a><figcaption id=\"caption-attachment-425\" class=\"wp-caption-text\"><em>This is an example of the formatting window for multiple-choice quizzes.<\/em><\/figcaption><\/figure>\n","protected":false},"author":14,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-47","chapter","type-chapter","status-publish","hentry"],"part":19,"_links":{"self":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/users\/14"}],"version-history":[{"count":1,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/47\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/47\/revisions\/48"}],"part":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/parts\/19"}],"metadata":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapters\/47\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/pressbooks\/v2\/chapter-type?post=47"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/contributor?post=47"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/integrations.pressbooks.network\/pressbooks101\/wp-json\/wp\/v2\/license?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}