Exercises: Events and interactions

Here are six examples of events and interactions. We recommend that you follow along the steps in the exercises below to complete them.

Exercise 1: Linking to another screen

Add “Link To” events to navigate to other screens in your prototype and make your prototype interactive. In this exercise, we’ll learn how to create “Link To” events.

Link to another screen

Follow these steps to recreate our example:

  1. In a new prototype, drag a Text widget and a Button widget onto the Canvas. Label the Text “Screen 1”, and the Button “Go to Screen 2”.
    Drag text and button
  2. Create a new screen by clicking the ‘+’ icon in the Screens palette. Name this screen “Screen 2”.
    Create new screen
  3. On this screen (Screen 2), drag a Text widget and a Button widget onto the Canvas. Label this Text element “Screen 2” and the Button “Go to Screen 1”.
  4. Go back to Screen 1, and select the Button by clicking on it on the Canvas, or by selecting it in the Outline palette.
    Select button for event
  5. Look to the Events palette at the bottom of the screen. Click on the “Add event” button.
    Add event button
  6. In the Events Dialog that appears, follow these steps to build the event:
    Link to event
    1. Choose the “On Click” trigger
    2. Choose “Link To” as the resulting action
    3. For the target of the link, select “Screen 2”
    4. Click “OK” to finish building the event.
  7. You can view the event you have just created by looking to the Events palette.
    View event
  8. Now click “Simulate” and click on the button on Screen 1. You’ll then be linked to Screen 2.
  9. Repeat steps four through six on Screen 2, creating an “On Click” + “Link To” event for the “Link to Screen 1” button, choosing Screen 1 as the target to be linked to.

Another way of creating “On Click” + “Link To” events is by dragging an element to a Screen in the Screens palette.

Drag to create link to event
Additionally, you can right-click on an element to create the “On Click” + “Link To” event.

Right click to add link to event

You can download our example here.

Exercise 2: Showing and hiding content

Next, we’ll learn how to use the Events palette to create events to show and hide UI elements on the screen.
Show hide content

  1. In a new prototype, drag two Button widgets and an Image widget onto the Canvas. In our example, we’re using an icon from the Mobile Wireframing widget library as the Image. Label one Button “Hide icon” and the other Button “Show icon”.drag icon onto canvas
  2. Mark the Image element as hidden by selecting it on the Canvas or in the Outline palette, and then going to the Properties palette and ticking “Hide component”. Now, when simulating, this Image will not appear on the screen.Hide component
  3. Select the “Hide icon” button and click on “Add Event” in the Events palette.hide icon add event
  4. In the Events Dialog that appears, follow these steps to build the event:hide icon event details
    1. Leave the trigger as “On Tap”
    2. Change the resulting action to “Hide”
    3. Now, select the Image as the target to be hidden. You can also specify an effect to make the hide action look more smooth
  5. Now select the “Show icon” button and click on “Add Event” in the Events palette.
  6. In the dialog that appears, follow these steps to build the event:

    1. Leave the trigger as “On Tap”
    2. Change the resulting action to “Show”
    3. Select Image as the target to be shown. Click OK to finish building the event

Note: if you are using a Web prototype, all “On Tap” triggers will be listed as “On Click”.

Click “Simulate”. When you click on the “Show icon” button, the Image will appear, and if you click on the “Hide icon” button, the Image will disappear again.

You can download our example here.

Exercise 3: Changing the style of content

In our third exercise, we’ll learn how to change the style of content when we mouse over it.mouse over example

  1. In a new Web prototype, drag a Text widget onto the Canvas and label it “Mouse over to change color”.Drag text onto canvas
  2. With the Text element selected, click on “Add Event” and follow these steps to create the event:

    1. Change the trigger to “On Mouse Over”. You can find this trigger by hovering over the “Mouse” trigger options, which will reveal a list with the “On Mouse Over” trigger
    2. Choose the “Change Style” action
    3. At the bottom of the Events Dialog, click on the ‘Select styles to change’ dropdown
    4. In the dropdown, navigate to ‘Text’, then ‘Color’
    5. In the ‘Text color’ selector that appears, choose a color
    6. Click “OK” to finish building the event

Click “Simulate” and mouse over the text. It will change to the color you’ve defined. When your mouse leaves the text, it will revert back to its default color.

You can download our example here.

Exercise 4: Show an effect on mouse over

