WSD Coding Challenge Week 4 & 5 Drawings

Here’s the form where you can submit you drawings for this weeks challenge… Please have to try to have these submitted by week’s end.


WSD Coding Challenge Week 4 & 5 – Drawing App

As we zoom towards the break, I have been reminded that parent-teacher conferences have been or are in full swing. It is sometimes hard to keep up with outside projects at this time of year. With that in mind…

This week’s challenge is going to be a little different. One of the greatest thing about building an app is that you can actually start using that app!!! That, in fact, is the incredible power of coding! Solving a real problem, coming up with a solution that allows one to create or progress forward – in our case, we have been designing an app that can paint and draw!

Over the last number of weeks, Marcel Laroche’s class have been active participants in the WSDHSchallenges! One of his students has literally dropped this week’s challenge in our laps. And it’s an awesome one! See if you can guess it from just looking at the image below (posted with permission)…

Marcel Laroche's Class image

This weeks challenge is to actually USE the app you have created to PAINT or DRAW something special….

I am hoping you are all familiar with Chris van Allsburg’s book called “The Stranger”. If not, get it from the library and have a read or check out this PDF link…

The Stranger

This is a story about the seasons changing. We happen to be in the same situation right now. Spring is trying to arrive, but is having a hard time deciding whether or not it’s truly ready. What’s going on? Could it be that something like what happened in The Stranger is happening to us here in Winnipeg?


The challenge this week is to use the drawing app to draw a series of pictures…
As a classroom, decide what your picture(s) should be about? Should the class try to show pictures of Spring? Will the class retell the story of The Stranger but from a Spring point of view? Will you stick the images together in a sequence, creating a kind of image movie and add music? Get creative. I would love to post all these images online to show the power of app creation and use….

To that end, I will be posting an image submission form on Wednesday this week for uploading your images or images sequences… I will allow the following images upload types (jpeg, jpg, png, gif, tiff, mp4, m4v, mov). Please let me know if you need another file type enabled for some reason.

You will need some help with this as we have no way of actually “saving” the images out of our drawing app at the moment. I have posted a tutorial too assist with this below. The process for “saving” is the same whether you are using Scratch or Hopscotch.

WSDCodeCHWK4Prep from Keith Strachan on Vimeo.

How to get Screenshots from an iPad
Getting Screenshots from an iPad


I would also appreciate if the teachers participating in the challenge please complete this survey to give me a sense of what’s working and where to go next…

Have a great Break!!!

WSD Coding Challenge Week 3 Solutions – Drawing App

This week I am going to show you how to search for my code examples in Hopscotch and essentially download them to your iPad so that you can explore my code easily.

WSDCodeCHWK3Solution from Keith Strachan on Vimeo.

I have uploaded the Scratch project to the MIT site and have embedded it here for your convenience to have a look at.

Exploring Digital Literacies – Doug Belshaw


REmix Meme
Remixing Life

The other day, I was reading a fascinating article in International Literacy Association’s, Literacy_Daily_ entitled “Knowing the Difference Between Digital Skills and Digital Literacies, and Teaching Both”. In my opinion, it’s worth the read on a number of fronts.

First off, it reminds of Doug Belshaw’s wonderfully clear work in the area of Digital Literacy and it’s eight essential elements. There is a thorough TEDTALK summarizing Doug’s work through MEME’s and Cats.

Besides the characteristics being bang on, I enjoy the fact that the central word in the theory is REMIX! It acknowledges the fact that what is digital is meant to be messed with and mixed and blended and, well… remixed. This is evident in the kinds of new offerings that are beginning to appear in the apps stores online!

One example:
One of my colleagues introduced us, through her daughter’s fascinating work, to a wonderfully engaging & creative app called … app icon

This app, to quote another of my colleagues, is “Brilliant”! It is described as the fastest growing social video community, and it allows one to create, share, and discover short videos. I have to say that I love this app both for the shear fun it provides, but also for the possible ways it may assist students in demonstrating their understanding through the process of remixing.

Here’s a substandard example that I threw together without taking a lot of planning time. However, I did think about the song’s theme and try establishing connections between this and my action and special effect choices. I did take two stabs at it. The first going for facial expressions and the second for position so that I could more easily incorporate special effects. I actually used three apps to accomplish my product…. SnapChat for the lightening/special effects, iMovie to stitch things together and to publish the lot. My efforts are below (try not to judge too harshly).

