H5P Guides

Image Sequencing Tutorial

The Image Sequencing content type challenges the learner to order a randomized set of images according to a task description.

Not using H5P yet?
Click the "Get started" button to explore all of the possible ways to use H5P!


Here's the Image Sequencing content we'll create in this tutorial:

When to use Image Sequencing

You can use this content type to create any sort of exercise where the learner has to place predefined items in the correct order (sequence).

Step 1: Topic

In this tutorial, we will create an exercise in which a learner has to order planets from smallest to largest.

Step 2: Creating an Image Sequencing

Select the New content option and choose Image Sequencing from the list of Content types:

The Image Sequencing editor looks like this:

The editor consists of 3 parts: Task Description and Set of Images. By default, there are three images in the set but you can add as many as you like by pressing the "Add image"  button below the Image list.

Step 3: Task description

In the Task description field, we give the learner basic instructions or introduce the problem to be solved. We'll use this text for the Task descriptionOrder the planets from smallest to largest

Step 4: Filling in the first card

Mercury is the largest planet so we will add it first.

Download this image of Mercury. Click the "+ Add" button and upload the image you downloaded from Wikimedia. 

NOTE: Don't forget to add licensing info for all images you use and are not your own! Click "Edit Copyright" to add licensing info.

Copyright info:

Title: Enhanced-color image of Mercury from first MESSENGER flyby.
Author: NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington
Years: 2008
Source: https://commons.wikimedia.org/wiki/File:Mercury_in_color_-_Prockter07-edit1.jpg
License: Public Domain
License Version: Public Domain Mark

Under Image Description type Mercury. Now you've added your first image. The editor should look like this:

Now we can proceed and add 7 more planets. Note that the order in which you are adding is important since this if what defines the correct sequence.

Step 5: Adding the rest of the cards

In the same way you filled in the first card, fill in the remaining seven. This is the information you need to fill in the remaining seven cards:

ImageDownload LinkImage Description
Download ImageMars
Download ImageVenus
Download ImageEarth
Download ImageNeptune
Download ImageUranus
Download ImageSaturn
Download ImageJupiter

Make sure to add copyright information which you can find on the Wikimedia site below each image.

Step 6: Finishing up

Your editor should look like:

 the node/article to view your finished Image Sequencing.
You should now have the same result as the example on top of the page.  
Feel free to leave any comments or suggestions on how to improve this tutorial.