Interactive Image Activities
Activities included: Memory / Image Pairing, Drag and Drop, Image Sequencing, Image Slider, Image Juxtaposition and Guess the Answer. (These activities do not need to be done in a specific order, however the Memory Game includes some images to download and the first 5 teps which are repeated in numerous of the other activities.)
Memory Game and Image Pairing
(The difference between memory and Image pairing is that the matching image of the image pair is typically not the same image, so instead of downloading 4 images you would have to download 8 and find themes for example we could have raspberries and strawberries matching as they are both berries and then have a red apple and a green apple for instance).
- In Wordpress, select my site in the upper toolbar, then on the left hand side select H5P Content and select Add new
- Once add new is selected, a bunch of options will appear with a box including Search for content types.
- In the search for content types box, type Memory or Image Pairing and click on get and install
- Once you have done this you the get button should be replaced with a blue use. Click that.
- Press use.
- It will now ask for a title, for this activity you can choose your own or follow along with our example. Type Fruit.
- Next you will download the following images:
- strawberry,
- apple,
- cherries and
- raspberry
- You can add an image, by clicking the +Add button, lets start by adding the strawberry image that we downloaded in step 7.
- You must also add an alternative text to make the activity accessible, ie label your fruit with their names. As an option, you can also add audio tracks.
- To try the audio feature out add the following URL: https://www.youtube.com/watch?v=V5gbngf_7w0
- In the same card, add the image a second time, since this will be a game of memory. So repeat steps 8-10.
- You can add a final description for once the 2 cards are found. For instance you could say. Congrats you found the strawberry.
- Scroll back to the top and press on card 2 and repeat steps 8-12 but with the next photo, the apple. This time no need to add an audio track.
- Finally select Add new card and repeat again for the cherries and raspberries.
- Once you are finished and have added all the memory cards, click the Create button on the top right hand side. <iframe src="https://brittanyseducblog.opened.ca/wp-admin/admin-ajax.php?action=h5p_embed&id=9" width="400" height="400" frameborder="0" allowfullscreen="allowfullscreen" title="Fruit"></iframe>
Drag and Drop
Follow steps 1-5 under the Memory game activity but search for Drag and Drog instead.
- It will now ask for a title, for this activity you can choose your own or follow along with our example. Type Fruits.
- Now under settings add a background image, if you wish. For this activty we will toggle to step 2 task
- Scroll back up and click on the circle target icon to add a drop zone.
- Label the drop zone as the fruit name, for instance strawberry and tick the show label box.
- Tick the box This drop zone can only contain one element and press done when it is complete
- Repeat step 3-5 and do that for the other fruits (raspberry, apples, cheries)
- Now, we will add our images. We will use the same ones we downloaded in step 7 for the previous activity of memory. To do this click the third icon under the task box, it looks like a image icon
- Add your fruit image by repeating step 7-9 for each image and provide the name of the fruit as the alternative text.
- Note for each image you must select all drop zones, so that particpants can drag to all the possible options . For instance the strawberry image with the strawberry dropbox
- Once all images are added you must also reclick the drop boxes and tick the correct elements for the specific boxes.
- Click Create. You have now created a drag and drop activity. Great work.
Image Sequencing
Follow steps 1-5 under the Memory game activity but search for Image Sequencing instead.
- Title your project as Sequencing Alphabetically
- For the task description, write Drag to arrange the images in the correct alphabetical sequence
- For alternate task description, write Make the following list be ordered correctly using alphabetical order. Use the cursor keys to navigate through the list items, use space to activate or deactivate an item and the cursor keys to move it
- We will stick to using the same four images you previously downloaded in the memory game step 7
- Add new image and image description starting with the strawberry.
- Select card 2 and do the same as step 5 with the apple
- Repeat on card 3 for the Cherries
- Finally add new image, to add the Raspeberries
- Now before completing, make sure to move the images in the correct order starting with Apple. Use the arrows to do this.
- The order is as follows Apple, Cherries, Raspberries, Strawberry
- Once you have done this, click the Create button on the top right hand side.
Image Slider
Follow steps 1-5 under the Memory game activity but search for Image Slider instead.
- Title your project as Red Fruit Examples and use the images you already downloaded in the Memory activity.
- Here are the images again
- strawberry,
- apple,
- cherries and
- raspberry
- Title the fruit according to their name and write the same for the alternative text
- Add item to add more images.
Image Juxtaposition
Sample pre-processed images for making a Juxtapose are available on Flickr: an image of the McPherson Library in 1963 and a similar image from 2013, and an image of the BC Parliament buildings by day and by night
You can also do Image Juxtaposition through our other DSC Workshop on Data VIsualization and Narrative Maps
For the H5P activity follow the next steps
- In Wordpress, select my site in the upper toolbar, then on the left hand side select H5P Content and select Add new
- Once add new is selected, a bunch of options will appear with a box including Search for content types.
- In the search for content types box, type Image Juxtaposition and click on get and install
- Once you have done this you the get button should be replaced with a blue use. Click that.
- Press use.
- It will now ask for a title, for this activity you can choose your own or follow along with our example. Type Library.
- Next you will need to download two images, select the bottom right arrow down button and download the original size (note if you select your own images they must be approximately the same size and the picture must be taken at the same angle to create the effect.
- Add Image 1 of the black and white image. THis image will be the left hand side of the juxtaposition.
- Add the alternative text Mcpherson 1963
- Add Image 2 of the 2013 Library. THis image will be the right hand side of the juxtaposition.
- Add the alternative text Mcpherson 2013
- Click behavioural settings, leave the slider to be horizonal but change the slider color to a color of your choosing. I will choose #3a18b1.
- Now select Create and there you have your image juxtaposition.
Guess the answer
- In Wordpress, select my site in the upper toolbar, then on the left hand side select H5P Content and select Add new
- Once add new is selected, a bunch of options will appear with a box including Search for content types.
- In the search for content types box, type Guess the answer and click on get and install
- Once you have done this you the get button should be replaced with a blue use. Click that.
- Press use.
- It will now ask for a title, for this activity you can choose your own title or type Fruit in French
- For the description, write Name the fruit in French
- Click the media toggle arrow, next select the type by clicking the down arrow and selecting image
- Click the + add button, and use the fruit we have downloaded previously (see memory game activity top of page).
- I will first add the strawberry by selecting it from my downloads and clicking open.
- Next for the alternative text, I will type red berry
- We will leave the descriptive solution label as click to see the answer
- The solution text will be fraise
- Select the green create button and you have your guess the answer activity.