Using Magnetic Poetry to create eLearning
I’ve been kicking around the idea of somehow using magnetic poetry in an eLearning project for awhile. I first discovered magnetic poetry when I was an undergrad. When I was bored or frustrated with a creative project I often broke out of it by creating little poems that would inspire visual work. Throughout the years I’ve been gifted different sets (the most recent being the Taco Poet set). My dream is to someday have a magnetic wall in my home large enough to display all my sets. Currently I have magnetic poetry all over my fridge and on multiple magnetic boards in my office.
As I was brainstorming ideas for a Valentine ’s Day project I kept coming back to love poems. Coincidentally the eLearning Heroes had a Mad Libs challenge at the same time. My first idea was to make a Valentine’s Mad Lib. My brain kept coming back to the magnets. What if I could make a digital version? What if users could create their own poems instead of just filling in words?
Design and Development Process:
First, I wanted to see if I could make an image that resembled a real-life magnet. I started in Photoshop, but wasn’t satisfied with the end result because on screen the tiles looked pixelated. I jumped into Illustrator and used vectors to produce a much cleaner tile. After adding some drop shadow on the tiles they started to resemble a 3D tile on the screen.
The next step was deciding what words I should use. I wanted a good variety for users to choose from, but also knew that adding every word under the sun would keep me in development for months. I searched love poems and started to compile a list of words that seemed to show up in most of the poems. I edited the list and ended up with 62 words.
Then I jumped into Storyline360 to set up the main part of the project. I started with a drag and drop free-form slide. I knew the words would need to be dragged onto some sort of target (similar to how you would drag and group magnetic words on a refrigerator). But what did I want to happen after the words were dragged? Creating a drag and drop was simple, but that was a bit boring as the words didn’t DO anything after they were dropped. I thought it might be nice to have the words appear in a printable poem on an end slide. I wanted to take it even further and let users print their very own poem.
For that I would need true/false variables. I imported all 62 PNG files that were made in Illustrator and created a true/false variable for each word. The variable would be true if the word was dropped on the target box and false if the word was anywhere outside the box.
I encountered my first issue to problem solve. Each variable would need a trigger that corresponded with a text value (to get a printable word). This would be simple if each word and their order could be predicted. However, this would take all the fun out of using the poetry tiles in the first place. The object is to build poetry free form and there is no way to predict which words a user would pick or what order they would put them in.
I started to think perhaps there was a way with JavaScript. I knew what I wanted, but didn’t know how to get there! I put out a call for help on the Articulate forum and also emailed their help desk. I was contacted by a Storyline engineer who was very helpful but didn’t have a usable solution. Enter JavaScript wizard Zsolt Olah! Yet another shining example of how amazing the Articulate community is! There is always someone willing to brainstorm with you and offer solutions. Here is a detailed explanation of the JavaScript .
Zsolt came up with a script that would search for the words on the screen and put them in order and then fill in the text variable. After some troubleshooting back and forth he came up with the perfect solution. I used this script and replicated it for each of the 62 words. To wrap it up I added another text variable to customize the project with a user’s name and some navigation buttons to allow users to go back or print their poem.
Overall this project took 62 variables, 104 true/false triggers, and JavaScript to work. I was interested in JavaScript before, but now I’m determined to know more about it and how I can push the limits of Storyline with it.