UX Review for H5P Cornell


acceptance criteria


Taking notes can help people to learn, and there's a particular method called Cornell Notes. Cornell Notes are a structured way of taking notes. In essency, when reading a text, listening to audio or watching a video, students keep

  • detailed notes in a notes section that are then boiled down into

  • recall notes in another section, just keeping keywords and main questions that the source answers (as starting point for recalling later) and finally the

  • summary notes in yet another section summarizing what was learned

This basic version of Cornell Notes for H5P allows to present students with source material and to keep notes by toggling between the pages using the button in the upper left corner. Of course, save content state should be activated on the host system. At least one author seems to like the demo.

Features in the future might be ...

  • allowing students to use a CKEditor,

  • allowing students to export their notes,

  • allowing students to switch to a recall mode that only shows the recall notes,

  • allowing multiple sources similar to H5P Column,

  • allowing teachers to review the notes by submitting xAPI statements,

  • ...

This will depend on the results of a campaign on Indiegogo that is to be set up. 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 increments in the future.

more background

By default, the content type will put the notes fields next to the content. Notes can be toggled on and off. The content type tries to keep the typical Cornell notes layout as long as possible (depending on the content width). If the width is or becomes to small, the content type will first give up the Cornell layout and stack the fields. If the width still doesn't suffice, the content type can alternatively show the notes or the content and the student can switch from one to the other. The date in the upper right corner will be the date when the student edited the notes for the first time. There was a discussion whether the notes should swipe in from the left or the right - can be changed by changing just one CSS property. Putting the notes below the content would work for audio and might work for video while keeping the layout, but it it not a viable solution for texts.

Some demo content can be found on Oliver's personal site and the usual site for testing that knows.

Acceptance Criteria



Jelena Milinovic


Oliver Tacke




Code reviewer