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.
This is an updated version of the first submitted project.
- Movie Quotes Quiz
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.
Originally there were two areas exhibiting information about the game: a counter, indicating the number of the current question and the number of total questions, and the score card showing how many points the user gets. This updated version also displays a progress bar and an instant feedback to indicate if the user selection was correct or not: the background color of the score card changes to green or red.
The site gives 10 points for each correct answer.
The idea behind this website's modest and unpretentious design is to evoke the appearance of a sheet of pager 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.
- Dark Grey: #222222
- Red: #A20C0C
There are only two font families in use on this website. Special Elite, which resembles the typography of an old-typewrite machine font, is used for the headings, and Lato, a sans-serif font with good legibility, is used in the smaller lines of text.
- I designed the logo and the favicon using Adobe Illustrator. The symbol a speech bubble with an icon from Font Awesome.
- The favicon was exported as favicon using favicon.io
The heading contains the title of the page and an icon. This section is not modified during the game.
This section contains the quiz itself. It is constituted of the following:
- a quote (question)
- four movie titles (alternatives)
- number of the current quiz and total of questions
- progress bar
- scorecard showing whith awnser feedback(displayed after the first quiz is answered)
The user is asked to match 10 quotes to the famous movie they are from.
The quotes and film titles are listed on the javascript file questions.js. Each movie quote has a multiple-choice of four possible movie titles.
Underneath, the number of the current question and the total of questions is displayed, indicating the game's progress. followed by a progress bar and a scorecard shows how many points the user has got — each question is worth 10 points.
Once the user selects an alternative, the background of the score cards changes to green or red, indicatating if the awser as right or wrong. The quiz advances to the next question until the end.
When the users anwsers the 10th quiz, they are directed to the End Game page.
The user's score is displayes and if the performance was bad, average or good, one of three sets of images and messages is displayed. This is checked thru a Java Script function that also loads the correct images and messages.
There is also an option to save the score in local storage, where the users inputs it's name and click on save. The user can also choose to play the game again.
If the user chooses to save the score, they are directed to the page of High Scores, where the 5 higher scores in local storage are displayed, with the player's names.
An error page is displayed in case a page cannot be found on the web server. The page contains links to the main page and to the highscores page.
The minimalist footer contains only three icons for the author's website, LinkedIn and GitHub.
The site, at its current state, presents a fully working simple quiz game. While working on this project, I got ideas for making it more interesting. However, these features would add more complexity to the code and take more time to complete. So I listed a few of those ideas as future features.
The only feedback the user receives indicating whether he answered correctly is the scorecard's points and the colour feedback (green and red). That could be more elaborate to make the site more attractive. Some suggestions would be:
- Play different sounds for a correct or incorrect answer. To stay on theme, it could be the sound of a typewriting bell for a correct answer and a kneading paper sound for the wrong one.
- Play the audio or video clip with the original movie quote or a image of the movie just after the user selects the awnser.
- The site could highlight the correct alternative in one colour and and the wrong selected option in another colour (red), and fade the colours of the other alternatives.
Although I appreciate a simple design, this one could use more graphs. Perhaps a photograph of a typewriting machine with the central section of the site as a sheet of paper.
I have manually tested the site on Chrome and Firefox on desktop computers with different screen sizes ( 27" and 13") on Chrome and Firefox on Android phones and tablet, and also using google dev tools.
All the Java Script files were checked on JShint.com. The major issues, like missing semicolons or unused variables, were fixed. However, there are still warnings that undefined and unused variables were present on the script.js. As those variables are part of other files in this app, I've ignored these warrings and the ones regarding the ES6 version.
No errors were returned when passing through the W3C Validator.
There was only a warning regarding an empty h2 heading, in which the JavaScript code would add the content.
No errors were returned when passing through the Jigsaw validator
Lighthouse gave a performance score inferior to 70 points for the highscore pages. However, in all other criteria, the score was about 80.
- HTML5
- CSS3
- JavaScript
- Google Fonts
- Font Awesome
- GitPod
- GitHub
- VS Studio Code
- Favicon
- Font Awesome
The site was deployed to GitHub pages. In the GitHub repository, go to Settings. Of the drop-down menu, select the Master Branch Click" Save" The page reloads with the link to the project: https://zemaciel.github.io/project-02/
As this is the first time I am learning Javascript, I sought other learning resources to complement my studies. Colt Steele and Stephen Grider's courses on Udemy and CoderLipi classes on YouTube were particularly helpful.
I have researched several online quizzes developed in JavaScript and quiz tutorials on building this project, including projects of other Code Institute students. Among all the sources I came across, a video class by Professor Edson Braga was one that I followed to set the mais structure for the JavaScrip code for this quiz.
I have aditional features like a progress bar and the display and save scores on local storage. For those, the tuotorials by James Quick were very useful.
- Edson Braga, Application in Java Script, Quiz (Portuguese) Class 20 and Class 21.
- James Q Quick, Build a Quiz App with HTML, CSS, and JavaScript.
- lizac9 Black & White Horror Film Quiz
- Aleksander Kisielewicz, 007 Quiz Game – Project 2
- Kevin Powel, Dealing with hover on mobile
- css-tricks.com, Setting page Footer
- Colt Steele and Stephen Grider: The Modern Javascript Bootcamp Course
- Stack Overflow: Change the text of a span element using JavaScript?
- Stack Overflow: Adding an img element to a div with javascript
- Stack Overflow, Github Pages website favicon not showing
- MDM
- W3 Schools
- Martina Terlevic, my mentor for the guidance.
- Special thanks to my colleagues on Slack for sharing valuable learning sources and their struggles during this course phase.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent