Chapter 6. How to Create a Digital Breakout: Creating the Site

This is it! You have built your lock form, crafted your puzzles, and written your narrative. The time has come to bring all of these elements together into one unified website to display your game.

Bringing It All Together

There are many free options for creating a website for your digital breakout, but the most popular and user-friendly is Google Sites. This will also be the most seamless option because nearly every other component that we created for the game was built using Google applications, which easily embed within Google Sites.

Name and Brand Your Breakout

To begin, return 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 Sites. The first thing that you will want to do is change the document name from “Untitled site” to the name of your breakout. At this time you can also change your page title in the center of the banner to the breakout game title. You also have the opportunity to upload your library’s logo on the upper left-hand side of the banner.

If you mouse over the banner, you have several options for formatting. You can change the size of the banner or “header” on the page by selecting “Header type.” You can remove the banner altogether to leave only your breakout title by highlighting “Title only.” You can opt for a “Large banner,” which will expand the header area, or you can expand it even more by choosing to make it a “Cover” image. I would recommend keeping this at the default “Banner” setting. Mousing over the banner also presents the option “Change image,” which allows you to upload an image to display as the background banner. I chose to upload a black-and-white drawing of Bran Castle for my banner image.

Add Your Narrative

Directly below the banner image you have the ability to insert a text box in which to add your breakout’s description or narrative. To the right-hand side of your new Google Site is a three-tabbed editing interface. Within the default Insert tab, select the very first option, “Text box,” and the application will add it for you in the first available place, which is below your header.

Open up a new browser tab and navigate back to your breakout’s Google Drive folder to find your narrative document. Copy and paste your breakout’s narrative into this new text box.

Next, mouse over your new narrative area, or text box, and a new menu will appear floating to the left with formatting options. Select the first option, which is a palette icon, and select “Emphasis 2.” This will fill in that section with a background color. You can easily change that background color by customizing the page’s theme.

Customize Your Theme

You can change your breakout’s color scheme by clicking on the Themes tab on the editing interface to the right. There are several complete theme sets to choose from as well, each with customizable font styles and color palettes within each.

TechTip: You can preview your breakout site at any time by selecting the dual device icon on the top right of the website. This will provide you with a preview of how your game will appear and be displayed on multiple devices.

Embed Your Lock Form

It’s time to embed your lock, which will be integral to your breakout game. On the right-hand editing interface, return to the Insert tab and scroll all the way down through the options. Select the next-to-last choice, which will be Forms. This will bring up all of the Google Forms that you have created with the most recent first. Find your form from the preview list, click on it, and select Insert to embed it into your form. Google Sites will automatically place the form in the next available area, which is the left-hand side of the page below your narrative. This new section will have all of the same formatting options as the text box created earlier.

Embed Your Puzzles

Now that the lock form is in place, all that is left to do is to link to all of the puzzles and clues that you created so that the player can begin to solve your breakout. At this point you will notice that the right-hand side of your breakout site still has plenty of room to display all of your game’s puzzles.

Designers of these games utilize many methods for providing players access to their puzzles, and we will discuss each in turn. Most present some combination of the following techniques for sharing breakout challenges. Whichever route you choose, each of these will fit comfortably on your page.

Hidden Links in Text

You may choose to provide simple links to your puzzles within your narrative description of your game by hyperlinking random words that players will need to find as they scour your site for clues. You can also create a new area to display a riddle or key piece of text that might lead players to a challenge.

Double-click anywhere within the blank right-hand column of your page. This will launch a wheel of content choices for you to add to this space. Select the middle option, which is text. This will place a text box, perfectly sized for this column, within your page. Type in your text, and select one of the words to hyperlink. Once the word is selected, select the Link icon in the menu bar above the text box to easily add a link to any one of your puzzles.

Embedded Puzzles

You may also choose to simply embed some of your puzzles right on your main page. One type of puzzle that is particularly good for embedding in a breakout is a color lock puzzle. This is usually an image with a relatively large group of items, all shaded with different colors. At first glance, the player might think this image is on the site for purely thematic or decorative purposes, but a closer look will reveal that there is a pattern to the shading.

One of the school-themed breakouts mentioned earlier in this report uses an image of ten backpacks of various colors hanging on the wall, which matches nicely with the premise of the breakout and may go unnoticed by the player at first. Once the image is identified as a puzzle, the player might attempt to solve it by entering a combination of colors in the order that the bags are displayed. When this doesn’t work, the player will need to reason that because there are four green backpacks, three yellow, two red, and one blue that the lock combination and puzzle solution is GYRB. This is a popular type of puzzle for these games and one that is often found decorating the main page of the breakout site rather than being linked to. To embed any of these puzzle images, double-click within the right column of the page and choose Images. You can then choose to enter a URL for an image or find it in your Google Drive. To upload an image from your computer, select Upload after double-clicking, or go to Insert on the editing sidebar and choose Images, and then Upload.

Hidden Links in Images

One very popular technique for leading players to breakout puzzles while still providing a challenge is to hide links within images or groups of images. Instead of merely adding an image to your site and hyperlinking it to one of your puzzles, you may choose to add a larger image and create links within it that players will have to search for a bit. This can easily be achieved by creating a custom image as a Google Drawing and adding invisible links within it. These are called hotspots and when moused over reveal themselves as hyperlinks.

Create a Google Drawing with Hotspots

You will want to choose an image that has details or perhaps key figures or text that you can use to hide your hyperlinks. Perhaps you could use a book cover or photo of a group of people related to your breakout. When you have found a relevant image, once again go back in 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. Within your new Google Drawing, choose Insert and Image from the main menu and upload your image. Resize and position your image to your preferences.

