This website is a Quiz Game produced as the Second Portfolio Project (JavaScript Essentials) for the Diploma in Full Stack Software Development course at Code Institute.
Site Goals:
The main goal is to test the users' knowledge of famous movie quotes. Hence, the site displays a line with a movie quotation and four boxes underneath, each containing a movie title, where only one corresponds to the correct answer. The user is asked to match 10 quotes.
Main Features
The site features:
• Counter, indicating the number of the current question and the number of total questions;
• Scorecard, showing how many points the user gets. If their selection is correct, the background color of the scorecard changes to green. For incorrect selection, it changes to red.
• Progress bar and instant feedback. The site gives 10 points for each correct answer.
• End of game and feedback. The user's score is displayed, and if the performance was bad, average, or good, one of three sets of images and messages is displayed.
• High Scores: there is an option to save the score in local storage, where the user inputs their name and clicks on save. If the user chooses to save the score, they are directed to the page of High Scores, where the 5 highest scores in local storage are displayed, along with the player's names.
Design:
The idea behind this website's modest and unpretentious design is to evoke the appearance of a sheet of paper in the typewriting machine of a screenplay writer.
The background image displays the texture of a sheet of paper, and the heading font looks like a typewriting machine.
Following the same concept, the colours are also limited to red and black, the only colour options for one using a typewriter, and white. Everything is arranged in a single column, which is simple to read and display on different screen devices.