This week will take a closer look at coding and computational thinking as cross-curricular tools we can use to enrich our curriculum, and potentially recommend tools our learners can use to aid them in their inquiries. I hope that there aren’t too many groans while I tell yet another fainting miniature goat story to illustrate an example of computational thinking. We will also have some fun as we take a good look at Gaming and Gamification in Education.

Week 8 Learning Objectives

  • Describe how computation thinking can help learners become better problem solvers
  • Identify non-math-related opportunities for integrating coding and computational thinking into your subject area’s curriculum
  • Describe how computation thinking or coding can turn math abstractions into concrete form to aid students with their inquiries
  • Create a Scratch “program” and embed it in your weekly reflection blog post -OR- Create an educational game or tutorial using Vibe coding & a free GenAI tool
  • Describe the kinds of features that can make games effective learning tools
  • Understand how gameplay can be used as a tool to make traditionally less popular topics more engaging for some learners
  • Be able to discuss the pros and cons of learners using games as consumers, compared to learners creating games (like subject-focused escape rooms for example)

Pre-class Activities

Coding

Watch the Digital Literacy + Computation Thinking for Children video below (4 min).

Skim SD 61’s Computational Thinking resource web page.

Watch this overview of a curriculum that integrates coding with English & Language Arts activities (4 min):

In what ways could “coding” be used to enrich one of your favourite non-math subjects?

Code with Scratch by MIT

Anna & Elsa coding with scratch to make geometric shapesThis is optional, but consider creating a Scratch account at MIT’s free Scratch website. Check out this curated list of fun Starter Projects on the Scratch website, organized by types of projects and subject areas: https://scratch.mit.edu/starter-projects

You can use Scratch without creating an account, but you cannot save and share your programs with other people without an account. Note: Scratch is hosted by the Massachusetts Institute of Technology (MIT), and the data is stored in the USA and is subject to the US Patriot Act.

DecorativeVibe Code Web Based Educational Supports in 5-Minutes?

Let me start with a story… A language revitalization teacher who was a former student of mine reached out to me asking if I knew of any web based tools, like H5P, that would allow them to create a soundboard for their nation’s alphabet. I couldn’t find any tools that would meet their needs, but remembered that I’d been looking for a Vibe Coding project to work on beyond Vibe Coding a flappy birds game clone I made as a prank for a buddy of mine. Here’s the game if you’re interested in trying it out. It runs on both smartphones and laptops: Flappy Paper Towels

Here’s the initial prompt I used to create my Flappy Birds tribute with Gemini’s assistance: “I want to create a HTML web based flappy birds game. Help me create a prompt that to create the game.”

DecorativeI replied to the teacher letting them know that I couldn’t find any free web based tools that would meet their needs, but that I’d be happy to try Vibe Coding an alphabet sound board for them. Minutes after sending the email I thought I’d try to make a soundboard for the Portuguese alphabet as a test, and within 5 minutes the code was created, and it took me an additional 15 minutes to record the sounds of letters A to D a proof of concept!  

Brazilian Portuguese Alphabet Soundboard – a web application

If you’re interested you can see my complete Gemini chat history that created the sound board, which included some helpful suggestions on how potentially improve the functionality of the software. Gemini could not record the sounds for each letter of the alphabet, so I recorded letters A-H myself for demonstration purposes.

I quickly realized that there is massive potential for motivated teachers to very quickly create custom tutorials or games for to meet their learners’s needs or to localize their curriculum. 

Reflection:

  • How might the language revitalization teacher include some of their high school learners in helping to develop the tutorial further?
  • Do any ideas come to mind for customized web based tutorials or games that could help your learners in the discipline that you plan on teaching?

Gaming in Education

Skim the American Psychological Association article on Gaming to Learn. While skimming, please ask yourself these questions from the article:

  • Do certain features make a computer game more effective in promoting learning?
  • Do people learn useful cognitive skills from playing an off-the-shelf game?
  • Do people learn academic content better from playing a computer game than from conventional instruction?

Watch a CNN interview with Jon Roozenbeek on GetBadNews (4 min)

Skim the Bad News Teachers Guide, and please ask yourself the following questions as you skim:

  • Does inoculation theory make intuitive sense to you? 
  • Is there any evidence that inoculation theory works in practice?
  • How effective do you think Bad News would be at inoculating middle and high school learners from “fake news” in social media?

The International Society for Technology in Education (ISTE) has a great but short post about 5 Ways to Gamify Your Classroom that has some great tips on using old school games as well as digital games to encourage fun active learning in the classroom!

Test, video game, or cool inquiry project by YouTuber Mark Rober?

  • As you watch the video, please reflect on what motivates you, or demotivates you, to learn new skills or new information. 
  • What are some of the unstated assumptions that are made in Mike Rober’s video?
  • Could Mike’s projects be framed as inquiries?

