What is Image Analysis?
Image Analysis tasks your audience with finding specific spots or areas on an image.
How does Image Analysis work?
The user is presented with an image and a statement about what they need to find in the image. The user then clicks on areas they think apply to the statement. Once a correct answers is selected, a pop-up with important information will appear.
When is it used?
Image Analysis is a great training tool for visual awareness or instructional materials.
How do I build an Image Analysis task?
Below are instructions on how to build an Image Analysis task inside your project.
Image Analysis is an advanced task type.
You will not be able to build this task if you don't have access to Adobe Illustrator and have the necessary technical skills to set up the required files properly.
If you need help with Image Analysis, get in touch with us.
How to create the required SVG file
- Download the TIQ-Software-Placeholders.zip file
- Open Image Analysis-horizontal.ai or Image Analysis-vertical.ai
- Place your image in the background layer and embed it
- Create new layers for your hidden items and label them hitzone1, hitzone2, hitzone3, etc.
- Outline your hitzone areas using the shape and/or the pen tool
- Select all of your outlines and apply the hiddenitem graphic style
- Save out as an SVG
- Select to embed your image and to include unused graphic styles
- Open the SVG file in a text editor (e.g. TextEdit) to make sure your code is correct
- .correct and .hiddenitem should be the only two styles saved in the SVG file
- The background image should be surrounded by background tags
- Each hitzone layer should appear as its own tag
- Each shape within a hitzone tag should have the hiddenitem class applied to it
Image size and specs
Vertical
- 960 pixels wide x 970 pixels high
- Saved for web
- .jpeg
- We recommend optimizing your image via TinyPNG.
Horizontal
- 1920 pixels wide x 895 pixels high
- Saved for web
- .jpeg
- We recommend optimizing your image via TinyPNG.
 |
 |
| Embed your image and label your hitzones properly (e.g. hitzone1, hitzone2, etc.) | Apply the proper style to your hitzones |
 |
|
|
.correct and .hiddenitem should be the only two styles saved in the SVG file |
|