SPIKE: Embedding H5P (iframes) activities in the annotation pane

[SteelWagstaff]

I'd like to figure out the best way to allow embedding of H5P activities with the hypothes.is annotation pane. H5P are interactive HTML5 activities that can be embedded anywhere on the web through iFrames--there are now more than 30 available activity types. Currently, H5P activities can be published using a CMS (most often this is done with WordPress, Drupal, or Moodle), and published activities include a button which allow users to grab embed code which allows them to embed the activity wherever they like. H5P is open source software, and a group of 5 developers based in Tromsø, Norway actively maintain several GitHub repos here: https://github.com/h5p.

Here's an example of what one of the quiz (question set) H5P activities looks like when embedded in a website: (to see this activity in the wild, visit https://h5p.org/question-set)

When a user clicks the embed button on an activity, they're given the embed code for a full iframe, which can be embedded directly onto a website of their choice.

The embed code also includes a reference to a resizer javascript file which allows the activity be dynamically resized as a user proceeds through the content. This script lives at https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js

The publication of H5P activities follows predictable patterns for both WordPress and Drupal. Within WordPress, each activity will be published at https://genericname.com/wp-admin/admin-ajax.php?action=h5p_embed&id=### [with the # being replaced by the activity's unique id number]
In Drupal, the pattern is simpler, but similarly predictable: https:/genericname.com/h5p/embed/###

I've made an initial pass at adding iFrame embed support for these H5P activities, (see https://github.com/hypothesis/client/compare/master...SteelWagstaff:h5p-embed#diff-ebb182b364263ee6696a8b842060cc66), but as I see it, I still have a couple of problems:

1. When an H5P user clicks the embed code, they're given a full iFrame. In order for this embed routine to work properly, they need to extract just the src from the iFrame and paste into hypothes.is. hypothes.is then reconstructs the iFrame, which is a little roundabout and tedious for the user. One way to solve this would be to add a 'source' button to the H5P activity GUI, so that users could see and copy just the src instead of the full iFrame. Another way would be for hypothes.is to allow the iframe to be pasted and created rather than the src link (is this possible?)
2. The javascript source file I'm appending now gets blocked because it's being hosted elsewhere (on the h5p site). The error message I get is "Refused to load the script 'https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". I think there's a good workaround for this, but I'm not sure what best practices are for this.

Ideally, users would be able to simply grab the iFrame embed code from an H5P activity and paste into hypothes.is and have their H5P activity appear in the pane, complete with dynamic resizing. I know this might not be as simple as it sounds, but that's the optimal desired behavior.

For use, the most interesting use case would be in supporting educational activities, particularly supporting close reading. Here’s one example of a context in which we'd love to make use of H5P in the annotation pane: https://wisc.pb.unizin.org/objectivists/chapter/lorine-niedeckers-blackhawk-held/

If we could put quizzing or other interactive elements into the annotation pane on a text like this, we’d be able to do some really interesting responsive learning stuff, and have embedded quizzing/discussion in an open environment.

[robertknight]

From a discussion I had with @SteelWagstaff on Slack, my understanding is that the use case is to be able to add interactive activities into annotations, such as quizzes, which are authored using the existing H5P platform.

The most convenient workflow would be something like this:

1. User (say a teacher) creates some activity in H5P (eg. a quiz)
2. They click the Embed button at the bottom of the activity and copy the HTML code from the box that appears.
3. They paste the code into an annotation then click “Post”
4. The interactive content appears in the annotation

From an implementation point of view, I think we probably could find some way to allow entering HTML which includes iframes from other origins. We couldn't allow use of scripts from arbitrary domains, so we'd need to import the resizer code into our client or find another way to achieve what it does, assuming it is valuable enough to need it at all.

One question that we'd have to ask ourselves is what potential there is for abuse here and if/how we could mitigate that. By abuse, I'm thinking of:

• Tracking the user
• Autoplaying video or audio (perhaps browsers will block this already)?
• Disrupting the functionality of the client in any way
• Phishing (?)

One possible solution would be that we ignore any attributes set on <iframe>s pasted into an annotation except the src and add our own set of sandboxing attributes to lock down the permissions as far as the platform permits.

[SteelWagstaff]

Thanks for the elegant summation, Robert. In this case, the solution you proposed (discarding all attributes except for src) would be just fine. The resizer script is fairly important for H5P activities because the size of the iFrame can change from action to action (some of the activities present immediate feedback which expands the pane, for example), so we would want to find some way to include or reference it, if possible. I don't know if the H5P developers have any thoughts/ideas, but I believe they'd be interested in seeing their activities integrated into web embeds generally.

[fnoks]

I am one of the developers in the H5P core team, which love to see new ways of using/integrating H5P.

