BreakoutEDU

Create a digital Breakout

I love Breakout games and watching students interact with each other to solve problems. What I don’t like about physical breakout games is students missing out on some of the puzzles. The collaboration is great, but when using it as a review, not all students experience the same things. Digital breakouts can be done in groups of 2 or individually and allow the students to experience all of the puzzles.

I created a tutorial for digital breakouts a few years ago, but with the changes to Google sites, the process is sooooo much easier now.

Here is an image that outlines the basic steps.

Digital Breakout Infographic

  1. I try to write my prompts and story ahead of time. This saves me time when I’m putting everything in a Google Site. For the Christmas Breakout I recently wrote, my story line was kind of lame ūüė¶ but it went along with the 12 days of Techmas I created for my school.

Screen Shot 2018-12-18 at 2.32.28 PM

2 and 3. I create my clues in Google Drawing or Google Slides, and I use outside sources like jigsawplanet.com and Snotes. The more creative you are the more fun your breakout will be. I was provided a document from Charles (I wish I knew your last name) at the EdTech Team Summit in Topeka. His crowd-sourced document is loaded with great ideas for digital breakouts.

https://docs.google.com/document/d/1Er-YHzLAzezTBliy6OUB9Wq5TqyR15sqx2wKsKbCCME/edit?usp=sharing

This first image of the gnome I uploaded into jigsaw planet and created a puzzle, and the second one has a clue hidden in the music notes. You can also overlay transparent images on a Google Drawing so it makes an area clickable. See the animation below.

2018-12-18_15-03-39

You can add more images for visual appeal or as fake clues. You also want your background and titles to be fun. I created some fun graphics in my TrianglesOnly.com breakout.

4. You will use a Google Form to create your locks. I sometimes embed a countdown timer from youtube. BreakoutEDU has a great one that is free to use.Screen Shot 2018-10-27 at 10.49.18 PM

You can also use images of locks to visually represent what lock they are looking for.  You want to click the 3 dots in the bottom right corner and select response validation. Set the lock code to what you want. Remember, they are case sensitive so tell your audience how to type it.Screen Shot 2018-12-18 at 2.46.05 PM

5. Now we will put it all together. I use Google Sites (sites.google.com) and house everything there. You can pull directly from your Google Drive to embed your Google Drawings (with transparent links), Google Forms, and any images you have stored in your drive. Word of caution, if you plan to use multiple pages (which I sometimes do) have participants open the Google Form in a new tab so they don’t lose the combinations they have already entered when they click on a new link in the site. If you are not familiar with Google Sites, Matt Miller has a walk-through on Ditch That Textbook that will help.

Here is a link to a Christmas Breakout I made to follow-up our 12 Days of Techmas.

And another Breakout for Geometry called TrianglesOnly.com

Hopefully you will find creating Digital Breakouts as fun as I do. I know my students love them.

Advertisements
Categories: BreakoutEDU, Google Drawing, Google Sites, Google Slides | Tags: | Leave a comment

Solar Eclipse Breakout

This is a cross-post with Make Math Not Suck

The Total Solar Eclipse happens at the beginning of our school year. Since we will still be in the introduction/relationship building phase and won’t have learned new content, I wanted to create a BreakoutEDU that included prior knowledge. I searched online to see if any already existed and stumbled upon a digital one created by Wendy Lentz. I loved it, but my students won’t have their Chromebooks yet, so I needed one that wasn’t 100% reliant on technology. I also wanted to incorporate math. I did borrow her video and Google Form (with her permission) and included it in my Breakout. Definitely check out Wendy’s! She did an amazing job.

BreakoutEDUlogo.png

I plan to do this with my Freshman. You can adapt it for any age you like. I’ve linked to the folder with all of my resources. You will need to make a copy to edit. The form will not be editable for you but you can email me if you would like the ability to edit.

My breakout needs a small, medium, and large box. It uses the following locks: 3-digit, two 4-digit, 4- letter, 5-letter, directional, & a keyed padlock.

You will also need a Chromebook or iPad and black light with marker. I have included instructions to make red-letter code glasses and you will need red cellophane and cardstock to make those.

