{"id":4647,"date":"2024-02-01T08:59:53","date_gmt":"2024-02-01T16:59:53","guid":{"rendered":"https:\/\/blogs.reed.edu\/ed-tech\/?page_id=4647"},"modified":"2024-02-01T08:59:53","modified_gmt":"2024-02-01T16:59:53","slug":"h5p-creating-find-multiple-hotspots-content","status":"publish","type":"page","link":"https:\/\/blogs.reed.edu\/ed-tech\/creating-and-editing-h5p-content\/h5p-creating-find-multiple-hotspots-content\/","title":{"rendered":"H5P: Creating Find Multiple Hotspots content"},"content":{"rendered":"\n<p>Here&#8217;s a help video that can walk you thru the process for creating and editing H5P content for the Find Multiple Hotspots content module; otherwise, follow the help documentation below.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/reedcollege.hosted.panopto.com\/Panopto\/Pages\/Embed.aspx?id=3b006d2b-c216-4467-9939-ae3f0176c660&amp;autoplay=false&amp;offerviewer=false&amp;showtitle=true&amp;showbrand=false&amp;captions=false&amp;interactivity=none\" height=\"405\" width=\"100%\" style=\"border: 1px solid #464646;\" allowfullscreen=\"\" allow=\"autoplay\"><\/iframe>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Example workflow for the Find Multiple Hotspots content type<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"254\" height=\"1024\" src=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-menu-dashboard-254x1024.jpg\" alt=\"\" class=\"wp-image-4127\" style=\"width:64px;height:256px\" srcset=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-menu-dashboard-254x1024.jpg 254w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-menu-dashboard.jpg 319w\" sizes=\"auto, (max-width: 254px) 85vw, 254px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Follow the above steps to access and create an <\/li>\n\n\n\n<li>Add a title that will describe your content.<br><img loading=\"lazy\" decoding=\"async\" width=\"1140\" height=\"717\" class=\"wp-image-4124\" style=\"width: 80%; height:auto\" src=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create.jpg\" alt=\"\" srcset=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create.jpg 1140w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create-300x189.jpg 300w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create-1024x644.jpg 1024w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create-768x483.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/li>\n\n\n\n<li>Add the background image you would like to use. <em>The image will need to be on your computer, not in your wordpress media library.<\/em><\/li>\n\n\n\n<li>Click on the hotspots tab. <\/li>\n\n\n\n<li>Enter a task description, if desired.<\/li>\n\n\n\n<li>Enter a hotspot name, if desired.\n<ul class=\"wp-block-list\">\n<li>Choose either the circle or rectangle shape, and move it to where you want the hotspot to be on your image.<\/li>\n\n\n\n<li>You can add a message to your viewer to say they have found the hotspot.<\/li>\n\n\n\n<li>Repeat these steps for as many hotspots as you want to add.<br><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"1083\" class=\"wp-image-4126\" style=\"width: 100%; height:auto\" src=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots.jpg\" alt=\"\" srcset=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots.jpg 808w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-224x300.jpg 224w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-764x1024.jpg 764w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-768x1029.jpg 768w\" sizes=\"auto, (max-width: 808px) 85vw, 808px\" \/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>After you are done, click on the blue Create button at the top right.<br><img loading=\"lazy\" decoding=\"async\" width=\"1140\" height=\"717\" class=\"wp-image-4124\" style=\"width: 100%; height:auto\" src=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create.jpg\" alt=\"\" srcset=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create.jpg 1140w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create-300x189.jpg 300w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create-1024x644.jpg 1024w, https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-hotspots-create-768x483.jpg 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/li>\n\n\n\n<li>Copy the shortcode on the top right Shortcode box, which will looks something like this: <br><img decoding=\"async\" class=\"wp-image-4128\" src=\"https:\/\/blogs.reed.edu\/ed-tech\/files\/2020\/03\/h5p-shortcode-closeup.jpg\" alt=\"\"><\/li>\n\n\n\n<li>paste this code into an empty block area of any page or posting that you want to publish your H5P content.<\/li>\n<\/ul>\n\n\n\n<p>An example of using multiple hotspots can be seen below.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a help video that can walk you thru the process for creating and editing H5P content for the Find Multiple Hotspots content module; otherwise, follow the help documentation below. Example workflow for the Find Multiple Hotspots content type An example of using multiple hotspots can be seen below.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":4278,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[124],"tags":[],"class_list":["post-4647","page","type-page","status-publish","hentry","category-h5p"],"_links":{"self":[{"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/pages\/4647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/comments?post=4647"}],"version-history":[{"count":1,"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/pages\/4647\/revisions"}],"predecessor-version":[{"id":4648,"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/pages\/4647\/revisions\/4648"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/pages\/4278"}],"wp:attachment":[{"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/media?parent=4647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/categories?post=4647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.reed.edu\/ed-tech\/wp-json\/wp\/v2\/tags?post=4647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}