Monthly Archives: December 2018

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.

Categories: BreakoutEDU, Google Drawing, Google Sites, Google Slides | Tags: | 1 Comment

Custom Google Classroom Headers

I love to customize my Google Classroom banners. I mean, the ones provided by Google are super cute, but if you can add a Bitmoji then it’s better I say. I also sometimes include some icons for the content area. I create my own to avoid copyright issues, but noun project is another great resource to use.

Header example

Google Classroom Header.png

You will create these in Google Drawing. Google Drawing is located in your Drive under more Screen Shot 2018-12-04 at 9.55.37 PM  or in your Google waffle.Screen Shot 2018-12-04 at 9.54.00 PM

Now we want to go to page set-up under file, select custom, change inches to pixels and create an 800 x 200 pixel canvas.2018-12-04_21-58-27

Now the fun can begin. If you right click (or control click) on the canvas it will allow you to change the background of the canvas. I like to use the gradient feature so the middle is a little lighter.

2018-12-04_22-05-53

I’ve you know ANYTHING about me, you know I like to use the Bitmoji extension. You can learn about how to use the extension in this blog post. Now remember, you don’t want to put words in the middle of you banner because Google Classroom will put the class label in the middle. You also want to leave a little room on the outside edges so it fits your browser configuration.

2018-12-04_22-11-38

I added the words Happy Holidays too. Word Art is another fun tool to use if you want to play around with it.

2018-12-04_22-11-38-1

Now you are ready to download your creation. I like .png, but you can also use .jpg

2018-12-04_22-22-20

Now that you have your image in your downloads folder or whatever location you send your downloads. Now let’s put this into Google Classroom. Click on the upload photo link in the bottom right corner. Select or drag your image in. TAH DAH, you have a new custom header.

2018-12-04_22-28-47You can see my previous custom header and the new holiday header I just created. Notice the color does get a little darker when you upload. You might also play around with the location of your images. I move mine more towards the top than centered so it looks centered once inside of Classroom.

Now, let’s take this a step further. How about you let students create custom headers and each week you display a new one? Evan Mosier is having one of his classes do this and he has shared a site will the headers created by his students. They are free for anyone to use.

If you make one of your own, let me know @MandiTolenEDU on Twitter. If you use a banner from one of Evan’s students, give them a shout-out on Twitter.

Categories: Bitmoji, custom headers, Google Classroom, Google Drawing | Tags: , , | 3 Comments

Blog at WordPress.com.