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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.moocit.fr/avance/clic-sur-image-question.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.