Making Web Pages Interactive: 5 neat features of our upcoming JavaScript course
We’ve had a tonne of fun coming up with our new “Interactive Web Pages with JavaScript” course. This course has been in the works for more than a year, and something we’ve wanted to do ever since our first Web.Comp in 2015. It’s also something we know that many teachers have been wanting for a long time. I had a quick look at our support inbox and found pages and pages of emails mentioning JavaScript dating back to 2013. Now we’re on the cusp of shipping it!
With all of that in mind though, it’s been a massive challenge both technically and pedagogically. Up front I wanted to give a huge shoutout to grokker Jess Norris who developed our new marker for JavaScript. We gave a talk last year about the development of that marker (you can watch it here). I also want to thank grokkers Jane Abrams and Shelley Cooper-White who I’ve been working closely with on the development of this course, and James Curran who convinced us to change track and ultimately made the course better.
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
JavaScript as a language was developed to make web pages interactive, and that’s what this course is all about. We struggled with two opposing constraints:
- Making a page interactive requires understanding of functions and events (which is hard!)
- Making pages interactive is what JavaScript is all about (plus interactivity is exciting!)
In the end we came up with a good middle-ground. Students start with scaffolded problems, then slowly learn how to write all the JavaScript themselves.
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.
At the end of each module we include slides which review all the new JavaScript and HTML that students have learned, along with all the new jargon words they’ve learned. We hope that this will help students follow along and understand our courses a bit better, since we know that the technical words used in coding can be quite intimidating!
5. It’s coming very soon!
We’re very close to finishing up the JavaScript course, but aren’t quite ready to release the whole thing. With Web.Comp starting March 4th we decided we had enough content that we could make a *new* JavaScript Web.Comp stream.
This stream will mix a balance of harder HTML & CSS from the Intermediate stream with a fresh dose of JavaScript. We’re hoping that this will stretch students who have done Intermediate before and are interested in taking their web designs to the next level!
Once Web.Comp is over we’ll put the final polishing touches on our JavaScript course and release it as a standalone course.
If you’re interested in trying out a Beta version of the JavaScript course, or you’d like to find out more please contact us: support@groklearning.com. Don’t forget to give us a round of claps 👏 and share this post with your colleagues.
