dnabulsi / Trivia-Web-App

A full-stack Trivia Web App using open API, Flask framework, SQLite3 database, all in Python, CSS, HTML, and JavaScript. You are able to register, log in, customize your game difficulty and category, play a timed trivia game, and view all highscores.

TRIVIA!

Video Demo: https://youtu.be/pAkLrfyd7rU

Overall description: My project is a trivia website that uses Python, JavaScript, HTML, and CSS. You are able to register an account by selecting a unique username and password. The password is then hashed into the database to increase account security. Upon logging into your account, you are greeted with the index page. You are able to see the Riddler logo, and a multitude of webpages to explore, such as: Homepage, Game History, Highscores, About, New Game, How to Play, Register, and Log Out. How to Play will explain how game customization works, and what happens during the game. When creating a new game, you are able to select from a wide variety of categories per the Trivia API, including Arts & Literature, Film & TV, Food & Drink, General Knowledge, Geography, History, Music, Science, Society & Culture, and Sport & Leisure. The basic categories also available are easy, medium, and hard. Then you are able to begin your game. When the page loads, a progress bar will begin counting to 10, indicating you have 10 seconds to select an answer and click a button. Don't worry if your webpage loads slowly, as the progress bar will stop counting once you've submitted your answer and are waiting for the server's response. You have four multiple choice options, one of which is the correct answer for the given question. If you answer correctly, you will gain a point and move to the next round. If not, your game will end and the results page will show up. When the results page appears, your game results are saved to history, and are checked against a highscore with an identical difficulty and category. If your new score is higher, the highscore will be updated. If not, your highscore will remain the same in the database. All information is tied together with the user ID, which is assigned upon registering your account. Then, you are able to use the player's username to check for their history and highscores, and compare it against your own for some competitiveness! The about page has some information regarding the inspiration for the project, and my plans after CS50. I learned a lot of things during this project, and I enjoyed playing around with API and exploring how to display that API how I want it displayed.

helpers.py: Let's go into some technical details. First off, with helpers.py, I implemented several functions from Finance: apology, login_required, and lookup. Primarily, for lookup, since the API would be changing depending on the player's choice of category and difficulty, I created four different URL tries. Then, I initialized the dictionary that would be returned from those tries, which includes the following data: category, id, correctAnswer, incorrectAnswers, question, and difficulty.

app.py: Moving on to app.py, I imported several new functions to implement what I wanted. Primarily, random was used to randomize the answers dictionary that would be passed to game.html. I also imported Environment from jinja2 to access global variables across several functions. I initialized two global dictionaries: one for difficulty, and one for categories. They both contain the phrase to be used in the database as the key, and the phrase to be shown to the player as the value. Function after_request ensures that all responses inputted by the player are new responses, and that nothing is cached or stored anywhere in their browser. Function register was created by asking the user for a username, password, and confirmation. Then the function checks to ensure password and confirmation are the same. The function checks the users table to ensure the username is unique. If it is, the username, hashed password, and auto-incremented ID are inserted into the users list. Then, with the function login, the user is able to log in by providing a username and password. The function checks the users table to ensure the username and password are in the same row, and for extra caution, ensure that the length of rows returned is only exactly one. If this is successful, the user can log in by initializing the session to be their user ID. Logging out with logout merely clears this session. The function changepassword works by checking for the username and old password in the users table. It also checks that newPassword and confirmation match. If all are successful, the database updates the old hashed password to the new one. In the function about, it simply render the about.html template to the player. In the function highscores, it displays the highscores to the player by prompting for a username, and selecting all rows in the highscores table that match that username, in a descending order according to score. The same thing applies to the history function, except that it selects all games in history, and displays them in a descending order according to time. In success, it displays the success page upon changing your password. In new game, I prompted the player for a category and difficulty. When the player submits their choices, the function checks to ensure a category and difficulty are selected. If they are, the function then uses a list index to move from value to key in each respective dictionary. Those lowercase values are then sent to helpers.py to contact the API for a dictionary of questions through lookup. If successful, we place difficulty and category into global variables, so they can be used by the function game as well. Answers is also initialized to contain both correct and incorrect answers. We use random.shuffle in order to randomize answers before passing it to the html. Also, a global variable called correct was initialized during the testing process to test for some bugs. Feel free to play around with that if you want! Finally, global variables points and questionNumber are also initialized to 0 and 1 respectively, so they are displayed to the player on the first question. All this information is then passed to game.html. In the function game, we process the current game by checking if the answer submitted by the player is the same as the value of the global variable correct. If so, then points and questionNumber are incremented by 1, and we contact the API for a new question dictionary and update our other variables accordingly before sending them off to game.html for the second question and onward. Otherwise, if the player's choice is incorrect, or they ran out of time, the date and time is recorded to the now variable, and all relevant information is inserted into history. Also, highscores is checked against the current game's category and difficulty. If the same score or higher is already there, nothing is changed. If the new game is a highscore, then it is either updated with the new value, or a new highscore entirely is inserted into highscores. Then, the gameover.html page is rendered displaying the game's results. The gameover function processes if a user selects to start a new game, or view game history. Finally, in howtoplay, the information containing how the game is played is displayed.

templates: I have several templates I used throughout this project. In layout.html, I mapped out the overall format of the page. This included a customized navigation bar depending on if the user is logged in or not. Also, the footer features a tribute to the Trivia API used in the project. The main class was left to be used by the other html files. Starting with about.html, I talk generally about the project, my inspiration behind the project, and what I intend to do after CS50. I use some basic dividers and IDs in order to get the formatting I want. In apology.html, I used the same concept as in Finance: I selected an image relevant to my theme to display an error message to the user with an image tag. In changepassword.html, I have 4 input fields and a button to prompt the user for their old and new information. This is all wrapped in a form, to ensure the method sent to app.py is post. In game.html, things are as complicated as they're going to get. First off, with the JavaScript function, I've initialized a timeleft function at a value of 10 (seconds). I have a function that creates a timer by using the setInterval function. In it, it first checks if time is less than or equal to 0. If so, the interval is cleared (meaning it does not count down anymore), and the form is automatically submitted. If not, timeleft is decreased by 1, and the function resets. This basically counts to 10 to ensure the player answers the question within 10 seconds. Then in our form, I have a few jinja brackets. I use questionNumber to indicate what number question the player is on, and the question row in lookupResults to display the current question. The category and difficulty are also displayed, in case the user chose to leave them mixed and wanted to see some details about the question. Then the progress bar is displayed to the user via the progress tag. Four different input values are initialized, and labelled A, B, C, D. A submit button allows the user to submit their choice after selecting it. Finally, the current points paragraph displays to the user the amount of points they currently have. In gameover.html, an image tag is used to show the user the Riddler logo. Also, a paragraph tag is used to summarize the results of the game to the user. Two buttons are then used in their own forms to either view the highscores page, or begin a new game. In highscores.html and history.html, the user can input the desired username into the form. Then, the results are displayed in the form of a table, using some loops and jinja brackets. In howtoplay.html, some information about game creation and playing the game are displaying using dividers and IDs. In index.html, the homepage is displayed using an image tag, and two buttons and forms, each leading to new game and how to play respectively. In login.html, the page is displayed using image tags, and two spaces for input for a username and password, along with a submit button. In newgame.html, an image tag and paragraph are used. Also, the option tag is used to create a dropdown menu for category and difficulty, along with some loops and jinja brackets. The page can be submitted using a button. In register.html, three input fields are used to enter the username, password, and password confirmation. A button is used to submit the page. In success.html, I used an image tag to display a pre-made success image, and a button to allow the user to return to the homepage.