Magnifying glass template

Mar 04, 2024

Alex Milyaev
By Alex Milyaev

Hello everyone!

A few weeks ago, there was a challenge that I didn't manage to submit my entry for. But now it's time to make up for lost time.
 
I've created a game where you need to spot traffic rule violators from a bird's eye view.
 
 .
 
The course was designed for PC, but it also works on smartphones, albeit with some nuances.
 
 
The course was developed in Articulate Storyline using web objects.
 
You can download the course source and the web object at the bottom of this post.
 
Below you can read how to use the template, or you can watch the video on YouTube (the video has English subtitles).
 
How does it all work?
 
Let's start with the web object. It consists of three files: a background image, an image that marks found objects, and an index.html file.
 
Naturally, you'll need to replace the images with your own and do some editing of the code file.
 
At the top of the code, we can adjust the styles of our magnifying glass, i.e., how it will look. Here, we can change the height and width of the magnifying glass.
 
On line 15, we can change the color and width of the stroke. And on line 16, specify the corner radius. In our case, it's 50%, which makes our magnifying glass round. At 0%, it will be square.
 
 
Here, we set the background image settings. Essentially, we're only interested in the width and height values, which are set in pixels. Specify the size that the web object will be in the course.
 
 
The following blocks are images with checkmarks that mark correctly identified violators. Each violator has a separate checkmark and, consequently, a separate line of code. I have 8 violations, so there are 8 lines.
 
 
For each checkmark, we specify an ID. It must be unique.
 
We specify the dimensions. In my case, it's 50 by 50 pixels.
 
And we specify the location of our images. The first number indicates the Y position, the second the X position.
 
Scrolling down, on line 101, we can change the degree of zoom. The larger the number in parentheses, the stronger the zoom effect will be.
 
 
In these blocks, we check where the user clicked.
 
 
Here we specify the range of coordinates for the X and Y where the violation is located. When clicking on a violation, we pass this information to Storyline.
 
 
Every time the user clicks on a violation, our variable "next trigger" and variable "clue1" will increase if clicked on the first violation, "clue2" if on the second, and so on.
 
If you run the project in a browser and open the developer console, the click coordinates will be displayed in the console when clicking on the image. This can help you place objects faster.
 
Storyline time
 
After adding the coordinates of all violations to the web object, we move to Storyline and insert the web object into it.
 
 
We add numerical variables "next trigger" and 8 variables "clue," one for each violation.
 
 
Now we create 3 layers: a layer with hints, a layer with a menu, and a starting layer where we'll provide exercise instructions.
 
 
Now we need to make sure that the menu layer opens when a new violation is found. When a violation is found, the value of the "next trigger" variable and the values of the "clue" variables change. I don't want the menu to open again when clicking on an already found violation. Therefore, we'll set the following triggers: When the "clue1" variable changes, we switch to the menu layer, but only if the value of the "clue1" variable is equal to one. Initially, the variable is set to zero. When we find the first violation, the variable's value will increase to one, and the layer will open. If we click on the violation again, the variable's value will become two, and our trigger won't work accordingly.
 
 
We'll create such a trigger for all "clue" variables.
 
On the menu layer, we add a background image and images of violations.
 
Now we need to ensure that initially there are no photos of violations on the board, and when a violation is found, the photo appears with some animation.
 
We'll apply a zoom-in animation to all photos upon appearance and set all images to a hidden state.
 
 
Now let's move on to layer settings. Initially, the settings are such that when the layer is opened, it returns to its initial state. For example, if we moved some object from a hidden state to a normal state, closed the layer, and then opened it again, the object would be back in the hidden state. We don't want this situation. Therefore, in the layer settings, we'll specify to preserve the current state upon revisiting.
 
Now let's move on to the triggers that will open the violation photos.
 
When the "clue" variable changes, we switch the relevant photo to the normal state. In an additional condition, we specify that the "clue" variable must be equal to one. We create such a trigger for all "clue" variables.
 
So now, when the "clue" variable changes, we open the layer with photos and switch the relevant photo to the normal state.
 
 
Let's move on to the hints layer.
 
Why do we need such an element in the course? Some users may not find all violations. They may overlook something or not understand what the violation is. Consequently, for such users, the course will become impassable. Revisiting the theory is also unlikely to help them. Adding hints will greatly improve the user experience.
 
The logic of this layer will be as follows: When the layer opens, the officer will hint at where to look for violations. At the same time, he should naturally hint at those violations that have not yet been found.
 
Let's create a speech bubble and add 9 states to it. We have 8 violations, so we'll have 1 state for each violation, and the last 9th state will be a hint to press the green arrow if you have found all violations.
 
 
Now let's add triggers. When the layer's timeline starts, we'll change the state of our speech bubble to the first one if the "clue1" variable equals 0. That is, if the first violation hasn't been found, the state of the bubble will change. We'll set a similar trigger for all states except the last one.
 
 
How will this work? Triggers work from top to bottom, so if we ask for a hint when no violations have been found, the state of our bubble will start at the first, then immediately change to the second, and so on. Eventually, it will stop at the 8th state. If the 8th violation is found, the state change will stop at the 7th state.
 
Now let's create a trigger for the last 9th state. It should appear if we have found all violations. That is, if the value of all "clue" variables is greater than 0.
 
 
That's it, the course is ready.
 
When publishing the course, there are 2 important points:
 
First, when we add a web object to the course, it won't be displayed during preview. It's necessary to publish the course.
 
Secondly, if our course in Storyline exchanges variable values with web objects, and our course does, then the variable exchange function won't work when publishing the course on the hard drive of your computer. For testing such mechanics, we need to either upload the course to an LMS or publish the course in Review 36
2 Replies
Sign In to Reply