# Pointing on a Picture Question

Use the question type '**Image Select**' / *also known as* "**image mapped input problem**" or “**pointing on a picture**” to get your learners to find an answer within an image. 

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MbofSbV03C_0Pxu39RZ%2F-Mbogq3L38wqEMlGMuE6%2FScreen%20Shot%202021-06-10%20at%2008.54.17.png?alt=media\&token=93dd9a43-2259-4fe4-8a81-36814db53563)

This exercise is fun and interactive for your learners, but can be a *little* more complicated to set-up than the others, so fasten your seatbelt 🏎️  and grab your coffee ☕ ! Follow the instructions below closely, and don't hesitate to contact us (*<support@moocit.fr>*) if you need help. 😊

## Set-up Image Select Question

1. Choose the image you want to use, and make sure it is relatively large, and high quality.&#x20;
2. Add your image to **Studio** > **Content** > **Files and Uploads**&#x20;

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MbofSbV03C_0Pxu39RZ%2F-MbonXG9CjuA8r71I0RX%2FScreen%20Shot%202021-06-10%20at%2009.23.05.png?alt=media\&token=1ff539dc-a8b9-4a24-8b17-6baab33feb1f)

&#x20;  3\. Copy the web URL for your desired background image.&#x20;

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MchxL8jfjFEA1f3iTul%2F-MciFFic2eRo8JHWWcgp%2FScreen%20Shot%202021-06-21%20at%2013.06.57.png?alt=media\&token=59cb295d-4c88-407e-a305-5315305edd9e)

&#x20;  4\. **In a new tab**, open up the **Unit** where you want to add your question.&#x20;

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MbofSbV03C_0Pxu39RZ%2F-Mboo0I4y2UwibR5P-Il%2FScreen%20Shot%202021-06-10%20at%2009.24.55.png?alt=media\&token=610582f3-b934-4558-a4fc-53705e7aa613)

&#x20;  5\. Select to add a new **Problem Component** > **Advanced** > **Image Mapped Input**&#x20;

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MbofSbV03C_0Pxu39RZ%2F-Mboo2QshD8fFStjPjRo%2FScreen%20Shot%202021-06-10%20at%2009.25.22.png?alt=media\&token=c970632f-b2d2-4999-9347-2edeb002173b)

&#x20;  6\. The component will appear with a template already in place. Select to '**Edit**' the component.&#x20;

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MbofSbV03C_0Pxu39RZ%2F-Mbooaeu0DIPmTZE-DFa%2FScreen%20Shot%202021-06-10%20at%2009.26.45.png?alt=media\&token=c8788925-edb6-48c6-bb4b-207ed952eb0a)

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

&#x20;  8\. On line 4 between `<p>` and `</p>`, modify your question text.&#x20;

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-MchxL8jfjFEA1f3iTul%2F-MciEbkmPXpT4HO18-IX%2FScreen%20Shot%202021-06-21%20at%2013.04.02.png?alt=media\&token=329ca240-c14e-4d40-9ca9-01890068c735)

&#x20;  9\. On line 5, replace the URL that appears after `<imageinput src="`to the URL of your image (copied in step 3). Keep the `" "` before and after the URL.&#x20;

![](https://670111484-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4y57zV2xVTpLls44ok%2F-McnQtppYU6kLxtBRHlZ%2F-McnSY04DyD6xIzQbWXG%2FScreen%20Shot%202021-06-22%20at%2013.23.14.png?alt=media\&token=dddb676f-e30a-43d0-9999-d75f43ad2992)

&#x20;  10\. Also on line 5, you must change the width (`width="600"`) and height (`height="638"`) to that of your image. Ideally, your image width should not exceed 950 pixels.&#x20;