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.

 

Storyboard

Storyboard

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!

Get these 5 right for better oral presentations

The year 11 Software Design & Dev PBL Delta X was to culminate with a pitch presentation to a panel of judges. As part of the project, I gave the students an opportunity to present just to assess their presentation skills. While I had a few who came across as confident and prepared, the majority were not.  I was very lucky to get Melissa Pye, an advertising/startup pitch specialist, come and do a workshop with my students before the pitch.

Melissa went through the steps of creating a pitch deck – the “pitch in a nutshell” which really emphasised elements of the PBL giving it more authenticity. I loved that she mentioned the importance of understanding the problem including audience and purpose as well as how designed solutions can help make it easy, faster and/or cheaper.

Melissa also went through 5 elements to consider when actually delivering the presentation. I believe that these are really useful for all types of presentation, including delivering instruction …meaning, it’s also useful for teachers like me. Here are the 5 elements and a bit more blurb about what Melissa said and did.

5_PresentationElements

Mindset

Think positive. Think confident. Think authentic. Think passionate.

Melissa reminded us about being prepared including anticipating questions. Having done the prep work, the next bit is to trust in this prep that the presentation will go well.

Body Language

Be big and open – stand with legs apart, back straight, arms on the side not crossed. Use open palm instead of pointing finger. Look at the audience (look at noses or foreheads if you struggle with eye contact).

Melissa got each student to stand up and say something. In this way, she was able to provide individual constructive feedback, much needed by many of my students. To one student self-conscious about being over 6-foot tall, she said “You’re lucky you’re tall. Be tall.” It’s pretty amazing how much ‘presence’ can be evoked with appropriate body language.

Voice

Vary pitch (lower pitch is preferred), volume and speed. Variety adds interest.

Again, after modelling, Melissa gave each student individual feedback. She was able to draw out impressive volume from 2 of my quietest students. This was amazing to watch and the transformation is palpable.

Words

Use succinct, positive and confident words. Technical jargon is not necessarily a no-no as it can indicate specialist knowledge.

Melissa emphasised the need to choose appropriate words and phrases. Practice. Practice. Practice. Practice saying the words you will say.

Pause

Use pause before or after a key point to emphasise it.

Melissa modelled this to great effect.

 

I’m happy to report that my students employed what they learned in this workshop. Their pitch presentations were so much better than the trial presentations. It was so good, I was gushing (haha).

Anyway, developing oral presentation skills is important and the above are good pointers to help teachers help/teach students. I highly recommend practice sessions and giving students specific feedback just like Melissa did. Another useful post is by Erik Palmer in BIE (Buck Institute for Education), “Speaking Matters! Improving Project Presentations“.

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 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.

 

Multimedia PBL and wrestling with the marriage problem

After a term break from PBL, I’ve gone back to it with both my 9 and 10 IST classes. I’ve been meaning to share the ‘idea’ but just haven’t got there (Is it really week 4 now?). Anyway, I’m glad I’m doing PBL again now as well as incorporating some of the things I’m learning as I do my Masters in Special Ed.

So then, in this post I’ll share my 10IST PBL plus a (rough) lesson plan that targets content (IST: problem definition, GUI design) as well as an example of teaching approach that promotes active response (one of the effective teaching principles I’ve learned about recently).

PBL

PBL_HowCanMMengageLearners

We’re about a third of the way in and most of the theory have been covered (via direct instruction) by  now. However, I’ve noticed that while students ‘get’ the idea of what engagement looks like or what ‘good’ GUI looks like, I wasn’t convinced that they’ve wrestled with it enough to apply in their own projects.

(rough) Lesson Plan

So I designed this lesson to show how a topic could be presented online in three different ways. The topic is a probability problem popularly known as the marriage or secretary problem.

I divided the class into discussion pairs.

First, I showed the wikipedia version which provided a  brief description of the problem. Discussion was first done in pairs and then as a class. This is the first time the class have heard of the problem so there was a lot of “I don’t get it” and a few, “yeah, I’ve encountered that problem heaps of times”.

Then, I showed this academic article version which provided, as expected, a more academic description of the problem and solutions. There were ‘whoas’ as we scrolled through the voluminous and dense text blocks and equations. Again, discussion pairs followed by class discussions. We got to unpack some of the GUI principles to do with form, function, navigation, layout, etc. just by comparing this with the wikipedia version. They were applying the content previously learned, both in terms of concept and language. Their analysis of GUI design is becoming more sophisticated and this is awesome.

Finally, I showed this NPR article with a sensationalist and attention-grabbing title of How to marry the right girl: a mathematical solution (thank you @fawnpnguyen for the inspiration!). We went straight into class discussions on this one and highlighted which GUI principles made this one more engaging, including the use of graphics and share/comment buttons – a feature they may well include in their projects.

There was also a bit more discussions when one of the students piped in that she thought the wikipedia version was more engaging with its neutral tone and predictable structure. This emphasised one of the key things in the design process, i.e. problem definition and how wikipedia addresses a different problem (and audience) than the other two. Engaging‘ then, is relative (gotta love those lightbulb moments). Therefore, as they set off creating their own solutions (project product), they need to be mindful of the problem they are actually trying to solve.

Then, I asked them to create their own version of the topic in what they think is engaging. Students challenged themselves to learn more HTML and CSS tags and JS scripting, based on what they want to learn and incorporate in their own projects.

Sometimes lessons work according to plan, if not better. This was one of those. It can be better but I sure was pretty happy with it.

Discussions in pairs and whole-class with plenty of opportunities to raise and answer questions as well as working in pairs with plenty of opportunities to synthesise are strategies for active response to help with learning engagement. Students are constantly wrestling with the content from different angles. 

An exciting footnote:

The student who preferred the wikipedia version went on to do more research on the marriage problem because she really wanted to understand it (she was in the minority, I assure you, but enough to make this ex-maths teacher a little bit happy). And in doing so, has illustrated yet again the beauty of tangential learning and the power of inquiry driven by curiosity.