Down the rabbit hole: H5P content in your storymaps

[TomBaker]

H5P -- or HTML 5 package -- is used to create interactive content on the web. It's a tool of choice for instructional designers today because the format is flexible (think survey questions to interactive pictures and videos) and can include integration (LTI) with some of the most popular learning management systems.

The storymap below includes how to create H5P content, how to host it, and the value of going to the trouble.  This post was inspired by trying to design embedded self-assessment strategies for storymaps.  In fact, if all you want to create is an embedded self-assessment, the aforementioned blog describes a much simpler and more efficient way of building this content today.

H5P interactive content in ArcGIS storymaps

Image: Photo by Meghan Hessler on Unsplash 

[Shelley_JMU_Whitmeyer]

Hi Tom, 

I am creating a Story Map with H5P objects.  When I embed the objects they appear as "cards," rather than the actual objects.  I'd like the students to be able to interact with the learning object within the Story Map.  The same way the H5P objects are embedded in your Story Map (Thinking about H5P interactivity in ArcGIS storymaps). As a card, the students need to click the card to open another link, answer the H5P questions, and then return to the Story Map.  

Here is the link to my story map: https://arcg.is/0u1quH0  The questions are under the "location" section.  

Your advice is appreciated. 

-Shelley

[TomBaker]

Hi Shelley.

Embedding content in storymaps has some "rules". By that I mean embedded content may display to the user as live content or a clickable card - sometimes this decision is made for you based on the nature or source (URL) of the content.  Sometimes the decision is made for you depending on where in the storymap you are trying to embed content.

In your example, embedding HP5 content in a sidecar in the narrow, left pane will produce the card. For HP5 content, I think there are two ways around this.  1.) Embed the content outside of a sidecar, int he main timeline of the storymap or 2.) embed the content in the larger, right-side area of the sidecar.

I think the storymap developers made this decision to help ensure storymap content rendered well across multiple platform types - including mobile.

You can see my tests here, if helpful.

If you have more questions please don't hesitate to email me at baker @ esri.com

Good luck.

Tom

[Shelley_JMU_Whitmeyer]

Thank you!  This solved the problem. 

-Shelley