Crosswords in Claro: an eLearning Game Sample

In past blog articles, we've talked about the difference between eLearning gamification and eLearning games. Gamification involves leveraging certain game mechanics to increase engagement. Learners won't necessarily be aware they're playing a game.

On the other hand, sometimes a game is exactly what you want, and a crossword puzzle can be a very straightforward eLearning game example. You can use crosswords as a fun twist on assessment or to make the initial learning process more engaging – by forcing learners to reason out terms or concepts, you can make an otherwise dull topic into an immersive and challenging experience.

To demonstrate how crosswords can be created with dominKnow | ONE, we're going to examine the COVID-19 Crossword eLearning sample that we created in early 2020.  

‍

‍

This project is available for download through our Marketplace directly to your dominKnow | ONE account. When using our template project, it's worth noting that you'll want to do a good bit of planning before you ever open your new project. Steps like choosing terms, devising clues, arranging the puzzle, numbering words, and noting down letter totals should all be done first. We recommend finding an online crossword puzzle creator to help you arrange words into the final configuration.

Conceived in Claro

Precise positioning is key to a crossword, so you'll want to use our fixed-pixel authoring mode, Claro. A traditional crossword just isn't compatible with a responsive authoring format like Flow, where content shifts position based on screen size.

Since a Claro project's hallmark is a fixed ratio of width to height, you'll need to consider grid size limitations during your planning phase. In this eLearning sample, the grid maxes out at 22 single-letter input fields across and 13 spots down. This means the words all need to be shorter than the total number of inputs to account for multiple words per row and blank spaces between the words.

These totals could vary if you build your own puzzle from scratch – font, text size, and the screen size you set in your Claro project will dictate the size of your text inputs. Just don't forget the best practices for minimum font size to meet make your project more accessible to people with visual acuity issues.

Single-Letter Inputs

Each box of the crossword puzzle is set up as its own text input with a hidden label and an answer length of one character. Most of the fields have no placeholder text, but the first letter of each word has a numeral to mark them as "2 Down" or "3 Across."

Creating these inputs can get a little repetitive, but you can save some effort by setting up one input and then duplicating it.

Each text field will need a unique input name and a unique variable name for scoring purposes. Since you're juggling so many text fields, the naming convention for each input should be short and easy to predict. In this eLearning game example, we stuck to "Down-or-Across initial + word number (dot) letter number within that word" – for example, A1.2.  

Each input variable is set to assign one point if the learner enters the correct text.

We're keeping this article fairly high-level, but if you want to see a step-by-step breakdown of all the settings, we have a how-to article for this eLearning sample in the Community.

Tab Order

Since each text input only holds a single letter, your learners will want to use the tab key to move from box to box as they type their answers.  

Something to keep in mind is that in Claro projects, the tab order – which box the cursor will jump to next – is determined by the order in which layers are stacked, bottom to top.  

Once your single-letter inputs are all created and arranged, we recommend you tab through the entire puzzle and rearrange the layers. Otherwise, you could frustrate learners with a tab order that jumps all over.

Word Clues

In a paper crossword, all the clues or hints are listed out together by position and word number, but in a digital format, you can choose to serve up a specific clue based on where they are in the puzzle.  

To this end, each text input of the puzzle has an interaction associated with it – when a user selects that input, the content of the Clue Text field at the bottom of the screen will be "swapped" to the appropriate hint. Most fields will only have one hint but remember to include both hints on any intersecting fields that belong to two different words.

Word Variables & Scoring

In addition to setting up the individual input variables, you also need to create a variable for each cluster of inputs that make up a word. Again, we recommend a simple and consistent naming convention – we went with Aword1, Dword1, and so forth so that it was easily distinguishable word variables from input variables.  

Later, these word variables are used when setting conditions for the Submit and Show Answer Key buttons. If the point total for a word variable equals the number of letters in that word, then the learner has gotten the answer correct. If any words are blank (a null value) or worth fewer points than the letter count, then it's treated as incorrect.

The Answer Key

Since our eLearning game sample isn't intended to serve as an assessment, players have the option of revealing the answer to a word they're having trouble with at any time. To do so, they can click the button with the key icon (the Show Answer Key button) that sits next to the Submit button.

Clicking the Show Answer Key button reveals answer key markers (question icons), but only for the words that are incorrect. At the same time, the Hide Answer Key button is revealed, and the Show Answer Key button is hidden.  

Clicking on one of the answer key markers will reveal the correct answer for that word, with a second click hiding it again.  

When the learner is done with the answer key, they can click the Hide Answer Key button to reverse the Show button's actions and return things to normal.

The Submit Button

The Submit button does a lot of heavy lifting, so it requires setting up several interactions.

First, clicking the Submit button will hide it so the learner can't accidentally click it again.

Additionally, if any of the answers are incorrect, clicking the Submit button will reveal several previously hidden elements: a red outline around each incorrect word, a try-again message, and a Retry button, which looks like a reload icon.  

The Retry button causes a reset of the current page so that the learner can continue.

When all the answers are finally correct, clicking the Submit button reveals congratulatory text, an Exit button, and a Play Again button. The Exit button is set up to close the course, while the Play Again button triggers a script that makes the course self-reload so you can start from scratch.  

Ready to make a crossword of your own? We've turned this eLearning sample into a Claro crossword template you can use to build your puzzle. You can find it in the marketplace now!

Do More with dominKnow | ONE

In dominKnow | ONE, creating a crossword like this is just the tip of the iceberg. In addition to helpful templates, we've got all kinds of time- and effort-saving features and tools, including the:

• Scenario Builder widget for easy branching simulations
• Pre-built interactive components for a faster way to build more engaging content
• Software simulation tool that creates Show/Guide/Try tutorials in a snap

• Smart content reuse capabilities so you can get the most out of your efforts
• Robust collaboration and review tools to help your team work together efficiently

Ready to try it? Start your free 14-day trial today or sign up for a demo from one of our experts!

‍