Moving At The Speed Of Thought – Learnosity Hackathon 2017: Part 1

Learnosity Hackathon 2017

Working with teams and technology to turn ideas into realities in a single day.


At Learnosity, we value innovation, so it’s important to us to just give the team the freedom to get creative every now and then. Our sixth Hack Day took place last month and everyone on the Learnosity Sydney team was excited to get onboard.

So in the spirit of innovation, we decided to change things up a bit by presenting everyone with two choices:

  1. Choose your own HACKventure  where budding creators pitch projects, choose what they’d like to work on, and teams self-organize into groups of 3-4 to make their ideas a reality.
  2. Robot Pathfinding  Using the Lego Mindstorm EV3, teams of 3-4 work together to program their robots to recognize colors as well as navigate obstacles and make their way along a defined path.

Choose your own HACKventure Teams:

Mobile Question Editor + Questions API

Team Members: Karol, Mark, Jack, and Eduard

The goal of the project was to recreate Question Editor and Questions API functionality using React Native to make it work natively on Android and iOS devices. These APIs are core offerings of the Learnosity toolkit and give authors the ability to create questions within an online assessment.

After an initial brainstorming session, the team began sketching out the plan that they almost followed… even the best-laid plans sometimes need to be flexible!

Mobile questions editor and API

Eduard worked on implementing the automated testing framework while Karol quickly created the intro screen and worked on the data persistence layer. Mark and Jack cracked on with the app, working on the internals.

With so many things on the go, some of the team were fine-tuning their work well into the night. In the morning two real question types  MCQ and Short Text  were implemented, which was a pretty major achievement. They had created a completely mobile-based assessment, from authoring through validation and taking the assessment without even having to touch a computer! They also somehow managed to finish an hour before the deadline with a fully functioning and bugless app. #winning!

Some of the issues the team faced were debugging using Expo – a development environment that builds and then runs apps on your mobile device or emulator. It’s quite a painful process! They also purchased a ready-to-use UI kit but didn’t end up using it as it proved to be almost useless (UI kits, in general, may not be what you really want).

At the end of the Hack Day, the team got some great React Native + Expo dev environment experience and created an app where you can author your own assessments.

The app journey in pictures:

Mobile question editor 1Mobile question editor 2

Mobile question editor 3Mobile question editor 4

Learnosity VR Question Type

Team members: Kit, Monpasha, John, and Michal

Hackathon 2017 winners

It’s not about winning, it’s about taking part … but here are the winners.

Inspired by the strides made in the last few years in virtual reality, the team ambitiously decided to create a VR-compatible question type and hook it up with Learnosity’s APIs.

“We envision VR learning getting bigger and bigger. Things like VR library/book, VR museum/educational trip, VR classrooms and assessments (school, driving lessons, ship/aircraft/spaceship control) would be available in the near future,” says Kit, the team’s lead.

“We planned to author a question and save it in our itembank, pull the question via Data API and render it as a VR equivalent question, and then submit the response via Data API again once the question is answered.”

The team had a couple of platforms for making the VR scene to chose from: Unity and Playcanvas.

Playcanvas was a better option considering the amount of time that was available (faster integration, debugging, building) and it is compatible with Samsung Gear VR – which, as luck would have it, was something that Kit had already invested in. Now there’s thinking ahead!

“We watched youtube video tutorials on how to use Playcanvas,” Kit recalls. “How to make a scene, how to add scripts to entities, how to publish a scene. After that we had a brainstorming session about what question type to make. Our choices were 360-degree image highlight, drag and drop, and hotspot.”

“After some planning we realized that these were all impossible given the time that we had, so we narrowed it down to making a Multiple Choice Question (MCQ) badass in VR,” he says. “We thought about having blocks as options, and the stimulus as a text above these boxes. The user then has an object to throw and hit one of the boxes. Validation is triggered once any of the objects are struck successfully.”

