Highlight the Words

Do you remember Pick the Symbols? A content type for H5P that was co-funded by “Schule Bubendorf” (school Bubendorf) in Switzerland and myself? Well, here’s another one of those projects.

PLEASE NOTE: Currently, on iOS only full words can be selected. Obviously Apple is doing things differently – and even the MDN documentation is not correct about what features it supports. Needs to be worked on. Honestly: After some fiddling, I am not sure if there is a good solution that will work on every mobile browser.

The idea is that as an author you can define words – or multiple words or only parts of words – that need to be highlighted in particular colors. Of course, authors can define the color and its meaning that displayed in a legend when you open the menu. Then students can choose a color on top, highlight the words related to that color, choose a different color, highlight other words, choose the eraser and erase previous highlights, …

If you don’t want to try it out above, just take a look at the demo that aired on my twitch channel:

Aktivieren Sie JavaScript um das Video zu sehen.

Some more explanation

  • Why that menu just for the color legend? Because there are plans to add more functionality. In a future version, you will also be able to optionally require students to decide whether a selected word should be written with a capital first letter. Or maybe you want them to correct the writing for a selected word? Or maybe you simply want them to take notes? That’s what will be put into that menu, too.
  • And why doesn’t it open next to the text? It does – if there’s enough horizontal space.
  • What about the color pickers on top. Couldn’t you make them stick there? In theory. But H5P content lives inside an iframe, and the iframe content doesn’t know that it may be scrolled out of sight (and the H5P core unfortunately doesn’t provide a mechanism to learn about that). If you need that, your only chance is to go to fullscreen.
  • What about accessibility? Good point! The content type is not accessible, and I doubt it ever will be. “Schule Bubendorf” explicitly required to be able to highlight parts of a word only or multiple words – and at least I am not capable to translate this requirement into an accessible solution that’s not completely awkward to use.
  • Can I see the results? Yes, it supports xAPI. Unfortunately, the exercise does not fit into any of the predefined xAPI interaction types, so I had to create an xAPI extension to display what was highlighted in what color. That extension requires changes to H5P’s report module that e.g. used on H5P.com or in the moodle gradebook. The H5P core team will have to accept those first or you will only be able to see the scores.
  • Can this be added to other content types? Potentially, but that up to the maintainers of the other content types, and I’ll have to add a special menu mode (menu opening on top of the task description if used as sub content).
  • Can you add this or that feature? Maybe. But please keep in mind that I am basically just a contractor, “Schule Bubendorf” holds the reins, and I cannot devote all of my free time to projects that I have created for others. Please contact them if you have suggestions.

Want to try it on your platform?

As I am writing these lines, Highlight the Words has not yet been released on the H5P Hub. But you may know the drill: You can use it already if you don’t mind to install it yourself by downloading the demo content above via the “Reuse” button and uploading it to another platform suitable for H5P. That will install the libraries necessary.

Please note: If you are not running that platform yourself, you may not be able to upload the content file, because the administrators have not allowed you to install libraries. In that case, someone with the appropriate rights will have to do that for you once.

I want more, more, more!

You can have a look at the source code at https://github.com/otacke/h5p-highlight-the-words and tweak it to your needs.

As mentioned before, “Schule Bubendorf” co-funded the development. If you want work to continue on “Highlight the Words”, feel free to get in touch with them and feel free to transfer some exchange money using the subject “H5P-Entwicklung” to

  • Recipient: Schule Bubendorf
  • IBAN: CH35 0076 9020 2108 8389 6

If you have any questions regarding donations, please contact Ueli Nick directly. He’s the headmaster of Schule Bubendorf (schulleitung@schulebubendorf.ch).

Kindergarten und Primarschule Rektorat
Krummackerstrasse 18
CH-4416 Bubendorf