How To Create a Hidden Object Project
I saw in the forum today someone ask how could they create a project that was similar to a hidden object game. By this they meant, how does one create an experience where the user gets to click around a picture and get feedback if they have selected a correct/incorrrect object and how can you set it up so they can see the number they have found.
There are certainly several ways to create this type of project as are most projects created in Storyline, but here is the first method that came to my mind.
I found a picture that had some good guys and bad guys in it. My “instructions” ask the user to find all the bad guys, of which there are 2.
On top of this image I placed several rectangle shapes over the items the person might click on. I could have placed them over as many items as I could fit rectangles over. I could have used a different shape. I could have made them larger or small. You can see them outlined in red in the image – the red is only there for you to see where they are placed.
I then added states to each shape – Found and Wrong. I could have called these states anything. I removed the rectangle from each of these states (Yes you can do that) and added in instead a check mark to the Found state and an X to the Wrong state. Finally, on the Normal state I made the rectangle fill to transparent with no outline.
The reason I used transparent shapes instead of hotspots is because you can not add states to hotspots. I want the states to appear each time someone clicks and item on my slide. After I created one rectangle, I copied it, pasted it, and placed more around the slide onto the other items I want users to click on. Note that when the user moves around the screen thier cursor will change to a little hand giving them a hint that there is something clickable there.
Next was to set up my triggers. Click a correct item and the state of the rectangle is set to Found. Click an incorrect item and the state of the rectangle is changed to Wrong.
The next issue was to give the user some feedback on how many items they have found. I did this in three ways.
- To the left is a variable being displayed as it changes.
- The middle shows 3 strikes that change as they pick incorrect items.
- To the right are happy faces that change as they pick correct items.
For option 1 and 3 I created a number variable and called it BadGuys. As a user clicks a transparent rectangle that has been placed over a “badguy” the variable has one added to it.
For option 1 this variable is displayed on the screen in a text box by typing in a percent symbol before and after the variable name. I could have made this text box display any statement I wanted: e.g. “You have found %BadGuys% BadGuys”. The red text here would change to a different number each time they click a correct choice.
Remember that you need to create a trigger to make this variable change. So in my example if the user clicks a badguy, [when looking at the trigger panel top to bottom] first the state of the rectangle would change to Found, next the variable badguys has 1 added to it.
For option 3 when the variable changes the happy face changes state and is coloured in yellow. Again triggers must be created for this to happen, but there is a benefit to this method. The benefit, in my example, is that I can control how the feedback is going to be displayed regardless of the order that users click around the screen. If they click any of the bad guys, the variable BadGuys has 1 added to it, and the happy face farthest to the right is filled in (changed to Down state in this case). When they click another bad guy the variable has another 1 added to it (now equals 2) and the next happy face to the left gets filled in. I could change the order of how they are displayed, but it is not dependant on the order of how the user clicks objects on the screen.
Option 2 would be my least preferred method for feedback because it is dictated by the order users click on the screen. Option 2 is the strikes or Xs that you see. If the user picks “good guy 1” then I created a trigger that changes the state of Strike 1 to filled in. If they pick the bear a trigger changes the state of Strike 3. So the strikes will not necessarily get filled in left to right, or right to left, but more haphazardly as the user clicks around the screen.
The full example of this solution can be found here as a source file or you can click below to view it.