{"id":6257,"date":"2017-10-28T14:56:38","date_gmt":"2017-10-28T14:56:38","guid":{"rendered":"http:\/\/steelwagstaff.info\/?p=6257"},"modified":"2017-10-28T15:02:37","modified_gmt":"2017-10-28T15:02:37","slug":"adding-interactivity-to-web-annotation","status":"publish","type":"post","link":"https:\/\/steelwagstaff.info\/wordpress\/adding-interactivity-to-web-annotation\/","title":{"rendered":"Adding Interactivity to Web Annotation"},"content":{"rendered":"

For the past few years, I’ve been working to improve how content experts at my university can write, develop, and publish open educational resources. Early in 2016, I published my own set of core principles<\/a> for an authoring & publishing tool. I first began developing these principles in the summer of 2015, and after comparing a number of then-extant tools against them later that year, in late 2015, I adopted\u00a0Pressbooks<\/a>\u00a0as the preferred authoring platform for folks who wanted to publish open textbooks and other learning material at UW-Madison, where I work. For the last two years, I’ve spent a lot of time thinking about how to better accomplish the last two principles on that original list, namely how to incorporate multimedia, web annotation, and interactivity into our texts, and how to ensure that we can incorporate these texts into various learning management systems, complete with assessment and learning analytics capabilities.<\/p>\n

Earlier this month, Hugh McGuire<\/a> (Pressbooks’ founder) and I presented at the Open Education conference<\/a> in Anaheim about some recent Pressbooks development work and a roadmap for future possibilities around interactive elements, web annotation, and tighter integration with learning management systems and learning record stores. Our talk, which we called ‘Pressbooks as a Platform: A Vision for the Future of OER Creation<\/a>,’ highlighted some of the exciting work that Hugh and his team have done to develop Pressbooks for educational use cases, as well as some experimental work we’ve done integrating several plugins (like H5P<\/a>\u00a0for interactive elements and Hypothesis<\/a> for web annotation) into the Pressbooks environment and connecting these products directly to our learning management system and a learning record store.<\/p>\n

After our talk, Nate Angell<\/a> from Hypothesis asked me if I’d be willing to write up a blog post describing in more detail what we’re doing with web annotation specifically. And so here we are.<\/p>\n

Making Learning Activities Using Pressbooks, H5P, and Hypothesis<\/h2>\n

I’m a big fan of Hypothesis and the work that the team<\/a> there has done to realize the rich potential of standards-based web annotation<\/a>, and am particularly excited about the many possibilities for annotation in education<\/a>. We started by installing and network activating the Hypothesis WordPress plugin<\/a> on our instance of Pressbooks, which lets any of our authors choose to activate Hypothesis for their books by default, meaning that annotation capabilities would be baked into the book, and not require a specific browser-plugin for readers to add and view others annotations. We’ve written up more detailed instructions for activating and configuring the plugin for our individual authors here<\/a>.<\/p>\n

Once the tools we use (the Pressbooks, H5P, and Hypothesis plugins) were all in place and properly configured, we began making learning activities. It’s probably helpful at this point to share a simple demonstration of the kind of learning activities we’re trying to make. Here’s a sample reading activity<\/a> centered on a short poem by one of my life heroes, the Wisconsin poet Lorine Niedecker<\/a>:<\/p>\n

\"Sample
Sample reading activity (published at https:\/\/wisc.pb.unizin.org\/objectivists\/chapter\/lorine-niedeckers-blackhawk-held\/<\/a>)<\/figcaption><\/figure>\n

In this activity, we’re making heavy use of the annotation pane to explain and explore the poem in greater detail. When we started building the activity, we were really excited by the fact that hypothesis allowed an instructor to provide additional context<\/a> about the author, share visual resources<\/a>, Youtube and Vimeo videos<\/a>, and\u00a0web links<\/a> related to the item under consideration, and prompt discussion by asking questions of the students<\/a>. While we were also able to add interactive H5P activities to the page (like the post poem quiz seen above), we wanted to have the ability to do even more with the annotation pane.<\/p>\n

There were two specific things that we wanted to do that would give us even more flexibility in designing good learning activities. First, we wanted to be able to drop a link to an audio file in the annotation pane and have it turn into a HTML5 audio player (instead of just a link to the file), roughly akin to the way that links for YouTube or Vimeo were automagically turned into embedded videos. Second, we wanted to be able to embed H5P activities (which are simply HTML5 and javascript in an iFrame) into the annotation pane. Doing this would let the instructor connect specific interactions with smaller pieces of the activity in the main page. They could ask questions about individual words, for example, and have a number of smaller, very specific formative assessment activities throughout the page, perhaps in preparation for a longer ‘post poem quiz’ or higher stakes assessment to be concluded after the activity was completed.<\/p>\n

Turning Links to Audio Files into a Lightweight HTML5 Audio Player<\/h2>\n

We loved how quick and simple it is to make an annotation in hypothesis, and love the clean Markdown-based capabilities, including the ability to add hyperlinks to annotations and have video links from YouTube and Vimeo automatically turned into embeds upon publishing an annotation. We wanted to do the same thing with audio files and H5P activities, and so I contacted the development team at Hypothesis a few months ago wondering how we could implement a similar solution for mp3 audio files and embeddable H5P activities. In the case of embeddable audio elements,\u00a0Robert Knight <\/a>from Hypothesis went way above and beyond (thanks again Rob!) in helping me, a relative programming novice, understand the existing code base and how to submit my first pull request<\/a>, which was accepted in August.<\/p>\n

The upshot: now, when you add a link to a published .mp3, .ogg, or .wav file to an annotation in hypothesis, the client will turn that link into a HTML5 audio player!<\/p>\n

Here’s a simple demo:<\/p>\n

\"Annotation<\/a>
The text for an annotation with an audio file. Note the URL for an audio file in the last 3 lines.<\/figcaption><\/figure>\n
\"Annotation<\/a>
Upon publication, the URL with reference to the audio file is automatically converted into an HTML5 audio element with a player, simple controls, and the option to download the file.<\/figcaption><\/figure>\n

Here’s an example of an embedded audio player<\/a> in a hypothesis annotation (it’s taken from the Niedecker poetry reading activity referenced above).<\/p>\n

\n

Embedding H5P Activities in the Annotation Pane<\/h2>\n

We also really love what our Norwegian friends at Joubel<\/a> are doing with H5P<\/a>, and have been enthusiastically developing H5P activities for use throughout the open textbooks and other OER learning materials we’re developing (you can see lots of H5P examples in this Portuguese Language Textbook<\/a> we’ve published).<\/p>\n

When I saw that the existing embedded video capabilities of hypothesis was already turning URLs into iFrames in the annotation pane, I began wondering whether it wouldn’t be possible to do the same thing with our H5P activities, which are published to URLs and which can be embedded using a simple iFrame almost anywhere on the web. Once again, Rob Knight was a champion, and built for us a working prototype<\/a> which takes the embed code produced by a published H5P activity and allows it to be embedded in the annotation pane in Hypothesis (the code for this can be found on GitHub<\/a>). You can learn more about the prototype in the page notes<\/a> Rob wrote.<\/p>\n

We’ve been testing the prototype extensively on a Pressbooks development instance we’re using, and are really excited by all the possibilities that including H5P interactive activities in the annotation layer opens us for education. For now, we’ve added it to our site by adding this line, pointing to Rob’s boot.js file to our site’s header: <script type='text\/javascript' src=\"https:\/\/hypothesis-h5p.s3.us-east-2.amazonaws.com\/boot.js\"><\/code><\/p>\n

Here are two examples (in French, so sorry for you anglophiles out there), of what we’re building with the new capabilities: a close reading activity of a Ronsard sonnet<\/a>\u00a0and another reading activity centered on a passage from Moli\u00e8re’s\u00a0\u00c9cole des femmes<\/em><\/a>.<\/p>\n

Next Steps<\/h2>\n

The most important thing for us would be to help turn Rob’s working prototype into something that was stable, regularized, and in need of less custom configuration. Ideally, I’d like to help sponsor a pull request that adds the H5P embedding abilities into the core Hypothesis client, in much the same way that video and now audio file embeds occur automatically when certain types of links are published in an annotation. We know that there are few sticky security and implementation issues, but we have confidence in the Hypothesis dev team, and are really excited to add this functionality for all Hypothesis users and begin to reap some of the many teaching & learning benefits of having additional interactivity in a website’s annotation layer.<\/p>\n

Featured image by Provenance Online Project<\/a> <\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

For the past few years, I’ve been working to improve how content experts at my university can write, develop, and publish open educational resources. Early in 2016, I published my own set of core principles for an authoring & publishing tool. I first began developing these principles in the summer of 2015, and after comparing […]<\/p>\n","protected":false},"author":1,"featured_media":6266,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_themeisle_gutenberg_block_has_review":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"I've written a brief summary of some cool stuff we've been doing with annotation & open publishing: \"Adding Interactivity to Web Annotation\"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[2,891],"tags":[444,908,898,899,27,907],"class_list":["post-6257","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-education-technology","tag-higher-education","tag-hypothesis","tag-open-educational-resources","tag-pressbooks","tag-techmology","tag-web-annotation"],"featured_image_src":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/10\/9707006091_a6e3d87bd5_b_Marginalia.jpg?resize=600%2C400&ssl=1","author_info":{"display_name":"Steel Wagstaff","author_link":"https:\/\/steelwagstaff.info\/wordpress\/author\/steel\/"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/10\/9707006091_a6e3d87bd5_b_Marginalia.jpg?fit=1024%2C713&ssl=1","featured_image_src_square":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/10\/9707006091_a6e3d87bd5_b_Marginalia.jpg?resize=600%2C600&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pd6z5D-1CV","jetpack-related-posts":[{"id":6108,"url":"https:\/\/steelwagstaff.info\/wordpress\/2016-the-year-in-oer-at-uw-madison\/","url_meta":{"origin":6257,"position":0},"title":"2016: The Year in OER at UW-Madison","author":"Steel Wagstaff","date":"January 19, 2017","format":false,"excerpt":"2016: The Year in OER at UW-Madison OER STRATEGIC FRAMEWORK On an institutional level, the big news at UW-Madison in 2016 was the publication of the Open Education Resources (OER) page and strategic framework (pdf) on the Educational Innovation (EI) website at the beginning of the Fall 2016 semester (full\u2026","rel":"","context":"In "Blog"","block_context":{"text":"Blog","link":"https:\/\/steelwagstaff.info\/wordpress\/category\/blog\/"},"img":{"alt_text":"window with 'open' in neon letters","src":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/01\/2237305969_a4b01298e2_b.jpg?fit=1024%2C768&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/01\/2237305969_a4b01298e2_b.jpg?fit=1024%2C768&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/01\/2237305969_a4b01298e2_b.jpg?fit=1024%2C768&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/01\/2237305969_a4b01298e2_b.jpg?fit=1024%2C768&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6272,"url":"https:\/\/steelwagstaff.info\/wordpress\/getting-started-with-pressbooks-a-guide-for-higher-education-use-cases\/","url_meta":{"origin":6257,"position":1},"title":"Getting Started with Pressbooks: A guide for Higher Education use cases","author":"Steel Wagstaff","date":"November 9, 2017","format":false,"excerpt":"For the past few years, I\u2019ve been helping faculty and other subject experts at UW-Madison develop and publish openly licensed textbooks and other learning activities using Pressbooks, free and openly licensed software which was originally conceived by Hugh McGuire as a way to extend WordPress in order to publish electronic\u2026","rel":"","context":"In "Education Technology"","block_context":{"text":"Education Technology","link":"https:\/\/steelwagstaff.info\/wordpress\/category\/education-technology\/"},"img":{"alt_text":"pressbooks organization interface","src":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/11\/Screen-Shot-2017-11-09-at-12.35.49-PM.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/11\/Screen-Shot-2017-11-09-at-12.35.49-PM.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/11\/Screen-Shot-2017-11-09-at-12.35.49-PM.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/11\/Screen-Shot-2017-11-09-at-12.35.49-PM.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/11\/Screen-Shot-2017-11-09-at-12.35.49-PM.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/11\/Screen-Shot-2017-11-09-at-12.35.49-PM.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":4815,"url":"https:\/\/steelwagstaff.info\/wordpress\/core-principles-etext-authoring-tool\/","url_meta":{"origin":6257,"position":2},"title":"Core Principles for an eText Authoring Tool","author":"Steel Wagstaff","date":"March 18, 2016","format":false,"excerpt":"eText Authoring at UW-Madison About a year ago, I began thinking seriously about an eText authoring platform that could be used to write and publish openly-licensed texts. I work at a large research university in the American midwest, which means that a large percentage of my colleagues are engaged directly\u2026","rel":"","context":"In "Education Technology"","block_context":{"text":"Education Technology","link":"https:\/\/steelwagstaff.info\/wordpress\/category\/education-technology\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2016\/03\/23806298056_725f168eb4_k.jpg?fit=987%2C775&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2016\/03\/23806298056_725f168eb4_k.jpg?fit=987%2C775&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2016\/03\/23806298056_725f168eb4_k.jpg?fit=987%2C775&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2016\/03\/23806298056_725f168eb4_k.jpg?fit=987%2C775&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6400,"url":"https:\/\/steelwagstaff.info\/wordpress\/advice-for-college-teachers-moving-online-quickly\/","url_meta":{"origin":6257,"position":3},"title":"Advice for College Teachers Moving Online Quickly","author":"Steel Wagstaff","date":"March 14, 2020","format":false,"excerpt":"A lot of teachers I know and love (including one I live with) are scrambling right now to rapidly transition their in progress face to face classes to online instruction. I don't teach college classes anymore, but I've spent more than a decade helping college teachers improve the learning experience\u2026","rel":"","context":"In "Blog"","block_context":{"text":"Blog","link":"https:\/\/steelwagstaff.info\/wordpress\/category\/blog\/"},"img":{"alt_text":"Capybara at the Madison Zoo","src":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2020\/03\/October_2015_zoo_010.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2020\/03\/October_2015_zoo_010.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2020\/03\/October_2015_zoo_010.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2020\/03\/October_2015_zoo_010.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2020\/03\/October_2015_zoo_010.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6363,"url":"https:\/\/steelwagstaff.info\/wordpress\/thoughts-on-licensing-why-i-prefer-cc-by-licenses\/","url_meta":{"origin":6257,"position":4},"title":"Thoughts on Licensing: Why I Prefer CC-BY\u00a0Licenses","author":"Steel Wagstaff","date":"October 20, 2018","format":false,"excerpt":"Robin DeRosa recently posted an open question about CC licensing on Twitter that got me thinking: https:\/\/twitter.com\/actualham\/status\/1052908074263035905 The subsequent conversation has been fascinating and thought-provoking. Here are my initial thoughts: I choose to use CC-BY licenses for almost all of my work that I want to make available to others.\u2026","rel":"","context":"In "Education Technology"","block_context":{"text":"Education Technology","link":"https:\/\/steelwagstaff.info\/wordpress\/category\/education-technology\/"},"img":{"alt_text":"landmark locator","src":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2018\/10\/landmark_locator.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2018\/10\/landmark_locator.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2018\/10\/landmark_locator.jpeg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2018\/10\/landmark_locator.jpeg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2018\/10\/landmark_locator.jpeg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6132,"url":"https:\/\/steelwagstaff.info\/wordpress\/making-a-personal-website-a-guide-for-grad-students-and-other-academics\/","url_meta":{"origin":6257,"position":5},"title":"Making a Personal Website: A guide for grad students and other academics","author":"Steel Wagstaff","date":"February 19, 2017","format":false,"excerpt":"I currently work as an educational technology consultant at a large Midwestern research university. Most of the people I work with are humanities\/social science grad students or faculty. One of the most common questions I get asked is how to build a website. I\u2019ve heard it so often, helped so\u2026","rel":"","context":"In "Blog"","block_context":{"text":"Blog","link":"https:\/\/steelwagstaff.info\/wordpress\/category\/blog\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/02\/15273343947_855a5a9d3a_b_network-boston-ivy-leaf.jpg?fit=1024%2C683&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/02\/15273343947_855a5a9d3a_b_network-boston-ivy-leaf.jpg?fit=1024%2C683&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/02\/15273343947_855a5a9d3a_b_network-boston-ivy-leaf.jpg?fit=1024%2C683&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/steelwagstaff.info\/wordpress\/wp-content\/uploads\/2017\/02\/15273343947_855a5a9d3a_b_network-boston-ivy-leaf.jpg?fit=1024%2C683&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/posts\/6257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/comments?post=6257"}],"version-history":[{"count":5,"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/posts\/6257\/revisions"}],"predecessor-version":[{"id":6270,"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/posts\/6257\/revisions\/6270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/media\/6266"}],"wp:attachment":[{"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/media?parent=6257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/categories?post=6257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/steelwagstaff.info\/wordpress\/wp-json\/wp\/v2\/tags?post=6257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}