> For the complete documentation index, see [llms.txt](https://docs.moocit.fr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.moocit.fr/avance/clic-sur-image-question.md).

# Clic sur Image (Question)

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.

![](/files/-MdXC1Xsy8Mpq1bvb5Th)

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 (<support@moocit.fr>) 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**

![](/files/-MdXD3YUqA_AJlw29528)

3\) Copiez l'URL **Studio** de l'image d'arrière-plan souhaitée.

![](/files/-MdXG_W7sOHBwGF5vo7D)

4\) Dans un nouvel onglet, ouvrez **l'unité** où vous souhaitez ajouter votre question.

![](/files/-MdXErxUXCPDxiG280-E)

5\) Sélectionnez pour ajouter un nouveau composant **d'exercice** > **Avancé** > **Clic sur image.**

![](/files/-MdXEw_WpDG-3gSTUIj3)

6\) Le composant apparaîtra avec un modèle déjà en place. Sélectionnez pour « **Modifier** » le composant.

![](/files/-MdXFHXInypC42I4FpB4)

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.

![](/files/-MdXFcUbB_CbKfetpuFM)

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.

![](/files/-MdXFvJkg_FBmC8NPbK3)

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.*&#x20;

![](/files/-MdXHBdNODMfc6qz8wsa)

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)"
```

![](/files/-MdXJVJAfgkfBQeT9O6K)

12\) Sélectionnez pour enregistrer votre question.

13\) Cliquez sur 'montrer la correction' pour vous assurer que votre zone a bien été enregistrée.

![](/files/-MdXJzvGNjAKhjYh10hk)

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.

![](/files/-MdXKXMIp-mxSrGpIQF-)

![](/files/-MdXKYxGeQTIkFZA77cq)