Mossball

Marimo is a computational notebook that lets data scientists mix code, discussion, and results. Its plugin system relies on AnyWidget, which specifies a simple contract between extensions and Marimo. The aim of this project is to design, build, and test a set of Marimo plugins for classroom exercises similar to those in H5P: multiple choice, fill in the blanks, and so on.

Demo

You can watch the demo video of explaining the overall design and structure of plugins

• YouTube: https://youtu.be/oeYEotXOvgA
• Google Drive: https://drive.google.com/file/d/1DYZI3w0ikATuKTXiATNHsOeLZL5uu5M_/view?usp=sharing

Setup

1. Clone this repository.

2. Create and activate a Python virtual environment.

   • E.g., if you are using uv, run uv venv and then source .venv/bin/activate.

3. Install the package in pyproject.toml for development.

   • E.g., run uv pip install -e ".[dev]".

You may also want to clone the Marimo repository.

Research and Possible Plugins

Initial Feedback and General Findings

• Many professors and students preferred straightforward, simple, and common exercises like multiple choice, fill in the blank, and true or false
• Professors also found more unique widgets to be useful for the specific courses that they teach
  • For example, the professor who teaches a Machine Learning course shares their opinion that it would be useful to see widgets where students can interact with the data, such as drawing decision boundaries.
• Students overall chose more interactive and quick activities like Drag the Words or Sort the Paragraphs over ones that required more writing or detail like Essay
• Professors also chose interactive activities but recommended against gamification and relying on too many images

Suggested H5P Plugins and Comparisons to Other Implementations

Below are a few of the H5P plugins suggested by professors and students, along with some differences noted between the H5P versions and those from other online learning platforms:

