Table of Contents

Create a Wordle in Storyline

two phones side by side with wordle and WordEL onscreen

Recently I discussed the challenge of developing an interaction in Storyline inspired by Wordle for one of our clients and the issues that we came up related to the learner experience, making the activity reusable, and with accessibility. I promised that I would share my work if people were interested. We were delighted to hear from so many people that I decided to write up the details of how I created the interaction. While we were able to build an engaging interaction based on the game Wordle, we ran into some challenges that required some compromise. 

If you didn’t get a chance in the first article, you can try the Wordle built in Storyline. Read on to learn more about how we set this up in Storyline. At the end of the article is a link to download the Storyline file.

Configuring the Slide for Wordle

The concept of Wordle involves guessing the letters that make up a word, so to create this puzzle, I created several Layers:

  • How to play:  This layer has the game instructions and a reminder about what each color represents.
  • Introduction: This contains any directions and blocks the learning from clicking on the puzzle until this is complete.
  • Pause: This is a unique layer that lasts less than a second, one counter trigger on it, and is simply used to give a small space between keystrokes when the learner types into the puzzle.  This will be addressed further when we talk about triggers.
  • Base layer: This contains all of the letter tiles, text variables, and general layout of the puzzle.
  • Correct and Incorrect layers: This is where learners can see more information about the correct answer and expand on the content presented in the word puzzle and clue.  This is important in anchoring the learner in the content and turns this into more than just a word guessing game.
  • Attempt layers:  the number of attempt layers will vary depending on how many rows of tiles are in the puzzle.  For each row, an attempt layer needs to be added.
Slide layers for wordEL interaction

Button States as Feedback in Storyline

Button states started as a way to show that users were clicking on something or hovering, however, in this example, we’re using them as a way to change the color of squares where letters are entered.  By changing the color, learners are provided feedback about their response and can move forward in the puzzle based on this feedback.

To mimic the layout of the Wordle game, a box with different states needs to be created that will change based on the learner’s response.  These should be given clear names that will be helpful when creating state change triggers for them later.  I called them correct (for correct letter and placement), partial (for correct letter, but incorrect placement), and incorrect (for any incorrect letter).  

button state for wordle interaction

This box will need to be copied for as many letters that are in the word, and then recopied based on the number of attempts you want to give the learner.  I labeled the boxes in the timeline depending on where the box is placed.  (ie. row1box1, row1box2, etc.). 

You will also insert a text variable over each of these boxes- increase the font size to fill the box, center it, remove any shape fill or outline formatting so that it is transparent.  I labeled them onscreen in the order that they appear in the boxes: 11-14 (first row), 21-24 (second row), 31-34 (third row) 41-44 (fourth row). Each of these text variables will be associated with 26 key press triggers, one for each letter of the alphabet. We will address variables and triggers next.

The Power and Peril of Variables

At Endurance Learning, every Storyline file will be touched by multiple people and we often have to revisit courses to translate courses into multiple languages. Even if our only need is to look at a file 3 months after first building it, we find it incredibly helpful to label variables, shapes, text fields, etc. very clearly.

To give the learner feedback for each typed response that they make, each text variable is named in sequential number order and I avoided using letters so that it would be less confusing when I started working on the triggers. 

In addition to a variable set for each text entry, you will set the follow other variables:

variables for wordle interaction

Triggers, Where the Magic Happens

In some programming languages you have to define the initial value of a variable. Storyline clearly doesn’t require that. While each variable has an initial value, we will often set these again at the beginning of the slide. This is unnecessary if you only create this one Wordle interaction. At Endurance Learning, we like to be prepared! If you decide to do a second Wordle and copy this interaction, you’ll know that the variables will need to be set back to their initial states.

When the timeline starts on this slide:

By setting triggers to set all text variables (11-14, 21-24, 31-34, 41-44) to blank, counter to 0 and the attempts to false at the beginning, you will ensure that all of the text entry spots are blank and that the attempts to solve the puzzle are reset as well.  If the slide is copied over, the variables and triggers will already be set up to reset for a new word.    

Key press triggers:

Each letter of the alphabet will have key press triggers that fill in the letters on the puzzle one at a time.  The letters fill in depending on the which number the counter is on, and the counter increases each time a letter is pressed by sending the learner to the pause layer for a brief moment.    

A word of caution:  Each text variable will need to have a trigger set for each letter of the alphabet and the longer and more complicated the puzzle, the more triggers this will create.  It’s important to check these as you copy and go along to make sure you sort through any mistakes as you go along.

Variable triggers:

Lastly, the base layer will have four variable triggers based on the counter.  When the counter equals the value of the last letter of the row, then it will send the learner to the coinciding attempt layer.  This allows the learner to get feedback on what they have typed before moving on to their next guess.

When the timeline starts on this (attempt) layer:

