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: THIS CONTENT TYPE IS NOT COMPLETELY DONE!
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 – Android also not working properly for now.

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.
https://youtu.be/IOuSzPW1Pi0

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
  • BIC: BLKBCH22

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

Schulleitung
Kindergarten und Primarschule Rektorat
Krummackerstrasse 18
CH-4416 Bubendorf

23 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 !

    Isabelle

    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.

      Cheers,
      Oliver

      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 🙂

        Cheers,
        Isabelle

        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 !
    Isabelle

    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.

        1. It was decided to go a different route and remove leading and trailing spaces right on selecting instead of just ignoring them when evaluating the answers. That’s more transparent and will still leave the option to actually require spaces to be highlighted – they can still be selected separately.

  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.

    Best,
    Oliver

  6. Hi Oliver !

    This is just a quick hello to say once again how valuable and easy to use this content type is. I plan to create more and more activities with it. I simply love it ! My students… a little less because the created task is more complex with “Highlight the words” than with the other content types that I usually use (“drag and drop”, “multiple question choice”, “true/false” for instance), so the task requires them to put more effort and analysis in the activity ;p
    Anyway, a huge thank for this content type ! I hope that Joubel will see its value and review it quickly so that other users / teachers can create useful content too 🙂
    Best,
    Isabelle

    1. Glad you like it – but thank “Schule Bubendorf”! It was done according to their specifications – and I know that some things are not working yet, but “Schule Bubendorf” was content with the current state.

  7. Thank you, Oliver and Schule Bubendorf! This is exactly what I was looking for. Hoping it will be released on the hub because I know there are many applications for this in English grammar education alone.

    vielen Dank!

    Sacha

  8. Hi Oliver !
    Today I created a grammar exercise for my daughter using “Highlight the words”. I needed to create 10 categories (because there are 10 grammatical categories in French) but, having reached the 7th, I was stuck and couldn’t add anymore highlights. I don’t know if this limitation is expected or if it’s a “bug”. (Actually, I don’t think so, as I’ve looked at the Chrome console and there’s no specific error that occurs when I click on the “+ add highlight” button). I had a look at the code to see if I could spot an instruction stipulating a limitation in the number of highlights that can be used, but I didn’t notice anything specific – which is no proof at all considering that I don’t know how to code but still… I tried ;D
    So my question is : is this limitation an expected behaviour ?
    Thanks for your answer !
    Isabelle

      1. Hi Oliver !
        Thanks for your reply and for pointing out the line in the code where the limit was set. I was searching in the .js file in DIST/ ; I didn’t think that the limit would be set in “semantics”…
        So I’ve replaced 7 by 10, reloaded the cache but nothing changed and I still was stuck to 7. I then altered the number of the patchversion and bumped it to 5 instead of 4, but no change either. Then I have edited the wp-config file to set the dev mod to true and I have cleared the cache, as I read in the H5P documentation that it could help, but no luck either.
        My husband suggested that the file was still “hardcoded” in the SQL database. So I’ve looked into it on my server and I’ve directly edited the semantic.json file : indeed, the limit was still set to 7. I’ve changed it to 10 there and now It works : https://e.pcloud.link/publink/show?code=XZE3PgZWJogTl0xkwRDbEPfKdHEnhe8tXoV. So thank you for your help 🙂
        I still don’t understand how the cache system works in H5P and how I should have proceeded to make the change properly… My way seems a bit “barbarian” to me ! Could you give me some clue about the proper way I should have done it, please ?
        Cheers !
        Isabelle

        1. When a content type gets installed, the contents of semantics.json (and also the translation files) get copied to the database. When content gets served, fetching entries from the database uses to be quicker than accessing files on the harddisk although I am not too sure about that anymore if solid state disks are used – the details are not within the area of my expertise. Hence, changing the files doesn’t do anything.

          The clean way would have been to use the “alter_semantics” override hook that H5P provides.

          Please note that changing the values of semantics (no matter what way) will cause trouble if you share the file. H5P will validate the content’s parameters against the official semantics definition, detect the limit and purge any field value beyond 7.

          I don’t recall why it’s 7. Probably that was more than enough for my client and I didn’t have to come up with a solution for the user interface for more entries.

          1. Thank you very much for this “cristal clear” explanation. You should teach ; you’re a good teacher 😉
            I knew about the “alter_semantics” as I’ve used it once but I completely forgot about my “custom.js” file ! I’ll know how to proceed next time and I’ll try the cleaner way if I change something in semantics files in the future.
            Thanks for the warning about sharing my content. I didn’t think about that and so I won’t allow downloading the H5P file.
            Have a nice evening 🙂

Leave a Reply

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