Interactive Front-End Development Project using HTML, CSS and Javascript
A live website can be found here.
Who doesn't like a good old quiz?! Quizzes are a fun way to spend your time when you are bored, you are not only entertained but also gain knowledge along the way!
Do you think you love watching movies and have watched a lot of movies in the past, that you consider yourself a movie buff? Take a few minutes complete the quiz, you will find out if that is true!
This Movie Quiz is designed to include a wide range of questions about all types of movies. From the old to the new, from cartoon to fantasy, any movie you can think of. It's made of 125 questions, each game has 10 questions, each correct question gains 10 points. So you can keep playing and aim for that 100 points each time! Have fun!
-
The primary goal of this project is to set up a form of game or mind sport for the players that may become a brief assessment for the user to measure their knowledge in films.
-
The secondary goal is to help the user get their thinking mind on. According to studies, brain games may help sharpen certain thinking skills that tend to wane with age, such as processing speed, planning skills, reaction time, decision making, and short-term memory.
-
Considering the format of the quiz for this project, as there won't be pictures displayed in the question, our target audience will be over 16 year old.
-
In today's world, everything is international, and that includes the film industry. Most of the popular movies are known by the majority of people of the world. Considering that, our target audience's location is global.
-
As there's no evidence to show that men love watching moives more than women or vice versa (even though I hear a lot from my female friends that their men watch the same movie over and over!), our target audience will be both genders.
-
The best way to promote our quiz game is through online advertisements and social media shares.
-
General User Goals
-
As a movie lover, I want to find movie related activities, so that it broadens my entertainments options.
-
As a movie buff, I want to find a quiz, so that I can test my knowledge level about movies.
-
As a gamer, I want to find interesting games, so that I can spend time enjoying playing them.
-
As an explorer , I want to explore through games, so that I can find interesting ideas and topics.
-
As a competitive person, I want to find a competitive game, so that I can challenge myself.
-
As a music lover, I want to listen to music while I'm answering the questions, so that I get both visual and audio stimulation.
-
As a goal achiever, I want to save the scores, so that I can drive to go past that score each time when I play.
-
As a mobile user, I want an application that is mobile friendly, so that I can use it on my mobile.
-
-
First Time Visitor Goals
-
As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about how to play the game.
-
As a First Time Visitor, I want to be able to easily navigate throughout the site to give the game a try.
-
As a First Time Visitor, I want to know about the developer information and their social media links.
-
-
Returning Visitor Goals
-
As a Returning Visitor, I want to find the leader board and beat my last score.
-
As a Returning Visitor, I want to see if there is a higher score saved in the system so I can try to beat it.
-
-
Colour Scheme
The two main colours used are red and yellow, you can find a copy of the colour palette here
-
Typography
-
Franklin Gothic Medium is the main font used throughout the whole website for main text and buttons, with Arial Narrow, Arial, sans-serif as the fallback font in case of any reason the font isn't being imported into the site correctly. Franklin Gothic is an common font and it suits the scheme and makes the website appealing.
-
The headline font is Oswal by google font with sans-serif as the fallback font. It fits in the feel of the site perfectly.
-
-
Imagery
-
Imagery is very important. The background hero image is designed to grab the user's attention and give the users the feeling as if they are in a cinema.
-
The end game illustrations demonstrate to the user how they did, gives immediate feed back, not only appealing but also encouraging.
-
-
Homepage navigation - consists of three main buttons which allows users to read the rules of the game, check on the highest Score the other players did so far and start the game when they are ready.
-
Music on and off switch - which allows the users to switch on the music if they would like to.
-
clickable footer contains copyright and developer social media links.
-
Progress text - shows how many questions the user has finished so far and how many questions are left in the game.
-
Progress bar - indicates the percentage of the questions that have been done in the game at this particular moment.
-
Score updates - tells the user how many points they have gained so far in the game.
-
Display question section - allow the users to see the displayed question and participate.
-
Multiple-choice section - gives the users four choices they can choose from.
-
Right(green) or Wrong answer(red) - indicates to the users if they have selected the right or wrong answer.
-
Right/wrong answer audio gives the users the 2D user experience.
-
Options to switch off the sound effect and go back to the home page at any stage of the game.
-
Automatically directs the user to the end page when the game is finished and shows the final score.
-
Displays an end image and audio depending on the score achieved.
-
A mute music button is also avaliable in the end page.
-
End page navigation - consists of three main buttons which allows the users to save their name and score, play again or go back to the homepage.
-
High Score indication bar - tells the users how many points in total they have gained.
-
Username Input field - gives the users the options to enter their name and save their score in the local storage.
-
The save button is only clickable when there is an input value in the input field.
-
Displaying relative images in each questions to enhance users visual experience.
-
Playing different audio for different final score scenarios.
-
Only one sound button needed to be clicked throughout all pages.
-
- The language used to give the site its main structure and all necessary features.
-
- The language used to give the application its visual effects including the font, color and layout etc.
-
- The language used to implement the site's interactive features, allow the users to be interactive and make actions during their visit.
-
- Visual Studio Code has been used as a local code editor for write and manage all codes and files.
-
-
Github is used to create, store and maintain all codes in a repository.
-
Github is also used as the site hosting service for the final website to be published on.
-
-
- Git 2.31.1 for Mac is used for commit and push codes to Github.
-
- The font used on this quiz were chosen from Google fonts.
-
- The icons used on this quiz were found in Fontawesome.
-
- The wireframes were created using Balsamiq.
-
- Google DevTools was extensively used throughout the project for various styling, testing and debugging purposes.
-
- Am I responsive has been used to test the responsiveness of the site and also to create the mock-up image presented at the start of this document.
-
- W3C Markup Validation Service has been used to test the HTML codes.
-
- W3C CSS Validation Service has been used to test the CSS codes.
-
- tinypng.com has been used to compress large images.
-
- coolors has been used to decide the color scheme for the site.
-
- Open Trivia Database has been used to get the main questions for the quiz.
Testing information can be found in a seperate file testing.md
-
Logged into Github account.
-
Select repository.
-
Select CI-MS2_MovieQuiz.
-
On the top right navigation click on settings.
-
Under the settings section, scroll down to the GitHub Pages section.
-
Select Main Branch from the source dropdown menu.
-
Click save.
-
Once clicked, this publishes the project to GitHub Pages and displays the site URL. Click on the URL to view the live site.
-
Log into GitHub account.
-
Select repository.
-
Select CI-MS2_MovieQuiz.
-
Click on the Code dropdown button next to the green Gitpod button.
-
Click on the clipboard icon to copy the clone URL.
-
Open Git Bash.
-
Change the current working directory to the location where you want the cloned directory.
-
Type "git clone" in the Command Line and then paste the URL copied in step 5.
-
Press enter to create your local clone.
-
Alternately, click on Download ZIP, unpack locally and open with a local code editor.
-
Log into GitHub.
-
Select repository.
-
Select CI-MS2_MovieQuiz.
-
At the very top right corner click "fork".
-
You will have a copy of the original repository in your own GitHub account.
Throughout the process of doing this project I have done a lot of searching and learning. The codes that are copied and pasted have been marked as a comment in the relevant files. All the rest of the codes are written by myself after learning from resources. The resources and the links I used to learn each concepts are the following:
-
Codes
-
w3schools - audio, javascript modal, loader, cubic-bezier, javascript objects, setInterval and clearInterval, setTimeout, Array splice, DOM changing CSS, JSON.parse(), Math.floor(), CSS background-image, CSS box-shadow, Array map()
-
stackoverflow - display options randomly, difference between innerText and innerHTML, convert an object key value into an array
-
MDN Web Docs - Math.max(), window.location.assign(), window.localStorage, Array.prototype.join(), Element.classList, parseInt(), Spread syntax, forEach, Fetch API
-
Youtube Videos
-
For creating the bouncing arrow on the front page from codepen
-
-
User Experience
-
Images
-
Front page background image is downloaded from unsplash.
-
The end page images is downloaded from icons8.
-
The favion displayed on top of the page in the tab area is made with favicon.io.
-
-
Audio
I would like to thank:
-
My mentor Antonio Rodriguez for his encouragement and patience when my frustration kicked in at the start of this project. Thanks to his guidence and tips, I have gotten over the dip and made it to the end.
-
Help and support from fellow students in the Slack community.
-
Tutor support and student care team.
-
My boyfriend Kevin Hurley's support and help with testing and encouragement.
Should you have any queries please reach me on melinda_hongye@yahoo.com