Layers can be used to trigger states and interactions on the base layer, and also display objects that are hidden from the base layer. Slide layer properties can be set to hide objects that are on other layers and on the baselayer as well as preventing the learner from clicking around on other layers.  In the case of this interaction, we want the learner to be able to click on the baselayer, but we want the layer to exist in order to trigger each of the rows in the puzzle to give feedback.

The layers in this interaction are set up to trigger the states of the boxes and give the learner feedback about what they have entered. (note: you will create an attempt layer for each row that you create):

Each layer contains triggers for a coinciding row of letters in the puzzle.  When the timeline starts on the layer, there is a trigger that sets the attempt correct if they respond correctly for each text variable.  If this happens, they will be sent to the correct layer at a cuepoint.  However, the rest of the layer contains triggers to change the box color, depending on the typed letter entries.  Text variable 11 will coincide with row1box1, 12 with row1box2, etc.  The box will change to the correct state if it equals the correct variable.  It will change to partial state if text equals one of the other letter variables in the word.  It will change to incorrect if text is not equal to any of the other letter variables in the word.

slide triggers for storyline interaction

Additional attempt layers can be copied over, but the triggers need to be changed to the correct text variables.  The final attempt layer will also have a trigger to jump to the incorrect feedback when the timeline reaches a cuepoint.

Last but not least, the pause layer is set up to add 1 to the counter when the timeline reaches a cuepoint set for less than one second.  This allows for the keypress triggers to happen one at a time and not fill all of the text variables at once.

Limitation of Storyline

When creating something in Storyline, there are sometimes limitations based on how the interaction is set up to work.  After moving the triggers over to the key press and removing the text entry boxes, we discovered that this interaction was no longer accessible via mobile device since the keyboard function does not pop up without text entry boxes on screen.

Your Turn to Build a Wordle!

In reflecting on this interaction, there were a lot of considerations to make within the build.  Believe it or not, the final product and the way that it was built is far from where it initially started.  We learned many lessons along the way and would likely learn more upon further reflection and iteration. If you are interested in checking out the WordEL file, I would love to hear your thoughts about it and anything that you are able to add or modify with regard to the learning experience as well!

Articles Similar to Create a Wordle in Storyline

elearning developer qa checklist
Lindsay Garcia

Elearning QA Checklist

Elearning developers should provide the first, and maybe the most thorough, quality assurance (QA) of an elearning module. Our team uses an elearning QA checklist

better learner certificates
Hannah Radant

Better Learner Certificates in Articulate Storyline

Learner certificates often appear at the end of a course to verify and recognize the achievement of a learner. Articulate Storyline has made it very easy to do this by adding a print slide trigger.
Today’s blog post outlines the steps to elevating this print feature to a lightbox slide. It includes how to build it and a downloadable file as well!

adding audio in articulate rise
Erin Clarke

5 Ways to Add Audio in Articulate Rise

What is one way to make Articulate Rise more engaging? Audio! Our team took on the challenge of exploring the options, benefits, and limitations in adding audio in Rise.

elearning easter eggs
Brian Washburn

Fun with Elearning Design: Hiding Easter Eggs

Planting an Easter Egg (or a dozen Easter Eggs) in your elearning project is next level engagement. Today’s blog post offers a variety of ways you can drop an unexpected, surprise element into your next project.

Kate Udalova on microlearning and AI
Brian Washburn

Using 7Taps with AI for Microlearning

AI is all the rage these days. 7Taps has figured out a way to embed AI into their microlearning platform to make your experience even quicker. It looks like this is the future of AI in learning tools. 7Taps co-founder Kate Udalova shares her insights.

Subscribe to Get Updates from Endurance Learning

Brian Washburn, Author

Brian Washburn
CEO & Chief Ideas Guy

Enter your information below and we’ll send you the latest updates from our blog. Thanks for following!

Find Your L&D Career Path

Explore the range of careers to understand what role might be a good fit for your L&D career.

Enter your email below and we’ll send you the PDF of the What’s Possible in L&D Worksheet.

What's possible in L&D

Let's Talk Training!

Brian Washburn

Brian Washburn
CEO & Chief Ideas Guy

Enter your information below and we’ll get back to you soon.

Download the Feedback Lesson Plan

Enter your email below and we’ll send you the lesson plan as a PDF.

feedback lesson plan
MS Word Job Aid Template

Download the Microsoft Word Job Aid Template

Enter your email below and we’ll send you the Word version of this template.

Download the Free Lesson Plan Template!

Enter your email below and we’ll send you a Word document that you can start using today!

free lesson plan template
training materials checklist

Download the Training Materials Checklist

Enter your email below and we’ll send you the PDF of the Training Materials Checklist.

Subscribe to Endurance Learning for updates

Get regular updates from the Endurance Learning team.