How to do interactive coding lectures with Scrimba

Our newest playground feature at Scrimba aims at making coding lectures more fun and engaging.

In essence, it enables teachers to live stream code to the entire classroom. Students can then fork the code and experiment with it on their own. All of the forks are available for the teacher, who can jump in and edit their code.

This is perfect for e.g. giving a challenge to the entire class, and then reviewing specific students’ solutions together with everybody.

Let’s look at how you can start using this feature.

1. Live stream your code to your students

Live streaming code to your classroom is as easy as sharing a URL. Once your students visit the URL, they see exactly what you type. No login is required from the students.

This makes it a lot easier for students to follow your code, especially if it’s a large auditorium where it might be hard for some people to see what’s on the canvas.

As a teacher you can create a playground by simply clicking the create button and choose playground.

You can choose any template you want (i.e. React, Vue, jQuery). Once it’s created, just share the link with all your students.

2. Let students fork your code

When watching a live stream, students will be able to fork your code so that they can experiment with it. They can jump back and forth between their forks and your code as much as they want.

To fork the teachers code, simply click the fork button on the right hand side.

Forking requires students to login, so that they don’t loose their code when they navigate away from the URL.

3. Get full overview over all your students

As a teacher you’ll have full overview over all your students’ forks. Simply click on a student’s icon to enter his or her fork. There you’ll be able to watch them code live.

You can also edit the students’ code yourself, if you for example want to help them debugging or suggest improvements.

When combined with displaying your screen on a canvas, this opens up for a ton of fun possibilities. Here are a few use cases and benefits we’ve seen so far:

• Give a challenge and display students’ solutions on the canvas
• Debug a student’s code with the entire class
• Better to code along with the teacher (easier to get unstuck when the student has access to the “original” code)
• Easier to identify students who need help (as teacher can access all the code)

It’s still the early days for this use case, and there are definitely a lot more fun stuff you can do.

If you have any feedback, we’d love to hear it. So feel free to head over to our Gitter channel or send me an email at per@scrimba.com.