I Converted My Digital Breakouts from Classic to New Google Sites

The summer before my senior year of high school, I had to read Crime and Punishment for my AP Literature class. At first glance, the book’s 545 pages seemed an insurmountable challenge. Then I realized that if I read 10 pages a day, every day, I would complete the novel with time to spare before the first day of school. That’s exactly what I did.

A similarly daunting task presented itself when Google finally allowed Classic Sites to be converted to New Sites this spring. I had 14 digital breakouts created in Classic Sites. The Classic and New Sites platforms are very different. Simply clicking the “Try it now” button only starts the work of making a site visually appealing.

Image depicting the
Clicking “Try it now” only starts the work.

Additionally, I wanted to improve the digital breakouts as I converted them. Starting the third week of June, I set out to convert all 14 breakouts by the end of July. It took six weeks of working like Charlie when he landed a job in a mailroom on Always Sunny, but I am proud to say, much like reading Crime and Punishment 23 years ago, it is finally done. Read on to learn about the changes I made, which digital breakouts are affected, the edtech tools I used, and how I addressed accessibility.

Changes made:

  • Nicer design – Classic Google Sites rendered unattractive websites. New Sites makes beautiful websites. Classic sites did not have the option to have a banner at the top of a page, so that was the foremost design issue to address when converting to New Sites.
  • Fewer browser tabs – One of my concerns with edtech is the overwhelming amount of tabs students and teachers constantly have open in their web browsers. While I was unable to completely eradicate multiple tabs, I was able to reduce the number of tabs in most of the digital breakouts.
  • Favicons and site logos – I added a favicon and site logo (usually the same image) for each site. This avoids the generic Google Sites favicon and makes the site feel more immersive.
  • Accessibility – I regret that I did not consider accessibility when I created the 14 digital breakouts. Thank goodness I learned so much about accessibility from my colleague Lindsey Blass when I worked for SFUSD. As I converted the digital breakouts I was able to use what she taught me about color contrast, narration, and alt text to make the breakouts more inclusive.
  • Some locks have changed. For teachers who have used any of these breakouts before, please have a look to see how they have changed.
  • The URLs are all the same. One great aspect of the conversion is that no URLs change. There is no need to update links anywhere they have been published.

Digital Breakouts Updated:

Social Studies

Let’s start with a four-pack of 60’s-70s US history digital breakouts I am especially proud of:

  • Cuban Missile Crisis – The Cuban Missile Crisis was the very first digital breakout I created. I was never satisfied with it so I completely revamped it. Realizing the Armageddon Letters and Time Ghost YouTube channels told the story better than I can, I leaned heavily on their content. Another big change is the breakout is now sequential, meaning students work on one lock at a time to advance to the next lock. There are four locks in total.
  • Defeat Barry Goldwater – This is most difficult of my digital breakouts. It could be a whole class exercise or an end-of-year US II review because it focuses on the Summer of 1964, a critical time for the Civil Rights Movement and US escalation in Vietnam. Warning: I did not reduce the number of tabs in this breakout. There are a lot of them.
  • Shirley Chisholm: Unbought, Unbossed, & Unlocked – This digital breakout tells the story of the first Black woman to run for president – Shirley Chisholm. It broke my heart when beta testers told me they did not know about her. US II teachers: if you try just one of my digital breakouts with your students, please make it this one!