“Monpasha, the team designer, worked with the scene, somehow learning how to use a game development software in less than twenty-four hours and creating two awesome 3D scenes. Michal worked with the controller script so that users could grab the object, take aim, and throw it at the target.”

Learnosity VR question type

“Meanwhile, John and Kit worked with the entities: options as boxes, stimulus as text, and the collision scripts along with validation. The team worked hard into the night and managed to hook their project up with the VR gear, but ran out of time before they could hook it up to the Learnosity APIs.”

“The biggest issue we had was PHYSICS,” says Kit when asked about the major hurdles they faced. “Since we decided on making MCQ more interactive, we had to deal with vectors, forces, impulse, trajectories, restitution, and so on.The next issue we had was the controller, it was mind boggling, even though we have a reference script.”

And what did they learn?

“At the end of hack day, we learned how to make a VR scene, that there is physics in it, and you need a better device (we used a Samsung Galaxy S6) for computing power if you want to make it really interactive. Looking back, it’s actually pretty funny how ambitious we were starting out to think about making questions like 360 image highlight, or even graph plotting question types given the time we had. Still, it was a real learning experience, and the guys brought an impressive level of creativity to our brainstorm sessions.”

Salt Developer Dashboard

Team members: Stella, Kevin, Kent, and Tyler

Stella, a Software Engineer in Learnosity’s Sydney office explains the team’s project, what they found most challenging, and what they enjoyed about the Hackathon.

“At Learnosity, we use a virtual machine managed with Vagrant for our development environment. It’s a great tool for spinning up environments that were similar to production and easily shared across team resources that jump in and out of projects. It hosts more than 15 APIs, 5 services, 7 sites, and various shared libraries that are dependant on each other and mimic our production within in a single VM. It’s a fairly complex setup, and having even one repository out of sync with the master could mean others are failing. The project for our hack day is to have some sort of visualization that we can use to describe its state.

“We started brainstorming on the Thursday afternoon to decide the functionalities we wanted to have:

  • Basic memory, CPU state
  • Status checks for all APIs, services, and sites
  • Git statuses for our repositories, how it fares to our remote master at Github, and buttons to run build, clean, and tests
  • Log viewer
  • All of this info in a single page!

We wrote a simple page run under Flask with Vue.js front-end. We found that managing processes for trigger build job functionality were quite tricky.

We had a great time exploring ways to use Web Socket to visualize Vagrant state live and executing commands was really fun!”

Re-imagining The About Us Page

Team members: Samir and Phil B

Samir, one of our Developers in Sydney talks about the project on which he collaborated with Phil.

“We wanted to make a cool, interactive way to showcase the people who work here at Learnosity. To do this, we decided to go with an interactive map where we could plot points showing where each employee comes from. We made a functioning map where clicking on someone would zoom in on their information. Clicking on another person would bring up a plane that would fly from the previous location to home country of the next team member, and so on.

We also created a mode in which a plane was continuously flying between all our office locations (Sydney, LA, New York & Dublin). It gave a nice ‘loading screen’ type of vibe to the About Us page.

The colors of the map were randomized using the rand() method in SCSS and passing through an array of colors from the Learnosity logo.

By clicking on a specific country, the sidebar would filter out other members who were from the country selected. Now we can really see how many of us come from Ireland!

Learnosity Hackathon About Us page

It wasn’t too hard to integrate the API we used with our data, but it would have been nice to have had more time so we could explore the possibility of more functionalities in this small app.”

As if traveling around the world wasn’t enough to achieve!

Part 2 of our Hackathon account will be published here on Monday, August 28.

You can let us know what you think about our hack day ideas and projects by following us on Twitter.

If you like a challenge or feel you’d enjoy learning every day by working with a talented team of developers, then come hack with us! You can get in touch through our careers page or by emailing us at careers.sydney[@]learnosity.com.

Feature image courtesy of Mike Wilson | Unsplash


This post was posted in , by on