Initial Papyros integration

[bmesuere]

Once we have a first bundled 0.1 release of dodona-edu/papyros, we can explore integrating this in Dodona.

UI-wise, I would add it to all python exercise pages as a start. I would use a pull-tab design as a trigger: an icon button of which only the left rounded side is visible using position sticky on the right side of the page, somewhere near the bottom.

This would trigger a bootstrap offcanvas component to slide out from the right. (hovering over the button might hint at the sliding behaviour by animating to the left) I would use a single column layout with the code on top and the output at the bottom.

We must make sure that pyodide is only loaded after the user clicks on the button for the first time and that it isn't reloaded when the scrashpad is hidden and reopened. In fact, once initialized it should keep running in the background as long the user is on the same page. (We might think about asking to terminate the code when it's still running and the user hides the scratchpad).

This is only an initial proof of concept integration that will probably require one or more additional papyros releases to get right.

If this works, we can consider releasing this as a beta to gather feedback. Future iterations can add more features such as copying code from and to papyros from the Dodona editor, opening the editor full screen or in a separate tab, including it on more pages, etc. The goal of this issue is not to gather potential future ideas, but to track the initial integration.

[winniederidder]

@bmesuere The default Papyros behaviour currently is to be vertical, i.e. editor on the left, output on the right. May I propose the offcanvas to come from the bottom of the screen instead of the side? Otherwise we will likely need some more fine-grained control over where each part of Papyros is rendered, as we use columns instead of rows. I might be able to make that html-part configurable, so the question is which approach would be preferable?

[bmesuere]

Most screens are horizontal which means that on most screens there's an unused margin on the left and right of the Dodona page. To minimize overlap with existing content, I would prefer the slide out from the right with both parts of papyros in a single column. It should be fairly simple so support both horizontal and vertical mode with a simple css class to toggle between both modes.