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

    Guided Notes in Google Classroom

    Stop Lecturing

    In my latest BamRadio Network EdWords blog post, I explain how teachers can stop lecturing to meet the needs of today’s students. Instead, they can use Google Classroom to get the most out of blended learning.

    Five Strategies for Using Video in the Classroom

    Five Strategies for Using Video in the Classroom

    Strategy 1: Never Project to the Whole Class

    Student devices and simple strategies render whole-class video projection obsolete. When students view video individually, they can watch at their own pace by pausing and rewinding. They can be assessed and engaged at their own pace.

    A video projected to the whole class lives in the recesses of students’ memories where it can be forgotten or misremembered. A video shared for individualized viewing will live on a teacher website, LMS or, preferably, Google Classroom. There students can access it anywhere, anytime. The time for whole-class projection is over. No 1:1 devices? Try a computer lab.

    Strategy 2: Take Advantage of YouTube Beyond Pressing Play

    Teachers can make their own videos for free using their device’s built-in webcam and Screencastify. Beyond simply uploading and sharing videos, there are four components of YouTube teachers should take advantage of:

    Annotations

    Teachers can add text boxes to their videos using annotations. This is a great opportunity to point students to further resources or scaffold content conveyed in video. This is what it looks like:

    Annotation

    Adding annotations when uploading video or adding them to old videos is easy.

    Cards

    Cards appear in the upper-right corner of a video. They link to other videos. This is a great way to point students to another resource. Notice the use of an annotation and a card in this video:

    Card

    Making cards is simple. They can be added when uploading videos or to old videos.

    Here I demonstrate adding cards and annotations to a YouTube video:

    Custom Thumbnails

    A YouTube video thumbnail appears when a video comes up in search results or is embedded on a website. YouTube gives users three thumbnails to choose from when uploading a video. Each is a paused moment from the video. They rarely look good. Users can also upload a custom thumbnail.

    It is helpful to students to have an image and title on a custom thumbnail. I design mine using Google Slides (keeping the default 16:9 ratio in page setup) and then screen capture them to create an image. Google Drawings works too. I have made custom thumbnails for the first video in each of my playlists:

    Screenshot 2015-12-07 at 7.54.11 PM

    Here are steps to add custom thumbnails to your videos.

    Watch as I demonstrate how to add a custom thumbnail to a YouTube video:


    Playlists

    My playlist, Student-Centered and Future Ready, contains videos created by others. YouTube users can make playlists using all videos on YouTube, not just their own. This is a great way to easily curate and share videos with students. Creating playlists and adding videos to them is as easy as clicking “Add to” in any YouTube video:

    Adding to or Creating a Playlist

    Strategy 3: Use DragonTape to Edit and Curate YouTube Videos

    Is there a great video for your next lesson that has a moment of inappropriate content? Do you want students to watch that video with the offensive content magically removed? That’s what DragonTape does. DragonTape lets users make mix-tapes using YouTube videos.  The magic is that users can crop videos and insert clips from the same video over and over again. This means a YouTube video can be cropped in infinite ways. Teachers can also use DragonTape to curate videos like they would playlists in YouTube.

    DragonTape
    DragonTape allows users to make mix-tapes with YouTube videos. Additionally, users can crop videos and use the same video multiple times.

    Strategy 4: Use TED-Ed to Add Assessment and Engagement

    TED-Ed is a great tool to add assessment questions, discussion prompts, and links to further resources after students watch a video.

    TED-Ed Plain
    A YouTube video in TED-Ed. “Think” questions are multiple choice. “Dig Deeper” leads students to further resources. “Discuss” questions give students a discussion prompt and opportunities to comment on responses.

    Here is a tutorial to help you get started using TED-Ed.

    Don’t have time to create a TED-Ed lesson? Search through their more than 150,000 lessons to see if they have what you need.

    Strategy 5: Use EDPuzzle to Add Assessment and Engagement

    EdPuzzle allows teachers to add assessment questions and their own voice to videos as students watch them. This is what a student sees when watching a video in EdPuzzle:

    EdPuzzle Answer a Question
    Student view of a video in EdPuzzle. The yellow mark shows where a student has to listen to a voice recording of their teacher.

    Here is a tutorial to help you get started using EdPuzzle.

    Don’t have time to create an EdPuzzle lesson? Search through the many lessons other teachers have created!

    If you would like to discuss these strategies further, please comment below or tweet me at @edtechtom. Thank you for reading.

     

    Use EDpuzzle to Make YouTube a Powerful Educational Tool

    Introduction

    YouTube, the second largest search engine, is a transcendent resource for educators.  TEDEd is a great tool for engaging and assessing students after they watch YouTube videos. There is another great resource for ensuring students are getting it as they watch. This tool gives teachers the ability to add explanations during videos while individual students watch at their own pace. This free tool, EDpuzzle, is a great way to enrich video instruction.

    Set-Up

    To get started, go to EDpuzzle. Create a free teacher account:

    Screenshot 2015-09-08 at 5.03.02 PM

    Use your school account to sign up. Edpuzzle has a “sign in with Google” feature that is great for GAFE schools. Students also have to set up accounts to log-in. This means teachers can easily keep track of assessment data.

    Create classes and enroll students by sharing a unique class code, just like Google Classroom:

    Screenshot 2015-09-08 at 5.09.20 PM

    Creating Lessons

    Screenshot 2015-09-08 at 5.16.25 PM

    This brings the teacher to “My Content” where lessons are stored:

    Screenshot 2015-09-08 at 5.29.51 PM

    Screenshot 2015-09-17 at 6.48.02 PM

    To make a lesson with a YouTube video:

    Screenshot 2015-09-10 at 5.01.44 PM

    An editor opens that looks like this:

    Screenshot 2015-09-10 at 5.06.47 PM

    Screenshot 2015-09-17 at 6.50.40 PM

    Teachers can add short-answer and multiple choice questions. To add a multiple choice question:

    Screenshot 2015-09-10 at 5.37.25 PM

    Another good option for teachers is audio notes:

    Screenshot 2015-09-16 at 4.45.09 PM

    Screenshot 2015-09-16 at 4.50.31 PM

    EdPuzzle gives teachers the option to delete and re-record audio notes to get them just right. Teachers can also add a separate audio track:

    Screenshot 2015-09-16 at 4.58.50 PM

    One Extra Benefit of EdPuzzle

    EdPuzzle just added a “Share to Google Classroom” button:

    EdPuzzle Share to Google Classroom for Blog Post

    In Conclusion

    YouTube is a great resource for teachers. However, it has nothing to ensure students are learning and engaged while watching. EdPuzzle changes that. Use it to make YouTube a powerful tool for your students. This is the EdPuzzle lesson I made in this post. If you have any questions about it, please comment below or tweet me at @TomEMullaney. The video is The Forgotten War Hero – Milunka Savic by The Great War. It is well worth watching: