This e-learning challenge comes from our friends at E-Learning Heroes, and first appeared on their website on February 21, 2014. The challenge is to create a simple e-learning game. So given the countless hours I’ve already poured into playing the Sudoku puzzles that appear in our local newspaper, I thought I’d use just a few more in order to take a stab at creating my very own Sudoku puzzle within Articulate Storyline.
(click the image to play the game)
All of the elements used in this little project—like the buttons, tiles, and gameboard—can be created within Storyline itself. However, to maintain more control over the final look of the project, I opted to create all of the graphics within Pixelmator (www.pixelmator.com) before adding them to Storyline as PNG files.
The actual 9×9 game board is a static image with each empty box containing an invisible rectangle (no fill, no stroke) overlay. These rectangles are important, because each of them is going to be used as a mapping point for the corresponding number tile over on the left. We’ll get to that in just a minute.
All three buttons (red, blue, and green) on the left side have at least one additional state in Storyline. That state is simply a darker version of the button that appears when the user clicks on the image, creating a sense of depth. The green and red buttons have an additional state that’s activated by the user hovering their mouse over the image. This state contains an additional graphic indicating that the green button is used to view the instructions, and the red button is used to hide the instructions.
In addition to states, all three buttons also have triggers, or actions, assigned to them. The blue button submits the learner’s answer and provides feedback. Clicking the green button brings up an additional layer within Storyline that contains a graphic with the instructions printed on it, while clicking the red button hides this layer.
Each number tile is an individual PNG image. All the available tiles are stacked within that area on the left, and are arranged by color. Each color corresponds to an area on the game board (yellow tiles go on the yellow area; blue tiles on the blue area; etc.). The decision to color code the tiles was intentional and was designed to solve a functional problem I came across, which I will address in just a bit.
For drag and drop activities like this, Storyline makes it pretty easy to set them up by using their “Convert to Freeform” tool located under the “Insert” tab at the top. Clicking this brings up a wizard where you can choose an object (like a number tile) and map it to another object (like the rectangles I mentioned before). Storyline allows you to map any number of objects to another object, but only allows each object to be mapped to one specific place. In other words, each number tile on the left could be mapped to the same rectangle on the game board, but one number tile couldn’t be mapped to several rectangles.
It’s for this reason that the color coding was necessary. Without it, the game would quickly become an exercise in frustration for the user. Let’s say the user solved the puzzle correctly, but because the number “2” tile that they placed in a particular location wasn’t the same number “2” tile that I mapped to that location, upon clicking “Submit” the answer would be considered wrong. Make sense?
So how can this example be used in the e-learning you’re creating for your business clientele or workplace? Puzzles like this translate really well to procedural and decision-making learning and training. Let’s say you’re developing training for a large company’s new mailroom trainees. Using this Sudoku puzzle as a starting point, you could replace each of the number tiles on the left with incoming articles of mail or interoffice envelopes, and change the nine colored 3×3 grids on the right to separate building-floors, departments, or offices. The trainees would need to drag each article of mail or interoffice envelope and drop it in the correct location.
Another example could be in mandatory-reporting training. Workplace issues would replace the number tiles on the left. On the right, any number of department heads, bosses, crisis managers, etc. could be used as mapping points for particular workplace issues. The learner taking the training would be responsible for dragging each individual workplace issue to the appropriate response personnel within the company.
Regardless of the situation, the result is a more engaging and immersive learning experience for the user. It’s definitely worth the effort, as little activities like this can transform your training from ordinary to extraordinary.
