heigvd-teaching-tools / online-test-platform

EVAL is an educational platform for managing training exercises and exams, featuring specialized question types for software engineering education and training.
Apache License 2.0
5 stars 0 forks source link

Markdown: support for images, mermaid, graphviz... #217

Open yves-chevallier opened 6 months ago

yves-chevallier commented 6 months ago

For courses such as electronics, mathematics, and software architecture, it would be beneficial to support images and graphs within questions.

Currently, our Markdown implementation does not support images, nor does it accommodate Markdown extensions like Graphviz or Mermaid. With Mermaid, for example, it's straightforward to include class diagrams (https://mermaid.js.org/syntax/classDiagram.html) for UML-related questions.

Additionally, the ability to add schematic images for electronics questions would be highly advantageous.

To streamline implementation, images could be stored as inline base64 images within the Markdown. This approach would avoid the need to expand the database model to support attachments.

bchapuis commented 6 months ago

We could use s3 minio to store images and add upload and serve endpoints to the API. I would not include base64 images in the content of database (just markdown links). We probably need to replace monaco and find a better markdown editor for that.

yves-chevallier commented 6 months ago

What I usually do is not to rely on third-party services. I usually add an endpoint API /upload, check the mimetype (SVG, png, jpg, gif), check the size <2MB, check the credentials (done by a registered user), store the image as its sha256 name in a git manner (2 first hex digits : folder name, rest as hash blob file). Store on DB table images (id, hash, mimetype) then use a cleanup script to follow foreign key every night to suppress unused images.

Then image can be accessed from /assets/<hash>.jpg (the extension is only use for the mimetype). End user can use MD syntax to access it image: ![foobar](assets/4f145a1b4cd.png)