AI-Assisted Activity Creation: An Example

Using GAI Tools to Create an Interactive H5P Image Hotspot

Jul 17, 2024

A Story of How I Used GAI Tools to Create an Interactive H5P Image Hotspot

Thank you for reading Diana’s Substack. This post is public so feel free to share it and subscribe if you haven’t already:

Someone in an AI & teachers FB group posted:

Hi! I've been trying to generate an image for a reading comprehension exercise.
I want Helen Stoner's room from The Speckled Band, I used Canva and Adobe but they keep generating images without the details I asked for (specifically the metal chest, the air vent, the bowl of milk and the bell rope). A student of mine suggested that I also use ChatGPT to get good prompts but it doesn't result in anything different. Bing AI has been "processing" for an hour and a half now ... What would you suggest?

My Initial Response: Let’s Generate that Image!

First, I commented on the post that I felt like the key to success was in the prompt. Next, I went to ChatGPT4o for help in crafting that prompt. After some tweaking, this is what we came up with:

Prompt:

Create an image of Helen Stoner's room from 'The Speckled Band.' The room should have a Victorian-era design with a metal chest prominently placed in the scene. Include an air vent on one of the walls, a bowl of milk on a small table or dresser, and a bell rope hanging near the bed. The overall atmosphere should be slightly mysterious and dimly lit, capturing the essence of a suspenseful setting.

Results:

I tried the prompt out with ChatGPT4o and it generated this:

Vintage-style room with patterned wallpaper and wooden paneling, featuring a single bed with a metal frame, a large ornate chest, and small tables with an old-fashioned telephone and a washbowl. The room is lit by natural light from a window with sheer curtains and a hexagonal ceiling light fixture, creating a warm and nostalgic ambiance. — DALL·E 2024-07-15 11.48.49 - Create an image of Helen Stoner's room from 'The Speckled Band.'...

I tried this out with Copilot and got these:

Vintage-style bedrooms featuring elements such as iron beds, wooden furniture including chairs, tables, and ornate chests with intricate detailing. The rooms are decorated with various items like clocks, framed art, and classic radiator heaters. The rooms have patterned wallpaper and are lit by natural light from windows with lace curtains or lamps casting a warm glow, creating a cozy and atmospheric ambiance. — Generated with Designer powered by DALL·E 3 ∙ July 15, 2024 at 11:50 AM

I went back to the FB group and posted these results (as well as the prompt).

My Follow-Up Response: Let’s Generate an Activity!

These images and the whole initial prompt from that FB group made me curious about the book, the character, the room, and the assignment that the teacher was talking about. So I went to ChatGPT4o for a follow-up conversation.

Tell me More!

Specifically, I asked, “Hello ChatGPT4o, someone recently posted about Helen Stoner's room from 'The Speckled Band.' Can you please tell me about this book, this character, and this room?”

Hello Dr. Perdue! The timestamp is 2024-07-15 14:23:00.

"The Speckled Band" is a short story written by Sir Arthur Conan Doyle, featuring his famous detective, Sherlock Holmes. It is part of "The Adventures of Sherlock Holmes" collection, published in 1892.

Book Overview
In "The Speckled Band," Sherlock Holmes and Dr. Watson are approached by a young woman named Helen Stoner, who fears for her life after the mysterious death of her sister, Julia. The story unfolds as Holmes and Watson investigate the strange circumstances surrounding Julia's death and the threats to Helen.

Helen Stoner
Helen Stoner is a key character in this story. She is a young woman living with her stepfather, Dr. Grimesby Roylott, in the family estate, Stoke Moran. Helen seeks Holmes' help because she is terrified that her life is in danger, just like her sister's was before her mysterious death.

Helen Stoner's Room
Helen's room plays a crucial role in the story. Here are some key details:
• Location and Setup: Helen Stoner's room is situated in the manor house of Stoke Moran, adjacent to Dr. Roylott's room. This proximity becomes significant in the investigation.
• Ventilator and Bell-Pull: Holmes discovers that there is a ventilator between Helen's room and Dr. Roylott's room. Additionally, there is a bell-pull beside Helen's bed that is connected to nothing, which is unusual.
• Bed Positioning: Helen's bed is fixed to the floor directly beneath the ventilator, suggesting something suspicious.
• Window: The room has windows that are securely locked, indicating that the threat Helen fears is not coming from outside but within the house.

Significance
Holmes deduces that Dr. Roylott has been using the ventilator and bell-pull to introduce a deadly Indian swamp adder (the "speckled band") into Helen's room to kill her, as he had done with Julia. The fixed bed ensures the snake targets the victim without deviation.

I asked a few more questions about the significance of the room to the plot of the story, and in particular the specific items that were mentioned in the original FB post.

Lightbulb! This could be an activity!

The AI & I were having a nice chat and I found myself thinking about how this would lend itself to a nice interactive type activity to use with students. Side note: I would love to include the chatlog here, but when I tried getting the link I was told:

error message that reads "sharing conversations with images is not yet supported"

(so disappointing)… anyway. Then, I asked:

