Embedding a Google Drawing with Clickable Links

I'll start this post by stating the obvious, the easiest way to create a drawing with clickable links/tags is to use Thinglink. This site has been my go-to for any type of image tagging and while I love all their possibilities, including adding custom icons and tagging 360 images, I recently had the issue of wanting to both create the image and the tags at the same time.

A little backstory. 

The culmination of my Interdependence of Organisms unit has my students creating blog posts for different organisms in the Amazonian rainforest where they write about how each organism has a specific role to fulfill in its environment. In class, we then use those posts to create a Google drawing of the food web with links to their work. Everything works great as long as you stay within Google Drawing. It is not until I tried to embed that tagged image the students created anywhere that I realized that those tags the students painstakingly created do not work!

In the past, I've always solved the problem using Thinglink.

But as I mentioned before, this has the "problem" of having to create the image first and then add the tags. In class, this does not always work for a variety of reasons. The most important being that the image is completely static. You cannot change anything on the actual image so the students cannot add any more arrows (or organisms) as they discover other relationships when they discuss their work. Since this is a collaborative end product, the permanence of the image does not work for my purposes.

The workaround

It is a little convoluted, and it requires a little risk-taking simply because of the unfamiliarity you may have with some of the steps, but bear with me. In the end, you will have created the code with working links that can be embedded on any site or platform.

1. Open up a Google drawing. Add your background and items, and tag to your heart's content. In case you do not know how to do this, Karen Ferguson's video does a great job of explaining this.

2. Once you and your students are "done", or even before if you wish, publish your drawing to the web (File>Publish to the web). It does not matter when you do this since any changes you make after the fact will be updated automatically, which is exactly what my students needed. Do not worry about the size or the code at all. You just need it to be "on the web".

3. Go to Google sites, and create a simple blank site. You can name this whatever you like, and edit the homepage to insert your google drawing.

4. Unclick "include border around Google drawing" and "include title". At this point, you will choose your height and width. I recommend setting both to the size of your actual drawing.

5. Save the Google site. This creates a version of the site, with your Google drawing that includes those pesky clickable links you were aiming for.

6. Once you have saved, right-click anywhere on the image and select inspect

7. For those of us not familiar with working with HTML or the developer tools, this is where it gets scary. But don't fret it is simply a matter of finding the code and copy/pasting it in three quick steps:

1. On the tab that appears, select Elements. Find the code where you see <div id="sites-chrome-everything-scrollbar">, and click on it to expand it.
2. Scroll down until you find  <div class = "sites-embed-border-off sites - embed"... style=width 800 (or other number) px;" and right click on that.
3. Select edit as HTML (third option). A box within the space appears, filled with the code you are looking for! Select everything within that box, and copy it.

It should look something like this:

<div class="sites-embed-border-off sites-embed" style="width:600px;"><div class="sites-embed-object-title" style="display:none;">Interdependence Rainforest Blogs</div><div class="sites-embed-content sites-embed-type-sketchy"><iframe src="https://docs.google.com/drawings/d/1ELpo7S7a0htZsqckkHkEtaI3KMXORFPStvVZGnVzt_o/preview?authuser=0&amp;h=400&amp;hl=en&amp;w=600" width="600" height="400" title="Interdependence Rainforest Blogs" frameborder="0" id="811835776" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div><div class="sites-embed-footer"><div class="sites-embed-footer-icon sites-sketchy-icon">&nbsp;</div><a href="https://docs.google.com/drawings/d/1ELpo7S7a0htZsqckkHkEtaI3KMXORFPStvVZGnVzt_o/edit?authuser=0" target="_blank">Open <i>Interdependence Rainforest Blogs</i></a></div></div>

8. Now you can go ahead and paste that full code anywhere that allows you to edit HTML embeds (Blogger, Wix, Weebly, Wordpress, Emaze to name a few) creating your tagged and clickable Google drawing. 

Open Interdependence Rainforest Blogs

And not only that, any changes you make to the original image immediately populate anywhere you have embedded your image so your students can modify the drawing, adding and deleting elements and tags without any worry about going through the process again!

Additional benefits

Using this method for creating interactive images also has some other "unforeseen" benefits.

