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.
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.
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.