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!

Print Friendly, PDF & Email

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.

 

 

Print Friendly, PDF & Email

Can you imagine?

Little did I know that my post “Have wings, will fly” would turn out to be prophetic. The wings helped inspire a cross-curricular collaboration between 5 year 9 classes to create a spectacular exhibition inspired by VIVID Sydney.

I used the wings as a prop for a friendly challenge of ‘Can you imagine….us having our own version of Vivid?’ very early in the school year.

Not only did we imagine, we made it happen. By we, I don’t mean just the teachers but especially our students and with support from the school community. This was no mean feat and here are just some of what I’m really proud of:

  • 2 9DT teachers and myself wrote our course programs and assessment tasks to suit
  • Going on an after-school excursion and not losing any kid
  • Collaborating with other teachers and members of the school community – we’ve never done anything of this scale
  • Staging an exhibition, including an opening night where we got Vivid designers talk to students (thanks to Joachim Cohen from Intel for helping make this happen).  Harmanto Nguyen- Toy Shadows and Simone Chua – Affinity were awesome and I got to showcase our students work to them, too
  • Having students that are proud to share their work publicly (here’s our YouTube playlist)
  • ultimately, making real that which we imagined

A bit more background info: 9DT-Textiles designed and created garments as well as accessories with soft/textile circuits. 9DT-Rigid materials designed and created light installations for outdoors. 9IST designed and created digital movies/animation using iconic buildings as their canvases. 9PDM captured light photography.

A bit more detailed info on my IST project for those who may want to build on the idea.  This was a PBL on the Digital Media topic, specifically movie and animation. The challenge was to “create an illusion of movement” using frame-by-frame animation. Working in groups to create a movie 2-4 minutes long, each student has to create 30-45 second segments which should include at least 15 seconds of frame-by-frame animation; the rest could be video.

Each group had a tab in the class OneNote where all deliverables were outlined, whether or not they were part of the assessment for reporting. They had to document target audience and purpose, concept maps, storyboards, etc. I created the Project Schedule for the class and gave mini deadlines (activity and time chunking is a good strategy to help manage projects spanning an entire term as well as help identify students who are at risk of non-submission). This shared space facilitated seeing what others are doing and thus, peer feedback, both written and oral. The quality of the end result is testament to the validity of this practice.

There are the obvious option topic outcomes involved in designing, producing and evaluating. This included a variety of data manipulation techniques including the use of layers, masks, garbage matte, transparency adjustments, special effects, etc. There are also core topic outcomes relating to project management, communication techniques, career options and issues.

At the end of the project, I also did a structured review using peer instruction or think/pair/share with answers written in the class oneNote (shared notes, yes?).  Here are the questions we worked through (I had more as we discussed):

  1. Define:
    1. Animation
    2. Frame rate
    3. Morphing
    4. Warping
  2. Was your animation mostly cel-based or path-based? What’s the difference between the two?
  3. What file types were used for your project? What software programs created them? Can read them?
  4. What factors affect the file size of finished movie?
  5. Contrast embed and link?
  6. Define keyframe
  7. Was the storyboard helpful? If so, in what way? If not, why not?
  8. Which communication technique proved most useful for you – verbal, written, graphical and visual? Provide detailed example.
  9. Rate your contribution to the group on a scale of 1 – 5, 1 being ‘meh’ to 5 ‘rock star’. Justify your rating detailing your criteria and detailed example.
  10. What advice would you give to next year’s 9IST if they were to do this project?

I think the structured post-project review was really helpful to assess learning, clarify misconceptions, fill gaps and revise course content using personal experiences. It’s a great way to end a PBL unit.

At the end of this review, I showed this path-based animation created using Scratch and character/costumes drawn by one of my students (check out Group 4). This not only helped compare/contrast cel-based vs path-based, it also served as a relevant segue into the next topic, Software design and programming 🙂

Long post I know but it barely scratches the surface of what this experience has meant to me.

If you have a similar story or feel inspired to initiate a cross-curricular collaboration, please leave a comment or relevant link.

Print Friendly, PDF & Email

Have wings, will fly

the beginnings

