Here is the link to You know my stage name Quiz

You know my stage name is an online Quiz. The user is asked to guess which answer is correct from a choice of three answers. There are 11 Questions to go through. Once the user selects an answer by clicking the relevant button, the game gives the feedback as to whether it was correct or not (green if correct and red if incorrect) and it also displays the correct answer. There is a progress status underneath the answers as well how they are doing in terms of questions answered correct. At the end of the quiz the user is brought to an end of quiz screen to see their score and feedback. From this point they can choose to start the game again.

• User Experience (UX)
• Features
• Design
• Technologies Used
• Testing
• Deployment
• Credits

• User Stories - as a user I want to be able to :

• U01. Easily determine the purpose of the website.
• U02. Play a round of 11 questions.
• U03. Easily tell which question is being asked.
• U04. See a running total of correct answers.
• U05. Get feedback on whether or not the correct answer has been entered.
• U06. At the end of the quiz, get feedback on overall score for the quiz.
• U07. Navigate easily between game screens, including quitting and returning to the start.

• When the page is first loaded, the title, rules and purpose of the website is clearly introduced to the user.
• The user is then asked to move to the next page in order to play the quiz by pressing the "play" button.

• The game is comprised of three pages :

1. Welcome page
2. Play game page
3. Final page

• The Navigation through the pages will happen by interacting with the game buttons to play the game.
• There is also a home button at the top of each page to help the user navigate back to the start.

• Once the user has pressed play, they are taken to the game page and the quiz begins. There are a number of features on this screen, details of each feature is below.

1. The user is presented with a question/ stage name.
2. The user enters their answer by click one of the three possible answers
3. The game gives the user feedback on whether or not the correct answer was entered - the background of the box changes to red (incorrect) or green (correct). The number of correct answers is updated as appropriate and displayed on the bottom right of the screen.
4. There progress of questions completed is also displayed on the bottom left of the screen to allow the user to see how much is left to do.
5. There is a 2 second time delay on the current answer check to allow the user to see whether they got the answer right or wrong (and if wrong, they are able to see what the correct answer was in green).

• Once the user has completed all 11 questions, they will automatically be taken to the Final Page where they will be presented with their final score and a reaction/message associated with how many correct answers they entered.

1. ".... this game isnt for everyone!"
2. " Wow, you really know your stuff!"
3. "Nice work!"

• The User Stories in the User Experience (UX) part of this document are numbered U01-07. The existing features are listed above F01 to F04. Below is a traceability matrix cross referencing the user stories with the features, illustrating which features support which stories :

• Potential future features could be:
• Random selection of questions coded in the background based on a level of difficulty at the users choice.

• The colour scheme across the screens was kept simple and consistent so that it wouldnt be distracting and was inspired by colours used on quiz sites that appear to indicate playfulness and simple in look.

• Google Fonts were used to import the Yusei Magic Sans Serif fonts into styles.css. Yusei Magic was chosen as it had a current game feel and is highly readable which helps a game site using words.

• Desktop Wireframes

• Tablet Wireframes

• Smartphone Wireframes

• HTML 5
• CSS3
• Javascript

• Google fonts: was used to import the Yusei Magic font.
• Font Awesome: was used to add icons for UX Purpose.
• Git: was used for version control by utilising the Gitpod terminal to commit to Git and Push to Github.
• GitHub: is used as the repository for the projects code after being pushed to Git.
• Apple Photos was used for resizing images and editing photos for the website.
• CloudConvert: was used to edit the format for images and convert for easy loading for the website.
• Balsamiq: was used to create the wireframes during the design process.

• HTML Validator

• result for index.html

• 

Full Validation results are available on github

• CSS Validator

• result for styles.css

• 

Full Validation results are available on github

• The warnings are due to 1)import of the Google fonts

• JavaScript Validator

• result for script.js

• result for data.js

The reason for the unused variable "questions" message is that that data.js file holds the game data in a separate file to the rest of the site code.

• Testing has been carried out on the following browsers :
• Chrome Version 114.0.5735.198 (Official Build) (arm64)
• Firefox Version 113.0.2 (64-bit)
• Edge Version 114.0.1823.67 (Offical Build) (64-bit)

• The below table details the test cases that were used, the results and a cross reference to the feature that each test exercised

• No known bugs

• I can confirm that the colors and fonts chosen are easy to read and accessible by running it through the lighthouse in dev tools.

• In the Github respository, navigate to the settings tab, then choose Pages from the left hand meny
• 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 - You know my stage name

• Go to the https://github.com/bolliebrain/you-know-my-stage-name repository on Github

• Click the "Code" button and navigate to the directory where you want to locate the clone

• On the command line, type "git clone" then paste in the copied url and press the Enter key to begin the clone process

• Changes made to the local clone can be pushed back to the repository using the following commans

• git add filenames (or "." to add all changed files)

• git commit -m "text message describing changes"

• git push

. N.B. Any changes pushed to the master branch will take effect on the live project

• The questions were sourced mainly from the below website:

• Elle

• The fonts were imported from Google Fonts
• The Home icon was taken from Font Awesome
• The favicon was created from Favicon
• Various images for the questions sets were taken from Wikimedia, also to give credit to (as have received permission on the conditions giving credit):
• Adamant
• Calvin Harris
• Sting

• The coding within the Question Sets and Check Answer were influenced by the following youtube video [Quiz App] (https://www.youtube.com/watch?v=PBcqGxrr9g8). This includes the game script.
• W3 Schools was used to as a point of reference for adding inner HTML, fixing CSS and HTML code.
• Simple layout and score Generator was inspired by Love Maths.
• Delaying a javascript function - Tutorialspoint

• Thank you to my mentor Elaine Broche for her ongoing help and feedback. For also providing tips on the keeping the code tidy and providing guidance on functions.