Take a look at your image and think about what might be significant to link from, such as a number or word or area within it. Go to the main editing ribbon toolbar at the top of the drawing and select the Shape tool. Choose whatever shape might fit nicely over or on top of that first element you chose to link and create the shape. When the size and position of the shape are directly where you want them, right-click on the shape and choose Link. Type or paste in your link.

Now you have a linked shape floating on top of your image. But the goal is to have this shape be invisible so that players need to search a bit for it. Click on the shape to select it. Go back up to the editing ribbon to the right of the Shape tool. You will see a paint bucket and a pencil icon. These are the controls for the shape filling and the shape outline. Click on the paint bucket, or “Fill color,” and choose Transparent. Do the same with the pencil or “Border color” control. Now click off the shape on the drawing canvas. Not even you can spy a shape or hyperlink on your drawing, but trust me it is still there! If you want to be sure, click back on your image where you think your shape should be and you will see it highlight. Repeat this process to create additional links to other puzzles.

You may also choose, as I did, to combine different images into a Google Drawing in order to create this hotspot image. I used a large image that I found on Wikipedia of Bran Castle as my background image. I also found a portrait of Vlad the Impaler. I brought both of these images into my Google Drawing. I used the Crop tool drop-down menu to choose a rounded crop effect for the Vlad portrait. Once I had it in the shape I wanted, I made it small and dragged it on top of my castle pic. I made three copies of the tiny Vlad image and placed them on my background image with the first. It was these Vlad images that I chose to make my hotspots within my custom Google Drawing so that when players notice these, they are enticed to click on them to go to my puzzles.

When you are done, it is important that you remember to change the privacy settings on your Google Drawing so that it will be publicly visible. Otherwise you will embed an image that no one can see into your breakout game. Once again, the default for all Google Drawings, Docs, Sheets, and so on is set to private, visible only to the creator. To change the sharing settings of this drawing, click on the Share button at the top of the page. Next click in to
“Advanced.” In the “Who has access” section, click on the word Change next to “Private - Only you can access.” Select the first option here—“On - Public on the web”—and save.

Once your drawing is public and viewable, it’s ready to embed into your site! Navigate back to your Google Site, go to the Insert tab on the editing sidebar, and choose From Drive. Double-click to open your breakout folder and find your Google Drawing to insert it. Use the side handles on the image to make it thinner and remove the blank space, if any, surrounding your image. Drag the inserted drawing into the right-hand column. Preview your page to see your hotspotted Google Drawing in action.

TechTip: To delete anything that you add to your Google Site, simply click on the item and press Delete on your keyboard. You will also see a floating menu appear with a trash can icon. This is another deletion option.

Change It Up

You may be perfectly happy with your breakout game as we currently have it set up. However, you may also decide to make yours a little more complex by changing to structure of your page or by adding some additional pages.

Changing the Layout

You may decide that for this or your next breakout game that you want to have a three- or four-column page displaying your lock form and puzzle clues. Or you may just want columns that have designated spaces for images. Within the editing sidebar’s Insert tab, under Layouts, there are several choices for adding layout combinations such as these. Clicking on any of these layouts will add those blocks or modules below your content. If you’d like to switch to one of these layouts instead, simply drag the new layout structure above your content and pull what you’ve already added into the new layout.

Adding Additional Pages

Some of these breakout games span multiple pages within a website to make them that much more challenging for players to find and solve clues. If you want to make your game a little bigger, incorporating a large number of locks or perhaps two lock forms, you might consider adding additional pages to your Google Site. Adding new pages is simple and straightforward: go back to the editing sidebar, click on the Pages tab, and choose the plus (+) sign at the bottom. This will automatically create a new page for you with your same theme and color choices. You will notice that Sites also added a menu for site navigation at the top of your website so there’s no need to figure out a way to link to your pages.

Publish Your Site

When you are satisfied with your website, click on the Publish button on the top right of the interface. This will automatically change the sharing settings on your Google Site to public. You will need to do this every time you edit your site from now on. Google will save your drafts containing all of the future edits that you make private and won’t publish them until you click the button again. In this way you can feel comfortable continuing to make changes to your site as they won’t be seen by anyone until you are ready to have them go live.

When you first click on the Publish button, it can be a bit confusing because the site will launch a dialog box that appears to be prompting you to enter an entire web address for your site. Note that this “Web address” box is just prompting you to name your breakout, and whatever you enter here will appear at the end of a Google Sites URL. For example, I entered “draculascurse” here when I was designing my breakout site and underneath the “Web address” box I could see the URL changing to

https://sites.google.com/view/draculascurse

Type in the name of your breakout game here and don’t worry, it won’t publish until you click the Publish button at the bottom. You may also choose here to exclude your site from search engine results by checking the box at the bottom.

One more useful feature to know about before calling this a wrap is the ability to link your breakout game with Google Analytics so that you can view site traffic statistics. If you’d like to do this, click on the three dots at the top of the interface and choose “Site analytics” to enter your Google Analytics tracking ID.

Alternatives to Google Sites

There are several alternative applications that you could utilize to create free websites and online spaces in order to incorporate all of your breakout puzzles and lock form.

Smore

https://www.smore.com

Smore enables users to create beautiful newsletters and flyers with easy-to-use drag-and-drop tools, all for free. Users can embed images, links, text, and other content into these interactive newsletters. This is a great option for creating a simple site to house a digital breakout.

Weebly

https://www.weebly.com

Weebly is a free website creation tool and host. Users of this service can create both simple and robust websites with easy-to-use drag-and-drop tools, perfect for those without HTML or website design knowledge.

Deck.Toys

https://deck.toys

Deck.Toys is a gamified edtech tool specifically designed to create engaging student experiences online. The application allows users to create complete lessons in minutes with drag-and-drop tools.