Ever since I saw the Lilypad Arduino at a CS4HS workshop at UNSW, I was quite taken by the possibilities for making wearable technology – blending my 2 current teaching foci of computing and textiles. We got our own kits as well as primers at the CS4HS workshop and I was buzzing with excitement about it at school. My TAS boss was just as thrilled, seeing more STEM opportunities particularly for HSC  D&T MDPs and set me off on a mini-shopping spree at Sparkfun electronics.  I showed some of these goodies to the 2 HSC DT classes and even though many were excited about the idea, only 1 actually considered creating wearable technology. Still, there’s 1!!!

Of course, there’s a wide gap between possibilities and reality and I soon had to face up to creating a prototype. At which point, busyness, end-of-year exhaustion and so on got in the way of inspiration. I had none!

project 1

Fortunately, an opportunity – need, even – came up with a fairy party (for an 18 year old, no less) and the birthday girl (a daughter’s friend) was keen to have some electronics on her costume.  This was the simplest of circuits using only a battery pack and a string of LED lights. We didn’t use all 10m of it so I’ve got a bit left over which can be used when I can get the right resistor for it. Really basic stuff but the lights blink so it looked cool.

project 2

Getting a little bit more confident about playing with e-textiles, I decided to make fairy wings for my daughter who’s attending the party as well. I made the wings based on this tutorial. This shows that I’m really an electronics n00b because I wasn’t really thinking about the wires used which really made designing/sewing the circuitry more complicated than necessary, i.e. I had to avoid the wires (conductive, yes?). Anyway….

Another thing that made it a bit harder for this n00b was that I wanted a row of lights to light up. All the beginner tutorials I looked at only had 1 light. You know the feeling when you don’t know enough to even ask Google? Yes, that. Anyway, I finally stumbled on a basic explanation of parallel and series circuits and I was on my way (btw, this circuit tutorial from Sparkfun is even better; I wish I saw it earlier).  Basically, I wanted a couple of parallel circuits (+ to +, – to -) for a symmetrical design.

The materials I used were all Lilypad stuff from SparkFun: SimpleSnap, SimpleSnap protoboard, 2 rainbow LED strips and conductive thread. I also used the FTDI from my original ProtoSnap kit to program the system; it doesn’t come with the SimpleSnap.

I had trouble positioning the protoboard on the wings as I wanted to make it ‘easy’ to access the negative (-) pin on both sides. I also wanted to eventually add sensors using the analog input pins. I had so many questions on how to assemble my circuits and in the end, decided for a prototyping approach. That is, I sew one circuit on, program and test. Sew another circuit on, program and test. etc. This worked and got me going. There’s a lesson right there!

When stitching, I avoided the wires on the wings by positioning them at the back and “crossing” them at the front (the intervening textile layer is enough). There are other ways, I was told, but this worked enough for me. I also learned that I don’t have to stitch all the way to the (-) pin except for the first one, i.e. The (-) circuit is one “circle” in and of itself. One of the tutorials suggested to sketch the stitching or circuits first, i.e. plan. In hindsight, I really should have. There’s a lesson right there, too!

Stitching the circuit was an exercise in balancing form and function. Stitches had to work to operate the lights as well as look good. To work, I had to ensure there’s enough contact with the right pins as well as avoid crossing over existing circuits and the wireframe of the wings. I also had to tidy up lose ends which could accidentally touch another circuit.

I kept the programming simple as the party was looming and I had no time to learn enough C to make it more fancy. I wanted a finished product!

Attaching the wings to the costume and covering the main board proved challenging as well. I guess, I really didn’t think through the details of the final design from the beginning. There’s a lesson right there yet again!

However, it all came together in the end and the wings worked…and it was an amazing fairy party. I also have a working prototype to show students as well as play with. What was a mere possibility months ago is now an evolving reality. 

I’ve learned so much. I have wings. I will fly. 🙂

click photos to enlarge – you’ll have a closer look of the pins used…and my sewing

wings2 wings1 faery faeries

wings video (mov)

(video of wings – mov)

Print Friendly, PDF & Email

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.

 

Print Friendly, PDF & Email