This website is a full-stack application that allows users to play trivia, with the ability to add questions, delete questions and generate quizzes using questions from different categories and shows the final score to the user. When the questions list is displayed, the user can view the question, category, difficulty and can show/hide the answer.
The ./backend directory contains the Flask application and SQLAlchemy server.
Follow instructions to install the latest version of python for your platform in the python docs
It is recommended to work within a virtual environment whenever using Python for projects. This keeps your dependencies for each project separate and organaized. Instructions for setting up a virual enviornment for your platform can be found in the python docs
Once you have your virtual environment setup and running, install dependencies by naviging to the /backend directory and running:
pip install -r requirements.txtThis will install all of the required packages we selected within the requirements.txt file.
-
Flask is a lightweight backend microservices framework. Flask is required to handle requests and responses.
-
SQLAlchemy is the Python SQL toolkit and ORM we'll use handle the lightweight sqlite database. You'll primarily work in app.py and can reference models.py.
-
Flask-CORS is the extension we'll use to handle cross origin requests from our frontend server.
With Postgres running, restore a database using the trivia.psql file provided. From the backend folder in terminal run:
createdb trivia
psql trivia < trivia.psqlIn the backend folder, create a config.py file with the following variables and change username and password with your postgres username and password
database_path = 'postgresql://{username}:{password}@localhost:5432/trivia'
test_database_path = 'postgresql://{username}:{password}@localhost:5432/trivia_test'From within the backend directory first ensure you are working using your created virtual environment.
To run the server, execute:
export FLASK_APP=flaskr
export FLASK_ENV=development
flask runSetting the FLASK_ENV variable to development will detect file changes and restart the server automatically.
Setting the FLASK_APP variable to flaskr directs flask to use the flaskr directory and the __init__.py file to find the application.
- Fetches a dictionary of categories in which the keys are the ids and the value is the corresponding string of the category
- Request Arguments: None
- Returns: An object with a single key, categories, that contains a object of id: category_string key:value pairs.
{'1' : "Science",
'2' : "Art",
'3' : "Geography",
'4' : "History",
'5' : "Entertainment",
'6' : "Sports"}
- Returns available categories as dictionary ,a list of question objects for the given page number, success value, and total number of questions.
- Results are paginated in groups of 10. Include a request argument to choose page number, starting from 1.
"categories": {
"1": "Science",
"2": "Art",
"3": "Geography",
"4": "History",
"5": "Entertainment",
"6": "Sports"
},
"questions": [
{
"answer": "Agra",
"category": 3,
"difficulty": 2,
"id": 15,
"question": "The Taj Mahal is located in which Indian city?"
},
{
"answer": "Escher",
"category": 2,
"difficulty": 1,
"id": 16,
"question": "Which Dutch graphic artist\u2013initials M C was a creator of optical illusions?"
},
{
"answer": "Mona Lisa",
"category": 2,
"difficulty": 3,
"id": 17,
"question": "La Giaconda is better known as what?"
},
{
"answer": "One",
"category": 2,
"difficulty": 4,
"id": 18,
"question": "How many paintings did Van Gogh sell in his lifetime?"
},
{
"answer": "Jackson Pollock",
"category": 2,
"difficulty": 2,
"id": 19,
"question": "Which American artist was a pioneer of Abstract Expressionism, and a leading exponent of action painting?"
},
{
"answer": "The Liver",
"category": 1,
"difficulty": 4,
"id": 20,
"question": "What is the heaviest organ in the human body?"
},
{
"answer": "Alexander Fleming",
"category": 1,
"difficulty": 3,
"id": 21,
"question": "Who discovered penicillin?"
},
{
"answer": "Blood",
"category": 1,
"difficulty": 4,
"id": 22,
"question": "Hematology is a branch of medicine involving the study of what?"
},
{
"answer": "Scarab",
"category": 4,
"difficulty": 4,
"id": 23,
"question": "Which dung beetle was worshipped by the ancient Egyptians?"
}
],
"success": true,
"total_questions": 19
}
- Deletes the question of the given ID if it exists. Returns the id of the deleted question, success value and total questions.
{
"deleted": 2,
"success": true,
"total_questions": 21
}
- Creates a new question using the user's submission, that includes; question, answer, difficulty and category.
- Returns the same results as GET '/questions' with the new questions at the end of the list.
- Searches for questions using the search term (case insensitive), and returns a list of questions that match the search term.
- Result for search term 'the'.
{
"questions": [
{
"answer": "Maya Angelou",
"category": 4,
"difficulty": 2,
"id": 5,
"question": "Whose autobiography is entitled 'I Know Why the Caged Bird Sings'?"
},
{
"answer": "Edward Scissorhands",
"category": 5,
"difficulty": 3,
"id": 6,
"question": "What was the title of the 1990 fantasy directed by Tim Burton about a young man with multi-bladed appendages?"
}
],
"success": true,
"total_questions": 2
}
- Returns all questions belonging to the given category, returns the current category, a list of the questions paginated , success value and total number of questions in the category. If no questions were found the request is still processed and returns a total number of 0 and an empty questions list.
{
"current_category": 6,
"questions": [
{
"answer": "Brazil",
"category": 6,
"difficulty": 3,
"id": 10,
"question": "Which is the only team to play in every soccer World Cup tournament?"
},
{
"answer": "Uruguay",
"category": 6,
"difficulty": 4,
"id": 11,
"question": "Which country won the first ever soccer World Cup in 1930?"
}
],
"success": true,
"total_questions": 2
}
- Receives a list of previous_questions and a quiz_category and returns a random question belonging to the given category and is not in the previous questions list, total number of questions left(including the returned question) and a success value.
{
"question": {
"answer": "Blood",
"category": 1,
"difficulty": 4,
"id": 22,
"question": "Hematology is a branch of medicine involving the study of what?"
},
"success": true,
"total_questions": 3
}
To run the tests, run
dropdb trivia_test
createdb trivia_test
psql trivia_test < trivia.psql
python test_flaskr.py
The ./frontend directory contains a complete React frontend to consume the data from the Flask server.
After cloning the repository on your local machine, use the command npm install inside the frontend directory to install the required dependencies.
Use the command npm start inside the frontend directory to run the React App.
Customize and style the frontend by editing the CSS in the stylesheets folder.
Currently, when a user plays the game they play up to five questions of the chosen category. If there are fewer than five questions in a category, the game will end when there are no more questions in that category. You can optionally update this game play to increase the number of questions or whatever other game mechanics you decide.