In the previous tutorial, we imported the images for a coloring game for iBooks Author^R that we are making in Hype Pro. Now we will add the interactive elements to the game.

Open your Hype document and let's get started.

Our first step is to add an identity to each of the layers that need to disappear when clicked. This includes the line art layers for the duck body, wing and beak. By assigning each of these layers an Unique Element ID, we can then program the visibility of these layers with JavaScript.

1. Open the Identity Inspector.
   
   
2. Select the duck_body_line layer in the Main Timeline.
   
   
3. In the Identity Inspector, add a Unique Element ID. Let's use the ID of Body.
   
   
4. Select the duck_wing_line layer and add Wing as the Unique Element ID.
   
   
5. Select the duck_beak_line layer and add Beak as the Unique Element ID.
   
   

Now that the layers have Unique Element IDs, we can add the action to these layers. We will use JavaScript and the Display property to control the visibility of these layers. The default Display property value for an image is inline, which means that the image is displayed within the rest of the HTML and does not start on a new line.

To hide the images we will use JavaScript to change the display property value from inline to none for each of the line art layers. This will reveal the color fill layers below.

object.style.display="none"

1. Open the Actions Inspector.
   
   
2. Select the duck_body_line layer.
   
   
3. In the On Mouse Click (Tap) section, click the Plus icon.
   
   
4. In the Action drop-down menu, choose Run JavaScript.
   
   
5. Because this will be a custom JavaScript, set the Function drop-down menu to New Function. This will open a new tab window with the default JavaScript code and a function named untitledFunction.
   
   
6. Change the function name from untitledFunction to BodyFunction. You will see the name of the tab change to BodyFunction().
   
   Next we will add the code to set the display property to none for the Body element. Add the following code on the empty line 5.
   
   hypeDocument.getElementById("Body").style.display = "none";
   
   
7. Go back to the Untitled Scene tab window and select the duck_wing_line layer.
   
   
8. Repeat the previous step to change the function name to WingFunction and add the following JavaScript.
   
   hypeDocument.getElementById("Wing").style.display = "none";
   
   
9. Select the duck_beak_line layer, change the function name to BeakFunction and add the following JavaScript.
   
   hypeDocument.getElementById("Beak").style.display = "none";
   
   That's it. Let's test in the Browser. If all goes well, export the project as an iBooks Author widget.
   
   
10. From the Menu, click File - Export as HTML5 - Dashboard/iBooks Author Widget.