Javascript is something I’ve flirted with a little bit in Storyline, but haven’t used in huge amounts. Although I want to learn Javascript for real in the future, I’ve been able to get by in previous projects from documentation so far. This week’s eLearning Challenge was to use Javascript to randomly generate words or numbers and use it in eLearning. I decided to create a random name generator for my entry.
As an instructional designer who works with software, I frequently create fake users in order to take screenshots and build simulations. Maybe it’s just me, but my creativity when it comes to coming up with fake (but realistic) names is somewhat limited. I’ve found name generators to be very useful and wanted to create my own.
The Method
I knew I was going to base my random name generator off of Matthew Bibby’s fantastic tutorial on generating random words. In the tutorial, he walks through the Javascript code line-by-line so you know what’s going on, which is really helpful.
I started out by finding the most common first and last names for men and women in the US and UK. The most popular last names were very easy to find, but the most popular first names were more difficult. In the US, the Social Security Administration did have a list of names for people born in the last 100 years, so it’s somewhat representative of the whole population. However, for UK names, I ended up using a list of the top 100 based on births in 2015. As a result, the British names in the generator are more modern than the American names.
I transferred the names to a column in Excel and made them all uppercase for consistency. The next step was to format them correctly to be added to the Javascript code. Since I was dealing with 600 names, I didn’t want to do this by hand. I found the =TEXTJOIN formula in Excel to be quite useful. It allowed me to change the column of names in separate cells into a comma separated list with quotes around each name. I just had to copy the value of the new cell and add beginning and ending quotes.
Once I had the names, I was ready to build the code and put it into Storyline. I followed Matthew’s template, modifying it to fill in the First and Last Name text variables I had created. This is what one of the triggers looked like:
In the interaction, I let the user select their region and the gender of the name they’re creating. This meant I had to create a total of six Javascript snippets and Storyline triggers: four for the different combinations of regions and genders for first names, and two for the two regions for last names. I used the conditions field of the Storyline trigger to narrow down when exactly I wanted that snippet to execute. This is what the slide looked like when I was complete:
The Result
View the [iframe_loader type=’open_link_in_new_window’ href=’/wp-content/uploads/articulate_uploads/174-Random-Name-Generator/story.html’ link_text=’interaction here.’]
If you’d like to play around with the source file or modify it with names from a different country, download the Storyline 360 source file here.
Very nice!
Very helpful. Thanks!