4 Code Breaking

IIIF Literacy Part 101

Author

Andy Corrigan

Published

February 23, 2026

Modified

March 16, 2026

4.1 Learning Objective

Analyse a IIIF slide-puzzle in order to gain confidence working with “code”.

Key Tools and Concepts

Image API, Puzzle, Code

4.2 Summary

So IIIF is looking a bit techie and a lot like code. This step will help you experience how dealing with code isn’t as scary as it first looks.

4.3 Activity

To Do in Future

Build/integrate interactive Puzzle Viewer.

Can you solve the puzzle? Clicking a piece of the puzzle will move it to the empty space. Keep moving the pieces until the image is rearranged correctly.
When you complete the puzzle, the empty space will disappear, revealing the whole image
Click on the image again and you be taken to the manuscript this image is from on Cambridge Digital Library.

That’s not so scary is it?

Below you can see the code that generates the puzzle. Look at each line and you might recognise the IIIF Image regions. When you clicked the image tiles in the puzzle, all that was happening was that the line of code for the tile you clicked is moved to the ‘empty’ line. So you can also complete the puzzle by copy and pasting the chunks of code.

<table cellpadding='0' cellspacing='1'>
<tr>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/3371,2653,1016,1226/187,/0/default.jpg"/></td>
    <td><img src=""/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/3371,1427,1016,1226/187,/0/default.jpg"/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/1339,2653,1016,1226/187,/0/default.jpg"/></td>
</tr>
<tr>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/1339,1427,1016,1226/187,/0/default.jpg"/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/4387,1427,1016,1226/187,/0/default.jpg"/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/4387,201,1016,1226/187,/0/default.jpg"/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/3371,201,1016,1226/187,/0/default.jpg"/></td>
</tr>
<tr>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/2355,2653,1016,1226/187,/0/default.jpg"/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/1339,201,1016,1226/187,/0/default.jpg"/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/2355,201,1016,1226/187,/0/default.jpg"/></td>
    <td><img src="https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/2355,1427,1016,1226/187,/0/default.jpg"/></td>
</tr>
</table>

4.4 Exercise

Create your own puzzle using this tool: https://www.tripleyefish.com/puzzle/builder.html

Use the Mixtape of IIIF Examples to find another image you want to use and the ‘Cropping’ tool to pick a region and get your IIIF Image URL.

[Or you can just use the same one as above: https://images.lib.cam.ac.uk/iiif/MS-ADD-00864-000-00140.jp2/1339,201,4066,3678/1200,/0/default.jpg]

You can adjust the number of colllums and tile/puzzle widths.

You can switch between looking at the code, and seeing the image tiles.

How do you feel about code now? Take a screenshot and save it for your journal by uploading it to your IIIF Workbench!