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.
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).
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:
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.
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!
