Black & White Horror Film Quiz

List of Features
- Existing Features
- Future Features
UX/UI
Technologies Used
- Languages Used
Frameworks, Libraries & Programs Used
Testing
Deployment
Credits
- Content
- Code
- Media
Acknowledgements

List of Features:

Existing Features:

Home section:

This is the first part of the quiz the player will see when visiting. It is designed to allow the player to start playing the quiz with one click. The scores of the previous players can be seen from this window too. There is text describing the quiz in two fonts, the larger font is more stylised and displays the title of the quiz. The smaller font is more discrete and encourages the player to play the game by asking “Are you ready to test your knowledge?”.

Home page image

Game section:

This section contains the quiz itself. The player is asked to answer 5 questions that are related to classic black and white horror films. Each question is randomly displayed from a list of pre-determined questions created from javascript. For each question, there is a multiple choice of four possible answers (A,B,C or D). There is progress bar that increases when the user is advancing through the questions. The score is displayed in the top right corner of the webpage.

Game page image

Progress Bar and Score example

Wrong question example image

End section:

When the player finishes the quiz, a window displaying the total score will appear. Underneath the total score, the player is presented with the option to save their score with their name if they wish. There is also an option to play the game again and another option to return to the home section.

End page image

Scores section:

In this webpage the user can see the scores of previous saved games alongside the players chosen name. There is also an option to return to the home page and start the game again if they want to.

Scores page image

Players Scores example

Scores Button detail

Future Features:

After each answer, a text box will appear to provide more info about the film.
A moving image background similar to the website for the Criterion Collection, will play behind the quiz.
A link to a film list on Letterboxd will be added.
Additional questions and images relating to the films will be added.

UI/UX:

Site Goals:

The main goal is to test the knowledge of the users about black and white horror films. The interactive elements of this game are easily accessed by the player through a series of interactive boxes containing questions and answers. Each interactive button has a hover feature which allows the player to distinguish which box their cursor is on. Each question is displayed with 4 interactive boxes containing answers. When the player clicks an answer, a color change will occur - green indicates a correct answer and red indicates an incorrect answer. When the player has completed the quiz, an end game page will appear displaying the score. Through this page, users can save their score by entering their name. The option is given to the player to retake the quiz and improve their own personal knowledge.

Desing Choices:

Typography:

The font ‘Bigelow Rules’ was chosen for the title, which welcomes the user to the game. My decision to use this font was influenced by the font used in the movie “The Nightmare Before Christmas”. It has an association with playful memories of childhood, and it sets a tone for the adventure the user is about to take. The body font is called ‘Wire One’. This font results in a more balanced and clear legibility for the remainder of the game. In the case that one of the other fonts can't be loaded, they will fall back to a sans-serif font.

Colour Scheme:

The webpage is designed to reference black and white film as much as possible while maintaining legibility and balance throughout. The progress bar is coloured silver chalice so that it appears dynamic when placed in front of the background image. The text is displayed in a light gray as opposed to a default bright white in order to prevent eyestrain.

User Stories:

As a user, I want clarity of what I am selecting in a website.
As a user, I want balanced neutral tones that don't strain my eyes.
As a user, I want education as well as a challenge in a quiz.
As a user, I want an easy to navigate interface.
As a user, I want the aspect of competition that score based games offer.
As a user, I want a clear indication when I choose an incorrect or correct answer.
As a user, I want have the choice to personalise my score.
As a user, I want to see a leaderboard.

Wireframes:

Wireframes created in the UX stage:

Technologies Used

Languages Used:

Frameworks, Libraries & Programs Used

Google Fonts:
- Google fonts were used to import the 'Bigelow Rules' and 'Wire One' font into the style.css file which is used on all pages throughout the project.
Font Awesome:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
Git:
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
GitHub:
- GitHub is used to store the project's code after being pushed from Git.
Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
Am I responsive?:
- This application was used for visualization of responsiveness.
Cloudinary:
- Cloudinary was used to store and link the images.
Canva:
- Canva was used for final details on the images.

Testing

Validator Testing:

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

