MOOCit Docs
Rechercher…
Clic sur Image (Question)
Comment intégrer une question de sélection d'un point sur une image.
Utilisez le type de question « Clic sur Image » / également connu sous le nom « pointer sur une image » pour amener vos apprenants à trouver une réponse dans une image.
Cet exercice est cool et interactif pour vos apprenants, mais peut être un petit peu plus compliqué à mettre en place que les autres (le premier fois), alors attachez votre ceinture 🏎️ et prenez votre café ☕ ! Suivez attentivement les instructions ci-dessous, et n'hésitez pas à nous contacter ([email protected]) si vous avez besoin d'aide. 😊

Configurez votre question Cliquez sur l'image

1) Choisissez l'image que vous souhaitez utiliser. La largeur de votre image ne doit pas dépasser 950 pixels. Vous devrez peut-être redimensionner votre image au cas où elle serait trop grande.
2) Ajoutez votre image à Studio > Contenu > Fichiers et téléchargements
3) Copiez l'URL Studio de l'image d'arrière-plan souhaitée.
4) Dans un nouvel onglet, ouvrez l'unité où vous souhaitez ajouter votre question.
5) Sélectionnez pour ajouter un nouveau composant d'exercice > Avancé > Clic sur image.
6) Le composant apparaîtra avec un modèle déjà en place. Sélectionnez pour « Modifier » le composant.
7) You will see the following code for the exercise:
1
<problem>
2
3
<imageresponse>
4
<p>What country is home to the Great Pyramid of Giza as well as the cities of Cairo and Memphis? Click the country on the map below.</p>
5
<imageinput src="https://studio.edx.org/c4x/edX/DemoX/asset/Africa.png" width="600" height="638" rectangle="(338,98)-(412,168)" alt="Map of Africa"/>
6
<solution>
7
<div class="detailed-solution">
8
<p>Explanation</p>
9
<p>Egypt is home to not only the Pyramids, Cairo, and Memphis, but also the Sphinx and the ancient Royal Library of Alexandria.</p>
10
</div>
11
</solution>
12
</imageresponse>
13
</problem>
Copied!
8) Sur la ligne 4 entre <p> et </p>, modifiez le texte de votre question.
9) A la ligne 5, remplacez l'URL qui apparaît après <imageinput src="par l'URL de votre image (copié à l'étape 3). Conservez le " " avant et après l'URL.
10) Toujours à la ligne 5, vous devez changer la largeur (width="600") et la hauteur (height="638") à celle de votre image. Idéalement, la largeur de votre image ne doit pas dépasser 950 pixels.
11) Enfin à la ligne 5, vous devez changer les coordonnées du rectangle qui délimite la réponse sur votre image (là où les apprenants doivent cliquer).
The formula is to make a triangle using the upper left hand corner (X axis, Y axis) and the bottom right corner (X axis, Y axis):
1
rectangle="(X-AXIS,Y-AXIS)-(X-AXIS,Y-AXIS)"
Copied!
12) Sélectionnez pour enregistrer votre question.
13) Cliquez sur 'montrer la correction' pour vous assurer que votre zone a bien été enregistrée.
14) Enfin, vous pouvez modifier l'explication qui apparaît, en cliquant à nouveau sur 'modifier' et en changeant le test à la ligne 8-9 contenant l'explication de la réponse.
Dernière mise à jour 3mo ago