Category Archives: The Game Sites

Posts discussing the interactive websites I’ve created and use to support the gamification design of my classes.

New School Year, New Curriculum, New Game Ideas

Screen shot 2013-09-19 at 7.24.30 PM Wow! It’s mid-September already and I finally have time to blog again! The regular, every-day world of Middle School, plus the process of designing a new curriculum AND a new site to go with it has made it challenging to say the least, but I’m pleased to say that the new Flipside (HTML5) framework is complete and Quest 1 has begun!

Ever since taking the Coursera Gamification course last spring, I’ve been considering how to use more game-design elements to support students’ need to be able to go back and access resources from the past to help them better succeed as they move forward.  In video games, players can go back to other areas that they’ve mastered in order to gain more experience and therefore become more successful in new areas.  The same concept works in school too –> When students find new skills difficult, opportunities to go back and spend more time on supporting skills will make the “road ahead” less difficult to master. To accomplish this in Flipside I’ve added a new element I’m calling “Terminals”.

TERMINALS are areas where the student/player is presented with an area where they have three or more choices of direction. Clicking on the red shield takes them back to the very beginning of the Quest area (the beginning of the current curriculum unit).  By choosing the yellow shield, students/players are taken back to the previous Mission (Missions are parts of a Quest and coincides with each week of a curriculum unit).  Selecting to follow the green shield leads the student/player forward to the next Mission in sequence.

Screen shot 2013-09-19 at 7.39.38 PMThis is the image of Terminal 1, which is located in Quest 1.


The images I use are mostly open-source, generally gained by searching for open-source images that fit a particular need (downloadable images from are also used occasionally). To support copyright laws, I’m in the process of correctly citing the owner and copyright date and link the images to their online source or provide the link at the bottom of the page in a “Credits” area. The image of the character of Link on this page, for example, was cropped from a concept version of the Nintendo game character posted at There’s great information about this topic at HTML Goodies. This is a very extensive process for a site my size so far, but my idea is to begin correctly posting copyright information as I go along from now on. Since the site is designed to be used with and academically motivate my Middle School students as well as tying to my curriculum, I’m hoping to avoid any copyright issues until I can get it done properly.


Screen shot 2013-09-19 at 7.40.22 PM In addition to the Terminals, there is also a Terminal Map (pictured left). Considering that this “game” could get pretty complicated depending on the number of weeks/Missions in a given Unit/Quest.  The idea for the new curriculum is to have a total of four units, one per grading term.  If each grading term is nine weeks long and there are a total of four, that would create approximately 36+ different areas, not including Quest intro areas, terminals, hidden item/areas and resource areas such as the Training Room, Item Shop, and Arcade.

I was thinking about how students/players would get from the Home screen to their current place in Flipside when they’re in say Quest 4; Mission 5. Too much clicking unless they have access to a map for each Quest and/or a Terminal Map where they could travel from Terminal to Terminal via a virtual underground transportation system.  A further idea for the Terminal transportation is to use versions of familiar video game characters (like Link) – a different character in each quest or for each Terminal (I haven’t decided which yet). Either way, the map systems would offer students/players more choices for how and where to move around the accessible areas.

New characters are also being introduced to offer specific information about an area or give important directions for using different game elements.  I decided that the character of Katt (introduced on the Home screen of Quest 1 and also currently found in the Quest 1 Map area) would be someone who could help them with basic Quest navigation. The “Blue Fairy” is their general guide and the Flipside “Welcome” hostess also provides students (or anyone visiting the site  for the first time) with general information regarding how to gain access, mute music on the pages,  and to the “trailer” for the story behind Flipside.


Other ways I’m attempting to engage and motivate my students into having fun with the curriculum (whether they’re aware of it or not) is to directly reference skills and activities we’re using in the classroom.  For example, in the first Quest/Unit, my advanced Language Arts students are reading the novel The Lost Hero, by Rick Riordan and the theme is “a hero’s journey” through mythology.  I’ve chosen images and music for Quest 1 that reflect mythology, mystery, suspense, and even use images directly related to characters referenced in The Lost Hero. Icons located in each Mission area relate directly to the type of resource it is: Slideshare, Wattpad, Quizlet, etc. The icons will also be consistent throughout the “game” to help students find their way  around easier.