@robertknight : Your comment makes sense to me. When it comes to resizing, I think that is needed to make H5P work ok, since there are many cases where H5P resizes itself because of its interactive nature. The H5P iframe uses postmessage to inform the parent page that the size has changed. The resize script is found here: https://github.com/h5p/h5p-php-library/blob/master/js/h5p-resizer.js. You could copy it into the hypothesis client if you want to.

[robertknight]

I've got a prototype of H5P support in my fork at https://github.com/robertknight/client/tree/h5p . As of yet, we haven't decided whether this is something that we want to include in the core Hypothesis client.

There is a demo running at https://hypothesis-h5p.s3.us-east-2.amazonaws.com/index.html . Feel free to have a play around and see what you can do with it. Be aware that this isn't an official Hypothesis thing, just a prototype I put up, the link might change in future etc. etc.

[SteelWagstaff]

Robert--that looks great, pretty much exactly what we were hoping for. If you'd like me to clone your fork and use it for a more detailed mockup, I could do that, but I can also just add a few extra (fake) examples to your demo.

[robertknight]

Hi @SteelWagstaff - You can use the demo client on other pages too by adding the boot.js script tag (see the source of https://hypothesis-h5p.s3.us-east-2.amazonaws.com/index.html) to any page. This is useful if you want to try it out in the context of a particular document.

[dsgraham81]

Hello I am one of the developers working with @SteelWagstaff on this project. One issue has come up that I wanted to see if others had ideas.

We use the xApi statements that are being created by the H5P plugin https://h5p.org/documentation/x-api and it appears that when they are embedded into the annotation pane, they aren't being created.

Any thoughts on if we could get these to fire and also get them propagated to the parent of the iframe?

[robertknight]

it appears that when they are embedded into the annotation pane, they aren't being created.

Do you mean that code listening for these events in the iframe displaying the H5P content does not get triggered?

Any thoughts on if we could get these to fire and also get them propagated to the parent of the iframe?

Code inside the iframe can get a reference to the top-level window via window.top and communicate with it via postMessage.

[SteelWagstaff]

@robertknight or @judell Any new thoughts on whether the prototype that Robert built for us at https://github.com/robertknight/client/tree/h5p is something you'd be willing/interested to add to the core client? We're still very interested in this ...

[paradisojr]

@robertknight or @judell For what it's worth, I'd like to second that. I'm not quite as far along as @SteelWagstaff, but I have played around with the prototype and would be very interested in seeing it become part of the core client, as this enhanced functionality would certainly encourage faculty buy-in at my university. Best, - Jim

[SteelWagstaff]

FYI, the issue referenced by @dsgraham81 on August 31 appears to be address by this change which should be included in the next release of the H5P WordPress plugin: https://github.com/h5p/h5p-wordpress-plugin/issues/58#issuecomment-337906304. Still very interested to see @robertknight's prototype become part of core hypothesis before the start of our January semester, if possible?

[nolthafer]

@robertknight, @judell - I would like to THIRD the request to have this plug-in integrated into Hypothes.is core. What requests or processes are normally followed to advance a request of this nature w/ the Hypothe.is team?

[ajpeddakotla]

In order to put this feature into the core client, we need to consider the following (from a discussion w/ @robertknight @SteelWagstaff)

1. Are there any ways that we want to lockdown this ability for security reasons?
2. We already have have a problem where annotations on activity pages don't have the same features they have on the client. Will this be enabled (or how will it be enabled in activity pages in the future)?
3. Can this be a more general feature for so that we can embed any iframe into the annotation body (and for all intents and purposes, the answer is yes).

[judell]

Can this be a more general feature for so that we can embed any iframe into the annotation body (and for all intents and purposes, the answer is yes

The answer is indeed yes, and there is an additional opportunity to transmit the id of the annotation that embeds the iframe as a URL parameter. That enables an arbitrary web app running in the iframe to read and (if authorized) write back to the annotation.

I've prototyped that, and here is one high-value use case for it: https://misinfocon.com/how-web-annotation-can-help-readers-spot-fact-checked-claims-ccbf9246dd68

There are many others. General-purpose iframe embedding is the engine of the LTI ecosystem. It can and should also enable an ecosystem of annotation apps that anchor to selections.

[robertknight]

I've written up some notes on use cases and implementation concerns for this to try to answer Arti's questions above about what it might take to include this out of the box in Hypothesis: https://gist.github.com/robertknight/720013d5fa1be0f04b955644b7776485

[SteelWagstaff]

Hi @ajpeddakotla, @robertknight, @judell and others--any update on whether this might move into the core H client? We're about to start a new semester, and would love to move off of Rob's prototype and into standard Hypothesis land as soon as possible (but with the ability to embed H5P activities).

[ajpeddakotla]

Hey @SteelWagstaff - unfortunately no updates at this time. We've got some work in front of when we might be able to get to this, but I'll see what I can do to prioritize it.

[judell]

Are there requirements met by the production Hypothesis client that are not met by Rob's prototype?

On Mon, Aug 13, 2018 at 9:20 AM, Steel Wagstaff [email protected] wrote:

Hi @ajpeddakotla https://github.com/ajpeddakotla, @robertknight https://github.com/robertknight, @judell https://github.com/judell and others--any update on whether this might move into the core H client? We're about to start a new semester, and would love to move off of Rob's prototype and into standard Hypothesis land as soon as possible (but with the ability to embed H5P activities).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hypothesis/client/issues/509#issuecomment-412576627, or mute the thread https://github.com/notifications/unsubscribe-auth/AAC1rUdIwFkqQB66EbVNARnJMwd7YT4Bks5uQac8gaJpZM4OldPu .

[SteelWagstaff]

@judell -- I'm not sure if I fully understand your question, but I believe that Rob synced up his prototype with the production/master version of the H client in late May, meaning that it only lacks additions made to core since that time (https://github.com/hypothesis/client/compare/h5p...hypothesis:master). Rob would know more about that than I do, however. I also wanted to note that in addition to the ability to add H5P activities, Rob also added a configuration option to his fork that allows us to expand long annotations by default that we'd very much like to use in the core client. See: https://github.com/robertknight/client/commit/794b4779b763980aef41983ce52ec03a1645e5ec for details on implementation. I'm developing a branch of the WP plugin that adds it as an option right now, in fact, and could have a PR ready fairly quickly if this was added as one of the default configuration settings in the core client.

[SteelWagstaff]

Hi good Hypothesis folks (@ajpeddakotla, especially) -- any updates on this issue/request or anything I can do to expedite 1) adding support for H5P iFrames and 2) adding a configuration option expanding long annotations to H core?

[ajpeddakotla]

@SteelWagstaff we should be clear to merge this in a couple of sprints from now. Just cleared out the deck from GDPR work, and now digging out from under that. I'll let you know when we are closer to the date. Thank you for your patience on this!

[klemay]

UW-Madison is currently having trouble with their publisher group, which I believe is related to them using the custom H5P fork.

The Zendesk ticket is here: https://hypothesis.zendesk.com/agent/tickets/3307

Now that their publisher group is set up, the Public layer is hidden from unauthenticated users as expected. However, logging in to the client does not make the Public layer visible.

The most obvious solution would be to move UW-Madison to the core client, but I know they can't do that until this is merged and resolved. @ajpeddakotla do we have an estimate of when we'll be able to get this into a sprint?

(Note: there is also the possibility of making changes to the H5P fork to get this working, but my instinct is that it makes more sense to work on this issue and get them over to the core client. That way we avoid conflicts with the H5P fork + new features popping up in the future)

[SteelWagstaff]

I'd love to do anything I can to help figure out a way to merge this functionality into the core client. I don't know where the team is at re: further thinking about Rob's gist, but I know that we (and dozens of other interested users) would be ready to throw you some kind of huge online party if/when this gets done.

[klemay]

Someone from another institution, using the LMS app for Moodle, asked for this today: https://hypothesis.zendesk.com/agent/tickets/3489

[SteelWagstaff]

WE ARE LEGION ;-) (oh my--was thinking of the biblical/literal meaning as a joke -- like there are lots of us who are hungry for this, had no idea this had been borrowed as a slogan by anonymous)

[SteelWagstaff]

@ajpeddakotla Any idea if this might make it on to the roadmap soon? Not trying to nag, but I do think about how exciting it'd be to have this as a possibility with the core H client each time a new semester is about to begin ...

[ajpeddakotla]

@SteelWagstaff right now our main priority is getting grading capabilities for annotations made within in the LMS. We've got a lot of work to do there. Right now H5P is in our mid-term column on our roadmap, so we are tracking it. I'll let you know when it gets in the near-term column!

[SteelWagstaff]

Thanks Arti! Appreciate your candor and quick response. Good luck with the LTI outcomes work--happy to see this whenever it moves into your near-term priority list.

[klemay]

Note to our developers, and to those who have been following this issue:

We've added this to our list of contenders for our first sprint of 2020. Please note that this is a spike, meaning we're going to scope out what it would take to get this into the current version of our product, rather than a commitment to deliver this feature within that first sprint.

[SteelWagstaff]

Amazing news! If there's anything that would be useful to provide from the user community in terms of requirements gathering or use case testing, I'd be more than happy to do what I can.