Without that much effort, I managed to create a decent piece that address 3 of 8 of Belshaw’s Digital Literacies. Not bad.

3 of 8 Digital Literacies Covered
3 of 8 Digital Literacies Covered

Imagine what more capable students could do with the challenges, contests, poetry readings, rap retellings and other samplings that are available through this app. Image how students and teachers could dream up ways to critically address cultural norms in a constructive manner using music, poetry, rap, popular music with a remixed video or a mash-up of many music snippets creating a new message.

The point is, Digital Literacies are facilitated by tools around use. When teachers show student a tool like and how to use it we are really looking at Digital Skills. Digital skills focus on what and how. Digital literacy, on the other hand, focuses on why, when, who, and for whom.

And this brings me to a second, and third reasons the article is worth reading…

I was reminded that the teaching of any literacy, digital or otherwise, should never happen in a vacuum. Authentic learning in authentic environments conducive to learners, such as maker spaces, tinkering areas, and the like are critical for the learner to succeed. Creating “real-world” experiences that connect learners meaningfully to tasks or problems is important. For example, rather than teaching Twitter and hashtags in isolation, have students participate in an assignment where Twitter may support their learning process, perhaps as a researching or reflection tool. This creates the need to learn Twitter and hashtags among other Twitter related items.

One downside to placing students in authentic digital learning environments is that there are potential risks involved: risks to privacy, security, personal safety, bullying and the like. Some believe we need to lock students out, block every questionable websites, keep cell phones out of schools and classrooms, deny access, limit access and the list goes on. But is this the way it should be? I wonder….

Should we be teaching responsible use? The profession often talks about turning responsibility for learning over to the students, scaffolding student learning, providing descriptive and supportive feedback that moves learning forward. But when it comes to technology, especially when it comes working online and using smartphones, we enter an almost “prohibition state” and forget some of our best practices. Perhaps what we should try to do is talk openly with students about risks and how to mitigate them. Perhaps we should normalize the existence of smartphone use in schools/classrooms and allow students and teachers to leverage them for learning both on the consumption and creation side of things. Perhaps by openly talking, sharing, negotiating and critically thinking about these issues we can come to an agreement that privacy, permissions, mutual consent, lower risk behaviour, mutual respect and support for each other are quite important characteristics for digital citizens in a digital age.

WSD Coding Challenge Week 3 – Drawing App

Week 3 Challenge: Paint Brush Size
Week 3 Challenge: Paint Brush Size

Line… is the most important part of any painting. (Lyle Carbajal)

This week gets a little more challenging! The challenge is to create widgets that will handle the brush size, making it both thicker and thinner as needed! We will be covering a couple of new concepts this week (If-Statements, “Listeners & Light switches”) as well as reviewing variables again.

Here’s the overview of the task:

WK3 Adding Line Widget from Keith Strachan on Vimeo.

What’s critically important to understand about the task is that Hopscotch isn’t actually completely up to the task…. We need a way to trigger things exactly when we want things triggered. For example, in this week’s code, each time the button that increases the paint brush’s thickness is tapped, two things essentially happen: 1) the paint brush’s thickness increases and 2) the display indicating the paint brush’s thickness changes to display the current paint brush thickness. This ALL needs to happen when the button is pressed and we need to trigger this.** We accomplish this feat with a variable and a listener routine.** Lets have a look at the logic that might come into play here…

Logic for Decisions in Coding Paint Brush Size
Logic for Decisions in Coding Paint Brush Size

Hopefully this makes some sense. The yellow objects in the diagram represent variables, the diamonds are decisions, or in Hopscotch if statements, and the boxes are commands. So the logic reads something like this…

  1. If a variable called IsTapped is ON then the Display needs to be updated and we need to check the next decision.
  2. Is the Brush Size at its Max? There seems to be a variable called MaxBrushSize and if it’s been reached then it’s displayed and the brush size is set to this value.
  3. OTHERWISE we move on. Are we at the Minimum brush size? Another decision. There doesn’t seem to be a variable for the minimum brush size so this is probably a hard coded value like 1! If it has been reached then it’s displayed and the brush size is set to this value.
  4. OTHERWISE the current brush size is displayed (there is a variable called BrushSize for this) and the brush size is incremented by BrushSizeIncrement which seems to be another variable.

Let’s walk through this in an example closer to our drawing app.

WSDCodeCHWK3Prep from Keith Strachan on Vimeo.

Here’s another example of how to handle if-statements in HopScotch. It’s similar to what you will need to create in your drawing app.

WSDCodeCHWK3PrepC from Keith Strachan on Vimeo.

One last bit of help to get you started. Let’s think just a bit about how to set up your interface:

WSDCodeCHWK3PrepB from Keith Strachan on Vimeo.

I realized last week that I gave enough information for the Scratch coders to accomplish this kind of coding already. In fact, they should be able to apply lessons learned last week to a line or paint brush resizing widget in their program this week.

As usual, I am available for online or in school support (in Winnipeg) if needed or desired. Let me know.

WSD Coding Challenge Week 2 Solutions – Drawing App

I am a little late getting this posted. Little internet trouble on my end, so apologies.

Here is a link the HopScotch file. You will need to download it on the iPad to view the code.

HopScotch Drawing App
HopScotch Drawing App

I have uploaded the Scratch project to the MIT site and have embedded it here for your convenience to have a look at.

WSD Coding Challenge Week 2 – Drawing App

It’s time to set up week two’s coding challenge. You are going to need a little help getting started on this one! We need to set up some colour selection tools in our drawing app. But adding colour selection can be challenging and there are many ways to accomplish this task.

In this video, I go through one way of getting this task started in Hopscotch. The video will broach two new ideas: VARIABLES – or in Hopscotch parlance VALUES and colour number codes….

Variables or values are critically important to computer programs. They allow values to be stored temporarily for use later on. I have provided an example below where I compare a mailbox & mail to a variable & information that a computer program might use.

Variables Explained from Keith Strachan on Vimeo.

I have provided a couple of other links to help you understand variables and how to create them in Hopscotch as well:

This weeks Challenge:

Your job this week is to create a colour palette for your drawing app in either HOPSCOTCH or SCRATCH. You will need some support getting this started. Here’s a video to help with this…

WSDCodeCHWK2Prep from Keith Strachan on Vimeo.

The following image shows how Hopscotch indexes it’s colour palette. This will help you reference colours by number in the drawing program:

Hopscotch Colour Palette Index
Hopscotch Colour Palette Index

For the Scratch coders among us, I have provided some resources as well. The little Scratch program below will help the people using Scratch determine the colour “code” or number to assign to the set pen colour to code block. _set pen colour to_ code block


I am also going to show you three ways you might tackle “passing” the colour to the paint brush. One of them uses an external device called a PICO board! We’ll cover setting and sending or “passing” variables too! Once you have viewed the, getting started tutorial, your challenge will be to create a colour palette for your drawing app that contains at least 6 colours as well as black and white.** You might want to add a clear button and a size slider of some sort as well. Get creative in terms of your colour set up.

WSDCodeCHWK2PrepScratch from Keith Strachan on Vimeo.

Have fun and contact me if you need help.

Tutorials WSD Coding Challenge Week 1 – Drawing App

Let’s first take look at a process that will help guide your thinking as you try to solve problems along the way during the coding challenge month.

Coding Process: Programmatic Thinking
Coding Process: Programmatic Thinking

When creating applications or coding of any kind actually, it is important to be able to track where objects are, including where the cursor & your finder position is. This is accomplished in a lot of different ways, or rather using a lot of different commands, but essentially the position of all elements are tracked using some kind of cartesian coordinate system using X, Y (and in the case of 3D) Z. Here is an explanation of how and why this system is important in the drawing app we are creating.

Finger Tracking Explanation from Keith Strachan on Vimeo.

Here is a video explaining how to construct the first phase of the Drawing app in Hopscotch:

WSDCodeCHWK1_DA from Keith Strachan on Vimeo.

Here is the code to assemble the first phase of the app in Scratch 2:

WK 1 Scratch 2 Solution
WK 1 Scratch 2 Solution