Teaching WebXR to 8-Year-Olds

Last week I taught an intro VR class at my local library using A-Frame. The students were much younger than I had expected (I thought tween meant 10 to 12) but we had a great time anyway. I just had to modify my approach.

Teaching programming to children is always tricky. Different students have different skill levels, and the difference of a single year can greatly affect their skill level. My solution was to do the first half of the class (we had 2 hours total) as a group. I showed them a few VR examples in a browser, then we all modified a project together. The key here is getting the kids to see that a change in the code will equal a change in the output. That the change is small (like a color or position) doesn’t matter. As long as there is some change the kids will get it.

If you haven’t used it before, A-Frame is a WebXR framework built on top ThreeJS. It lets you make web-based VR experiences using simple markup rather than JavaScript code. The markup is far easier for the students to understand than procedural code. Almost every component in the markup maps directly to one thing in the output, making the mental association far easier. Here’s a simple example of some A-Frame markup:

<a-scene>           
<a-sky color="white"></a-sky>
<a-entity
geometry="primitive:box; width:1; height:1; depth:1"
material="color:teal"
position="0 1.5 -4"
rotation="0 30 0"
></a-entity>
</a-scene>

I started with an existing Glitch project for them to remix or modify. After about an hour of group work I let the students experiment on their own. Fun fact: children often don’t have email addresses, making the use of a service that doesn’t require a login essential. Glitch fits the bill nicely.

All that said, doing anything with syntax is tricky for a child who has never written code before. Even when just copying and pasting they can easily forget a bracket or unbalance the quotes. Syntax is just hard for any eight-year-old. However, the twelve year olds had no problem at all perfectly copying code from my screen then modifying it themselves.

The syntax problem makes me think there is room for a visual VR tool that semantically is the same as A-Frame, but lets you modify properties of a tree structure instead of writing markup in a text editor. Hopefully someone will make a tool like that.

In the meantime, I created a cheat sheet that anyone can use. I tried to compress as much information as possible into it without going over a single page (front and back). Since the kids immediately want to start adding models and images from the web, I provide a few links for them.

One word of warning: A-Frame on Glitch can access GLTF files, but you can’t host a folder containing a GLTF with its resources because Glitch’s CDN generates random names for everything, breaking relative paths. At some point I’ll put together a collection of pre-approved assets to make life easier, but in the meantime just be aware of the challenge.

I hope these notes help you when teaching your own A-Frame workshop.