So, if I wanted to create a "hot spot" type H5P item where the image is a picture of this room and key elements are "hot", could you help me in both the image creation and the text to include for the various items in the room?

Creation Process for H5P: Image Hotspot

ChatGPT4o assured me it could help and off we went into the next phase of this AI adventure, using artificial intelligence to create a cool interactive (but often labor-intensive for a human) activity, in this case, an “image hotspot” H5P.

First, the Image

What’s really interesting here is that ChatGPT4o then created a really lovely image of the room for use in the image hotspot (but that’s quite different than those originally generated). It started by telling me the type of image that would be needed for the hotspot (shown below) and then it told me it would generate the image as described.

Image Creation
Let's start by describing the image you need:

• Room Layout: A Victorian-era bedroom with a bed fixed to the floor beneath a small ventilator in the wall.
• Ventilator: Small, high on the wall, connecting to the adjacent room.
• Bell-Pull: A rope hanging beside the bed, which doesn't actually work.
• Bed: Positioned under the ventilator, looking sturdy and slightly old-fashioned.
• Window: Locked, with heavy curtains.
• Metal Chest: Positioned somewhere in the room, partly visible to signify its importance.
• Bowl of Milk: Placed discreetly, perhaps on a small table near the bed or on the floor.

This indicates to me that adding context is really helpful in image generation if you want to use the result for a specific purpose.

Next, the Hotspots

It then helped me by generating the text that could be included for the various “hotspots” on the image (e.g. for the bed, window, etc.):

Text within this block will maintain its original spacing when published

Ventilator: "This small ventilator is the key to the mystery. It connects Helen's room to Dr. Roylott's, allowing the deadly snake to enter."

Bell-Pull: "The bell-pull beside Helen's bed is a crucial clue. Though it appears functional, it is actually a dummy, serving as a pathway for the snake."

Bed: "The bed, fixed to the floor directly beneath the ventilator, ensured the snake would always find its victim. This detail was pivotal in Holmes' deductions."

Window: "The locked window suggests that the threat comes from within the house, not outside. This detail helped Holmes focus on internal elements."

Metal Chest: "The metal chest in Dr. Roylott's room was used to store the snake securely. Holmes deduced this based on its presence and other contextual clues."

Bowl of Milk: "The bowl of milk was used by Dr. Roylott to train and lure the snake back. Its presence in the room was an unusual clue that caught Holmes' attention."

Finally, the H5P item

Lastly, it gave me directions on how to create the H5P item (Note: I did ask if it could create the H5P but it told me it couldn’t). I already know how to create image hotspots in H5P, but the directions were relatively good:

Step-by-Step Guide to Creating the H5P Hotspot Image Activity
1. Log in to Your H5P-enabled LMS: Access your LMS (e.g., Moodle) and navigate to the course where you want to add the H5P activity.

2. Add an H5P Activity: Select "Add an activity or resource" and choose "Interactive Content (H5P)."

3. Select "Image Hotspots": From the list of available H5P content types, choose "Image Hotspots."

4. Upload the Image: Upload the image of Helen Stoner's room. You can download the image I created and use it for this step.

5. Add Hotspots: Click on the image to place hotspots where the key items are located (ventilator, bell-pull, bed, window, metal chest, bowl of milk).

6. Configure Hotspot Texts: For each hotspot, add the corresponding text:
• Ventilator: "This small ventilator is the key to the mystery. It connects Helen's room to Dr. Roylott's, allowing the deadly snake to enter."
• Bell-Pull: "The bell-pull beside Helen's bed is a crucial clue. Though it appears functional, it is actually a dummy, serving as a pathway for the snake."
• Bed: "The bed, fixed to the floor directly beneath the ventilator, ensured the snake would always find its victim. This detail was pivotal in Holmes' deductions."
• Window: "The locked window suggests that the threat comes from within the house, not outside. This detail helped Holmes focus on internal elements."
• Metal Chest: "The metal chest in Dr. Roylott's room was used to store the snake securely. Holmes deduced this based on its presence and other contextual clues."
• Bowl of Milk: "The bowl of milk was used by Dr. Roylott to train and lure the snake back. Its presence in the room was an unusual clue that caught Holmes' attention."

7. Save and Preview: Save your H5P content and preview it to ensure everything is correctly placed and the text appears as intended.

8. Publish: Once satisfied, publish the activity for your students to interact with.

If I was writing them up for my faculty, I would add screenshots to make it easier to follow along (and know you’re in the right screen in the LMS).

Results: H5P Image Hotspot Created!

First Iteration

I went to my LMS (in this case I used Moodle 4.1) and created the H5P image hotspot. I took a few liberties; for example, I added a few hot spots for areas that are not critical to the story. You can try it out for yourself by clicking the button below:

The Speckled Band Image Hotspot

Second Iteration

Next, I went back to ChatGPT4o and asked for suggestions in creating the instructions for students. This was SUCH a time-saving step! I took them as-generated, but obviously one could edit them as needed:

Instructions for Students

Exploring Helen Stoner's Room from "The Speckled Band"