(15 min)

Class Time

Lecture video (25 min)

Links from the above instructional video:

 

(4 min)

Hands-on Lab Time

Coding

See what a finished, or nearly finished Scratch games look like by playing two or more of the games below in your favourite subject areas. This will allow you to see some examples of finished coding projects that are geared toward K-12 learners:

Next, please explore the Hour of Code website or CS First websites below by searching for a coding project for the age group you want to teach at. Note that on the top you can filter based on grade. Then on the left-hand column, you can filter by topic, and activity type. Please select the activity type: “Self-led tutorial”, and the Language: “Blocks”:

Complete one or more of the following coding activities or complete the Vibe Coding activity below:

Vibe Coding

There is no requirement to Vibe code in our class, but please review the vibe coding process below so that you are familiar with what . If you’d like, feel free to create your own Portuguese soundboard for a language of your choice (I see you French Imersion teachers 😉 That said, I will provide audio files for Portuguese, that you can use as places holders if you are vibe coding a soundboard for another language, but unless you record mp3 audio files for the language you chose you will be stuck with Porgutuese.

Portugues Soundboard Step-by-Step

Here are the steps I used to vibe code the Brazilian Portuguese Sound Board web application:

  1. You can use any Generative AI tool, for this activity but for coding I’d strongly recommend using Claude for this assignment as it currently does as good a job as Google’s Gemini and is much more user friendly for people who do not have a “code editor” already installed on their laptops:
  2. Copy and paste the following prompt into your GenAI tool (feel free to change the language of course) and then press Enter on your keyboard:
    I’d like to create a HTML web application, to help people learn to say the letter of the Brazilian Portuguese alphabet properly. When a user clicks on a letter the web app will use the computer speaker to correctly pronounce the letter. I will provide the sound files for each Portuguese letter, and put them in a directory called “assets” and the filenames will be all lowercase. Put a phonetic pronunciation for English language speakers under each letter. Here is an example of what I would like for the alphabet of a different language: https://dom-aya.github.io/ayajuthem-soundboard/
  3. Next we need wait a minute or two for Claude to create the HTML file for you. Once you see the Download button, click on it and make note of where you saved it on your laptop.
    Decorative
  4. Download the zip file that contains all the MP3 audio files for each Portuguese letter to the same folder where you downloaded the HTML file Claude created for you:
    • Download the Portuguese letter zip file called: assets.zip
    • Find the assets.zip file on your laptop and unzip it. On a   Mac you simply double-click on the file and it will unzip. On Windows you right mouse click on the file and select Extract All…
  5. Now that you have the audio files folder in the same place as the HTML file you downloaded, you can open it in your file manager by double clicking on it and it should be making sounds for each of the letters.
  6. If you created the Soundboard in Claude, it should look something like this: https://richmccue.github.io/brasil-letters/claude.html
  7. If you are having any problems, please let Rich know and he can give you a hand in a breakout room.

Reflection: Are there any web based game you’d like to try creating?

Games in Education

As you play 1 or 2 of the games below, please think about the following:

  1. If you were to use this game as part of a lesson, does the game help achieve the lesson’s learning objectives?
  2. Are there instructions & explanations about underlying concepts?
  3. Does it include adaptive scaffolding mechanisms & guidance?
  4. Does gameplay offer just doable challenges?
  5. Are there dynamic in-game scores that provide learning progress feedback?
  6. Is a learning attitude promoted without time constraints or penalty scores?

Game time! Please play 1 or 2 of the games below:

Learning Pod Time & Homework

  1. Weekly critical reflection blog post to document your learning in class:
    • Review the 336 Blog Post Rubrics to make sure you’re including all the minimally required elements for your weekly blog posts.
    • Please do the following:
        • Embed or link, or post a screenshot of one of your coding or vibe coding projects into your blog post.
        • Critically reflect on Coding & Computation thinking in the context of the subject you will be teaching.
        • Critically reflect on gaming in the context of the subject you will be teaching.
    • Use the category, “weekly-reflection“.
    • Share your post with your learning pod at your next meeting (usually at the end of class time).
  2. Weekly Free Inquiry blog post:
    • Document your free inquiry progress, reflecting on your progress, as well as identifying and evaluating helpful resources you found. Provide details on your learning progress (through success or failure).
    •  Employ a multimedia strategy in your post to help document your inquiry by using text and one or more other media to help make it more engaging (e.g., image, screencast, video, or other formats).
    • Utilize social writing strategies such as hyperlinks to blog posts (e.g., trackbacks) or to articles/resources consulted, including web pages, images, videos, etc.
    • Use the category, “free-inquiry”.