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.

Embedding - Generate your own iFrames

If you are like me, you use a variety of tools to share content with your students. Tools like goFormative, Wizer.me, Symbaloo learning paths, PowerMyLearning, DeckToys and even webpages you create on WIX or GoogleSites, are super useful in part because they allow you to embed content from other places. This means that your students "stay" on the same platform as they work on their assignment, lessening the risk of distractions from moving between platforms. The developers of most of the apps and simulations I add to these sites know that their content is shared on other platforms and they have made it easy by providing embed codes right on their platforms.

But what happens when you find something you really want to share but there is no embed code in sight? In the past, I would just add the link, and teach the students to navigate between several tabs. This is fine for most, but of course some would use this as an excuse to visit something else - that meme generator they've been itching to show off, for example.

After a bit of searching ways to create embed codes, I came across this easy to use iframe code generator

To use it, the only thing you need is the URL of the content/resource you are wanting to embed.

Once you have pasted the URL in place, you click on Generate, and presto your embeddable iFrame Code appears almost as if by magic.

Of course, if you wish, you can also play around with height width, adding scrollbars, borders, etc. (as I did on the "blob-in-blog" above).



Now, depending on where you are going to use that embed code, the only thing you have to worry about is whether the original site's URL is secure or not. Most of the educational sites that have embedding content options do require that the embedded link is "secure" - HTTPS and not just HTTP.

I have also shared this with my students, who blog for me every week and who sometimes create products using different edtech tools. They, in turn, publish their products by embedding them into their blogs.

I am sure there are other iframe generators out there. Have you found a different one that you like better? Share with us in the comment section.

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.