Live Demo (Hosted on Heroku)
REST API (Hosted on Heroku)
Start Screen
The application starts on the Start Screen. This view contains a text input field where the player can enter their chosen username. There's also an options menu from where the player can select the difficulty, the amount and the category of their desired trivia questions. If the player doesn't change these options, the game will use default values. The default values are currently set to 5 questions from all categories and all difficulties. The data is fetched from a free API. Upon clicking the Start Button, the application checks whether the entered username already exists in the proprietary REST API and updates the application state accordingly with the correct values for user id and high score. If the entered username doesn't exist in the API, a new user is created using a unique id and a high score of 0. Clicking the Start button will start the game. No authentication is required and playing with an existing username will just update the record for that user if necessary.
Question Screen
The Question Screen contains the actual game view. This view displays one trivia question at time and the answer options related to it. By clicking an answer, the next question is displayed. A correct answer is worth 10 points which will be added to the user's score. Upon answering the last question, the next view is shown automatically.
Results Screen
The Result Screen is shown after a game is finished. In this view, the total score and a summary of the questions and answers will be displayed. If score was higher than the former high score for that username, it will be updated to the REST API. In the summary section, each individual question can be inspected again along with it's correct answer and the user's answer. The correct answer is highlighted in green. The Restart and Reset buttons can be found below the summary. Upon clicking Restart, the game starts again using the same options as before. Clicking Reset will return the user to the Start Screen and reset the application state.
The project is implemented using the following technologies:
- Vue
- Javascript
- Vuex
- vue-router
NOTE: You will need node and npm installed on your machine
- Clone the project repository:
git clone https://github.com/arttuhar/triviaGame.git- Install the dependencies while inside the project directory:
npm install- Start the development server:
npm run devAfter starting the development server, you can access the application by navigating to localhost:3000 on your browser.