Image links to the Shirley, Chisholm, Unbought, Unbossed, & Unlocked! digital breakout.
US II Teachers: Please use this digital breakout!
  • Richard KNICKSon – A New York Knicks-themed digital breakout. Why the Knicks? Because they’re my favorite team and they won their only two NBA championships when Nixon was president!
  • Other Social Studies digital breakouts I updated include Escape the Guillotine (French Revolution), Ratify the Bill of Rights, Decide the 1800 Election (Alexander Hamilton), Sell World War I to the American Public, and Liberate Paris (middle school version) (high school version).

    Math

    • Combine Like Terms & Save Halloween – This very popular breakout is now more user-friendly.
    • Liberate the Sphero – A good breakout for reviewing broad concepts with 7th and 8th-grade students or to introduce Spheros and digital breakouts. to Math teachers.
    • Escape to Summer Vacation – Another broad review for 7th and 8th-grade Math. This breakout is much less complicated now and uses fewer browser tabs.

    English Language Arts

    EdTech Tools Used:

    I used a number of tools to improve these digital breakouts:

    Image links to a virtual tour of the White House I created for the Richard KNICKSon digital breakout.
    Click this image to view the tour.
    • EdPuzzle EdPuzzle adds questions to YouTube videos. It also crops YouTube videos. New Google Sites now allows for embedding external tools so EdPuzzle is fair game. I wish it rendered perfectly with the next tool.
    • ThingLink ThingLink is the go-to weapon in the fight against multiple browser tabs. YouTube videos, Google Slides, and Google Forms render perfectly on ThingLink images – with no need to open new tabs. If only EdPuzzles did too! Escape to Summer Vacation benefited greatly from ThingLink. ThingLink also a video component. I used that in Unbought, Unbossed, & Unlocked. I wish it also cropped videos.
    • Google Drawings – I replaced Google Drawings hotspot image maps with ThingLink images because they do not open new tabs for YouTube, Google Slides, and Google Forms. I still used Google Drawings to create favicons (512×512-pixel dimensions) because it produces transparent images.
    Animated GIF demonstrating how to click the 3 dots in the Google Sites editor to add a site favicon
    Click the 3 dots in the Google Sites editor to add a favicon.

    Additionally, I used Google Drawings for those times when I did not like the options my chosen Google Sites theme generated for section backgrounds.

    Create a Google Drawing with 800×200 pixel dimensions and use it as an image for the section background. Or just make a copy of this Google Drawing and change the color as needed.

    Google Sites Section Style options: Regular, Emphasis 1, Emphasis 2, Image
    Don’t like the section background options? Use Google Drawings to create the background you want and use it as an image.

  • LunaPicLunaPic is a great website for adding artistic effects to images. Ignore the 1997 web design – the site is actually very powerful. And it’s free. I used LunaPic to manipulate the site banners for Cuban Missile Crisis, Decide the 1800 Election, and Liberate the Sphero.
  • Canva Canva is another wonderful tool for manipulating images. It is a freemium site. I use the free version. Use either the YouTube thumbnail template or set 767×280 pixel custom dimensions to make a Sites banner. I used Canva to make the site banner for Sell World War I to the American Public and the Eiffel Tower ThingLink images in Liberate Paris (middle school version) (high school version).
  • SoundtrapThe Soundtrap mobile app is great for recording quick sound clips. It works on any Play Store enabled Chromebook. I detail how I used sound clips in the Accessibility section.
  • Google Forms – Classic Google Forms are still more customizable for background colors and fonts. I did not convert any of my classic Forms to new. Google recently announced that classic Forms will migrate to the new editor soon. I hope this does not change the fonts and colors on these forms because…
  • FontFace Ninja Google Chrome Extension – The FontFace Google Chrome extension is great for identifying fonts on websites. I used it to match the fonts in my classic Google Forms to the fonts in Google Sites themes. Please note: this extension does not work well with the Google Sites editor. I often clicked “Publish” before sites were complete so I could use Fontface Ninja to identify fonts in the “view published site” version.
  • Colorzilla Google Chrome Extension – The Colorzilla Google Chrome extension grabs the hex code of a color on a website. That color can then be used in components of a digital breakout such as Google Forms and Google Slides.
  • Accessibility:

    • WebAIM Color Contrast CheckerThe WebAim Color Contrast Checker website details the contrast between any two colors using hex codes. If colors don’t have enough contrast, the site has clickable levers to adjust a color until there is enough contrast. I used this to ensure text and background had enough contrast in Google Forms and Sites.
    • Narration in Tour Creator – Add audio to points of interest in Tour Creator. When I discovered this, I was excited!
    • Alt text for images in Google Sites – One final tip for accessibility – add alt text to images so students with screen readers know what an image depicts. Click the image to add alt text:
    Animated GIF depicting adding alt text to an image in Google Sites
    Click the image to add alt text.

    Thank you for reading. I hope these digital breakouts are useful for your classroom or better yet, inspire you to create your own. Please comment below, tweet me @TomEMullaney, or email me (mistermullaney@gmail.com) if you have questions, need hints, or notice a mistake.

    Advertisements

    Make Awesome Exit Tickets with Digital Breakouts

    Author’s Note: This strategy is very similar to the Make Vocabulary Fun with Digital Breakouts strategy I blogged about on BamRadioNetwork’s EdWords blog.

    Here is a strategy for using digital breakouts to make exit tickets that challenge and engage learners while producing useful assessment data.

    Step One: Make a Google Form with the digital breakout locks.

    Use response validation to set each lock (they are short answer questions) to be a key vocabulary word or concept from the lesson. Sometimes locks are referred to as “codes” as seen below. Set each question to be a required question.

    Screenshot 2017-06-08 at 10.45.45 AM

    Keep this to four or five locks.

    Step Two: Make a Google Form with quiz mode enabled.

    Click the settings gear in the upper right corner of the form to enable quiz mode.Quiz Mode

    Add multiple choice questions to Google Form that assess what students learned. The number of questions should equal the number of locks in the first Google form. Choose the correct answer for each question in the form. Feedback for correct answers should be short answer questions that assess the lesson. The answers to those questions are the locks in step one. Feedback for incorrect answers should be links to remediating content.

    Updated for Blog Post

    Step Three: Make a one-page Google Site.

    The first element is a text box that outlines a scenario where something is locked. Have fun writing it and model creativity for learners. See below for an example.

    The second element is a section with another text box. Put the text, “Want some hints? Click here.” in the box. Link “here” to the Google Form with multiple choice questions from step two. Set the section style to “Emphasis 2” or “image” to call attention to this text box. This box can also contain a link to a resource that reviews the lesson content if a teacher wants to provide that scaffold. Here are two examples of what this section can look like:

     

    Without Scaffold Resource
    Without scaffolding recourse and section style set to “image.”

     

     

    With Scaffold Resource
    With scaffolding resource and section style set to “Emphasis 2.”

    The third element on the page is the Google Form with the locks from step one. Simply insert it.

    That’s it. The exit ticket is complete. It gives learners a way to interact with lesson content and assesses them using multiple choice and short answer questions. All a teacher has to make are:
    Two Google Forms
    A one-page Google Site

    Please make copies of the two Google Forms in this Google Drive folder to use as templates to make a digital breakout exit ticket. Click the image below to try a US history digital breakout exit ticket I made for tenth-grade students.

    Kill the Bank! Thumbnail

    Thank you for reading. If you would like to discuss this strategy further, please comment below or tweet me at @TomEMullaney.

    Make Vocabulary Fun with Digital Breakouts

     

    My latest BamRadioNetwork EdWords blog post is Make Vocabulary Fun with Digital Breakouts – my strategy for using Quizlet, Google Forms, and Google Sites to rejuvenate vocabulary review. Thank you for reading and considering it. Please comment below or tweet me at @TomEMullaney if you would like to discuss further.

    My Digital Breakouts Interview on Teacher Tech Trials

    I recently had the pleasure of talking to Corey Engstrom about digital breakouts for his site, Teacher Tech Trials. Corey has some really useful and interesting interviews on his site. Please listen below and check out his post with many links to help you get started making your own digital breakouts.

    https://soundcloud.com/corey-engstrom-116011715/tom-mullaney-on-digital-breakout-edu

    Comparing Digital Breakouts in New Google Sites and Classic Google Sites

    comparing-digital-breakouts-in-classic-google-sites-and-new-google-sites

    The New Google Sites is live in personal GMail accounts. It is vastly different from what is now known as “Classic Sites.” Here are my thoughts on using both tools to make digital breakouts.

    Looks are important.

    Students are more likely to engage with a breakout if it is visually appealing. The New Sites makes much nicer looking websites. Have a look at my digital breakout templates in Classic Sites and New Sites to see the vast difference. Speaking of design, use Canva to make beautiful header images. 280 pixels high and 767 pixels wide are the ideal dimensions.

    It is so easy!

    Classic Sites is difficult to work with. It is not intuitive. New Sites could not be any easier to use. Make one site with it and you’re a pro. I am thrilled to share New Sites with teachers because they can point, click, and make a beautiful website!

    The one drawback.

    Beautiful, easy sites! So what’s the catch? There is one, and it is big. Third-party sites that embed in Classic Sites, such as EdPuzzle, ThingLink, and Quizlet, don’t embed in New Sites. Instead, there is a preview that opens a new tab when clicked:

    edpuzzle-in-new-sites

    New Sites is still better.

    New Sites’ beauty, ease, and fantastic G Suite integration make it well worth it. EdPuzzle doesn’t work? Find a short video and pair it with a Google Form! Google Slides, PDFs in Google Drive, Docs, Sheets, and even My Maps embed flawlessly – with no code needed! Simply click and drag to move or change size.

    I am perfectly willing to use only G Suite tools in New Sites while I wait for embeds to be added to the platform’s functionality.

    Beware the navigation!

    New Sites has two navigation settings:

    new-sites-navagation

    This means that all site pages are visible by default. However, you can hide pages individually:

    hide-from-navigation

    Here are some suggestions.

    For what it’s worth, here are some suggestions from someone who made many digital breakouts in Classic Sites and can’t wait to get started in New Sites:

    • Figure out what you want your students to work with before making your digital breakout. What PDFs, Google Docs, Google Slides, YouTube videos, Google My Maps, etc. do you want your students interacting with during your digital breakout? Figure that out and your locks will flow from there.
    • Keep the elements on each page minimal. Do not overload students with too many things to view on any one page. Keep it simple and visually appealing. New Sites and Canva help those of us (like me!) who are not artistically inclined.
    • Make one lock super easy. Once students crack one lock, they are hooked. I don’t always follow my own advice on this one. I should.
    • Make digital breakouts in personal Google accounts. No one has a crystal ball. Making a Google Site in a school domain means it could go away if employment status changes. Use personal Google accounts to ensure sites do not disappear when changing jobs.
    • Beta test! Before students try a breakout, have your PLC beta test it to make sure everything is correct. Errors from incorrect links to grammar are common when making digital breakouts. Beta testing makes sure students work on a refined finished product.

    Thank you for reading. Comment below or send me a tweet @TomEMullaney with questions.

    Digital Breakouts in the New Google Sites

    new-sites-digital-breakout-template-blog-post-splash-image

    The new Google Sites is live. This is a template website to give you ideas for making digital breakouts in the new Sites. Currently, there is no way to copy sites or publish them as templates. The good news is that the new Sites is so intuitive that making digital breakouts is easier than ever!

    Here are the digital breakouts I have created on my own or in conjunction with colleagues.

    If you have never tried a digital breakout, please watch this video where I take you through the template to show you how it works:

    Please make copies of the files in this Google Drive folder to help you make digital breakouts. This template site uses Google Forms, an embedded PDF, an embedded YouTube video, and Google Slides. Google My Maps and Google Sheets are other G Suite tools that are great for embedding in digital breakouts.

    Comment below or send me a tweet @TomEMullaney with questions.

    All Digital Breakouts I make are inspired by the innovators behind BreakoutEDU,  James Sanders and Mark Hammons, as well as by the creators of Digital BreakoutEDU,  Justin Birckbichler and Mari Venturino.

    Update June 4, 2017:

    Have a look at my video about a small problem with digital breakouts in the new Google Sites and a solution:

    Use These Templates to Make Your Own Digital Breakouts!

    use-these-templates-to-make-your-own-digital-breakouts

    Author’s note: This post is intended to help teachers make Digital Breakouts in Classic Google Sites. The New Google Sites has gone live. Please read my blog post about making Digital Breakouts in New Google Sites. Additionally, please read my post comparing the classic and new versions of Google Sites.

    Digital Breakouts, the entirely online offshoot of the BreakoutEDU movement, are a great way to help students fall in love with problem-solving. I make and use them, as do my colleagues who have found innovative ways to incorporate them into instruction.

    Recently, I have had colleagues and educators on social media tell me they would like to make digital breakouts but the task seems daunting. One colleague asked me to build a template website to help him get started.

    So here it is – a Digital Breakout template website, a replicable Google Site template, and a Google Folder with template files. Makes copies of them and have at it! The website is a Digital Breakout itself. Go through it to see how they work.

    The site demonstrates some great tools for digital breakouts: Google Forms with Quiz Mode enabled for feedback, Quizlet, EdPuzzle, and Thinglink.

    Comment below or send me a tweet @edtechtom with questions.

    All Digital Breakouts I make are inspired by the innovators behind BreakoutEDU,  James Sanders and Mark Hammons, as well as by the creators of Digital BreakoutEDU,  Justin Birckbichler and Mari Venturino.

    The Next Awesome Thing In Your Classroom – Digital BreakoutEDU

    I have made fourteen digital BreakoutEDU activities. Please have a look, attempt to crack the locks, and give me feedback! Can you succeed in 45 minutes?

    For those new to BreakoutEDU, hints for cracking the lock are built into the site. Some are visible, some are hidden. Some are distractions.

    Update 11/25/16: I will no longer post new digital breakouts to this blog post. I am now storing my digital breakouts on this website.

    Update 11/17/16: I have made a how-to resource for digital breakouts.

    Update 5/18/16: I documented how teachers use Digital BreakoutEDU at Gravelly Hill Middle School to engage students on the BAMRadio Network EdWords blog.

    Poetry Digital Breakout - Updated September 2018

    My colleague ELA teacher Suzanne DeConto and I made a poetry break-out to help 7th-grade students review poetry. Adults and students have enjoyed it. Update (7/1/16): I am honored to announce this breakout was featured in USA Today!

    Image links to the Shirley, Chisholm, Unbought, Unbossed, & Unlocked! digital breakout.
    US II Teachers: Please use this digital breakout!

    Unbought, Unbossed, and Unlocked teaches students about trailblazing 1972 presidential candidate Shirley Chisholm. This makes a great addition to any US history unit focusing on the 1970s.

    LBJ Splash Image

    Defeat Barry Goldwater! was designed for high school history students. The 2016 presidential election has a controversial candidate in Donald Trump. Before Trump, there was Barry Goldwater. Use this digital breakout to teach your students about LBJ, Goldwater, the Civil Rights Movement, Freedom Summer, the Mississippi Freedom Democratic Party, and the Gulf of Tonkin Resolution. Be warned – with seven locks this breakout is in the higher range of difficulty.

    combine-like-terms-save-halloween-splash-image

    Combine Like Terms and Save Halloween! was a collaborative effort amongst myself, Beth Liner, Ashley Vaughn, and Sara Rodgers. As the instructional support staff at Gravelly Hill Middle School, we were tasked with making an activity to help seventh-grade students review combining like terms. We put our heads together and this breakout is the result. The amount of math involved in this breakout makes it a good choice for an entire block period or two days in a conventional bell schedule.

    Decide the 1800 Election Splash Image

    Decide The 1800 Election! is my attempt to capitalize on the Hamilton musical craze while teaching middle and high school students about Hamilton, the 1800 presidential election, and the Federalist-era United States. Be warned – cracking the date lock is especially tricky in this breakout!

    Richard KNICKSon

    Richard KNICKSon blends some of my favorite things, Digital BreakoutEDU, US History, and the New York Knicks! The Knicks content is window dressing to give the site a nice orange and blue color scheme while making students feel like they are in the late 60s and early 70s. This breakout is good for teaching about Watergate, Nixon, and protests against the Vietnam War.

    Ratify the Bill of Rights Splash Image

    I challenged myself to make a digital breakout for the first half of US history. The result is Ratify the Bill of Rights. This is my first breakout using DocHub, a great tool for manipulating PDFs.

    Sell World War I to the American Public

    I made Sell World War I to the American Public as a relatively easy way to review World War I concepts. It is mostly from the US history perspective. This breakout is good for someone just starting out with digital breakouts as it focuses more on content and less on gaming.

    Escape to Summer Vacation Digital Breakout

    I designed Escape to Summer Vacation as a fun end of the year activity for Caroline Smith, my middle-school math teacher colleague. This challenging breakout tells the story of Caroline trying to escape to summer vacation. I hope you like order of operations and integers!

    Escape the Guillotine Digital Breakout

    I made Escape the Guillotine with 9th-grade World History curricular materials. This digital breakout will help middle and high school students review the French Revolution. I used EdPuzzle to include short videos and convey hints.

    Liberate the Sphero Splash Image - Updated September 2018

    I made Liberate the Sphero to commemorate the arrival of Spheros at our school and introduce math teachers to digital breakout.

    Liberate Paris Digital Breakout - High School

    Liberate Paris was made with curricular materials for 9th-grade students.

    Liberate Paris Digital Breakout - Middle School

    This is a different version of the Liberate Paris breakout. I designed it to help 7th-grade students study for their World War II test. If you have never participated in a BreakoutEDU, this is a good one to start with.

    Cuban Missile Crisis Digital Breakout Updated

    I made the Cuban Missile Crisis with materials I used for 11th-grade students. This breakout is sequential – students unlock one lock at a time as they proceed through four days of the crisis. There is a lock for each day.

    These breakouts were inspired by Justin Birckbichler‘s and Mari Venturino‘s work at DigitalBreakout. Additionally, I was inspired by the work of James Sanders and Mark Hammons at BreakoutEDU.com. The work of these fine educators was integral in designing these activities. I am especially grateful to Justin for the awesome Google Sheet I copied for use in some of these breakouts.

    Thank you for reading this. Please feel free to give me feedback on Twitter, @edtechtom, or in the comments below.