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 ([e-mail]) 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:

<problem>
    
    <imageresponse>
        <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>
        <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"/>
        <solution>
            <div class="detailed-solution">
                <p>Explanation</p>
                <p>Egypt is home to not only the Pyramids, Cairo, and Memphis, but also the Sphinx and the ancient Royal Library of Alexandria.</p>
            </div>
        </solution>
    </imageresponse>
</problem>

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):

rectangle="(X-AXIS,Y-AXIS)-(X-AXIS,Y-AXIS)"

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.