W3C Markup Validator - Results:
W3C CSS Validator - Results:
Each of the JavaScript files were tested in JShint. As the images show, there are a few variables undefined in game.js file, one unused and another undefined variable in end.js file and there is no errors in the highscore.js file.
JShint images

I could change this using -let-, but this would result in future changes and errors in the code. I did not have the timeframe to deal with all of these additional changes. These undefined variables don't affect the functionality of the game at all, fixing them would result in unnecessary use of the clients resources.

The website was tested through Lighthouse on Chrome for its Accessibility Score.

Lighthouse Mobile report:

Lighthouse Desktop report:

The website was also tested for Color Contrast in the Color Contrast Accessibility Validator and no automated color contrast issues were found on the webpage.

Color Contrast Accessibility Validator Image

Manual Testing:

Feature	Expectation	Action	Result
Play Button	Game page will open when clicked	Click Play Icon	Game page opened when clicked
Answer Button	The button of the answer selected will turn red for incorrect or green for correct when clicked	Click Answer Button	The answer will turn out the respective color and next question opened when clicked
Enter your name field	If the text box is left blank, the user can't save the score	Incomplete form	The text does not submit and is the score is not saved
Save button	The save submit button can be clicked if the user entered their name	Name and score saved	Name and score saved in Players Scores
Play Again Button	Game page will open when clicked	Click Play Again Icon	Game page opened when clicked
Home Button	To go to Home page	Click on Home icon	Home page opened when clicked
Scores Button	The Players Scores will open when clicked	Click Scores button	Taken to Players Scores page
Go Home Button	To go to Home page	Click on Home icon	Home page opened when clicked

Testing User Stories:

Results:

As a user, the interactive buttons highlight when my cursor is above them.
As a user, the balanced neutral tones of the website do not strain my eyes.
As a user, the selection of questions introduce me to trivia and new film titles.
As a user, the linear and consistent webpage is easy to navigate.
As a user, there is an aspect of competition through the games score and leaderboard system.
As a user, I can see the visible colour changes that indicate correct or incorrect answers.
As a user, I am free to type whatever I choose in the text box accompanying my score.
As a user, I can click the scoreboard icon to view the leaderboard.

Browser Compatibility:

The website has had manual and responsive tests conducted on the below browsers and no errors were detected.

Google Chrome
Microsoft Edge
Safari
Firefox

Debugging:

Initially, the project presented problems in the deployment phase. An unstable internet connection resulted in preventing the project deploying properly. Due to this, it had to be deployed again, first from a none branch and then again to the main one. I waited ten minutes before the project was fully deployed.

Unfixed Bugs:

There are some undefined variables in the js files, but they don't affect the functionality of the game.
Due to the size of the games interface, the user may need to scroll down in order to view the lower text buttons. However, considering this incovenience, the game is still entirely accessible through all portable devices.

Deployment

The project was deployed to GitHub Pages using the following steps:

In the GitHub repository, navigate to the Settings tab.
From the source section drop-down menu, select the Master Branch.
Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found HERE - Black & White Horror Film Quiz

Credits

Content:

Quiz based on these films:

The Cabinet of Dr Caligari (1920) by Robert Wiene.
Draculas’s Daughter (1936) by Lambert Hillyer.
Creature from the Black Lagoon (1954) by Jack Arnold.
Carnival of Souls (1962) by Herk Harvey.
Hour of the Wolf (1968) by Ingmar Bergman.
Smithereens (1982) by Susan Seidelman.
Morvern Callar (2002) by Lynne Ramsay.
A Girl Walks Home Alone at Night (2014) by Ana Lily Amipour.

Code:

The code that was used in this project was based on my last project. The projects Love Running and Love Math helped to utilise HTML, CSS as well as JavaScript in this project.

External resources relevant to this code:

The website w3schools provided many great resources that assisted with problems encountered in this project.

Media:

The image used as the background is a film still from Nosferatu (1922) by Friedrich Wilhelm Murnau.
The favicon came from Favicon.
The colour palette was displayed by Coolors.

Acknowledgements

Martina Terlevic: My mentor, for all their guidance and expertise.
SuzyBee: Fellow student, for their patience and assistance.
Code Institute for their support.

code-institute-submissions / project2-bn-horror-film Goto Github PK

project2-bn-horror-film's Introduction