First, open Google Drive and create a folder for your creation. This will help keep you organized because you will be creating a few different files that you will embed in your Google Site. (I created one called Washington D.C. Scavenger Hunt.) Now that you have your folder, open it, click New, then click Google Sites.
Next, open your Google Site. This will be your home page. Choose a theme for your site on the right hand side and then choose a title for the home page that your students will see when they open the site. Lastly, in the upper left hand corner name your site. This will be what the site will be saved as in your Google Drive.
You can change the background image that is behind your home page title text by putting your cursor over the image and then upload your own image or choose one from another source.
After this, think of a story to set up your escape room or scavenger hunt. Why do students need to solve the problems? What are they trying to find? This can be short and sweet or lengthier- choose whatever you have time for and you think will work best for your students. There are two different ways to insert a text box. See the images below to see how.
After you have your "story" written down, insert a "Start" button or any image that students will click on to begin the activity. Go to insert image and choose "select" and then in the search field type Start button and you will have a variety of pictures to choose from.
After you insert this and center it on your page, you will need to create a subpage on your site. To do this you click the PAGES button on the top right part of your page. See the image below.
Name your subpage "Problem 1". This will help to keep you organized when you add other subpages. Don't add other subpages yet though. You will want to click on the three dots on the side of the "Problem 1" subpage and click "Hide from Navigation." This stops students from being able to advance to the later problems too early in your task.
After this is created, you can link the start button image so that when students click on it, they are brought to your problem #1 page. See below for pictures of how to do this.
On the right hand side of your screen click "pages" at the top and then click on your Problem 1 Subpage so you can edit that page now. This is where you will set up your first problem. I like to give students an introduction to the problem that ties in to the theme of the escape or scavenger hunt.
As far as presenting the problem to students on the site, there are two ways to accomplish this. You can either write the problem in a text box on the page, or you can write the problem in a separate Google Slides presentation and then save the individual slide as a JPEG or PNG that can be inserted for students to view. See detailed directions explaining how to do this here. I sometimes choose to use a Google Slides if an image is necessary as part of the question for students to solve. If only text is necessary, using the text on the Google Site works well!
Now that you have inserted your problem, the next step is creating a Google Form that will allow students to submit their responses to the question and will automatically check their work. See detailed instructions about how to create a Google Form that checks student work here. As explained in these directions, you will need to create a new Google Form for each individual task you are having the students complete because you will embed each form on its problem subpage in the Google Site.
When I create a Google Form to embed in the problem subpage, I like to give students a direction to complete after they have submitted a correct response. An easy way to allow students to move ahead to the next problem in your Google Site is to insert pictures at the bottom of the problem subpage that relate to the activity and to link only one special picture to the next problem. If students correctly answer the direction in the Google Form, the directions tell the student which picture to click to advance to the next problem. If students click a wrong picture, I link that picture to a "Wrong Way!" page. Some students try to race to complete the activity by just clicking the pictures, so I always make sure students show their work on a student work page before I will accept that they have actually finished the activity. See below for a picture of what a student might see on their Google Form after they have successfully submitted their response.
Once you have created the Google Form, there are two ways you can insert it into your Google Site. You can either click the word "Insert" on the toolbar on the right side of the page, or you can double click where you want the Google Form to go until the circular button comes up. You then have two options (see image below as well):
Either works!
Make sure your form is big enough on the page by dragging the corners and expanding it and centering it on the page if needed.
An awesome feature is that if you update your Google Form in your Drive it will automatically be updated in your Site- no need to upload it again!
As stated earlier, I like to add pictures related to the activity at the bottom of the page. This way I can link a special picture to the next problem, while linking the other pictures to a "Wrong Way!" page.
There are two ways to find pictures that you would like to add:
You then enter a search phrase and the great part is that you can select as many images as you would like and they will all be inserted into your Site at the same time. This is a real time saver. You can then organize the pictures by dragging them around and resizing them on your Site.
See the image below to see what the bottom of your Site might look like after you insert pictures. You may want to write captions under the pictures so students know what the pictures are showing.
To make it a simpler process for you going forward in your activity, I suggest you create a "Wrong Way" subpage now. Click on the "Pages" tab on the upper right hand side of the page and choose "Add subpage." (See the image below) Name your new subpage "Wrong Way" or something to that effect and then hide it from navigation by clicking the three dots to the right of the subpage name.
On my "Wrong Way" slide I add an image that says "Wrong Way" (see example below), but you could even just add a text box that says "Try again!"
I also include text that says, "Wrong Way! Click here to go back to the beginning." I link the text by highlighting the text and then clicking the paperclip (link) button above and then choose the "Home" page or "first problem page" so students are sent back to the beginning of the activity. If your students are tech-savvy they may figure out they can just click the “back” button on the browser to go back to the page they were just on, but hopefully this Wrong-Way page will dissuade students from clicking on pictures randomly to move forward.
Now that you have a "Wrong Way" subpage, you can start linking the pictures you uploaded at the bottom of your page. See the image below that explains how to do this.
Link all of your pictures to your "Wrong Way" subpage at this point. Yes, there is a reason you are linking all of them right now!
**Before you do the next step, double check that all of your pictures are linked correctly! If you want to preview your page at any time (and test your links) click the mini computer screen at the top right of the page. (See image below)**
Okay, now you are going to duplicate the Problem 1 subpage and name it Problem 2 (or Task 2 or whatever makes sense to you). This is going to copy your Problem 1 page so you don't have to find all the pictures at the bottom again, which will save you the time of finding the pictures and linking them in the long run.
Now that you have created your Problem 2 subpage, go back to the Problem 1 page and figure out which picture you want the students to click on to get to Problem 2. Change the link on this picture from "Wrong Way" to "Problem 2" by clicking the picture and clicking the link (paperclip) icon again and choosing "Problem 2."
This is completely optional, but a fun activity you can insert into your Google Site is a puzzle that you have created.
I like to use the website called jigsawplanet.com because you can insert a picture that you have created. I create a slide in Google Slides that contains a question that I want students to solve and a picture that I then save as a JPEG. To see how to turn a Google Slide into a picture file click here.
Below is a screen shot of what the website looks like and suggestions of what to choose when making your puzzle.
After you have created your puzzle, you will want to get an "Embed" code under the "Share tab." See how to do this in the image below.
Next, you will be brought to a screen that has a lot of codes and information. You want to scroll down until you see the text "Game" and then see your puzzle. The embed code you want is under the puzzle. See the image below.
Next, click on the Insert button on your Google Site. Then click "Embed." Click "Embed code" and then paste the embed code you copied from jigsawplanet.com. Click Next and then you should see a preview of your puzzle. If it looks correct, click "Insert" and it will be inserted into your Site.
Below is an example of a puzzle that I inserted that has 40 pieces.
*Be sure to size your puzzle so that the entire puzzle is showing! I have had issues in which part of the puzzle was hidden if I didn't size it correctly. You can preview the Site to see what it would look like on a student tablet as well as a laptop.
When you are ready to work on your Problem 2 subpage, I suggest you just delete the parts that you don't need for Problem 2 and then add in the text or images you need for problem 2. You will have to delete the Google Form section from Problem 1 and insert a new Google Form for Problem 2. You may want to try embedding a puzzle as well!
For the pictures at the bottom of the page, an optional step is to replace the picture used in the previous problem with a different picture. This way students won't be able to use process of elimination when choosing the pictures. If you choose to do this, just remember to link the new picture to the subpage of your choosing.
Once you have finished the Problem 2 subpage, duplicate it and rename it problem 3 and hide it from navigation. As stated before, this just saves you the step of having to find and link the pictures at the bottom each time. Be sure to check your links to make sure they are correct as you move forward!
Continue making subpages until you reach your last task for students- just remember to hide them from navigation when you create them.
For your final page, include a message that lets students know they have completed the activity. Feel free to insert a picture that goes along with your activity or just text! You could even include a Google Form in which you collect student names so you can keep track of who finished the activity.
A great way to keep the activity organized is to create a handout that has the link to your Google Site (or a QR code for it) and space for students to show their work during the activity. I prefer to use Google Slides to create these handouts. See the post "Using Google Slides to Create Handouts for Students" to get more information on how to do this.
Google Sites are an excellent (free!) platform that allow you to create a fun and engaging activity for students. While they are a lot of prep initially, they are easy to implement and can be used year after year.
If you plan on making an activity to share with teachers outside of your district, you will want to make sure you create your Google Site using a non-District account, otherwise there may be sharing restrictions. Similarly, if you are reading this from an outside district (other than DASD where I know students have access to Google Sites at this point), be sure your students are able to access Google Sites from their student devices. You don't want to go through the work of creating a Google Site only to find your students are blocked from using them!
Good luck and please let me know if you have any additional questions. Feel free to email me at caitlindankanich@yahoo.com!