In this exercise, we’ll learn how to create events with multiple actions. One action will change the style of some text, and the second action will show elements on the Canvas. Follow these steps to complete the exercise:Mouse over effects

  1. Create a new Web prototype. Drag a Text widget and two Image widgets onto the Canvas. In our example, we use icons from the Web Wireframing widget library as the images. Label the Text widget “View images”.Drag images onto Canvas
  2. Select both of the icons on the Canvas by Control-clicking (or Command-clicking if on Mac). Then, mark them as hidden by ticking the ‘Hide component’ box in the Properties palette. Now, when simulating, these icons will not appear on the screen.hide images
  3. With the Text element selected, follow these steps to create the first event to change the text’s style:

    1. Choose the “On Mouse Over” trigger
    2. Choose the “Change Style” action
    3. At the bottom of the Events Dialog, click on the ‘Select styles to change’ dropdown
    4. In the dropdown, navigate to ‘Text’, then ‘Color’
    5. In the ‘Text color’ selector that appears, choose a color
    6. Navigate back to the ‘Select styles to change’ dropdown
    7. In the dropdown, navigate to ‘Text’, then ‘Decoration’
    8. In the ‘Decoration’ selector that appears, choose the ‘underline’ icon
    9. Click “OK” to finish building the event

  4. With the Text element selected, look to the Events palette, where you’ll find the event you just created. Click on the action and a blue border will appear around it. Then, click on the ‘gear’ icon and a dialog will appear. Select ‘add action after selected’.add action after change style
  5. The Events Dialog will appear. Follow these steps to create the event to show the icons:mouse over show images
    1. Leave the trigger as “On Mouse Over”
    2. Choose “Show” action
    3. For the target of action, Control-click (or Command-click if on Mac) the two icons in the Events Dialog Canvas.
    4. Click “OK” to finish building the event.
  6. Back on the Events palette, you’ll find the actions you just created. Now, there will be an ‘arrow’ icon between the actions. Click on the arrow, and a dialog will appear. Select ‘WITH’ previous. Both actions will now execute at the same time.change action execution

Click “Simulate”. When you mouse over the text, it will change color and become underlined, and the two icons will appear. When your mouse leaves the text, it will revert back to its original color and decoration, and the icons will disappear.

You can download our example here.

Exercise 5: Tab between fields in a form

In forms with multiple input fields, users often tab (jump) between fields using the “TAB” key on their keyboard.
Exercise 5 results
Follow the below steps to learn how to simulate tabbing in your Justinmind prototypes:

  1. Design an input form by dragging Text and Input Text Field widgets to the Canvas. To reproduce our example, create “Username”, “Password” and “Confirm Password” fields.
  2. Select the “Username” Input Text Field and go to the Events palette. Click the “Add event” button.Add event
  3. In the dialog that appears, create the following event:dialog create event
    1. Add an “On Key Down” event trigger
    2. In the center field, enter the “TAB” key on your keyboard. The “TAB” key is what the user will enter in order to trigger this event
    3. Add a “Set Focus On” action
    4. Select the “Password” Input Text Field to be the target of the “Set Focus On” action. Click “OK”
    5. Repeat these steps for the “Password” Input Text Field, selecting the “Confirm Password” Input Text Field as the target of that “Set Focus On” action

Click “Simulate” and enter the “TAB” key. The cursor should jump from the “Username” Input Text Field to the “Password” Input Text Field, and then from the “Password” Input Text Field to the “Confirm Password” Input Text Field once pressing “TAB” again.

You can download our example here.

Exercise 6: Create a custom calculator

In this last exercise, we’ll learn how to create a calculator using “Set Value” actions. Follow these steps to complete the exercise:

  1. In a new prototype, drag two Text widgets, two Input Text Field widgets and an Image widget onto the Canvas. Label one Text element “Add values” and the other “Result”. For the Image element, upload a ‘+’ icon, or use one of the pre-made ‘+’ icons found in the iOS Icons widget library.
  2. Select the “+” image or icon and click “Add Event”. Follow these steps to create the event:

    1. Keep the trigger as “On Tap”
    2. Change the resulting action to “Set Value”
    3. For the target of the “Set Value” action, select the “Result” Text element
    4. For the value to be set by the action, click on the ‘Calculated’ radio button
    5. In the Value Expression builder that appears, select one of the Input Text Fields, and drag it into the first space, which is labeled “Double click to edit or drag & drop a component”
    6. Next, look to the Functions below, and drag a ‘+’ next to the Input Text Field space
    7. Lastly, drag the other Input Text Field into the open space that just appeared next to the ‘+’ icon.
    8. Click “OK” twice to finish building the event

Note: if you are using a Web prototype, all “On Tap” triggers will be listed as “On Click”.

Click “Simulate” and enter in a number in each Input Text Field element, and then click on the ‘+’ icon. The sum of those values will appear in the “Result” text.

You can download our example here.