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

12 Replies to “Highlight the Words”

  1. Hi Oliver !
    Wow !!! This is *very* *very* useful new content type especially for french grammar analysis 🙂 It works great and it is straightforward. Love it ! I have tried it this morning and have already created 3 exercises for my students in which they must select different groups of words that complete and enrich a noun and color them accordingly to the grammatical classe they belong to.

    I have small “cosmetic” suggestions to make this content even better :
    – I think that the line-height should be increased so that the tooltips (+1 and -1) don’t overlap so much on the text ; it would increase readability (I’ve tweaked it myself in my custom.css).
    – In my opinion, the hamburger menu should be, by default, opened instead of requiring the learner to open it because, this way, the color legend is displayed at first sight and the task is more obvious.
    – Also, a minor enhancement could be to add title tags (title=”color legend”) on the color buttons in top menu and to populate them with the associated legend so that, when the student hover on a button color to select it, a tooltip would show up and remind him of the legend before using it.

    I am going to make these two last tweaks myself and, if successful, would gladly share them here 🙂

    Thanks again for this new content type that will surely be a hit !


    1. Hi Isabelle!

      Thanks for your suggestions! Please be aware of the problem that I mentioned on top of the blog post: Currently on iOS, selecting is limited to a single word.

      a) What’s the line-height that you are suggesting?
      b) The color legend is not supposed to replace a task description, but an option to open the task with the menu open (on desktop at least) might not hurt.
      c) Joubel is discouraging to use of the title attribute for hovering tooltips (https://h5ptechnology.atlassian.net/browse/HFP-3030?jql=text%20~%20%22title%22), and they would not help on mobile devices.


      1. Hi Oliver !

        Thank you for your reply and for your explanations : I didn’t know that Joubel was discouraging the use of title attributes for tooltips because it was causing trouble with some browsers ; that is a lesson learned 😉

        I have been looking at the code to see how the content is done, you know just out of curiosity. Good lord, the h5p-highlight-the-words.js file is a monster !!! Scary thing, really 😀 I can’t imagine how long it took you to write this !…

        About the line-height, here is a screenshot of how the checked task appears with the actual line-height set to 1.5em : https://monosnap.com/file/CJfJJJURonwgmvQIjSdSI7cpblI4ee. As you can see, the +1 and -1 labels are overlapping on the text, covering it and altering its readability. That’s why I have increased the line-height to 2.25em in my custom CSS. This way when the task is checked, the points labels don’t cover the text and the learner has a better chance to spot his mistakes : https://monosnap.com/file/SA0FLDQByXyMYbHX4lHVO2WYcWhphW. This is not much, really, and maybe a bad idea for mobile devices because the content is much longer ?

        Thanks for the reminder about the IOS limitations ; I will warn my students before assigning them my 3 grammar activities. But once again, this is a very clever and useful content type for grammar training ; I am definitely thrilled with it 🙂


        1. Hi Isabelle!

          What you are referencing is the transpiled and minified code. It’s “a little” more intelligible on github at https://github.com/otacke/h5p-highlight-the-words neatly sliced into components. 12 days so far. Don’t ask what percentage of that was covered by funding 🙂

          2.25 em sounds like a lot. I’ll take a look. Yes, it might be a little to much on mobile devices.

          Glad you like the content type. I have meanwhile created a question on StackOverflow because I cannot figure out how to make it work decently on iOS.

  2. Replying to myself : my second suggestion is a dumb idea because when the content is narrow as on this very page, the hamburger menu takes all the space and covers the content itself. So making it opened by default would cover the task… which can’t be good for learners 😀
    Sorry for not checking this before !

    1. No problem at all! As I mentioned, it should not be a problem to optionally open it if there’s enough horizontal space but to keep it closed if there’s not (e.g. on mobile devices).

      And it is pretty normal to come up with ideas and to reject yourself them later. Cannot count how often I have done this for this content type – and I am not done, see the select problem on iOS.

  3. Little bug I noticed: If you accidentally highlight the whitespace next to a word, it’s seen as a mistake. As the whitespace is included when double clicking to highlight, this is a usability issue and I predict lots of frustrations and misunderstanding when working with children.

  4. Amazing stuff Oliver! I look forward to seeing this on the H5P hub. Also I’m still hoping someone funds spaced repetition for more content types – I think you have done it for dialogue cards, but I really need for flashcards, because dialogue cards the user can “cheat” whereas flashcards they actually have to type in an answer!

  5. Hi Callum!

    This is still a beta, and I don’t know when it will available on the Hub – I’ll still have to find a solution for iOS devices.


Leave a Reply

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