Picture labelling with Hot Potatoes

This post is adding to what has been written already on how to do picture labelling exercises with Hot Potatotes. It assumes you know how to make a JCloze exercise.

The following video shows a sample of my current favourite kind of exercise to make with Hot Spuds:

The maker of the software has called this Smart positioning or How to overlay drop down lists on a background picture.

You can use the following html code to copy paste into a JCloze exercise, it creates a picture labelling of 6 terms.

<table style="border-style: solid; border-width: 0px;  width: 640px; "><tbody>
<tr>
<td style=""height: 80px; text-align:right; ">Label 1</td>
<td style="width: 480px; height:430px;" rowspan="3" ><img src="name-of-image" alt="name-of-image" title="image-title" width="416" height="352" style="display: block; margin-left: auto; margin-right: auto; text-align: center;"/></td>
<td style="height: 80px; text-align:left; ">Label 2</td>
</tr>
<tr>
<td style="height: 80px; text-align:right; ">Label 3</td>

<td style="height: 80px; text-align:left; ">Label 4</td>
</tr>
<tr>
<td style="height: 80px; text-align:right; ">Label 5</td>

<td style="height: 80px; text-align:left; ">Label 6</td>
</tr>
</tbody></table>

If you want to label 8 terms just add another row and increase rowspan to 4. You will need to adjust image dimensions appropriately depending on your picture.

The following 2 videos details how I go about cropping the image using screenshotting and picture editing to add arrows on OSX, you can find similar tools for your systems:

You may well have to go back to your picture editing software to modify your image until you are satisified that the arrows match up with the drop down boxes. You can also try to change the height: 80px for the cell that is not aligned but I just fiddle with the image editing program.

The following code is to make the table responsive i.e. table will wrap around when displayed on phones:

<div style="overflow-x:auto;">
//put in the table code here//
</div>

Hope this post is of help as information on creating such an exercise is hard to find now on the web. Happy to take questions.