Please let me know if you use it and/or tag me in your photos on Twitter (@TTmomTT). I love to see students using resources I’ve shared.

Categories: BreakoutEDU, Solving Equations | Tags: , , | 1 Comment

Make a Digital #BreakoutEDU

They let me guest moderate a #DitchBook twitter chat last Thursday on #BreakoutEDU. It was A-Mazing! Matt Miller (@jmattmiller), author of Ditch That Textbook, has a tremendous chat at 9 PM each Thursday. The DitchBook team is very supportive and welcomed a newbie like me in without a blink of an eye. Karly Moura (@karlymoura) was so patient and supportive and co-moderated with me to make the experience wonderful. I do hope they will let me do it again sometime.

I love #BreakoutEDU for the problem-solving qualities and for encouraging perseverance. I have a Breakout box that I made. I purchased a wooden treasure chest at Michael’s and my wonderful husband but a locking hasp on it. I purchased all of my locks at Amazon or Wal-Mart, but Lowe’s and Home Depot have many to choose from also. A really awesome Date Lock was shared on #DitchBook that I need to add to my collection.

As I prepared for the chat, I knew I wanted our group to experience a digital Breakout. I had participated in a chat where we got to do one created in Google Forms and it was fun. But then I stumbled upon (thanks Sean Fahey @seanfahey another awesome #DitchBook team member) some digital breakouts created in Google Sites. THIS was what I wanted. So I set out to figure out how to do it. I’m going to share the process below. Talk about Google App Smashing! This uses Sites, Forms, Drawing & YouTube.

Look through the one I created or the links above to see how everything works before you read the tutorial below. Digital Breakout Data Cruncher

You will want to write your story and have an idea (or a list) of the links and resources that you will use. Being prepared ahead of time will make the process go more quickly.

Sites: If you plan to make a lot of these, you could have one¬†digital BreakoutEDU site and¬†each Breakout would be a new page within your site. That what I plan to do next, I just didn’t think through it this first time, just jumped in feet first (as usual).

BReakout Image

You want to set up your page with one column and insert a table with 2 columns. If you choose the site layout with two columns, it won’t leave enough room for your image. You will insert the Google Form into the left column and your Google Drawing in the right column when they are complete.

Layout

Drawing: Now you need to create your Drawing with invisible hotspots. Make sure you use images with Creative Commons License to modify and give credit as per the CC License. Once you have your image, create a shape on top of the image. Set the outline and fill to transparent. You can click on the invisible image and insert a link to the resource you want to use. Repeat this process for all the links in your Breakout.

This slideshow requires JavaScript.

Forms: Next you need to create the Form so participants can enter their answers. I started by inserting a video into the form with a countdown timer. BreakoutEDU has a timer you can use that’s 45 minutes, the typical breakout time, but I wanted 15 minutes for the chat so I selected one from YouTube. Next you want to set your locks. You need to validate the answer so it will only unlock with the CORRECT answer. ¬†Here is a link to a youtube video¬†from the digital BreakoutEDU experts Justin Birckbichler (@Mr_B_Teacher) and Mari Venturino (@MsVenturino)¬†explaining how to set your locks to validate.

I also wanted a reward for breaking out, so I created a badge in Google Drawing, downloaded it as a .png and put the link to the image in the confirmation page.

Once your drawing and form are complete, embed them into your site. Test the game and have many others test the game to make sure it does what you intend. Once you’ve beta tested, share it with the world (or at least your class) and let them have fun.

I came up with the process on my own, but the experts mentioned above, Justin and Mari, have a page with resources to make your own. I didn’t find that page until after I’d worked through the process. ¬†I did link to two of their videos above but there are many more nuggets of goodness on their page.

If you make a digital BreakoutEDU, please share on our crowdsourced Padlet and/or send the link on Twitter with the #DitchBook hashtag and we can beta-test for you.

Categories: BreakoutEDU, Google Drawing, Google Forms, Google Sites, technology, Uncategorized | Tags: , , | 1 Comment

Create a free website or blog at WordPress.com.