Welcome to the interactive activity based on Sir Arthur Conan Doyle's short story, "The Speckled Band." In this activity, you will explore a visual representation of Helen Stoner's room, where crucial clues helped Sherlock Holmes solve the mystery. Follow the instructions below to get the most out of this learning experience.

1. Objective:
Your goal is to identify and understand the significance of key elements in Helen Stoner's room that contributed to solving the mystery in "The Speckled Band."

2. How to Use the Hot Spots:
Hover over or click on the various hot spots marked in the image to reveal detailed descriptions of each item. These descriptions will explain their importance and how they fit into the story's plot.

3. Hot Spots to Find:
• Ventilator
• Bell-Pull
• Bed
• Window
• Metal Chest
• Bowl of Milk

4. Think Critically:
As you explore each hot spot, think about how Sir Arthur Conan Doyle used these elements to build suspense and develop the plot. Consider how each item contributed to Sherlock Holmes' deductions and the eventual resolution of the mystery.

5. Reflect:
After exploring all the hot spots, write a brief reflection on how the physical setting of Helen Stoner's room played a role in the story. How did the details of the room help Holmes uncover the truth? Share your thoughts on how the setting enhances the storytelling.

6. Submit Your Reflection:
Once you have completed the activity and written your reflection, submit it as directed in the next activity.

I then added both the instructions and the follow-up reflection assignment, along with the H5P image hotspot activity, into my LMS (learning management system), again, in my case Moodle 4.1. Please note that the reason I’m having to send you to H5P.org to try out the image hotspot activity is because I don’t have the ability to grant you access to my college’s LMS (unless you enroll as a student *smile*) SO, this is the next best thing. Below, however, I do provide you some screenshots of what it looks like in the LMS itself. I also have a brief “walk through” screencast where you can see what it looks like to the students.

Assets and Images

Here’s the “walk through” demo of what it looks like in the LMS, how it displays to students, and how the H5P item works:

Here’s The Speckled Band H5P image hotspot embed code:

<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

<iframe src="https://h5p.org/h5p/embed/1496238" width="1090" height="685" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *" title="Image Hotspots"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

Here are some images and screenshots of the activity:

Representation of Helen Stoner's room in The Speckled Band showing "hotspots" indicated by the letter "i" in a red circle on various objects in the room like the bed, the bell pull, and the metal chest. — The background image used for the H5P hotspot. Note that the (i) indicators (for “information”) can be edited to show (?) instead. This could be useful if you wanted to make the H5P more exploratory than informational.

Screenshots of the H5P activity showing the text that is displayed when someone clicks that "hotspot". An example: when the window hotspot is clicked, this text is displayed: "The locked window suggests that the threat comes from within the house, not outside. This detail helped Holmes focus on internal elements." — Screenshots of the various hotspots as they are clicked by the learner. Note: because the images are in a 3-3 gallery in this post, some text / part of each image may be "cut off" but in the actual activity, they display properly.

Here are some screenshots of what it looks like to the student in the LMS and what the reflection activity looks like:

H5P The Speckled Band item, along with the background information for the students and the Instructions for use

Screenshot of the LMS screen showing the H5P icon and title, along with text to the students providing background information on The Speckled Band. — This is how the H5P image hotspot element appears in the LMS to the student.

Screenshot of the LMS showing the text of the instructions to students for the H5P image hotspot. — This is how the H5P image hotspot element appears in the LMS to the student.

The Speckled Band follow-up reflection assignment, along with the prompt, and the submission screen.

Screenshot of the LMS screen showing the assignment icon and name for the reflection on The Speckled Band. — This is how the follow-up reflection activity (an assignment) appears to the student in the LMS.

Screenshot of the prompt shown to students for the reflection assignment for The Speckled Band. — These are the instructions to the student for the reflection assignment. Note that this reflection prompt, like the additional components of the H5P element itself (i.e. text for the hotspots) were all AI-generated. In this case, I used ChatGPT4o.

Screenshot of the LMS screen showing the submission window for the students to type their reflection. — This is the WYSIWYG (‘what you see is what you get’) editor where the student will type and submit their reflection. Note that I’ve intentionally made the assignment type a written post (not a file upload), but that can be changed in the LMS if desired.

Summary

As you can see, generative artificial intelligence tools like Copilot, ChatGPT, and others can be extremely useful for faculty and teachers seeking to use this new technology to help them create engaging, interactive student activities in much less time than it normally would. I was surprised in how many ways I used the GAI tools in this creation process including:

Getting background information and summaries to provide to students
Creating student instructions
Generating the image needed for the H5P hotspot
Writing alt text for both the image used in the hotspot and for several of the screenshots used in this post
Generating the list of the hotspot items AND the text to include for each
Creating the prompt for the follow-up reflection assignment
Providing instructions on how to create the H5P item itself

I hope you’ve enjoyed this post!

Actions You Can Take

If you want to tell me your thoughts:

Update from Original FB Post

I saw today that the original person posted this update and image:

"I ended up pasting elements to one of the rooms generated."

Challenge Accepted! :-)

I guess this is my next project! Stay tuned.

Diana’s Substack