“JavaScript JEOPARDY!” — A Single-Page JavaScript Web App

Ever since I was a kid I’ve had a love and affinity for trivia. Building my repository of utterly useless knowledge over the course of my life has always been a point of pride. Therefore it’s a given that I am a massive JEOPARDY fan. When presented with the opportunity to build a single-page web app with a JavaScript-driven front-end and a Rails API back-end, I came to the conclusion that building JEOPARDY would be a blast.

I started by building out the basic structure of the back-end. What does a round of JEOPARDY consist of? Six categories that each contain five clues. So there I had two models — Category and Clue — and their relationship mapped out. On top of that I build out a Game class. The Game class is important for two things: 1) keeping track of the score, and 2) collecting categories and their respective clues for each round played. The relationship between Games and Categories is many-to-many. When a Game is created, six Categories are chosen at random from the number of Categories in the database and they are then associated with the newly minted game. Since Clues “belong_to” Categories, they are automatically associated with the Game as well.

My models, with their attributes and associations.

I seeded the Rails API with Categories and Clues taken from recent JEOPARDY episodes. Currently there are 18 categories and 90 clues in the database. Remember, since Categories are assigned to a Game at random based on the amount of Categories available in the database, if I choose to add more I won’t have to refactor any code to accommodate the new additions. If I added 90 more categories, the app would still chose six out of those 108 categories randomly.

My startGame() function, which employs a JS “POST” fetch() request.

With the database seeded and the API up and running it was time to tackle the front-end. The task here was to build out the app with basic HTML and CSS while using JavaScript to manipulate the DOM, create events and communicate with the back-end to engage in at least two forms of CRUD functionality (Create, Read, Update, Destroy). For JavaScript JEOPARDY to operate properly, I needed to create a game, read it’s associated data (Categories and Clues), and update it’s score. To do this I had to employ the use of JavaScript’s fetch() method to make HTTP requests to my API, parse the response into JSON data and render that data to the DOM. From there it was all about rendering everything to resemble the JEOPARDY game board and the game’s real-world mechanics.

To facilitate the choosing of Clues, I added an event listener to each Clue box that renders that Clue’s question with a form to submit an answer. Upon submission, another event listener is used to update both the DOM and the game’s score in the back-end. If the user’s answer is correct, the Clue’s value is added to the score. If it’s incorrect, the Clue’s value is taken away.

This was an incredibly fun and incredibly informative build for me. You can check out my repo at https://github.com/pbrzn/js-jeopardy.