Here’s How I Built This xAPI Enabled Virtual Reality Project

My plunge into virtual reality started with an email and the Fall xAPI Cohort. [Scroll to the bottom to skip the details and play the project.]

Every few months, there is a new xAPI Cohort. The Cohort is a free way for learning professionals to expand their knowledge and skills around xAPI. We meet weekly on Adobe Connect and communicate on the regular through Slack. Those who join the Cohort start a team to build a work on a project or “lurk” to see what teams are up to. When the Cohort started I was trying to figure out what I would do for my project.

Meanwhile, a colleague sent me an email asking how to create a 360 virtual reality experience. I had absolutely no idea how to create a virtual reality experience. This was the perfect challenge for my xAPI Cohort project.

Then I got to researching and thinking. I went through design to development in a few hours over 4 weekends.

Weekend 1 - Coming up with the concept

The first thing I needed to do was pick a tool to create the VR experiences in. I found a really cool and easy to use virtual reality framework called A-Frame. I figured I would give it a go. Here are 10 reasons to give A-Frame a go.

Originally, I wanted to do something like an Oregon Trail style game exploring Seattle but I simplified the concept down to be 360 tours of popular locations around Seattle. I picked Yet Analytic’s Learning Record Store (LRS) to report my data to.

Weekend 2 - Taking the 360 images

My next step was to take 360 images of locations around Seattle. I purchased the Ricoh Theta SC to shoot the 360 images.

I headed down to Pike Place Market to take my first 360 images. Taking 360 images was the trickiest part of the project. I had to duck behind a recycling bin so as not to be right at the forefront of the image and to ensure my camera did not get stolen.

I took the pictures by using the RICOH THETA S app. You can adjust the way you take the pictures for instance you can set a timer. The camera then makes a noise and captures the world around it in an instant.

Weekend 3 - Designing the mockup

Moodboarding

When I begin a project from scratch I like to create a moodboard to inspire me. My moodboards are a collection of links and images to parts of other projects, patterns, and more that inspire me. Check out my moodboard for this project, you’ll notice I added colors, fonts, and other components as inspiration. 

Mock up

I used Sketch to design the mockup. I created two mock ups, one for the desktop version of the project and one for the mobile version. I kept in mind the grid systems the web utilizes in order to make something that could be more easily built.

Check out the mockup here.

Weekend 4 - Building everything

Built with HTML, Sass, ES6, Gulp to compile.

The site was built with HTML, Sass, and ES6. The Sass and ES6 were compiled (to CSS and ES5) with Gulp. The form was created by using Formspree.

A-Frame

The tours of Seattle can be viewed with or without VR goggles. The tours were built using A-Frame, a framework for WebVR.

xAPI scripts

The actor's email address is caught by a form that pops up prior to the user entering the VR world, if the user skips the email field or enters an invalid email then a random test email is generated. When the user enters the environment it records that they have experienced that environment and when they interact with any of the hotspots it records that they have viewed those hotspots.

Here’s what the statements look like coming into the Yet Analytics Learning Record Store (LRS)

Finally, check out the final version of the project and feel free to drop me a line in the contact form.

-Mel