Online Trivia Game

portfolio image

Online trivia game I built for fun, with single player and party game modes. I was inspired to build this by a friend who likes to create customized board/trivia games. Since his games are based on trivia, he often had to spend time hunting around online for trivia questions when we played. Eventually I had the idea to build a site where he could enter questions himself. Then I realized the site could also be used to keep track of player scores during the game. I built an initial, bare-bones version that could display questions and keep track of player scores as a WordPress theme. Subsequently, another friend suggested that, using JavaScript with Socket.io and a Node.js server, it would be possible to build the site into a truly interactive game where anyone with a mobile device or laptop could join a game and play, with players sending answers to the host and the host able to send feedback to the players. The only problem for me was that I didn’t know JavaScript very well beyond some dabbling in jQuery.

But the idea stuck in my head, until finally I decided to take a deep dive into JavaScript and build the game. I settled on React.js as a view library, because React is incredibly well documented and the user community is great. To get started, I followed along with the Building A Polling App with Socket.io and React.js course on Lynda.com, which gave me the foundation of how to establish user connections and disconnections, and how to display questions from a host to a user and answers from a user to a host. I also needed to figure out how to get questions and answers from the original WordPress site I had created for the game, and make them available to the new site via the REST API. The questions were a custom post type and the answers were entered via custom fields, so it took a little extra research and modification to add them to the site’s REST output, but eventually I was able to do it. I also added the Open Trivia Database as an alternate question source, and eventually settled on it as the question source for single player and head-to-head game types. From there I figured out how to have multiple games run concurrently on the Node.js server, how to implement question rounds and player scores, and then how to create and load different types of games, so that the game could offer single player and multi player modes.

For design, my primary concern was that the site look and perform well on mobile devices. Good clean typography and nice vertical rhythm are key to making a design clean and inviting to read. I used modularscale.com as a resource to take the guess work out of type sizes, and the excellent Typi Sass library combined with Mappy-Breakpoints to take care of responsive resizing, vertical rhythym and sizing type appropriately at different screen sizes. Page layout for the most part was very basic, and I used CSS Grid with a Flexbox fallback for anything that called for a grid structure. Finally, I wanted to use animations to add fun and bring the game to life. React Transition Group to the rescue! Using this tool, I was able to add CSS animations to React components as they mounted and unmounted, and even to react routes as users navigate between pages.

This is still very much a work in progress, and I have lots of plans for improvements in the future. Next up, I’d like to create a login system using oAuth, and connect the site to a database, so that players can have accounts on the site, and hopefully can challenge their friends on social media to trivia games. Eventually I’d like to use React Native to build this into an iOS/Android app.