Chapter 5. How to Create a Digital Breakout: Developing Puzzles

The next big step in creating a breakout is to create puzzles and challenges for players to solve, giving them much needed clues to open your locks. And this is when things become really fun as there are so many different kinds of puzzles that you can create online for free. Once you know what is possible, it will be easy for you to choose which ones are right for your breakout. Let’s look at some of them.

Jigsaw Puzzles

Online jigsaw puzzles can be very entertaining for players to put together (as long as there aren’t too many pieces!), and they are also a terrific way to hide a clue for one of your locks. They are used frequently in digital breakouts as they are quite simple to create. The website Jigsaw Planet will let you easily transform any image into a jigsaw puzzle with any number of pieces and in different shapes.

Jigsaw Planet

https://www.jigsawplanet.com

Think about what types of images might hold clues to your locks, such as photographs of authors, book cover images, old maps, and so on, as well as what types of images you can create yourself. Most likely there won’t be an exact image that fits your breakout game, so you will need to create one yourself using a Google Drawing.

Create a Google Drawing

Navigate back into your Google Drive breakout folder, go to + New located on the left-hand menu, select More and the menu will expand to allow you to choose Google Drawings. We will now create a custom image.

Name or title your drawing file on the top left of the page. You will see that you are given a blank canvas to work with. Next you will want to search for an image or images that you can work with to create a jigsaw puzzle drawing.

I found the image for my jigsaw puzzle on Wikipedia, but you may also search for public domain images within Google’s Advanced Image Search. There you can filter your search results by usage rights to just those images that are free to use or modify usage rights requirements using the very bottom drop-down menu.

Google Advanced Image Search

https://www.google.com/advanced_image_search

Once you have your image or group of images, return to your Google Drawing tab and choose the Insert menu in order to insert them on the page. Also via this Insert menu you can add text boxes with text clues that can be read only once the player assembles the puzzle. You can also insert shapes, word art, lines, and much more. The ability to insert tables, charts, and diagrams comes in handy for technical or training breakouts.

Once you have the image or images on your canvas, you can use the handles on them to resize and position them. You also have the choice to change the background color of the canvas to match your image or images by right-clicking anywhere on the canvas itself and choosing Background.

For my jigsaw puzzle image (figure 5.1), I inserted an image of Vlad the Impaler into the center of my Google Drawing, changed the background color to black, and added a text box at the bottom containing my clue “Vlad the ________” in order to give players a clue to my 7-digit word lock.

Once you’re satisfied with your image, you’ll need to download it so that you can use it in Jigsaw Planet. Do this by going to File, selecting Download and JPEG as the format. Save this file somewhere easily accessible on your computer.

Next you will want to go to Jigsaw Planet to finally create your puzzle. Navigate to Jigsaw Planet and click Create at the very top of the page. Select Choose File, find your image to upload to the site, and name your puzzle. You can then determine the level of difficulty that you want. The number of pieces will vary and grow depending on how much your raise the difficulty level. The important thing to keep in mind here is that this will be just one of many puzzles that players will need to solve, so you don’t need to make it super difficult in order to make your game challenging. You also don’t want to frustrate players. If you opt to make your puzzle extremely difficult with over a hundred pieces, this will make puzzle pieces very small, which will be particularly challenging for older adults who are staring at the screen while trying to solve your breakout, so keep your audience in mind as well. I chose to create my puzzle using the default (35 pieces) setting, which I think is challenging enough while still being fun. Don’t forget, these are games and are supposed to be fun!

Next you can choose what shape you want your puzzle pieces to be created in. I chose to stay with the default classic style pieces, but this is completely up to your preferences. Consider what will go best with your breakout theme. When you are done choosing your settings, click Create, and watch your jigsaw puzzle come to fruition.

You have now created a custom jigsaw puzzle. Try it out, but don’t forget to grab the link to your puzzle so that you will be able to share it with players in your breakout. You can copy and paste the URL in the address bar or click Share on the top right of the website and select Embed. The Embed page offers you several options for adding the jigsaw puzzle to a website. Be sure to paste the link to the jigsaw puzzle into your BreakoutNotes document.

Quizzes

Online quizzes can be an excellent puzzle type for research- or training-oriented breakouts, especially if you want to collect information about how much knowledge is being retained from a reading or a presentation. A straightforward quiz is easy to create using Google Forms in much the same way we set up the breakout’s lock form.

Going back into your Google Drive breakout folder, go to + New located on the left-hand menu, select More, and the menu will expand to allow you to choose Google Forms. You should be very familiar with the interface from the previous chapter’s lock form discussion and know that you can click on the gear icon at the top right to get further options. If you click on the Quizzes tab, you may opt to have Google make this a quiz. You can then create a quiz with a series of questions that the player will submit answers to via the form. However, this will not allow any interactivity aside from a final “thank you for taking this quiz”–type confirmation message and allowing the player to see the correct answers to each question once they submit their form. We want to set up something more like an interactive mini-game using Google Forms.

