Posted on by Oliver

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)…

If the latest version cannot be found on the H5P Hub …

Then just download one of the demo contents and upload it to your H5P enabled platform with administrative rights. That will install the new libraries from the file.

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 .

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 :-/

8 Replies to “Create QR Codes with H5P”

  1. That’s great Oliver!
    But not only for Course Presentation. All Content Types should be available in “Interactive Book” because this could be THE perfect container for all Content Types.

    Reply

  2. Hi Oliver,
    And again a wonderful interaction that activates people to also use their smartphone or tablet. Please send me the Github link in order make the Dutch translation.
    Best, René

    Reply
  3. Pingback: H5P-Inhaltstypen, die es noch nicht gibt I | olivertacke.de

  4. I am using the QR code in H5P. It is coming up on my LMS too large and it cannot be read because the full code cannot be read at the same time. Can you assist with some LMI suggestions?
    Thank you,

    Reply

    1. Hi Lorraine!

      H5P will always make content use the full width that the host system (here your LMS) provides – not only for KewAr Code, but for all H5P content types.

      The solution in detail may vary, but the solution is to wrap the H5P content in a so called div container that limits the width. If you’re LMS allows to add HTML, it would look something like this (for using 50% of the available with but 480px max):


      <div style="width: 50%; maxwidth: 480px;">H5P iframe snippet or WordPress shortcode in here</div>

      Cheers,
      Oliver

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *