How to Create a 10-Item Text Entry Interaction in Articulate Storyline 360
Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.
Author: Rema Merrick, MSIT
Published: October 31, 2022
Time to Read: 4 minutes
Summary
I recently created a fun, short Articulate Storyline, Halloween-inspired activity (How to Survive a Zombie Apocalypse) that includes a text entry interaction. The interaction requires the user to recreate a ten-item emergency kit by entering each item into a text entry box. This blog post shows how to create this interaction. The image below shows what the interaction looks like when complete.
Development Time
It took me about three hours to develop this course. Most of the time was spent creating the text entry interaction.
Prerequisites
To successfully build this interaction, you’ll need to know how to complete the following tasks in Articulate Storyline.
- How to create a new project
- How to insert a new slide
- How to add text, images and objects to a slide
- How to create a slide layer
- How to create a variable
- How to create an object trigger
Introduction
The development of this interaction is broken into three major steps: 1) create the base slide (add objects, create variables and add triggers); 2) create a feedback layer (add objects and triggers); and 3) create a navigation layer (add objects and triggers). The base layer is the most complicated layer. Don’t get intimated by the number of triggers; they are quick and easy to duplicate.
Specifications
These are the specifications I used for the objects on the base layer and slide layers.
- Left margin: 25 pixels from left
- Right margin: 25 pixels from right
- Slide Size: 720 pixels by 540 pixels
- Page Title Text: Impact 36 point
- Content Text: Calibri Light 14 point
Development Process
Slide
- Create a new project.
- Insert a new slide.
Base Layer
- Add the page title and instruction texts.
- Page Title: Emergency Kit
- Instruction Text: Create a list of the items you will need for the emergency kit. Type the items in the boxes below. Then select the Submit button.
- Add text-to-speech narration for the instructions. Name the audio object N1.
- Script: Before you rush out to the store to gather the items for your emergency kit, create a list of the items you’ll need. Type each item in a box on the screen.
- Add ten text entry boxes.
- Rename the text entry boxes: TE1, TE2, TE3, etc.
- Rename the variables linked to the text entry boxes (e.g., change TextEntry to TE1 and so on).
- Add ten Number variables: bedding, clothing, documents, firstaid, food, hygiene, medications, supplies, tools and water.
- Add one True/False variable named Correct10 with False as the default value.
- Add a rectangle shape box. Add the text SUBMIT to the rectangle shape box and name it Submit. Add two states to the rectangle shape box: Disabled and Selected. This should give you three states: Normal, Disabled and Selected. Change the initial state to Disabled.
- Add the trigger: Set state of Submit to Normal When N1 (audio) completes. This ensures that the audio plays before the user can submit the interaction.
- Add the trigger: Add value 1 to bedding When the user clicks Submit If TE1 = value water (ignore case). Repeat for the remaining nine text entry variables (TE2, TE3, TE4, etc).
- Add the trigger: Add value 1 to clothing When the user clicks Submit if TE1 = value tools (ignore case). Repeat for the remaining text entry variables (TE2, TE3, TE4, etc).
- Repeat step 11 for the remaining eight Number variables (documents, firstaid, food, hygiene, medications, supplies, tools and water).
- Add the trigger Set Correct10 to value True When the user clicks Submit if bedding = value 1 and clothing = value 1 and documents = value 1 and firstaid = value 1 and food = value 1 and hygiene = value 1 and medications = value 1 and supplies = value 1 and tools = value 1 and water = value 1.
- Add the trigger: Show Layer Feedback When the user clicks Submit.
- Check Point: You should have 113 triggers. Object N1 (narration audio) should have one trigger (1). Object Submit (Submit button) should have 102 triggers (102). Objects TE1 to TE10 should each have one trigger (10).
Feedback Slide Layer
- Create a slide layer called Feedback.
- Add three rectangle shape boxes: Duplicate, Incorrect and Correct. Change the initial state on them to Hidden. Change the color of each box: Duplicate to brown; Incorrect to red; and Correct to green.
- Add the following text to each rectangle shape box:
- Duplicate: You duplicated one/more answers. The correct answers are water, food, medications, tools, supplies, hygiene, clothing, bedding, important documents and first aid supplies.
- Incorrect: You missed one/more answers. The correct answers are water, food, medications, tools, supplies, hygiene, clothing, bedding, important documents and first aid supplies.
- Correct: You’re ready to go. You remembered everything on the list: water, food, medications, tools, supplies, hygiene, clothing, bedding, important documents and first aid supplies.
- Add the trigger: Set state of Correct to Normal When the timeline starts on this layer If Correct10 = value True.
- Add the trigger: Set state of Correct to Incorrect When the timeline starts on this layer If Correct10 = value False.
- Add the trigger Set Duplicate to Normal When the timeline starts on this layer if bedding = value 1 or clothing = value 1 or documents = value 1 or firstaid = value 1 or food = value 1 or hygiene = value 1 or medications = value 1 or supplies = value 1 or tools = value 1 or water = value 1.
- See item 12 in the Navigation Slide Layer section. You’ll need to accomplish this task after you create the Navigation Slide Layer.
- Check Point: You should have four triggers on the Feedback slide layer.
Navigation Slide Layer
- Create a slide layer named Navigation Buttons.
- Add two buttons: Back and Next.
- Add the trigger: Jump to slide previous slide When the user clicks Back Button.
- Add the trigger: Jump to slide next slide When the user clicks Next Button.
- Go back to the Feedback slide layer. Add the trigger: Show layer Navigation Buttons When the timeline starts on this layer.
- Check Point: You should have two triggers on the Navigation Buttons layer. The Back Button object should have one trigger and the Next button object should have one trigger.
- If you haven’t already done so, change the Slide Properties: Slide navigation and gestures section. Deselect Buttons: Prev, Next and Submit. Deselect Swipe Prev and Next.
Wrap Up
The development of this interaction was broken into three major steps: 1) create the base slide (add objects, create variables and add triggers); 2) create a feedback layer (add objects and triggers); and 3) create a navigation layer (add objects and triggers). The base layer is the most complicated layer.
Please share your comments regarding the project and development process. I would love your feedback on what you found helpful, what you found confusing and what additional information would have been more helpful.
ENOVATE LEARNING HOW -TO CREATE INTERACTIONS GUIDE
Contact
If you have any questions about this article or our company, please contact us at info@enovatelearning.com or (727) 897-5456.
You must be logged in to post a comment.