Rather than selecting to make this a quiz, we will keep ours as a plain old Google Form, start with a single question, and then add in some logic to make the magic happen. For our first question, we will keep the format of the answer as the default “Multiple choice” and add in our choices such as

What is Jonathan Harker’s profession in the novel?

□ Librarian

□ Solicitor

□ Real Estate Agent

□ Chef

We will stop there and think about what we want to happen when each of these choices is selected by the player. For example, the correct answer is Solicitor, so we want the player who chooses this answer to move forward to question 2, while everyone who chose one of the three wrong responses will go to a message instructing them to try again. In order to achieve this, we need to create two new sections of our form: one for the next question and one for the “try again” message.

On the menu to the right of the form, select Add Section. This will create Section 2 of 2. Change the Untitled Section title to “Please Try Again!” and once you add the next section you will come right back here and you will be given a choice of where to send players after this one. But first, create another section, which will be 3 of 3. Name this “Question 2” (see figure 5.2). This is where you will eventually add your next question once we’re done editing the first one.

Go back up and change the “After section 2” choice which now appears below it to go back to section 1 as you want players to find the correct answer to the first question before moving forward.

Scroll back up to the first question, and let’s add some action to it. Click the question to edit it, and select to make the question Required. Then click on the three dots next to the Required slider, and select “Go to section based on answer.” Now you can define where each of the answers will bring players should they select it. Next to Solicitor, choose “Go to section 3 (Question 2)” from the drop-down. Next to all of the incorrect responses, change the drop-down choice to “Go to Section 2 (Please Try Again!)” (see figure 5.3). Try out your form at this point using the eye icon at the top of the page to see how all of this is working. You can also try out my form here to better illustrate the experience for the player: https://forms
.gle/59XPpuy9PXXodoxs5.

Now that the first question is complete, it will be easiest to simply duplicate it in order to create the next one. Duplicated questions will appear directly below the original, so you will want to drag the question into the Section 3 Question 2 section by clicking on it and holding down the mouse button as you drag it. Once there, you have your template to set up the next question.

You will now want to set up a new section underneath your second question titled Question 3 where you can send the correct responses to your new question. You may continue to lead incorrect responses to the already established Section 2 (Please Try Again!). Continue to create questions for your quiz game in this way until you come to your final question. While you are working on your final question set up a new section titled something like “Congratulations!” or “The End!” You can then place a clue in the description area to help players solve one of your locks. Here’s an example that I used in mine:

Congratulations!

Read about the deleted ending here: https://en
.wikipedia.org/wiki/Dracula and fill in the blank . . . “the fragments that had been tossed skywards in the______________”

You’ve now created an interactive quiz with Google Forms for your breakout! In order to provide access to your quiz, you will need to grab the link.

At the top right of the form, click on the Send button. This will open the “Send form” dialog box, where you can select the link icon among the “Send via” choices. This will give you the link to your form to share and the option to shorten the URL. Copy and paste that link into your BreakoutNotes document and set it aside while you create the rest of your puzzles.

Spreadsheet Puzzles with Conditional Formatting

One interesting and easy way to create puzzles that will slowly reveal clues and lock combinations is to create a spreadsheet with conditional formatting. Using Google Sheets you can quickly set up a spreadsheet with cells that will change their formatting depending on the answer that is entered. This is particularly useful to know about if you’d like to include a color lock in your digital breakout. You could create a puzzle spreadsheet populated with questions, the answers to which would reveal a series of colors to be entered into a lock.

To start, return to your Google Drive breakout folder, go to + New located on the left-hand menu, and select Google Sheets. This will launch a new spreadsheet. Go ahead and rename your “Untitled spreadsheet” after your breakout. On the spreadsheet, set up two columns named Questions and Answers and bold these so that they stand out. Now, enter your puzzle questions within the left-hand puzzle column you just created such as the ones shown in table 5.1.

In the Answers column, right-click on the first answer cell and select “Conditional formatting.” A “Conditional format rules” interface opens to the right. This where you can set the cell to change color as answers are entered. You will want to keep this on the default “Single color” tab. The “Apply to range” should have populated with the answer cell since you right-clicked it. Within the “Format rules” area, there is a drop-down menu that will let you set the rule for when the cell is to be formatted and how. Pull open this menu and select to format cells if “Text contains” and enter the correct answer in the box. Last you will choose how the cell will be formatted by clicking on the paint can at the far right of the “Formatting style” menu and choosing a color. I would recommend choosing a bold color rather than a paler shade to be sure that players are able to properly identify it for the lock combination. I chose a bold blue for my first color. Select Done.

