Create QR Codes with H5P

I don’t know about you, but when I really need slides for a presentation that I have to give, then I use H5P Course Presentation. Sometimes I want to include some (impressing :-)) interaction with the audience, sometimes just because I like H5P although other software might be more suitable for that particular job. I also often put QR Codes on some slides to allow accessing some complementary material, some online service such as online voting that I include into my performance, etc. However, I had to use an external service to create the QR Codes, download the image, upload it to the presentation …

Alas, not anymore …

You’re right, I created an H5P content type that you can feed text into and it will give you a corresponding QR Code. Pretty neat if you put the library into Course Presentation. But it can even make sense to put one on your website. Really? On first thought, it might seen strange to have a QR Code on a website. Why place it there if people obviously are already online and could simply click on a link?

Well, many people still print web pages, and the QR Code could provide them with an easy way to return. But there’s more. QR Codes cannot only hold links to websites, but any text. Given the right format, you can present contact information and allow users to put them into their address books directly, there are ways to initiate mobile payment, you can start a call directly, you can open a location on Google Maps, you can put event information into a calendar, you can install an app, etc. Can be pretty useful if you’re using some web resource or H5P Course Presentation to present things on-site and want people to access something on the web, leave your contact info, …

So, if there’s a chance someone is browsing your website on a desktop, but you want to trigger something that rather requires a smartphone, it might also be a good idea to offer a QR Code.

Just try these examples (you can play around with size, positioning and color, too)…

Currently supported

  • contacts: add a contact to the address book
  • events: add an event to the calender
  • email address: send an email
  • location: open a maps app to show the location
  • phone number: call a number
  • SMS: send a text message
  • text: display any text (can be used as a workaround for other services)
  • url: open a web page

[Update] I assume I’ll add some “touch to reveal content” feature shortly, so you can at least see what’s “hidden” behind the code if you can’t scan it.

[Update] There’s now a first draft of the “touch to reveal content” feature that I will make nicer – might be done already if you read this 😉

[Update] I completed the content type and asked for a review, so it can be released officially.

Please give feedback!

I hope you will soon be able to do that officially using H5P. Integrating it into Course Presentation could also make sense and should just take around an hour to do. But maybe there’s something that you’re missing right now? Please let me know!

Feel free to use the source code: https://github.com/otacke/h5p-kewar-code and have a look if you might want to become one of my patrons on patreon.I

p. s.: If you wonder why I called the content type KewAr Code … The word QR Code is a registered trademark of DENSO WAVE and I while it seems to be common to ignore that, I don’t want to take chances :-/

An unexpected demo

If you are old enough, then you may remember text adventures and game books. And if you are a little younger, than you may know Escape Rooms or even have visited one. All of them can be really entertaining, and by tweaking H5P Branching Scenario just a little bit, you can use it to create your own adventures! Have a look!

What I customized

There was a need for new features at Technische Hochschule Lübeck, Germany. For some use cases, they required to allow going backards within a Branching Scenario. Well, that’s possible as you will have noticed in the demo content. You can even add a back button to each single content or branching question individually if you want to. The code is out there already.

The other feature that was required is an option to prevent progression to the next content until the current one has been “completed”. I put “completed” in quotes, because the notion of what completed means may vary from content to content. For now, it can be used for Video and Interactive video and will require the user to watch the last second before he or she can progress. Similarly, in Course Presentation, the final slide may have to be reached first. The code is out there, too.

Wait a minute, there was a Fill in the Blanks interaction, and you had to complete that as well in order to continue. Correct! I hacked it in there quickly. It’s not difficult to add this one or other content types and to make them insist on a successful completion, but it will require some free time and thorough testing by a third party ideally. I will attend an “OERcamp Werkstatt” early in November, which is kind of a hackathon for openly licensed content. Maybe some people will join for reviewing the code and beta-testing there.

Cup bearing the label "The adventure begins"

What you could do with it

So, what is it good for? You could create virtual adventures with Branching Scenario, obviously. If done well, I assume those might be a little more engaging than just presenting exercises to students. Also, letting students research things on the web to find an answer might be an interesting twist beyond recall questions.

But isn’t it a little boring to complete those adventures all on your own? No problem! Why don’t you design two (or more) adventures that are intertwined? Students would have to solve the puzzles on their own, but hints or solutions could be hidden within the adventures of other students. I am catching a glimpse of cooperative learning with H5P …

But isn’t it boring to stare at a screen all day? Well, feel free to integrate in into on-site settings and build your own educational escape room! In Germany, the hashtag #BreakoutEdu is used to hint to educational escape rooms, BTW. You could use a Branching Scenario as a mini quest only, it could be the guide throughout the whole adventure and require to find solutions to quizzes within the physical world, etc.

It’s your turn!

What do you like/dislike about the new features? What other ideas do you have for making good use of the new features? What other content types would you like to be included in Branching Scenario and why?

Please feel free to add a comment here or to join the discussion on Twitter using #h5p and #bs!

Sliiiiide

Do you like the H5P Image Slider as much as I do? It’s simple, yet beautiful. And I think I made it a little nicer even.

Do you see what I did there? You can now make it loop instead of stopping at the first or last image. You can let it progress automatically after a given amount of time (5 seconds here). And you can hide the navigation arrows and the navigation bar while still being able to navigate.

Find the pull request on github! No, I disabled the download for a reason.