This feature enables you to create interactive and engaging learning content in your app by allowing users to click on different parts of an image to view information or answer questions.
Examples
Treasure hunt
Treasure hunt
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 the Image Hotspot activity
Let's begin by creating a new activity.
Click on Create new activity within Subjects.
Select the "Image Hotspot" template.
Save the changes.
Can't find the Image Hotspot template? This template needs to be enabled by the Cogniss team, please get in touch via the Chat.
Create Your Content
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 icons for each hotspot.
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 only appears in web apps)
Step 2. Upload Graphic 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
Image Content
Text Response
Multichoice
Number Response
⚠️ Note: Cogniss Markup Language (CML) is not supported in the Image Hotspot activity template.
Step 4. Finding IDs of subjects, activities, and questions
Open the content block, activity, or subject in Creator.
Next, go to the page URL in your browser. The ID is located at the very end of the URL, after the final “/”.
Copy the ID and paste it into the JSON code, making sure it is placed inside the quotation marks (" ") without any spaces.
Configuring the Image Hotspot JSON
After you've created all the necessary content for your activity, the next step is to set up the JSON code for the 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 and 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 to add a content ID, instead you can simply type the text.
Refer to Attribute reference for more information.
Refer to How to find Image ID if you need a refresher.
Step 4. Configure Hotspot Thumbnail icon and 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 (" ").
Refer to How to find Image ID if you need a refresher.
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.
Refer to 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 Question 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" ] } |
Optional: Add Activity links to Thumbnails
To link to another activity within a hotspot, copy the provided code and insert it into your existing code exactly where shown. Then replace “Activity ID” with your own activity ID, making sure it’s entered correctly.
{ "name": "Hotspot Title", "image": "Hotspot Icon ID", "x": 10, "Y": 10, "activity": "Activity ID" } |
Optional: Add Subject links to Thumbnails
To link to another subject, copy the provided code and insert it into your existing code exactly where shown. Then replace “Subject ID” with your own subjectID, making sure it’s entered correctly.
{ "name": "Hotspot Title", "image": "Hotspot Icon ID", "x": 10, "Y": 10, "subject": "Subject 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 / Subject & Activity Link | Question/content block ID These are the content blocks type we currently support:
Note: Cogniss Markup Language (CML) isn’t supported in the Image Hotspot template. |
bg | Background Image ID |
hotspotBg | Hotspot Image Background Image ID |
instructions | Page Title |
Sample code
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 three hotspot thumbnails, one content block, one activity link, and one subject link.
{ "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", "activity": "Activity ID" ] }, { "name": "Hotspot 3 Title", "image": "Hotspot Icon ID", "x": "10", "y": "70", "subject": "Subject ID" ] } ] } |