You can see now that the sheet has started a list of rules for this particular cell. If you anticipate that there may be variations entered for your answer, you may want to set up another rule to also turn the cell to your color choice if a correct variant is entered. Note that the formatting rule is not case-sensitive and will be applied whether the player uses caps or sentence case for their answer, so there is no need to set up a separate rule for that contingency.

Now that the behavior of the cell is established for the correct answer, we will be also be adding another rule dictating what happens if the player enters an incorrect answer. This way the player will know that the form is working and that they need to try again. This can be done in multiple ways; for instance, all of my answers will be yes or no responses, so I could simply create a rule that specifies that the cell should be somehow formatted if the text contains either yes or no depending on which is incorrect for that question. However, since many of these puzzles will contain other types of answers as well, we can instead specify that the format rule to make changes to the cell should apply if the cell is not empty, meaning the player has entered an answer and that answer was not the correct one and did not have the first rule applied to it. Since this is a color puzzle, we don’t want to change the background of the cell to any particular color, but we can format the text to be crossed out by choosing the Strikethrough icon (fourth from the left in the “Formatting style” menu), thereby letting the player know that their answer is wrong (see table 5.2). Once those two rules are set up for your answer cell, test it out and be sure it’s working correctly by entering both the correct answer and an incorrect one. Also test out any variations for which you created rules. When you’ve determined the cell is working well, you are ready to set up your next answer cell in the same manner.

Tech Tip: It is not recommended that you use Ctrl+C to copy and paste your first answer cell into all of the other answer cells for your sheet. It may be tempting to do so since it’s already set up. However, doing this will change the rules to include the entire cell range and any answers that you modify will then apply to all of the answers rather than to a single cell.

After you have completed formatting all of your answer cells, don’t forget to delete your test answers so that all cells are blank and you will be ready to share this with your players.

Sharing Your Spreadsheet Puzzle

You are now ready to share your color puzzle with your players. However, this becomes a little tricky. You don’t want to actually share the original spreadsheet with everyone because then, once one person fills it out, it will overwrite your puzzle and no one else will be able to play it. Instead you want to give everyone access to make a copy of the spreadsheet and play it as their own puzzle. In order to do this, all that you have to do is make a minor adjustment to the URL. You can grab the URL from the address bar in your browser, which will look something like this:

https://docs.google.com/spreadsheets/d/12wOjDfwmNN4ZVZ30ZtxM84Ktoq2P9BBXLdfrpKqgq3A/edit?folder=1D5Q8PkTnJFbrvsZjHyD8QKMHqWjp9w4u#gid=0

Alternatively you can click on the Share button on the top right of the page. Click on “Get sharable link,” and this will automatically copy a link to the clipboard such as this one:

https://docs.google.com/spreadsheets/d/12wOjDfwmNN4ZVZ30ZtxM84Ktoq2P9BBXLdfrpKqgq3A/edit?usp=sharing

In either case, all that you will need to do is erase the word edit and anything that follows it from within the URL and replace it with the word copy so that it looks like this:

https://docs.google.com/spreadsheets/d/12wOjDfwmNN4ZVZ30ZtxM84Ktoq2P9BBXLdfrpKqgq3A/copy

This will then become the link that you will use to share your puzzle. Once it’s clicked on by the player, they will be led to a page prompting them with a message such as this:

Copy document

Would you like to make a copy of Dracula’s Curse Spreadsheet Puzzle?

Players will follow this prompt to create their own copy of your spreadsheet puzzle to solve.

Word Games and Cyphers

Discovery Education has a terrific free puzzle-making website that will enable you to easily create custom word searches, double word puzzles, crosswords, math squares, cryptograms, and more. For one of my puzzles, I used the double puzzle tool to create an acrostic game that challenges players to unscramble a series of words from which certain letters are placed into a final cypher puzzle to achieve the combination to my 10-letter word lock. The puzzle maker creates an image of your final puzzle rather than an interactive page where you might send players to fill in the puzzle. In order to share the puzzle once it’s complete, right-click on the puzzle image and save it as a JPG file. Navigate back to your Google Drive breakout folder, go to + New located on the left-hand menu, select More, and the menu will expand to allow you to choose Google Drawings. Rename your drawing after your breakout puzzle on the top left, choose Insert and Image from the main menu, and upload the puzzle from your computer. Be sure and click on the Share button on the top right and select “Get sharable link.” You can leave the setting at “Anyone with the link can view” and copy that link in order to be able to share it publicly. Set this aside as you create your other puzzles.

Discovery Education’s Puzzlemaker

