For my JavaScript project, I decided to build a Movie Trivia Game. A player can sign in with a username to play and then select from a list of movies, each movie displaying a list of trivia quizzes about that movie. Once a quiz is selected, questions and answer options are displayed. When the player selects answers from the multiple choice options (each question has four answer options) a completed quiz is submitted and a quiz result is returned to the player with each original question, the player’s selected answer, the correct answer, and a short movie scene description that explains the context of each answer. When the quiz result is displayed, the players game statistics are updated with a quiz score and total points accrued towards advancing through player rating levels starting at ‘Level 1 Novice’ and progressing through intermediate levels, with ‘Level 4 Master of Movie Trivia’ as the ultimate top level player rating.
What I had initially thought would be a simple trivia game, ended up being a challenging app with a lot of moving parts and quite a lot of data to be manipulated. Movies, quizzes, multiple questions and answer options, and quiz results with multiple answers and scene context descriptions.
To achieve the functionality I wanted, I built 7 models and associations on the Rails API backend – user which has one stat, movie has many quizzes, quizzes has many questions and results, and result which has many answers. I used Fast JSON API on the backend as well, with a serializer for each model to implement JSON as the communication format between frontend (client) and backend (server).
On the front end client side, the app starts in index.js with one function ‘render User Sign In’ and from there the JavaScript code is contained within JS files for each JavaScript object class adhering to the principle of singular responsibility. I included a helper.js file for functions that were not related to a specific class. The front end makes 5 (asynchronous) AJAX calls to the server. There are 2 fetch requests that ‘POST’ user and result data to the respective controller actions on the backend create instances of user and result objects. There are 3 fetch requests that ‘GET’ data from the server and instantiate JS object instances for movie, quiz, question, result, and answer objects.
As challenging as this app was, it was a lot of fun to build and culminated in a firm understanding of JS web programming, recognizing JS events, implementing event listeners, manipulating the DOM by selecting, creating and modifying nodes, and communicating with the server through asynchronous fetch requests and JavaScript object notation format.