Beat The Family

Beat The Family is a family quiz game that pairs Alexa households together to see which team can get the most right answers. Inspired by TV quiz shows, the game looks and sounds amazing on any device.

Comment

Inspiration

Beat the Family is inspired by television quiz shows that families watch together around dinner time. Often they'll be answering the questions themselves, trying to outdo other family members or simply trying to be better than the contestants on the show. It occurred to me that even though Alexa has lots of quiz and trivia games, they all lack this competitive element to them. Sure, you're competing against Alexa, a computer, but could we do something more to replicate this experience and make Alexa owners compete against each other?

What it does

Beat the family pairs your household with another family in the world, and you both answer 10 questions to see who can do get the most correct answers. Questions are varied and include multiple choice, true or false and open answer questions. The questions are also designed to be suitable for a variety of age groups so that the whole family can take part. Extra question packs are available as In-Skill Purchases under different categories, such as sport and geography.

The game itself is a #VoiceFirst multimodal experience, the visual elements are designed to feel like playing a TV quiz show by including relevant sound effects and visual representations of the questions and answers.

How I built it

I started by designing how the voice dialogue would work between the user and Alexa, the aim being to make the interactions as natural and intuitive as possible. Once this was defined, I then designed the visual elements of the game using the application Sketch 3 to help define what the implementation of Alexa Presentation Language (APL) will look like much later on which creating the multimodal elements of the game.

I then decided on how the backend would be architected, starting with drawing out the UML for the MySQL database. Once I had the relevant tables and relationships defined for managing the teams, games and match-making, I started work on the API to be used to allow Alexa to communicate with the database. The API is developed using WebAPI in .NET Core 2.2 and hosted on AWS Lambda and API Gateway. I then developed some Unit Tests to ensure that the API remains robust as the game grows, and to also pick up any early potential problems.

With the API complete, I then created a new Alexa Skill using the Alexa CLI and picked NodeJS as my language of choice. I created all the relevant Intents and added these as handlers in my Node project. I then hooked up the Intents to call the API and set up State Management in the Skill to keep track of the progression through the Skill, the score and any other additional meta data. I then created all the relevant APL templates using the Alexa APL Designer and added these to my codebase, passing in the relevant variables in using the datasources properties.

Quiz rounds are maintained in separate Excel spreadsheets, one per round and are populated by our Quizmaster. I created a tool in NodeJS that parses these sheets and converts them to a JSON file that can be understood by the game. The tool also outputs all available Slot options so that these can be imported into the Alexa CLI too.

After this, the game went into BETA testing with a few friends to gather user feedback and catch any unexpected bugs.

Challenges I ran into

The match making elements of the game were particularly tricky to architect; finding a user a relevant game to play against that has new questions that's in the correct locale and in the correct category depending on whether they’ve purchased quiz packs or not.

I struggled with updating the RenderDocument in APL after it had been drawn to the screen as it took me a while to understand how ExecuteCommands worked and how to best use it to update the visuals on devices with screens.

I also found it difficult keeping the codebase clean and well structured, it's a complex application with a large number of possible outputs and states, as well as there being a number of different components written in a variety of languages that needed to work seamlessly together - the testing of this required a lot of patience!

Accomplishments that I'm proud of

I’m particularly proud of how it looks on a Fire TV, it’s very interactive, the In-Skill Purchasing journey is quick and intuitive, and the user feedback we’ve gathered says the game is immersive and great fun. I’m also proud that our first “live" user ran out of questions to answer after exhausting every round and going on to write a glowing review! On a similar note it’s great to see that the majority of users play more than 1 round, which is a good indicator that the questions are enjoyable and the experience is a good one.

What I learned

I’ve learned a lot about the Alexa Presentation Language and how it can be used to update the Alexa screen with new, dynamic content. I’ve also learned a lot about the APL designer and how this can used to streamline the development of immersive experiences, there’s so many great things that are possible with APL and the ExecuteCommands method.

What's next for Beat The Family

There’s so much potential with this game now that the core functionality is built. We’re going to be adding more free questions as well as adding more categories as in-skill purchases too. In addition to this, we're going to add the ability to change your team name and select a quiz category if you've bought one or more of the ISP packs ("Alexa, play a geography round"). There's also potential licensing opportunities of the application for other quiz games if the concept is a success.

In terms of new features, we’re going to user test showing the “versus” scores after each question so that you don’t need to wait till the end of the round to find out the scores. We’re also going to add a rematch feature in too so that users can play against the same family again in a with a different round or quiz category.

Built With

Share this project:

Updates