http://puzzlemaker.discoveryeducation.com

Secret Message Maker

https://www.abcya.com/games/decoder_puzzle

The Secret Message Maker (figure 5.4) will encode a short message and provide a decoder key for players to use to solve your top-secret missive. You can print out or save your puzzle in order to share it. Follow the directions from the section above for how to save the puzzle to your computer and create a Google Drawing to share it.

Snotes

https://snotes.com

A snote is a secret note that contains a message that must be read at a particular angle in order to be decipherable (figure 5.5). After taking a quick tutorial on the Snotes website, you will be able to create these beautiful hidden messages. Free users of the site can easily share their creations by emailing the snote to themselves and grabbing the link to it.

Morse Code Translator

https://morsecode.scphillips.com/translator.html

The nifty Morse Code Translator app works in much the same way as Google Translate except it transforms your message into Morse code in the form of both text and sound outputs. You can even adjust the speed! Once you have created your message, you can download a WAV file to share with players.

Binary Conversion and Binary Translator

https://roubaixinteractive.com/PlayGround/Binary_Conversion/Binary_To_Text.asp

https://www.binarytranslator.com

Much like the aforementioned Morse Code Translator, the Binary Conversion and Binary Translator tools will take ordinary text and transform it to machine-readable zeroes and ones before your eyes. The resulting code can be copied and pasted in order to share within a breakout game.

Google Translate

https://translate.google.com

Don’t forget about the ability to use Google Translate to translate words and phrases into foreign languages for digital breakouts, especially if languages are one of your themes.

Hidden Clues

There are many websites that will allow you to create exciting and imaginative clues for your players by hiding them within the text of a familiar item. Before selecting one of these types of clues to construct, think about what you can utilize that will further immerse them in your theme. For example, I used a newspaper generator tool to create a clipping of the London Times dated during Dracula’s time period in order to hide a clue within it (figure 5.6). This made sense for my breakout’s premise. Creating an imitation airplane ticket or a Starbucks receipt with Dracula’s name on it would likely have pulled the player out of the atmosphere of my theme.

The Newspaper Clipping Generator

https://www.fodey.com/generators/newspaper/snippet.asp

This free application Newspaper Clipping Generator will lead you through creating your own newspaper clipping from any newspaper you can imagine complete with your own headline and story. I chose to create a clipping from the London Times in the year that Dracula was published. I then hid the words (YEAR) and (PUBLISHED) within the article’s text, which I took straight out of the novel. I was then able to save the image and create a sharable Google Drawing according to the above instructions. Many breakout game creators use newspaper articles such as these in order to hide bolded bit.ly URL strings in the text. Players must find the URL and piece it together in order to be taken to a website with another clue awaiting them.

Fake Receipts

http://www.fakereceipt.us/sales_receipt.php

The easy-to-use Fake Receipts website enables you to create a fake receipt for anything under the sun from whatever store you would like.

Airline Ticket Generators

http://omatic.musicairport.com

http://returnflights.net

These websites will allow you to create imitation airplane tickets for any airline with customized text.

Fake Concert Ticket Generator

http://www.smorgasbork.com/ticketmaker/

The website Smorgasbork will enable you to create a fake concert ticket with any custom text desired. Perfect for embedding word and number clues for breakout games.

FakePhoneText

http://www.fakephonetext.com

The website FakePhoneText will allow you to create a fake iPhone text message conversation (figure 5.7).

The Ransomizer

http://www.ransomizer.com

Not a puzzle per se, but an interesting visual effect, the website The Ransomizer enables you to quickly create ransom note–style images.

Just for Fun

Match the Memory Game

https://matchthememory.com

The Match the Memory game creator allows you to create your own Concentration style game in which tiles are flipped over two at a time in order to find matches. For my final puzzle in my Dracula’s Curse breakout, I created a fun Match the Memory game in which players were tasked with matching the actors who had portrayed Count Dracula in film. Winners of this game receive a message clue that helps unlock the 6-digit word lock in the game:

Message from Ellyssa Kroski for the winner!

Clue: City Dracula traveled to in the novel.

Try out my Match the Memory game for yourself here: https://matchthememory.com/Dracula.

BigHugeLabs

https://bighugelabs.com

Create everything from magazine covers, movie posters, and badges to trading cards and billboards using the website BigHugeLabs.

The Breaking News Generator

https://www.breakyourownnews.com

Create your own image of a breaking news story with the Breaking News Generator (figure 5.8). Upload your own images, post a headline and ticker, and you’re all set!

Breakout EDU Digital Resources

https://bit.ly/35kRMZQ

For even more puzzle creation websites such as those discussed in this chapter, be sure to check out the massive community-sourced list Breakout EDU Digital Resources!