Using H5P to Create HTML5 Open Educational Resources

In honor of Open Access Week (October 20 – 26, 2014), which kicked off a few days ago, I want to write a bit about a great tool H5P that I use to create HTML5 Open Educational Resources (OER).


I have been using H5P throughout the development of the online information literacy tutorial that just launched at Western at the start of fall quarter. This tutorial really couldn’t have come together without H5P. Or at least it would have been much less interactive and much more difficult to update and make variations.

Big Dreams

In developing this online tutorial, I quickly realized that there was a big gap between what I wanted to create – namely interactive online lessons – and what was possible with our library’s Drupal setup. The big vision for this project was creating an online platform for our librarians to easily create attractive, engaging, interactive lessons. Of course we would need to add text, video and photos to lesson pages, but we also would need to create and maintain presentations and questions embedded into the same pages. I had created a list of system requirements for my tutorial system, and held numerous meetings with our IT department, but the gap between what we needed and what was possible just wouldn’t go away. There were lots of good reasons for this, and some not so good reasons.

Screenshot of H5P websiteWe have limited resources and limited technical support available, yet we wanted to create a suite of online lessons  built with openness in mind from the beginning. For this project, open means the lessons will be Creative Commons licensed, use readily available OERs where appropriate, be built on open platforms, and be easily reused and remixed by others in and out of our organization. I’m a big fan of OERs and I am amazed at the willingness of the community to share their hard work, but I have also run into barriers to adopting OERs to alternative platforms. Or worse yet, quasi-OERs created with proprietary software – like tutorials built with Articulate Storyline. You may have CC licensed it, but how is someone else supposed to reuse it without buying that software?

Then I found this tool H5P, and although it doesn’t address every single one of my particular needs, it gets me about nine-tenths of the way there, effectively making the gap something I can leap right over.


I highly recommend checking H5P out and considering what it could do for your tutorials and your online instruction. There are a lot of examples of various content types on the H5P site and you can also see it in action throughout Western Libraries‘ tutorial LIT that I developed. For LIT, I mostly used the presentation content type, question sets and flashcards, but I am excited to figure out great uses of other content types in the future. I really think this is a great tool and it’s future looks really bright. I would love to see this integrated into LibGuides. They would really compliment each other so well.

Let me know if you have questions about this tool or need help giving it a try. I would love to hear how you want to use this. Have you found an innovative use of H5P or a similar tool?

Canva + ThingLink = Awesome

Earlier this week I led a Tech Sandbox on these two tools for everyone in our library. The session went pretty well despite some running into issues with the computers in the labs. Everyone seemed to really latch onto the usefulness of ThingLink in their work. Here is an instructional example I created using both tools to explain what to look for in database results.

Canva was a little more difficult for some to connect to their work, which I’m not totally surprised by. Prticipants seem to think that others are better at taking care of graphic design and they don’t think that they produce much graphic content. In the future I will try to find ways to highlight some of the graphic work that they are already doing. Maybe I can even find examples for each participant from their LibGuides and other materials. If I knew who was going to participate in advance. Then we could focus on revising these works with Canva. My session plan included directions for working on work-related graphics for the activity, but most were playing without much direction. I’d like to harness that playfulness, but find authentic ways to give it some direction.

With that in mind, my emerging thought is to put together post-session activities that require participants to apply their skills to a graphic project that actually could be used in their work. I will also offer digital badges for completion of these activities. There is some rising interest in badges on our campus and in our library, but badges are still a bit mysterious to many. This will let us see them in action. Plus the Tech Sandboxes will be a low stakes way for me to work out the kinks of badging for professional development and workshops. I hope this will lead to build out a badging ecosystem offered through the library and our Learning Commons partners for students, faculty and staff.

Menu Concept

Today I had some good meetings about my online information literacy lessons project. Someday I will have to write a longer reflection piece on where the project has come thus far, but until then I will offer views into where the development process is currently.

Working from some drawings on paper and whiteboard, I put together this poster to communicate this menu concept. This is mainly sketching out the functional side.

Chart of lesson organization and design concept


I am imagining this working as a top level navigation that will take the learner into a lesson. Currently I would like to first present the learner with just three options from the top level (numbered 1). These three lessons correspond to the Learning Commons workshop series Integrating Academic Literacies: Research and Writing that we have launched this past year at Western Washington University. If the user selects Finding and Using Sources the second level of lessons will expand below, and same goes for the third level that expands when Finding Sources is selected.


The workshop that correspond to the top level are the product of collaborative efforts of partners within our learning commons, particularly the Writing Center, Writing Instruction Support and Western Libraries. Instructors can sign up to bring their class to these workshops, but each workshop is only offered during certain times of the quarter to make sure that students are being reached at appropriate times. This model has been working really well and we have seen growing demand, frequently for the whole sequence. As this workshop model emerged and has developed I have tried to incorporate the sequence and the language into my design so that this tutorial can best compliment and extend the what students are learning in the workshops.


Lessons will have their own lesson-level navigation. Here is a design for that. Note that I don’t actually want to have two vertical menus next to each other. I mocked this up this way to partially to point out an issue that we will have if we mix a lesson-level navigation with presentations that have their own menus. This also has helped us identify that the chapters that make up a lesson should be grouped to clean up the menu, although we had a tough time thinking of concise titles for possible groupings.

Lesson-level menu design