This feature allow users to click on different parts of a Image and get information or take quizzes, aim to make learning more interactive and engaging.
Examples
Treasure hunt
Treasure hunt
Explore Paintings
Explore Paintings
Find the Object
Find the Object
Guess the feeling
Guess the feeling
To utilize the Image hotspot template, you'll need to configure the custom Image hotspot JSON code template. While this process is somewhat manual, requiring the copying and pasting of Content and Image IDs into the JSON code, it remains straightforward. You can easily adjust the JSON to fit your specific needs. If you encounter any difficulties or have questions, please don't hesitate to reach out to the Cogniss team for assistance.
Setting up Image Hotspot Activity
Let's begin by creating a new activity.
Click on Create a new activity inside the Subjects
Set the template to "Image Hotspots 2024".
Save the changes.
Can't find the Image Hotspot template? This template needs to be enabled by the Cogniss team—please reach out to them for assistance.
Create Contents
Step 1. Create hotspot thumbnail icon and backgrounds (Graphic assets).
To create an image hotspot activity, you'll first need to design the necessary graphic assets. These graphics will be used later by copying their Image IDs and pasting them into the appropriate fields in the Image Hotspot JSON code. These graphics assets are:
Hotspot thumbnail Icons
Image Hotspot Background
Page Background
Design your Hotspot thumbnail icons.
Hotspot thumbnail icons are clickable elements that users can select to view the content associated with them. You can create separate thumbnail icon for each hotspots.
Image size: 110x110pxImage format: PNG & GIF
(We recommend using Hotspot icon Canva template)
Depending on your needs, you may design different icons for each hotspots.
Design your Image hotspot background image.
The hotspot background is the image on which the hotspot thumbnails will be placed.
Image size: 702x702px
Image Format: JPEG, PNG & GIF
(We recommend using Image hotspot background Canva template )
Design your Page Background Image.
Image size: 1920x1080px
Image Format: JPEG & GIF
(Page Background is only appears in web apps)
Step 2. Upload Graphics assets and find their Image IDs.
After you create all graphic assets you can upload them into creator and find their image ID.
Upload the graphic assets such as the hotspot icon and hotspot background into Cogniss Creator. You can upload them by using any "Upload" option located in various places in Creator.
Once you've uploaded the images, you will be able to locate the File ID just above the save button. You will need to copy this ID and paste it JSON code later.
You will need to find Image IDs in upcoming Steps.
Step 3. Create Content Blocks
To place different content blocks into Image hotspot, you will need to create them inside the topic. Later you will have to copy content's id into the JSON code to place them into the image hotspot.
Create all the content blocks inside your image hotspot's Topic, these content blocks can be:
Text Content block
Image Content block
Text Response
Multi Choice
Number Response
Step 4. Finding IDs of questions/content.
Open the content block in the creator.
Check the URL of the content block.
Look at the end of the URL, the Content ID is located right after "questions/".
Copy the Content ID.
Paste the Content ID into the JSON code: Place it inside quotation marks (" ").
You will need to find Image IDs in upcoming Steps.
Configure JSON
After you've created all the necessary content, the next step is to set up the JSON code for your Image hotspot template.
Step 1. Copy the given code
{ "tutorialImage": "", "bg": "Page Background Image ID", "hotspotBg": "Hotspot Background Image ID", "instructions": "Page Title", "hotspots": [ { "name": "Hotspot Title", "image": "Hotspot Icon ID", "x": "X Coordinate", "y": "Y Coordinate", "questions": [ "Question ID" ] }, { "name": "Hotspot Title", "image": "Hotspot Icon ID", "x": "X Coordinate", "y": "Y Coordinate", "questions": [ "Question ID" ] } ] } |
Step 2. Paste the code in the 'Custom JSON' container.
Step 3. Configure Page & Hotspot background.
Bg: Copy the Image ID of the page background image and paste it between the quotation marks (" ").
HotspotBG: Copy the Image ID of the hotspot background image and paste it between the quotation marks (" ").
Instructions: For the instructions; you don't need Content ID, instead you can simply type the text.
Check out, Attribute reference for more information.
Check out, How to find Image ID.
Step 4. Configure Hotspot Thumbnail icon & content.
Name: For name, you can simply type the text for the title for your Hotspot thumbnail.
Image: Copy and paste the hotspot icon ID inside the quotation marks (" ").
Check out, How to find Image ID.
X & Y Coordinate: The placement of the hotspot icon can be configured using X and Y coordinates ranging from 10 to 900. This allows you to set the exact location of the hotspot icon along both axes.
To determine the coordinates, you can use the grid provided on page 3 of the Hotspot Background Canva template. Just copy the grid onto your hotspot background, place the Hotspot icon within it, and reference the X and Y coordinates accordingly, like shown in the example below.
Questions: Here, you will need to copy and paste the Content IDs of the content you’ve created. This content will be displayed when a user clicks on the image hotspot thumbnail icon. Each hotspot thumbnail can be associated with one or more content blocks.
Check out, How to find Content IDs
Repeat the process for other hotspots.
Save Changes
Test hotspot activity on your mobile app or webapp.
Step 5. Add More thumbnails.
To add a new hotspot thumbnail, copy the provided code and paste it in between the existing code as shown:
{ "name": "Hotspot 2 Title", "image": "Hotspot Icon ID", "x": "25", "y": "30", "questions": [ "Question ID" ] } |
Attributes reference
X/Y Coordinates | Use 1-80 This will help set location of the Hotspot Icon in X and Y axis |
Name | Hotspot Title |
Image | Hotspot icon image ID |
Questions/content | Question/content block ID These are the content blocks type we currently support:
|
bg | Background Image ID |
hotspotBg | Hotspot Image Background Image ID |
instructions | Page Title |
Sample Codes:
Template code with 3 hotspot thumbnails:
{ "tutorialImage": "", "bg": "Page Background Image ID", "hotspotBg": "Hotspot Background Image ID", "instructions": "Page Title", "hotspots": [ { "name": "Hotspot 1 Title", "image": "Hotspot Icon ID", "x": "85", "y": "50", "questions": [ "Question ID" ] }, { "name": "Hotspot 2 Title", "image": "Hotspot Icon ID", "x": "25", "y": "30", "questions": [ "Question ID" ]
}, { "name": "Hotspot 3 Title", "image": "Hotspot Icon ID", "x": "10", "y": "70", "questions": [ "Question ID" ] } ] } |
Template code with 4 hotspot thumbnails:
{ "tutorialImage": "", "bg": "Page Background Image ID", "hotspotBg": "Hotspot Background Image ID", "instructions": "Page Title", "hotspots": [ { "name": "Hotspot 1 Title", "image": "Hotspot Icon ID", "x": "85", "y": "50", "questions": [ "Question ID" ] }, { "name": "Hotspot 2 Title", "image": "Hotspot Icon ID", "x": "25", "y": "30", "questions": [ "Question ID" ]
}, { "name": "Hotspot 3 Title", "image": "Hotspot Icon ID", "x": "30", "y": "65", "questions": [ "Question ID" ] }, { "name": "Hotspot 4 Title", "image": "Hotspot Icon ID", "x": "10", "y": "70", "questions": [ "Question ID" ] } ] } |
Template code with 5 hotspot thumbnails:
{ "tutorialImage": "", "bg": "Page Background Image ID", "hotspotBg": "Hotspot Background Image ID", "instructions": "Page Title", "hotspots": [ { "name": "Hotspot 1 Title", "image": "Hotspot Icon ID", "x": "85", "y": "50", "questions": [ "Question ID" ] }, { "name": "Hotspot 2 Title", "image": "Hotspot Icon ID", "x": "25", "y": "30", "questions": [ "Question ID" ]
}, { "name": "Hotspot 3 Title", "image": "Hotspot Icon ID", "x": "30", "y": "65", "questions": [ "Question ID" ] }, { "name": "Hotspot 4 Title", "image": "Hotspot Icon ID", "x": "30", "y": "65", "questions": [ "Question ID" ] }, { "name": "Hotspot 5 Title", "image": "Hotspot Icon ID", "x": "10", "y": "70", "questions": [ "Question ID" ] } ] } |
Template code with 6 hotspot thumbnails:
{ "tutorialImage": "", "bg": "Page Background Image ID", "hotspotBg": "Hotspot Background Image ID", "instructions": "Page Title", "hotspots": [ { "name": "Hotspot 1 Title", "image": "Hotspot Icon ID", "x": "85", "y": "50", "questions": [ "Question ID" ] }, { "name": "Hotspot 2 Title", "image": "Hotspot Icon ID", "x": "25", "y": "30", "questions": [ "Question ID" ]
}, { "name": "Hotspot 3 Title", "image": "Hotspot Icon ID", "x": "30", "y": "65", "questions": [ "Question ID" ] }, { "name": "Hotspot 4 Title", "image": "Hotspot Icon ID", "x": "30", "y": "65", "questions": [ "Question ID" ] }, { "name": "Hotspot5 Title", "image": "Hotspot Icon ID", "x": "50", "y": "75", "questions": [ "Question ID" ] }, { "name": "Hotspot 6 Title", "image": "Hotspot Icon ID", "x": "10", "y": "70", "questions": [ "Question ID" ] } ] } |