If you’ve been around the blog for awhile, or follow me on Twitter, you know my love for all things Google. When I created my tutorial for Digital Escape Rooms (posted on Ditch That Textbook) it was using all Google apps.
I know some fellow educators out there are not in a Google school. Other educators are Google schools but they can’t use Google Forms. Never fear, here is a tutorial to create a digital escape room using Microsoft Sway, PowerPoint (or Google Slides) and Forms.
The process is the same except for the location of the image and the last step and you can even use Matt’s planning template.
1. Write your prompt
You need a good story to hook the audience. When you go to a physical escape room, they set up the situation with a story or information at the beginning. The purpose of this Halloween themed digital escape room was to share some tech ideas with my staff in a fun way.
So I wrote an introduction to tell my audience what was happening:
“It’s a blast from the past! But when I blasted from the future to my 50’s living room, I lost my copy of Ditch That Textbook. Click on the clues in the room to help me find my signed and treasured copy.”
2. Create your clues
Determine how many and what kind (number, word, etc.) of clues you want. I want this escape room to be a fun activity for teachers to do as stress relief at the end of school and maybe gain some inspiration for next school year. During this step, I also created all of my clues. Some are in PowerPoint, Docs, Excel, Jigsaw Planet, etc. I keep all of these in a folder in One Drive so everything is together.
Here are the clues I used for my digital escape room:
- Microsoft Training Site through a Sway page – CLUE:
which translates to 503 with the pigeon number cypher.
- Editable PDF hack in Google Slide – CLUE: EDIT with alphabet cypher translates to 761122
- Choice menus from Kasey Bell – launched from an excel sheet – CLUE: BUFFET
- Using animated Bitmoji’s from Snapchat – launched from a cypher in Docs – CLUE: DANCE
Here is a Wakelet collection with even more clue making resources.
3. Create your image(s)
I almost always have an interactive image that I create in Google Drawing. But to embed in Sway, you have to use used something with an iframe embed code. I know, what the heck is that. No worries, I’ll walk you through it later. In the mean time, use PowerPoint (or Google Slides) to create your image. We will embed this in our Sway at the end and the links or “hotspots” will remain active.
Open a new PowerPoint (or Google Slide) and start creating your scene. I changed by screen size to 4:3. You do this under the design tab, then select slide size.
It can be as easy as a single image (the reindeer in this Reindeer Games digital escape room), or as fancy as a full scene (like the image below).
Once your image is created, you may want to download this and set it as your background. This prevents you from accidentally moving one of your components while setting your hotspots. To download the image, click on the File, then download as images. This will make a zip file. You will have to unzip it (double click usually) to use it. Once you have the image, then click on the Design tab and choose Background, picture from file. Navigate to you photo and upload it. Don’t forget to select all and delete everything from your page (it’s scary, I know, but you have an undo button). You will see your image set as the background.
After your image is created and set as your background, you need to link your clues to each object. I have 5 clues, so I linked it to the clock, phone, tv, coffee table, and pink sofa.
You can make anything you added to your image clickable as a link! PowerPoint 365 is a little different than Google Slides. You can use a shape or textbox for this next step. If you use a shape, set it to no fill and no outline. If using a textbox, delete the text. Double click on the shape or click on the textbox and go to the insert tab and choose link. 
Type or paste the URL for the clue you are linking. To prevent the text from showing I use a period and change it to the color of the object it’s over. If you are using anything cloud based, make sure share settings are set for anyone to be able to view.
If you are using the desktop version of PowerPoint, you can just right-click on the shape you drew and add your link. It’s much easier on the desktop version. You will have to your PowerPoint to the One Drive cloud to get the embed link.
Some breakouts may have more than one image or page. In my trianglesonly.com breakout game, I had multiple pages on the top tab to replicate a dating site, so I repeated the process for each image I created.
4. Create your locks
If all of your clues are numbers and you have the pro version of Microsoft forms will can create your locks in Microsoft. You can create create a cypher for each clue to change it from letters to numbers. I show some examples in this escape room. You can make your Cypher images in any image editing program. You can also use PowerPoint and download the files as .jpg or .png.
I don’t have the pro version of Microsoft Forms so I’m using Google Forms. Create a new Google Form (I keep everything for each escape room in one folder). You want to use response validation (check out this video for a walkthrough on how to add it) so they have to type in the correct clue. You also want to make the question required.
For number locks, I use the number is equal to setting then type in the number you want. You can also type in a custom response if they get it wrong. For a number, I usually just use “try again”.
For letter locks, you will select text contains. Forms are case sensitive so my clue usually directs them to capital or lowercase letters.
Continue this process until you have all of your clues entered.
I like to include a special message or image once the person “escapes”. To do this, create a new section in your Google Form.
On this new page, you can post a message or an image congratulating them on escaping.
5. Create your Sway
In my opinion, this is the most exciting part of the process. This is when everything you have created comes together as an escape room.
Got to sway.com and start new. A title card will always be the first card offered. Title your Sway and add any images you wish. There is a design tab if you want to play around.
Now add you image (or images). Click the plus sign, then the media tab, and then embed.
Now let’s go get our embed code. Your image is in PowerPoint (Google Slides instructions will be below). In PowerPoint, click file, share, and embed. Copy the embed code.
Head back over to sway and paste the embed code in the card.
Google slides will need to be published to obtain the embed code. Go to File – Publish to Web. When you click publish, an embed code will be available.
Now let’s insert our Form. Whether you use Microsoft or Google, the process is very similar. Click the + in Sway and select Embed again.
Go to your Form. Click Send then the <> tab to get the embed code. Paste this code in the Sway card.
Now you are ready to preview your Digital Escape Room. Click the play button in the top right corner. How does it look?
When you are ready to share with others, you use the share button. You can copy a link or create a QR code.
Whew! You made it to the end. Now you are ready to go create your own Digital Escape Room with Sway.
You can try out the Digital Escape Room created during this post with the link below.
https://sway.office.com/s/2Hvb5Qm4ehy2Mn54/embed
Infinitely Teaching 