UX review for H5P Structure Strip


Acceptance Criteria

Oliver receives feedback on the UX for H5P Structure Strip.


In schools (especially in Anglo-American regions) teachers use something called structure strips. They are paper strips that can be glued onto the margin of a sheet of paper (or are put next to them). The paper strips consist of multiple segments that each represent a particular aspect that the student should cover in a text (classic: introduction, main part, ending). The segments' length defines the length that the text should have. Furthermore, the segments can contain hints or requirements.

The goal of using structure strips is to train students to get the proportions of text sections correct, e. g. prevent the conclusion being longer than the analysis, etc. There's no need to have a hard number of characters or words - it's really the proportions that matter. Also, students should get hints about core aspects that they should cover in each section, etc.

I believe that structure strips are most often used in literature classes when writing book analyses, but I think they are quite universal and could also be used for protocols of experiments (e.g. biology, chemistry and physics), for case studies (e.g. in management or law), ...


The content type H5P.StructureStrip offers that functionality for H5P although not using the visual length to indicate the proportions - that felt weird.

  • Teachers can define an introductory task description and optionally add some media.

  • Teachers can add as many sections as they like and for each define a title, hints, the relative weight that the section should have compared to the others, a background color, and a text color.

  • Teachers can define some slack (e.g. 10 %), so if one section should be four times as long as the other, they don't have to hit one particular number of characters.

  • Teachers can optionally define a hard minimum text length and a maximum text length.

  • Teachers can decide whether students should receive feedback continuously when typing displayed in the strip's segments while typing, or only on request by clicking on check. Both modes have their pros and cons.

  • Teachers can customize the feedback using the section title and the number of characters as variables.

  • Students can always copy the text that they have written by clicking on the designated button

  • Students can request feedback by clicking on the designated button if the teacher set the mode to "on request".

There's always something that could be improved right away, of course, but I think this version delivers a viable product already, and I'd like to go for small (hopefully paid) increments in the future, e.g.

  • Sending the text to the LMS using xAPI using a dedicated "Submit" button

  • Exporting the text to particular text formats (like documentation tool, but the "Copy" button is quite universal already)

  • Add checking for keywords that are given in the hints (similar to Essay) in order to provide feedback - no scoring here, it's about structure.


Just in case that this should be presented at the H5Pcon2020 as a surprise, I kept a low profile and have neither published the source code yet nor created a blog post. You should, however, know where to find the demo that you can play with - if not, holler

Acceptance Criteria



Oliver Tacke
March 31, 2020, 6:57 PM

I'll definitely go for that suggestion! Thanks a lot again. I'll make sure to put some extra kinder chocolate into the next parcel that I send over to Norway

Jelena Milinovic
March 31, 2020, 7:02 PM

You're welcome ๐Ÿซ
Great content type, I hope it will be popular!

Oliver Tacke
January 9, 2021, 5:26 PM

Sorry, took a while I now implemented all the open issues. If you donโ€™t have any objections, Iโ€™d clean up the code a little and hand it in for code review.

Jelena Milinovic
7 days ago

This looks great! Popup works well, I tested it on multiple devices, good job

Oliver Tacke
7 days ago

I had intended this ticket for a UX review only, but if thatโ€™s fine with you feel free to use it for the code review as well. The code is at I still need to clean it up a little, but I assume that you have enough on your plate anyway and will not check the code any time soon.


Jelena Milinovic


Oliver Tacke




Code reviewer