This project is a command line application built with Python. Users test their knowledge of Japanese cuisine by answering 10 food themed multiple choice questions. Their score is returned to them at the end of the quiz, and they are also given the option to play again if they wish.
I used Lucid to create a simple flowchart of the expected flow of logic through the programme from start to finish. This helped me to begin visualising the structure of the code and what functions may be needed.
I produced a basic wireframe with Balsamiq as I wanted to include some visual elements at the start of the quiz including a title and some food related images. The wireframe helped me visualise what this could look like when the user initiates the programme. I discovered ASCII images and fonts, which can be used in a command line application, and so implemented this to add some basic styling at the start of the quiz. This wireframe was created during the early planning stages and does not represent the final presentation.
- Provide the user with a fun, engaging and easy to play multiple choice quiz.
- Provide some visuals with the use of images and colour to contribute to a positive user experience.
- Provide an appropriate response to all user inputs and ensure any invalid data is handled appropriately.
- Accurately keep track of and display the user’s score clearly at the end of the quiz.
As a user I want:
- To play a fun and easy to use quiz.
- Clear instructions on how to use the quiz.
- To test my knowledge of Japanese cuisine.
- To be informed when my input is invalid, and to be given the opportunity to correct any invalid input without interrupting the flow of the quiz.
- To be able to read the application output clearly.
- To see my total score out of ten at the end of the quiz.
- To be able to easily repeat the quiz if I want to try again.
Project Goal - Provide some visuals with the use of images and colour to contribute to a positive user experience.
As design and layout features in command line applications are restrictive, I decided to add a background image to the main page by manipulating the provided template's CSS. I also changed the color of the 'Run Program' button to better match the color scheme. Although not explicitly required for this project, I wanted to enhance the user experience with the addition of some color and visuals. The background image is bright and cheerful, and the Japanese cat salt and pepper shakers are in keeping with the Japanese food theme.
I used ASCII font 'Crawford 2' and art by Daniel Au to create the quiz title and sushi icons, and have used the Python module 'Colorama' throughout the program to add color within the terminal.
The first input in the program asks the user to enter their name. This gives some personalisation to the quiz, as the program returns the name as a welcome, and at the end when the final score is displayed.
As a user I want clear instructions on how to use the quiz.
Once the user has entered their name, they are given a personalised welcome message, and are presented with a short description and simple instructions for the quiz. I have used new line characters to space out some of the text lines here to improve readability.
The user is then asked if they are ready to play the quiz by typing 'y' for yes or 'n' for no. This allows user initiation and control of the logic flow in this stage of the program. If the user types 'y' the quiz will begin and if 'n' is typed a message will appear asking them to type 'y' when ready, and the question repeats.
Project Goal - Provide the user with a fun, engaging and easy to play multiple choice quiz.
As a user I want to test my knowledge of Japanese cuisine.
As a user I want to be able to read the application output clearly.
The quiz contains 10 multiple choice questions of varying difficulty (depending on the users level of interest and knowledge!), which are iterated through in the same order each time the program is run. Each correctly answered question scores 1 point, and if the question is answered incorrectly then 0 points are awarded. To improve readability I have coloured the questions magenta, and used the 'style.bright' Colorama feature to add boldness to the text. I have also used the tab character to indent the answer choices for the same purpose.
If the correct answer is selected by the user, they are informed with the output 'correct' which is colored in green, followed by the next question. If an incorrect answer is selected, the output 'Oops! Better luck next time' is shown in red.
Project Goal - Accurately keep track of and display the user’s score clearly at the end of the quiz.
As a user I want to see my total score out of ten at the end of the quiz.
As a user I want to be able to easily repeat the quiz if I want to try again.
Once all 10 questions have been iterated through, the user is then presented with their final score. Different messages are displayed, depending on whether the score is equal to or less than 5, or greater than 5. The message is personalised with the users name.
The user is also asked if they would like to play again, by typing 'y' for yes or 'n' for no. If 'y' is typed the program sequence starts again. If 'n' is typed, a message informs the user that the quiz has ended and to click the 'Run Program' button if they wish to reset the quiz.
All input will be accepted in lower or upper case. For example if the user selects answer 'a' with an uppercase 'A', this input will still be accepted by the programme as valid.
Users must enter a string of text in the name input before they can proceed. If the input is left blank, or contains just whitespace, then an error message is displayed and the input is requested again.
Users must type 'y' or 'n' to indicate if they are ready to start the quiz. If they enter any other character an error message is displayed and the input is requested again.
Users must type 'a', 'b' or 'c' to select their chosen answer. If they enter any other character an error message is displayed and the question will be repeated. An invalid answer like this does not effect the users end score.
Users must type 'y' or 'n' to indicate whether or not they wish to play again. If they enter any other character an error message is displayed and the input is requested again.
I would like to expand the size of the quiz, perhaps by adding an option to select a difficulty level at the beginning. This would then open a specific set of questions for that level. Another nice feature would be to have a high scores board displayed at the end of the quiz, so that the user can see how they did against others. This could be implemented with the help of Google Sheets to push and pull score data.
I used a dictionary in this programme to store the question and answer data for the quiz. I have written the code in a way that means additional questions can be added to the dictionary in the future, without having to amend any other code. This has been achieved through the use of f-Strings in print statements, so that accurate data is always displayed for the user score and total number of questions in the dictionary.
I have carried out the following manual tests throughout the development process:
- Given invalid input at each input stage to check invalid data is dealt with in the way I expected.
- Checked f-Strings to ensure that output data is updated automatically and remains accurate, particularly if questions are added to the dictionary.
- Tested in my local terminal and the deployed Heroku terminal.
- Submitted my code for peer review.
- Asked friends and family to play the quiz to check that it works on various browsers and that the quiz functionality is understandable.
I ran my code through the PEP8 linter, no problems were detected.
Lighthouse scored the site highly on Performance and Accessibility.
- When I first ran the code through the PEP8 linter, it informed me that some of the code lines in the dictionary were too long. This was also causing some individual words to break in the middle and displaying incorrectly in the terminal. I fixed this by inserting a back slash at the line length limit point and putting all characters after the back slash onto a new line. I had to position the new line carefully so that the questions would still display in the terminal without additional whitespace. Broken words were fixed by using a new line character.
- As a result of peer review, it was pointed out to me that it was possible to still get away with not entering any data in the name input, by hitting space two or more times. To rectify this I used the .strip() method to remove any leading whitespace.
- During final tests I realised that if I were to add any more questions to the dictionary, the total number of questions in the final score print statements would not update. For example if I added an eleventh question to the dictionary, and the user got all questions right, then the output would display "Your final score is 11 out of 10". This was recified easily as I already had a variable to represent the number of questions in the dictionary and so inserted this variable into an f-String in the relevant print statements.
- No remaining bugs.
- Patorjk.com (text to ASCII generator)
Deployment was done at the start of the project to allow device testing throughout the development process.
My project was deployed via Heroku as follows:
- Remove un-used imports from run.py file.
- In order for input methods to work properly in the deployed mock terminal, add a new line character at the end of the text, inside the input method.
- If required, create list of requirements with the following command in the terminal: pip3 freeze > requirements.txt
- In Heroku account, go to Dashboard and click ‘Create New App’. Give the app a unique name and select region (Europe).
- Click ‘Create App’.
- Go to Settings tab and set up Config Vars (only required if using a creds.json file).
- Click ‘Add Buildpack’, select Python and click ‘Save Changes’.
- Then select ‘NodeJS’ and click save again. IMPORTANT - Buildpacks should be in order. Python on top of NodeJS.
- Click on ‘Deploy’ tab.
- Select ‘GitHub' as deployment method.
- Search for repo name and connect.
- Click ‘Enable Automatic Deploys’.
- Ensure that ‘main’ branch is selected in Manual deploy section and click ‘Deploy Branch’.
- Once deployed, click ‘view’ to access deployed project.
As of November 2022, Heroku ceased to provide a free service. Therefore, to continuing hosting this project without charge I transfered it to free service Render.
The steps followed to migrate this project from Heroku to render can be found here.
I used the following websites for research:
- The videos of YouTubers Chris Broad and I Will Always Always Travel For Food, for quiz question inspiration:
-
Background image from 8wallpapers.com
-
Sushi ASCII by Daniel Au, from Ascii Art
- Declan_5P_Lead and Sean Young for helping me with my understanding of while loops.
- Dave_Horrocks_5p_lead for his extensive peer review, and for drawing my attention to the name input bug.
- Johann from Tutor Support for helping me with my dictionary.
- Computer Science Tutorials' YouTube Video 'Simple Quiz Plus Flowchart Python' for helping me get started with a flowchart.
- Bro Code's YouTube video 'Python Quiz game' for giving me an initial guide on how to structure code for a python quiz.
- The Grimes Teacher's YouTube video 'Python: Print ASCII Art' for showing me how to do just that.
- The Geeks for Geeks article 'Print Colors To Python Terminal' for showing me how to use Colorama.
- The DelftStack article 'Count Number of Dictionary Keys Python' for introducing the enumerate() function to me.
- Love Sandwiches project for reference and guidance.
- Sebastian Immel (Mentor)