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.
geometry="primitive:box; width:1; height:1; depth:1"
position="0 1.5 -4"
rotation="0 30 0"
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.