If the user decides to quit the game, or if the user completes the game, an entry is also written into the high-scores csv file, noting the player_name and the riddle_number. Using the information in this csv file, the application can identify and show previous incorrect answers for a particular riddle. If they are not, a flashing error message shows up on screen.Īn entry is also written into a csv file denoting their name, incorrect answer and riddle number. If the user's answer is successful, they proceed to the next riddle. Once the user has submitted an answer, the riddle_number is again used to cross reference the user's answer with the correct answer in the JSON file. The current riddle_number on the page is hidden within the form element, and is consequently used to load the correct riddle on the page. On page load, the riddles are loaded into the context of the application such that the riddle and answer can be accessed by subsequent code. The POST method of this form calls on a route within the app.py file to access the player_name within the request object writing the user's name to a. The user starts the game by entering their name into a form element. The Bootstrap library is also used to make all the elememnts on the page visually appealing. The application primarily uses the Flask framework and Python logic to implement the core functionality.
If the user does complete the game, instead of also being directed to the high-scores page, they are directed to a special page with a flashing congratulations image.
The user is then directed to the high-scores page where they can see their score in a table along with other users and their scores.Īgain, the fonts, colours and themes on this page are closely aligned with the other pages in the application for uniformity.
If the user cannot complete the game, they can opt to quit halfway through by typing the word quit into the answer box. The slider reveals a table of previous incorrect guesses, and the user that submitted the guess in a table that follows the retro colour scheme of the application. This slider is hidden by default to give the users more of a challenge should they desire. Hovering over the 'CHECK ANSWER' button on larger screens (clicking on small screens) changes the button fill colour to green feeding back to the user that the button has been clicked.īelow the riddle is a slider button and a prompt to the user that if they slide the slider, they can look at incorrect guesses submitted by other users. The background colour of the riddle is a different colour to the familiar input box from the previous page, to quickly guide the user when submitting an answer.Ī percentage completion bar gradually increments as the user moves through the game to give the user an indication of their progress. Once the user has entered their name, they are directed to the first riddle. This button forms part of the core design for the application and can be accessed on any page of the application. If the user is unsure, or would like more information about how the game works, an info button which displays a list of instructions as to how the game works can be located at the bottom of the page. With it's simplistic design, the user is given clear direction to the name entry field. As explained in later sections of this README file, this name is used to log high scores and incorrect answers against. In order to proceed with the game, the user must first enter their name. This is the page that the user first sees when loading the website. From the early stages, I thought a retro theme would suit this project well, and colours, fonts and transitions were chosen to complement this. A mobile-first design approach was applied in all aspects of design for this project. UXĪs with other projects I have undertaken, my aim with this project was to construct an application that was simple but beautiful in design, allowing the user to easily understand and interact with it. If the user decides they cannot finish the game, they can quit early to view the high scores leaderboard. There user must answer 11 riddles in total to complete the game.Įach correct answer increments their score by 1 point. The user can only progress to the next riddle upon submission of a correct answer. Subsequently, riddles are displayed one at a time on the screen with an answer box appearing below. The user must first enter their name to play. The aim of the game is for the user to answer riddles displayed to them on screen. This application uses the Flask micro web framework to allow users to play a riddle game.
0 kommentar(er)
