Image Map Activity
With the Image Map Activity, you can give users an image with specific parts you want them to be able to identify. As they scroll over the image, a popup will display additional information for that spot. They can practice as many times as they want.
| Panel | ||
|---|---|---|
| ||
Things to know |
Activity title:
Up to 35 characters look best (50 max)
Activity instruction:
Up to 50 characters look best (500 max)
Character limitsNumber of hotspots:
Unlimited
| Panel | ||
|---|---|---|
| ||
You will want to avoid overlapping hotspots. |
Hotspot Heading character Limit:
Up to 50 characters
Hotspot Description word Limits:
Up to 150 words look best
Up to 75 words if using an image
Activity image best practice:
Recommended main image size 740 px 1020px width x 240 px height to fill slide without a scrollbar.
| bgColor | #DEEBFF |
|---|
665px height
Recommended hotspot image size 366px width x 290px height
To maintain image quality, crop the image dimensions using any image editor (ex. Paint/Paintbrush).
| Panel | ||
|---|---|---|
| ||
If an image is re-sized but not cropped to match pixel dimensions, the image may be stretched or squeezed to fit which can degrade the image quality. |
| Panel | ||
|---|---|---|
| ||
Image of Activity |
| Panel | ||
|---|---|---|
| ||
Tips |
When a user clicks the X in the activity, the card is removed from the deck.
This is a study guide feature that allows the user to customize the deck to meet their study needs.
The card is maintained in the activity and will repopulate when the page is refreshed.A scrollbar will be available to view content that expands more than 255 pixel height.
Customize the Animation method used to Card Flip, Move to Next Card, or Move to Previous
<insert video of animation changes>
You will want to avoid overlapping hotspots to ensure clear interactions with the activity.
In the activity editor, you can Zoom into the image to better draw the hotspot. Use the icon to drag the Zoom image.
| Panel | ||
|---|---|---|
| ||
Accessibility |
Screen readers will also read out loud:
Activity Title
Activity Instructions
Complete Button
Activity Keyboard Command List
Slide Hotspot Heading/Description text
Hotspot Image Alternative Text
| Panel | ||
|---|---|---|
| ||
Keyboard Command list for Activity |
Create a Image Map Activity
| Panel | ||
|---|---|---|
| ||
Build the Activity |
Click + to create a card.
Add text, image, or media content to the card.
Click in the editor window to:
Format text font style, size, color, and alignment.
Click the image icon to add an image to the flash card.
Click the media icon to add media to the flash card.
Use the link icon to hyperlink text to a website, local files, etc.
Use the right-click menu to add even more features.
4. Adjust the Animation method (optional):
Card Flip
Move to Next Card
Move to Previous
5. Turn Shuffle: On to automatically rearrange the cards. (optional)
6Select File to insert your local image file, SoftChalk Cloud image file or URL image file location.
Click
to create a HotSpotClick and drag to color part of the image.
| Panel | ||
|---|---|---|
| ||
Students do not see the HotSpot |
Enter text in the Heading and add text,
images, and more in the Description area.Repeat STEPS 2-4 until all HotSpots have been created.
When finished, click OK.
The
Image Map Activity placeholder will appear in the lesson.
Preview the lesson changes.
| Panel | ||
|---|---|---|
| ||
Image Map Activity video |
| Panel | ||
|---|---|---|
| ||
Show Answers Hints (on) |
When Shuffle Show Hints is toggle ON, the Flash Cards are displays at a random ordercolored hot spot will appear on the image when the student completes the activity.
| Panel | ||
|---|---|---|
| ||
Video Image of Show Answers EnabledHints ON |
| Panel | ||
|---|---|---|
| ||
Show Answers Hints (off) |
When Show Answers Hints is toggled OFF, the Flash Cards display in the order set within the activity editorcolored hot spot will not appear on the image. The Complete button is not available.
| Panel | ||
|---|---|---|
| ||
Image of Show Hints OFF |
| Panel | ||
|---|---|---|
| ||
Customize Hot Spot Color |
Notice a different color appears when
adding a new hotspot.
Click on the hotspot color swatch to determine the color.
With Show Hints: ON, students will see this color as a dot to identify the hotspot in the image.
The dot is placed with the first click to draw the hotspot on the image.
Only the activity creator will see the drawn hotspot on the image.
| Panel | ||
|---|---|---|
| ||
Image of HotSpot color pallet |
| Panel | ||
|---|---|---|
| ||
Customize Hot Spot Description |
Each hotspot has a Heading and Description field.
Use the Description field to add additional information and content to the hotspot popup, such as hyperlinks, images and equations.
| Panel | ||
|---|---|---|
| ||
Video of Show Answers Disabled Image of HotSpot fields |
Image Map Activity Mobile Views
Vertical | Horizontal |
|---|---|
 |  |