Widget	H5P Features	Other Implementations	Summary
Multiple Choice	When there is only one correct answer, the selection symbol is a radio button; when there are multiple correct answers, the symbol is a checkbox Each choice is initially within a grey box When you hover over a choice, the colour of the box changes to light grey When you select the option, the colour of the box changes to blue, the radio button is filled in (or the checkbox is checkmarked), and the whole box becomes outlined with a thicker blue border which becomes thinner again once you click away	Canvas All boxes are always white When the option is selected, only the radio button is filled in D2L All boxes are initially white When you hover over it, the box changes to grey, and the outline of the radio button / checkbox becomes thicker and changes from grey to blue When you select an option, the box becomes blue and the button is filled in; the outline remains blue until you click away The specific widgets for when there is a single correct answer versus multiple are separated as “Multiple Choice” and “Multi-Set”	For quizzes, having the boxes and background as both white like Canvas is more consistent and less distracting For small exercises in between a lecture or reading, giving the boxes a different colour like H5P can help the exercise to stand out from the rest of the page content; however, this might look awkward if the options span multiple lines or of varying sizes Having the box change colour on hover and on click is useful, as makes it obvious to the student which option they selected Multiple choice questions can be embedded within lessons to test students’ knowledge while learning; Single Choice Set / Question Set can be used at the end of a module/lesson to review and solidify their understanding
Sort the paragraphs	Each step is in a separate box with arrows on the right to swap the current box with the one above/below The box can also be dragged to the desired position and the rest of the boxes will be shifted accordingly The step becomes blue once dragged and the box that it is held over gets a dotted border instead of a solid one No clear drag and drop symbol or indication	D2L Creator+ (extra D2L package) Also has the ability to drag the box similar to H5P, but has no arrows To the left of the box containing the step is a segment containing an extra description (e.g., “Step 1”) and a drop down selection — students can select which step to place in the current box rather than dragging The colour of the box remains white, but the position that the step will be placed in is outlined in a thick blue dotted border (not as obvious as H5P) The draggable box contains a “drag dots” symbol	The dropdown feature from D2L is more convenient and less tedious compared to the H5P version with arrows The dropdown selection allows the widget to be used like a matching exercise instead of only a sorting activity Having the entire box be highlighted in a different colour rather than just the border can be helpful for the student to clearly identify where they will be placing the step The drag dots symbol is important to clearly indicate that the box can be dragged (with the H5P version, students may think that they can only use the arrows to reorder the steps)
Branching Scenario	Can embed video, as well as other components like image, course presentation, interactive video On the top left corner, it shows the option that I selected in the previous question Whenever I select not the best / incorrect answer, then it shows the popup to retry the question On the top right corner, there is a “Proceed” button in which the user can skip the video and get the next question to answer	Elucidat Mostly similar to H5P component There is a navigation bar on the top right corner where you can check the list of contents (At least for this demo), we can see the overview of selections in the end	There’s no big difference between plugins between different platforms H5P’s version supports an integration to various contents Both plugins show a quick feedback upon the selection Having “Proceed” or navigation button could make less boredom for users
Chart	There’s a limitation of supporting only two types of charts: bar and pie chart Each element in the chart is not interactive, i.e. when hovering over the element, there is no popup For implementation aspect, user can add label and value to each data element, select background/font color for each data element But it requires to input data manually	JSXGraph (Moodle’s plugin) There are interactive tools that can manipulate the bars in the chart, move around the graph They have more chart types than H5P charts - Line, Spline, Multiple, Horizontal, Regression, etc. Except for dynamic data chart, a user can only hover the data elements in the context of interaction	The chart widget from H5P is more for representation than interaction There are only two chart types supported in H5P while Moodle’s JSXGraph supports a variety of charts
Course Presentation	Allows creating slideshows with minor customizations Ability to embed interactive modules such as quizzes, videos, pop-ups in simple drag-and-drop format Navigation control for jumping and restricting slides; support for branching paths Easy and intuitive interface	reveal.js (Moodle plugin) Requires HTML or Markdown for slide creation Minimal ability for interactivity unless custom code is added Supports vertical transitions on top of traditional horizontal transition, allows for in depth context addition and clearer branching logic Would be extremely difficult to use for users without prior coding background	H5P is easy to use and great for building interactive presentations without the need for complex logic or coding knowledge reveal.js allows for more customization but is more suitable for those comfortable with coding H5P has limited granularity for feedback and lacks advanced customization
Interactive Video	Embed modules at specific timestamps Auto-pause, navigation control (guiding based on quiz answer) Bookmark support for quick jumps Reusable across all platforms that supports H5P	Platforms like Udemy, Coursera, etc. provide exercises paired with video content as well but lack true interactivity integration like H5P did with the video plugin	H5P provides interactive learning features such as other H5P plugins, which offers the users a great ecosystem H5P offers no video manipulation features, requiring the use of pre-edited videos Again H5P lacks granularity for feedback and lacks advanced customization capabilities, so educators could possibility lose out on important insights
Fill in the blanks	Users can type their answers into the blanks It can be set to auto-check each response or check after all the blanks are filled Score is shown at the end and the user can reveal the solutions Multimedia support, can add an image or video Functionality to show hint tooltips to the user Can be used in conjunction with other H5P content types: ex: fill in the blanks pop-up within a video (interactive video) There is a complex fill in the blanks content type that has advanced feedback and dropdown options	Canvas: No auto-check option: answers are only shown at the end of the quiz No hint tooltip functionality Blackboard Learn: Very similar to Canvas Supports regular expressions for answer matching Partial credit scoring option	A student mentioned that fill in the blanks exercises aren’t usually stimulating due to lack of visual elements, this H5P content type can be combined with other types to create a more visually engaging experience. H5P has more features than what is seen on other platforms, but is missing partial credit scoring and regex support.
Drag the words	User can drag words to fill in the blanks Can show hint tooltips to the user No rich text support Instant feedback option available Score with detailed feedback shown on submission For dragging words onto images: can use the drag and drop content type	Blackboard Learn They don’t have a drag the words implementation, but they have picking the matching word from a dropdown Multimedia support, can match pictures to words Rich text support Moodle Similar to H5P, but with rich text support and partial grading Drag and drop onto image content type also available	H5P drag the words/drag and drop cover most functionality except for rich text support and partial scoring which are included in the Moodle implementation
Interactive Book	Embedded course presentation slides within the interactive book. Quiz types include multiple-choice, drag-and-drop words, drag-and-drop images, and fill-in-the-blanks. Instant grading for quizzes, with results shown and retry options available. Unique URLs for each page, allowing direct links to specific sections. Embedded YouTube videos for multimedia content.	Genially Embedding of content types such as maps, social networks, music, videos, and audio. Quizzes included in interactive books. Tools for creating graphics, charts, tables, and timelines. On-click interactive elements like lists, tables, timelines and dropdowns. Does not support drag-and-drop interactions. Does not provide unique URLs for individual pages.	H5P offers more quiz types, instant grading, and retry options, while Genially’s quizzes are simpler and lack these features. Genially offers more multimedia embedding, while H5P is just interactive videos. H5P includes drag-and-drop features, while Genially offers on-click elements like dropdowns and expandable lists. Both H5P and Genially have similar interactive options, but Genially offers more tools for creating content like charts, timelines and graphs.
Structure Strip	Includes information popups that explain each section, helping users understand what to do in each part of the structure strip. Allows users to instantly check their answers and provides feedback specific to their responses for each row. Enables users to copy their answers to the clipboard to save their work.	Canvas Includes a grading scheme for the assignment and individual sections. Allows modifications to row names and section details. Saves grades from the rubric for students. Enables editing of the title, sections, descriptions, and points for each row. Calculates the total grade by summing the points for each section.	H5P’s instant feedback is helpful, but adding a grading system (points per row) like Canvas rubrics would improve assessment. H5P doesn’t allow editing row titles or number of rows, unlike Canvas rubrics, limiting customization. H5P only supports clipboard copying, but adding a PDF export option would improve usability. A rich text editor with formatting (e.g., bullet points, word count) in H5P would help users better structure their answers.

Other recommended widgets:

• Quiz (Question Set)
  • Useful in between lessons or at the end of modules to reinforce students’ understanding with different types of questions available (multiple choice, fill in the blanks, drag the words, etc.)
• Cornell Notes
  • Useful for taking notes while watching a video or reading
• Dialog Cards
  • Useful for students to do a quick self-check of whether they understood the material
  • Similar to many students’ studying methods
• True/False
  • Useful to test students’ knowledge, similar to Multiple Choice