• The students can be in total control of the creation process. Any CC0 image is fair game to be used as a background or for tagging purposes. Once you teach your students to crop things in shapes, they can create all sorts of icons without worrying about size limitations.
• Recently my district blocked Thinglink for student use. I can share my tagged images with them, but they cannot create accounts themselves and use it to create their own. 
• Thinglink is not set up to be collaborative, so even if my students went outside of our servers and created personal accounts, they cannot work on one image together. This often defeats my purposes for creating interactive images.
• It is totally free. You only need access to the Google tools mentioned. Most districts nowadays have given students access to the Google suite, so anything they create using them will not need any paid upgrade of any kind.

I hope this is useful to you and your students, and please drop me a line in the comments section if you find an easier way to do this.

Appsmash to Gamify - From Leaderboards to Quests

Although many of us agree that gamifying your classroom can provide benefits in terms of engagement and relevance for the students. Many of the teachers I have talked to have this idea that gamification is too hard, or that you can only do it by purchasing an app or some other tool, which may or may not limit what you can do. However, this is simply not true. With the myriad of free tools at our disposal and a little creativity, you can create your own gamified world for little to no money. Gamification is about creating a game-like experience, not about creating an actual game.

Before we go any further, take a peek at my "Island of AdVENTURE", where our ultimate goal is to take over the world. That is the simple storyline for my classroom. The benefit of such a broad and vague topic is that it will never be "done", and gaming elements can easily be added as they are needed. I talked about the decision to adopt a single storyline for all my classes in a previous post. If interested, you can visit Gamification Year 2 - The quest continues.

So, what was needed to create the Islands of AdVENTURE experience?

Game Website:  

If you have been here before, you know that my go to place for this is WIX, because it allows for ultimate flexibility in item placing, allowing you to embed practically anything you may wish to add. WIX is free to use, and gives you one place to create as many web sites and subpages within a site  as you need. On the game website itself, I like to add links to my blog, class calendar, and all of our classroom policies, procedures and even the green sheet. This gives the students a central place to go for everything related to the gamified classroom, and completely eliminates any "but I didn't know..." moments. These different documents are added as tabs, or in the case of the classroom management stuff, an interactive Thinglink image that gives access to all documents with a simple click.

Maps: 

This is the only item in my gamification arsenal that I paid for: Profantasy Campaign Cartographer. I could have used art from other sources and/or even used maps from Google Mapmaker, but creating my own allowed me utmost flexibility to include what I wanted, down to shaping the islands to represent grade levels, and creating distinct homes for each class.

This was also where I began to Appsmash. The islands on the game website are linked to the grade level houses and leaderboard using "invisible" shapes that act as buttons. The quests inside the houses are linked using interactive Thinglink images. The reasoning for this is simple. I wanted the students to be able to quickly and easily identify the quests they have, without cluttering the images with a lot of text or buttons. By hovering over each icon, students can quickly access the quests they are undertaking without any instructions from me regarding the icon that was used to represent a specific assignment.

XP and Leaderboards:

In my class, students gain experience points (XP) by blogging consistently and by completing the different projects they work on. Whatever you choose for XP, I recommend that you do not tie it to behavior, but rather mastery of skills or concepts. Just like in games and real life, XP does not "go down". Once you gain experience, you never get experience taken away. 

To create the leaderboard(s), I use Google sheets. I previously shared how to create one for a single class. This year, I am adding a leaderboard that functions much the same way, but since I am working with a single storyline, I needed to create one that could rank all my students from different classes and give us a way to compare classes. The following video will show you how.

Quests:

In my project based learning (PBL) environment we have two types of quests. The PBL Quests that culminate in a Boss Battle (i.e. the project product itself) and Mastery Quests. The PBL Quests are created using WIX for the bigger projects or Tackk for smaller assignments. Both allow embedding and manipulation of the color schemes, backgrounds, etc. giving you the opportunity to create a different aesthetic feel for each quest. The PBL Quests are embedded into the class game site and linked through Thinglink.

The Mastery Quests are the worksheets (level 1), quizzes (level 2) and tests (level 3) I use with students.  This simple renaming and leveling of the different types of work, tells the students how they need to prepare, and gets them excited about completing them. Don't you agree that it is much cooler to complete a Mastery Quest Level 3 than to take a test?

To create the first two types of Mastery Quests, I use the capabilities of Wizer.me. Mastery Quests Level 1 usually have links, videos and/or simulations embedded (example) and Level 2 may still have some supports (example). For Level 3, you can still use Wizer.me if you wish to give access to articles or graphs that the students must analyze. For a more "traditional" level 3 Mastery Quest, however, I use Google forms.