Screen shot 2013-09-19 at 8.48.35 PM

So, now I’m off to continue to build Flipside and work with my colleagues to design the curriculum.  The Leaderboard needs to be updated on the Google Spreadsheet and badges awarded on Edmodo.  Look for additional modifications and reflections about incorporating gamification into the new curriculum, with a new group of Middle-Schoolers in the next post…

Migrating from Adobe Flash to HTML5

Flipside ImageThere has been a great deal of debate among techies lately concerning which format is the better choice for website developers: Adobe Flash or HTML5.  In a nutshell, Adobe Flash allows for a lot more animated transitions but requires a lot of storage space and isn’t compatible with most tablet and smart devices without a converter. HTML5 however, is very compatible with devices but lacks the animation capability of Adobe Flash. Fortunately for students and faculty at my Middle School, we’ve just installed a “guest” server and have recently become a BYOD (Bring Your Own Device) School. Until this past February, the only devices students had access to in class were school MacBooks and eMacs located in computer labs or shared laptop carts.

Beginning last summer and continuing during the school year, I spent a great deal of time creating my interactive websites ( and using blank Adobe Flash templates at . I initially chose the Flash format because I liked the “pop” and fun the flash animations added to the websites while also enhancing student engagement in the gamification process.  However, now that 85% of my students are bringing in their own smart devices with them to class, I was faced with the somewhat difficult decision regarding the future of my interactive sites: Do I keep the Adobe Flash sites that I’d already invested so many hours developing and synchronizing with my curriculum, or should I start creating new sites from scratch in the HTML5 format so they could be more easily accessed at school or at home on a myriad of devices?  Here are a few reasons why I decided to convert to HTML5:

1) Students can access HTML5 sites from any device, anywhere (no excuses).

2) All of the images I’d previously uploaded and used on the Flash sites are still accessible through my Wix account for use with any HTML5 template.

3) My school district is moving away from their previously mandated curriculum and into the national Common Core State Standards next year, so I’ll have to align the sites with a new curriculum and new resources next year anyway.

4) Even though I’d purchased domain names for the Flash sites, I can transfer them with very little effort to my new HTML5 sites.

5) Students can still take screen shots on their mobile devices and submit them as evidence of mastery just as they did with the Adobe Flash sites.

I decided to try my hand at the HTML5 template for my last Language Arts unit of the year (mythology/fairy tales/folktales), so you’ll notice that the new, HTML5 version of “Flipside” is currently the active site linked to I’ve also taken advantage of feedback I’ve received from students, colleagues and friends and already changed a few things:

~ New look to the Arcade

~ New, non-animated icons to identify the Training Hut, Arcade, Item Shop, etc.

~ Some areas have limited access and are under construction

~ Since the Voki’s that give directions in the Item Shop, Training Hut, and Arcade require Flash I had to come up with a “work around” –  I recorded them from the Voki website using a screen recorder (Screencast-O-matic) and uploaded them to YouTube. Now I can still share them using the video player on HTML5 website template.

~ The music used by the HTML5 Wix template uses Sound Cloud and I’m still learning how to comfortably adapt that element into the site, so at the time of this post, there are no sound effects on the new site.

I’ll be updating my blog during the summer and am hoping to be able to find time to record some screen casts of my HTML5 site development. As always, if you have any specific questions or feedback, feel free to contact me or leave a comment here.

From the desk of Mr. Walters

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction


How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

Feed: All Latest

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

Educational Gaming Commons

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

First the Classroom, Then the World

How I've Created My "Game" Sites & Prepare My Classes For Their "inStructural" Transformation = Altering the Structure of Instruction

%d bloggers like this: