PBL to learn JavaScript

I’ve been meaning to learn JavaScript but always fall flat largely due to the good ol’ lack of time. Really though, I think it’s because learning a new programming language is overwhelming – there’s so much to learn and some resources can even make pros like Brad Post feel like an idiot. And yet, I normally send off my computing students to do tutorials. The irony!

Anyway, I decided that the best way for ME to learn JS is to force me to dive right in with a project. Not totally for selfish reasons, actually, as I think my students would benefit from learning it too. Many of my year 11 Software (SDD) students can program in python (thank you Grok Learning) and a few can do java (thank you FRC). While many can also write HTML/CSS (thank you again Grok Learning), none would own up to knowing JavasScript. We could all be beginners!!

So I launched a PBL with the driving question “Can we do better than the textbook?” (There are several PBL models but I love, love, love the Hewes’ version – check it out). My students and I will learn JS and SDD topics to create a website with topic pages and interactive review pages. There will be only one site for the two classes so the product – and code libraries – will be shared. Additionally, this PBL helps exercise effective learning strategies (The Learning Scientists), e.g. elaboration, concrete examples and dual coding for creating the topic pages and retrieval practice, interleaving, and spaced practice for completing the quizzes.

The plan is to learn/discover, create and share with purpose.

Model the system

Because the site is a software system in its own right, I modeled it using the systems modeling tools in the SDD syllabus. I believe modeling is a good teaching technique and certainly good experience for my students to use models generated by others.

Not only would they learn JS, they’re going to live the syllabus in an authentic way. Oh the questions! Rich as…as I showed them the models including the storyboard and structure chart below  (click to enlarge and thank you lucidchart)- these 2 diagrams on a recent assessment task gave many students grief.

Our site would start off with the Hardware and Software topics so I could allocate one each, with one to spare for me. It’s easy for them to research and there’s loads of multimedia resources as well. We have two weeks to do this.




Structure Chart

Structure Chart

Model the learning

When I launched this PBL to the class, I also showed my rather ugly login and menu screens – a student quipped, “I can see why you’re a computing teacher and not an art teacher“. Ha! I actually styled it better by next lesson. Also, the pseudo-login (no cookies just parameter passing via JS) did not work which I owned up to as something I was still working on (it sort of works now).

In fact, this was what I planned for students to do, i.e. focus first on their HTML content and then style later, insisting on a separate CSS file. And I also planned to introduce JS once they’ve handed in drafts of their topic pages.

Learning with the kids (Kids are awesome)

I was alone in settling for an ugly page initially because they soon went off playing with their CSS files. They went off exploring various HTML tags and CSS styles in ways I could not have predicted.

  • There’s this super-quiet kid who I gave a shout-out because he was doing gradients and image blurs via CSS (I didn’t know it could!) – while a couple was doing that in PhotoShop (what is it with kids and gradients????). Anyway, that opened the gates for wider sharing in the class…not something I anticipated, silly me.
  • And then there’s this kid who said he had no programming experience and there he was with JS script to load date and time. He wanted them to display on one line  but my CSS inline-block technique suggestion failed. I did know about string concatenation so we solved his problem via JS – will be sharing that with the rest of the class next week…it’s legit syllabus content.
  • There’s another kid who worked pretty quickly so I suggested animated asides. Rather than going for a CSS solution, he’s decided to do it via JS …with image blur to boot, because he’s found out from a peer. I’ll be sharing all that with the rest of the class next week.
  • There’s another kid who insisted on animating a shape so it ‘bounced’ left to right…whatever for, who knows?! This algorithm makes use of flags, functions and several control structures they have to learn – will be sharing that with the rest of the class next week.

In fact, several students have already incorporated JS into their code, problem-solving with me and peers as they went along.  Here I was with my contrived pseudo-login to provide a JS problem to solve yet they were soon busy finding/creating their own problems. I’ve got loads of examples from students now.

So yeah, I was learning with them.

It’s not an assessment

A week in and a week to go, the  task is not over and I’ve only got their draft HTML/CSS – reluctantly submitted as still being rough – or empty (but stylish). I can tell students are engaged. I can tell they’re keen to learn and are learning….together…with me.

This is not an assessment…at least not a formal one. It is a rich source of formative assessment  though, even for me.  Like Bianca Hewes said, PBLs are “a busy, complex, yet organised ecosystem of learning“.

I’m cool with that 🙂


Aside: I use my blog for my own reference and to help me remember, I often link to resources used as I’ve blogged them in context. I’m adding here a really useful resource Brad Frost (mentioned above) shared about writing kinder and more helpful technical documentation created by Jennifer Lyn Parsons. This’ll come in handy when we get to that part of the syllabus!

Delta X

I’ve been mulling about what to do with my year 11 software (SDD) students for their 2nd project/assessment task. Apart from the syllabus outcomes, I wanted one of the outcomes to be an appreciation of how technology can be transformative and that they themselves can create such technology.

Enter CS + X, except I inverted it to X + CS. While this may be irrelevant from a maths perspective (commutative property of addition), it captures better my pitch of “what is a problem (X) that can be ameliorated with the addition of computer science (CS) ?” In other words:

X + CS = Δ X

Another outcome I wanted is to highlight the importance of understanding the problem as a premise for designing solutions….way before coding/programming comes into the picture. This gave birth to the focus question for the next project, i.e.

Is your software design worth developing?

When planning out the details of this project-based learning unit, I found the book “Setting the Standard for PBL” invaluable.  In particular, Figure 5.3 (pp  118-119) Project Design: Student Learning Guide (Sample) was incredibly helpful. In a nutshell, here were my steps:

  1. List the outcomes for assessment (based on planned Assessment Grid)
  2. Outline the syllabus content (based on planned Scope & Sequence)
  3. Define the Final Products and marking/weighting
  4. Identify instructional strategies

Here’s what I’ve got (PDF)

Here’s a student-friendly version

2016 11SDD Project2

I also created a Project Calendar which will be the basis of my students’ Gannt charts for their own projects.

From here, creating the Assessment notification was fairly straightforward with only the rubric for the Final Products left to define.

As luck would have it, I scored us free entry (thank you Google) into The Sunrise Alpha conference. It will feature successful Australian startup founders. I’m hoping this excursion on Monday will inspire my students to see that they too can be part of this.

I’m also negotiating to have mentors from UNSW School of IT. (I am very lucky!)

Finally, I got several staff members to be part of the panel to whom my students will pitch their ideas. The panel will judge whether or not the problem is worth solving and if the recommended solution is indeed viable and worth developing….fodder for next project 🙂

Of course, this is just the beginning of the story.

Tomorrow, we start in earnest. I’ve told my students about the project and we’ve already started brainstorming about ideas on problems to solve. This will have to be bedded down more when I they meet their teams…tomorrow.

What’s the fuss with coding?

The fuss about coding has grown exponentially in the past year. Having watched this space for years, I’ve certainly noticed the increased interest to expose kids to coding. Industry has been pouring resources into it, with huge initiatives and funding coming from Google, Microsoft and more besides. There is a national curriculum for it and most Australian states have adopted it….not in NSW though, the state where I teach. Media, print and online, regularly features this, too; often, about having a shortage in IT skills.  I can also see the increase in teaching coding in many schools.

Hey, one could almost think teaching and  learning to code is trendy.

But, there is always the niggling question, “Is it for everyone?”

I wonder now whether everything in various school subject curricula was subjected to such scrutiny. And if not, why not?

Is it really for everyone?

Firstly, I’d like to make a distinction between computational thinking (CT) and coding. Google’s resources on CT are quite extensive and accessible. As a problem-solving process, it is easy to see why it could be adapted across all disciplines including humanities. Some could even argue it looks like critical thinking. Can you imagine asking “should we teach critical thinking in school?”

Further, algorithms – or step by step instructions – are present in every subject. Google is right to say it is relevant across all disciplines. Quite often, however, algorithms are taught as given, e.g. using formula. And why not? It is an efficient way of disseminating human knowledge developed over time. Standing on the shoulders of giants, so to speak.

Algorithms in the CT sense is less prescriptive. Creative thinking could be incorporated as well.  Can you imagine asking “should we teach creative thinking in school?”

I heard Dr James Curran refer to CT as a process for answering “What can we automate?”  I think this really promotes a mindset leaning towards efficiency as well as innovation, a premise that things could be better and we can use digital technologies to actually make it happen….and scale it, relatively quickly and cheaply. That’s incredibly empowering!  But, it’s the sort of thing that is best experienced vs merely talked about. This echoes elements of design thinking. Can you imagine asking “should we teach design thinking in school?”

Big jump there, i.e. I joined CT with coding – using digital technologies, software programming in particular, to create solutions.;  automation via giving computers detailed instruction.

Algorithms can be viewed as just an idea. It can be represented in many ways. As a teacher, making thinking visible – i.e. ascertain students are learning – is a challenge.  In Information Software & Technologies (IST), one of the subjects I teach, algorithms can be presented as pseudocode and flowcharts.

What of coding then?

Coding can actually help refine algorithms. Sometimes this is done via affordances of programming languages such as more sophisticated built-in functions and data structures.  Often, the refinements are done as one delves deeper into solving the problem and one thinks of more possibilities or cases or scenarios.

In a nutshell, CT promotes development of algorithms and with coding, it is made visible and refined.

Is it for everyone?

I am biased and I think everyone should experience what CT and coding are like. In the same way that I think everyone should experience what creative thinking, critical thinking, design thinking – and way many more ways of thinking like systems thinking, mathematical thinking, etc (see what it’s like in schools now?).  For me, it’s beyond being trendy or shortages in skills or future job opportunities or anything like that or being great at it or even being interested in it. How do you know unless you try?

If you’re a teacher, student, parent or really anyone just wondering what the fuss is about, it’s best to experience it.  Have a go. There are lots of resources out there. One of my favourites is the NCSS Challenge – and we’re a week in.  🙂

Here are some for starters:

Feel free to add your thoughts and resources in the comments below. Thanks.



What did they learn?

This post is about my 9 IST 2014  Game On project originally premised on the notion of making the world more humane (see links for related posts). This was essentially a project-based learning approach (PBL) and it had the 8 essential elements of PBL according to the Buck Institute of Education (BIE), a PBL leader.  It’s tempting to see how I’ve done against that checklist and I dare say it was a good PBL but what I really want to do here is ask the harder question of whether or not this project has achieved what I set out to do.

That is, has the project somehow made the world more humane?

Have the process and product of answering the driving question – “Can developing games help develop resilience?” – somehow created a more humane world, on top of achieving curricular outcomes?

The previous Game On event post has partially answered this … and it is a YES. Connecting with others. Making time for play and enjoying it. Celebrating achievements. Laughing out frustrations. Giving feedback. All good stuff and all told from my perspective.

Let me share what my students said. I used one of  Harvard University’s Project Zero Visible Thinking Routines, “I used to think…now, I think” as a student reflection tool. I’ve quoted a few below but if you want to read more, find it here – SDP reflection (PDF).

on Game Design

I used to think… now I think…
Would be pretty easy as there are so many games already made It’s challenging but now I realise how creating a game isn’t so simple and coming up with a new idea is not as easy as you think. However, designing games is a rewarding process and is absolutely fun.
It is easy to come up with an idea and develop a game and it is the programming and algorithm which is the difficult part in the game designing process. That coming up with ideas take up a lot of patience and skill. It is vital to come up with an idea which has a vitally fun and interesting output. It is essential to consider how the gamer or viewer will find the game as well.
That games you could just tell the computer what you wanted without having to use certain blocks and that it would be quite simple once you have an idea, it would do the rest for you. Actually, there are specific instructions you must use to make games. You have to be determined because sometimes things don’t work and you have to try again.

on Software design and programming

That software design and development has to strictly follow the design process of design, produce, evaluate. That evaluation is the most key part of design as it enables communication between the designer and user.
That it was really boring and that there wasn’t really many things you could do with software. Also, that people just made things that already existed and that it wasn’t helpful or fun. Software design and development is very good and useful and there is so much you can do with it that is not already created but you make new things and new ideas.
It really only involved one person and that you always typed in binary. It involves a whole group of people for it to be successful. Now I know there are many other computer languages that you can use.

on being a Software Designer / Developer

That it was a simple and mindless job people did and that it was boring and stressful. It takes a lot of creativity and thinking to be able to design and produce something. Also, that although it may be stressful, it’s a lot of fun and incredibly rewarding when you see your finished product.
That in order to create a good idea, it was only the creator’s mindset or viewpoint on it that shaped how it turned out. That repeatedly seeking advice and information is important to keep you on the right track. Reviewing your work from different perspectives help in taking your creation to a new level.
You didn’t need to know much maths. Never have I been so wrong.
It involved a set of rules to need to follow to do your job. It involves more creativity. Successful games have creative people who made them.

They’re thinking of software as a creative process and tool.

They’re thinking of and “using” others.

They’re thinking of writing games for others to enjoy.

They’re seeing challenges – and perseverance – as a way to learn.

They’ve realised that their thinking has changed.


This being the last teaching day in 2014, it is good to reflect that teaching can be good. It’s not always good but good times, like this, make up for when it’s not so good.

Perhaps a relevant recap to where this “journey” started with a quote from John Maeda (Make it more humane) is this new video by @veritasium looking at the on-going search for technology to revolutionise education, and I quote…

The foundation of education is still based on the social interaction between teachers and students. For, as transformative as each new technology seems to be…, what really matters is what happens inside the learner’s head and making a learning think is best achieved in a social environment with other learners and a caring teacher.


Game On 2014

I’m so proud of my year 9s for hosting a fantastic Game On 2014 event – I daresay it was better than Game On 2013!

Some things stayed the same: the platform (arcade or studio on web Scratch), the coders (9IST students, except last year I also got the year 10s to do it so they could experience it), the venue and schedule (lunch towards the end of the school year). I invited again many teachers from other schools to get their students to play. Food. Prizes – still to be won by writing games reviews. The PBL itself was very similar to last year (here’s a link to my intro lesson) including the inspiring TED talk on games by Jane McGonigal. She wished us luck 🙂

Jane McGonigal tweets us luck

Some things were different: I managed to get  our school ‘s year 2 students who are also learning to code to also play and review games – that’s pretty cool. Many of the my students wrote 2 games so even though there were technically fewer developers, there were just as many games as last year. We also had a different sponsor – Atlassian (Thank you!!!)

Another big difference is that I got my students to do more, i.e. write request for sponsorship, get approval for the event, plan the menu, take photos, solicit game reviews and even write an article for the newsletter.  So apart from being game designers and developers, they’ve had a taste of event management. After all, it was like a product launch 🙂 They felt accountable to Atlassian, to me, to players of their game and ultimately, to themselves. They took ownership of the event and they should be proud (as am I).

Well done 9IST and thank you for making Game On 2014 a fantastic event!

Here are some pics from the event (all half hour of it!):

Slide2 Slide1 slide 3Slide4 Slide5 Slide6 Slide7



Even with delegation, this is a big event that takes time and effort especially during a busy time of the year. . BUT, it is worth it. Here’s an insightful article written by one of my students, Harini Lakshminarayanan (with permission):

Year 9 IST 2014 – GameOn for the Shuttle

and I quote:

I believe this event was a great opportunity to understand the success behind each IT product. This event has given all the year 9 IST students an insight into how IT works in the real world as it is more about the success among the user and the suitability of the product to users.

Come and play : bit.ly/ABBGO14 – you don’t need a Scratch account to play unless you want to comment or better yet, make your own.