In this blog post I’ll highlight some of the new and exciting things we’ve done that make this course different to anything we’ve done before.
1. Interactive from the first module
- Making a page interactive requires understanding of functions and events (which is hard!)
One of the first problems in the course is to make a page that looks like this:
What’s exciting about this is that students are making an interactive UI right away! Of course there are advanced parts to this solution that students won’t be able to learn in one go; instead we give students most of the solution and have them start by editing it.
Over the next few modules students build up the capability to write this code themselves. This gives them practice with learning more and more code, but also makes it fun and relevant straight away!
2. Build practical projects
We know that students often find it difficult to see the “point” of coding, and with more and more students being introduced to coding through Digital Technologies we need to make sure our resources are motivating for everyone. One of the best ways to do this is through projects and personalisation. We’ve structured our course so that students work towards two projects that put together the skills they’ve learned along the way.
Projects by themselves though are a bit tough. When students exclusively build things through structured problems and notes they learn to lean on the structure. Then we take it away and they struggle! So each of the projects has two parts: a “practice project” where they can match our version, followed by a “sandbox project” where they can make their own things.
If you’ve used any of the Australian Computing Academy’s resources you’ll be familiar with this structure. We think it’s great and so we’ve stolen it from them (hi ACA! 👋). It also provides a space for you as a teacher to set assessments, allow natural differentiation and encourage creativity.
3. New marker with better feedback
Our last web marker was built from a version of Safari released in 2012, and could only mark static HTML and CSS. It’s a great marker but it needed a lot of love!
Our new marker uses the latest version of Chrome run in “headless” mode (that means it has no user interface), perfect for running in our server sandbox. We’ve built in a lot of protections that prevent students from “breaking out” of our sandbox.
With the new marker we wanted flexibility! We wanted to be able to mark HTML and CSS, but we also wanted to interact with the page. We can instruct the marker to behave like a user and then see if the page looks how we expect. For example we might:
1. Load the page
2. Type into a text field
3. Click a button
4. Check the text against what we expect
5. Make sure the page has the right styling
With this approach we can tell the browser to do just about anything, then test if the web page did what we wanted.
This opens up a whole new set of things that we can teach students! Plus it means we can do it in an authentic way. Testing that the page behaves the way we want, no matter how the student implements it!
4. A focus on comprehension
We know from previous courses that students struggle as much with reading code as they do with writing code. In this course we’ve put a lot of effort into helping students comprehend code as well as write it. Whenever we introduce new jargon we include a definition, and whenever we introduce new syntax we explain what it means.
We’ve also been including comprehension questions. These involve reading code and imagining what happens, then selecting from a number of options. This is different to how we usually do things at Grok, so we’re excited to see how this goes. Hopefully this improves students’ understanding and helps develop their skills at both reading and writing code.
5. It’s coming very soon!