Affichage des images trop petit et non-ajustable

[JM-Lemay]

Il ne semble pas présentement y avoir d'options pour ajuster la grandeur d'une image lors des quiz. L'affichage est typiquement trop petit du côté enseignant et également du côté étudiant. Voici un exemple d'affichage problématique du côté enseignant :

En plus de corriger la grosseur de l'image affichée, il serait intéressant de pouvoir cliquer sur celle-ci pour l'afficher en plein écran (ou au moins de pouvoir zoomer sur celle-ci).

[fuhrmanator]

Avec le support correct de markdown dans les questions (rajouté vers la fin du projet en hiver par @valkyrie1), tu peux mieux afficher les images en principe.

Si tu téléverses une image et tu obtiens par exemple <img /api/blah/123456>, tu peux intégrer l'image dans ta question en l'entourant avec ![text pour décrire l'image](/api/blah/123456) (plutôt qu'avec le text <img ...>. Cette façon permet de mettre des images dans le texte de la question ET/OU dans les réponses même (si tu en as besoin). Bref le support des images dans markdown est meilleur.

En même temps, je ne connais pas la résolution originale de ton image. Si elle était déjà faible (pas beaucoup de pixels), il n'y a rien à faire.

Le mieux serait de partager le texte de ton quiz (ou la question) ici.

[fuhrmanator]

Voici un exemple de quiz que j'ai fait sur une implémentation du projet qui roule sur ma machine à la maison (les URL sont "localhost"):

::image dans la question::
[markdown]Ceci est une image de quel animal? 
![chat](http\://localhost\:4400/api/image/get/66db9e3a85089061335777e9)
{ =chat}

::image dans la réponse::
[markdown]Quelle image est celle d'un chat? 
{ 
=![chat](http\://localhost\:4400/api/image/get/66db9e3a85089061335777e9)
~![poisson](https\://echoesoftheplumgrove.wiki.gg/images/7/7e/Mackerel.png)
}

L'image du chat a été téléversée dans le serveur avec la fonctionnalité (Mes images), mais l'image du poisson se trouve sur internet.

Remarquez qu'il faut "échapper" les : dans les URL.

Il y a malheureusement une limitation pour contrôler la taille des images. Le projet utilise la bibliothèque marked de node qui offre un support de base de markdown sans moyen de changer la taille de l'image (ce n'est pas une option de markdown standard).

On peut la configurer pour permettre des balises HTML, mais pour l'instant celles-ci sont supprimées pour supporter LaTeX (je ne sais pas pourquoi exactement). Une autre solution serait de bien supporter le format html dans GIFT ([html] plutôt que [markdown]) et dans ce cas on peut contrôler la taille des images avec width="50%", etc. dans une balise <img /> (il faut toujours échapper les = je crois). Il y a un autre issue à ce propos #64.

Il faut trouver la bonne configuration pour supporter toutes ces combinaisons (markdown, html, MathJax (LaTeX)) en même temps. Si on écrit quelques tests, on pourra y arriver.

[fuhrmanator]

En plus de corriger la grosseur de l'image affichée, il serait intéressant de pouvoir cliquer sur celle-ci pour l'afficher en plein écran (ou au moins de pouvoir zoomer sur celle-ci).

Le code responsable de la grosseur (10%) de l'image est ici:

https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir/blob/63c5d2f72ba630048bc0299a4dc478600e790c01/client/src/components/GiftTemplate/GIFTTemplatePreview.tsx#L29