I usually do not embed the Mastery Quests in the game website itself, but rather give access to them by posting the individual URLs for the different assignments on our Edmodo stream. Of course, they can be shared in Google classroom or whatever other way you currently have to distribute online work.

Class Currency:

The behavior rewards, if you would like to have them, can be handled in several ways. In the interest of Appsmashing, you could use Class Dojo, and have it embedded into your WIX page. However, that has never really worked for me. I find it cumbersome to walk around with a device and scrolling when I want to assign behavior points. For this I go old-school, and use my school's paper based currency (Patriot Bucks), giving them out as needed. Since they are physical objects, I do not have to create a way to manage them. The "store" is created again using a Thinglink  embedded into the WIX class game page so that students can simply hover over the different items, and check "prices". 

What do you think? Have you tried gamification in your class? Please share your experiences.

Building a Classroom Website?

Many educators have decided to take the plunge to create their own websites. These websites serve as a central place to compile educational resources for students, communicate expectations, etc. We can think of them almost as interactive "green sheets". Parents can be directed to the class webpage to look at calendars, news from the classroom and upcoming events, while students can look in them to find links to content they may have missed, homework assignments, and even gain access to specific educational resources or web tools recommended by the teacher.

Some districts host teacher websites in their own servers and provide specific tools to be used (Adobe's Dreamweaver for example). However, most often teachers are left to their own devices and their website become a matter of personal preference. With little guidance, teachers choose a particular web creation tool simply because someone they know uses it. However, with the many options out there it is really up to the individual teacher to decide just how they would like their website to represent their classroom.

Google Sites

This is probably the most accessible web page creation tool, especially if you are a GaFE school. It works well simply because it integrates all other GaFE tools. It has the added benefit of allowing you to restrict views to only the individuals within your school or district domain, which for some institutions is a must. However the main disadvantage is that you are very restricted in the look and feel of what is your personal webpage. Google Sites all appear extremely similar. Customizing your navigation or adding anything non-GaFE requires a major investment of time finding tutorials, and the answer is either "It cannot be done" or working with code that, unless you know what you are doing, only makes matters worse. 

If you decide to go Google Sites, visit Mr. Amsler, who kindly published a "Working with Google Sites" web page that serves as a great guide of how and what to do.

Weebly for Education

www.adventurestemprogram.com

Weebly for Education is what a former colleague of mine decided to use for our school website, which means that, as the webpage manager, I now have the "joy" of using it on a consistent basis. Its drag and drop simplicity is a favorite with educators interested in creating a more personal look for their websites. In Weebly the website layout and design are all done for you. If you later decide to change the template, you simply click on the new template and everything is transferred to "where it should be". This seems ideal, right? It can be, but it becomes incredibly limiting when you want to get creative because Weebly only allows you to insert elements into pre-defined areas. Unless you are really handy with code, which Weebly does allow you to modify, you are kind of stuck with their templates. This is the main reason I personally dislike it.

Weebly offers other cool stuff, like the ability to add an assignment form to your site allowing students the ability to upload their assignments and submit them to you via your website. You also have the option to create student accounts so that your students can create their own Weebly websites, all moderated by you.

If you decide to go Weebly, make sure that you create an account using Weebly for Education, as opposed to just Weebly, to gain access to the educator tools. You may also wish to visit educatorstechnology.com to find some good tutorials to help you get started.

WIX

http://mariana68.wix.com/adventurescience 

This is my personal favorite due to its maximum flexibility of design. WIX is a true drag and drop web page creation tool, offering complete customization without any HTML or coding knowledge.  All you have to do is just pick a design that works for you, and swap in your own pictures, text and information. If you are feeling particularly creative, or you do not find something you like, you can choose to start with a blank template add backgrounds, images, text and embed anything anywhere. You literally design your own page with minimal effort. It is worth noting that with WIX you cannot change templates. If you decide that you want to change your look, you will need to change the individual items. 

WIX also has an incredibly comprehensive help center. There are help buttons everywhere, so that if there is ever any doubt on what or how to do something, help is just a click away. You will not need to go a-searching for anything. They have even gone the extra mile and created WixEd a free online education program that teaches Wix users everything they need to know about web page creation.

WIX does not have a dedicated "educator" side, so in some districts you may need to call your IT department before using it in order to have it white-listed. If they need convincing, feel free to show them any of the many sites I have created using the platform. They can be found by clicking on the PBL tab.

I know there are many others. Which one do you use?