Skip to content

araldwin/History-Trivia-Quiz

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
.vscode
.vscode
 
 
assets
assets
 
 
docs
docs
 
 
.gitpod.dockerfile
.gitpod.dockerfile
 
 
.gitpod.yml
.gitpod.yml
 
 
404.html
404.html
 
 
404.md
404.md
 
 
README.md
README.md
 
 
favicon.ico
favicon.ico
 
 
index.html
index.html
 
 

Repository files navigation

Developer: Aldwin Arriola

Table of content

  1. Purpose of the project
  2. User stories
  3. Features
  4. Typography and color scheme
  5. Wireframes
  6. Technology
  7. Testing
    • 7.1 Code Validation
    • 7.2 fixed bugs
    • 7.3 supported screens and browsers
    • 7.4 test cases
  8. Deployment
    • via gitpod
    • via github pages
  9. Credits

Purpose of the project

The purpose of this project is for Project #2(JavaScript), this is part of me achieving the Diploma in Full Stack Software Development at Code Institute.besides this it is a General Knowledge, Fun Trivia question quiz game project, it can provide more knowledge for the User.

User stories

as a User:

  • i would like to start the game.
  • i would like to know the rules of the game.
  • before starting the game i would like to have options to exit or continue the game.
  • i would like to see my score.
  • i would like to see a timer.
  • i would like to see what question number am i while playing the game.
  • i would like to see the correct asnwer if my answer is wrong.
  • i would like to proceed to next question.
  • i would like to see the total of my score after answering all the questions of the game.

Features

  • Main menu of the game with start button.
    Main menu screen shot

  • Rules of the quiz with option to start or exit the game.
    • Exit button - click this will return back to main menu
    • Continue button - click this will proceed to the main game.
    Rules of the game screen shot

  • Main game
    • User score that increments every correct answer.
    • Timer
    • A display of the question and choices of answer.
    • Display tick when answer is correct and cross if answer is wrong.
    • Total of questions and question number.
    • Next button after answering each question.
      Main game screen shot

    • If User answer is wrong it will display the correct answer, and it will not increment user score.
      display user correct answer screen shot

    • If User timer is off it will display correct answer but will not increment score.
      display timer off screen shot

  • End game
    • Display final score of the User.
    • Button to quit the game and return to Main menu.
      display end game screen shot

  • 404page
    404page screen shot

  • This website is mobile friendly(mostly Apple products) or responsive design that fits only in standard screen sizes given below.

    amiresponsive screen shot 

    ```
Desktop = 1600x992px 
Laptop = 1280x802px 
Tablet = 768x1024px 
Mobile = 320x480px 

Apple devices:
iPad Pro = 1024x1366px
iPad and iPad Mini = 768x1024px
iPad Air = 820x1180px
iPhone 13 Pro Max = 428x926px
iPhone 13, iPhone 13 Pro, iPhone 12 Pro = 390x844px
iPhone X = 375x812px
iPhone 5 = 320x568

Xiaomi mi10T 5g = 393x873px
```

  • Future features

    • A background music.
    • More history trivia questions.

Typography and color scheme

Typography

typography screen shot

  • I used Roboto fonts in this project with fall back being Sans-serif. This Font is simple and adapted to the website and it is linked to the CSS document via @import.

Color Scheme

color scheme screen shot

  • In this website I used black #000000 for the Fonts and white #FFFFFF for the text shadow. I also used different colors for the style of the buttons and other backgrounds. like Chocolate tradition #783205 as the main color of the buttons to get its golden style. next are the other colors I used.Alice Blue#F0F8FF,Dark Cornflower #004085, Beau Blue #CCE5FF, Forest Green Web #23903C, Crimson UA #A42834, Lincoln Green #155724, and Persian Plum #721C24. other colors not mentioned are border color and box shadow. i used these colors to match the theme of the website.

Wireframes

Technology

Languages used

  • HTML5
  • CSS3
  • JavaScript

Others

  • Am I Responsive - - online tool used to create mockup to present responsive design of this project.
  • Coolors.co - used to create color palette.
  • Fontawesome - where i import font icons for this project.
  • favicon.io - generator i use to create favicon for this project.
  • Google Fonts - where i import and use font-style for this project.
  • Git - Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  • Gitpod - IDE used to code the project.
  • GitHub - GitHub is used to store the project's code after being pushed from Git.
  • Visual Studio Code for Windows - IDE used to code the project.
  • Unsplash - for the webpage main background image.
  • [Windows Snipping Tool] - used to save the screen shot.
  • [Google developer tools]

Testing

7.1 Code Validation

  • JS Hint - used to check JavaScript codes. HTQ-Jshint

Valid CSS!

Valid CSS!

HTQ-W3CCSSValidator

Index.html

HTQ-HTMLchecker

Lighthouse report

HTQ-lighthouse

7.2 fixed bugs

HTQ-fixedbug

  • i had a problem with the title box where even if i click start qiuz it doesn't disappear, which it should disappear.
  • to solve this problem i simply change the:
    • titleBox_rmv.classList.remove("title_box"); into titleBox_rmv.style.display = "none";
    • titleBox_rmv.classList.add("title_box"); into titleBox_rmv.style.display = "block";

7.3 supported screens and browsers

  • Supported browsers

    • Google Chrome
    • Microsoft Edge
    • Safari

  • Supported screens

    • Such a viewport was obtained from the am i responsive website where it was used to have an appropriate size for responsive design.
    • Apple products:
      • iPad Pro = 1024x1366px
      • iPad and iPad Mini = 768x1024px
      • iPad Air = 820x1180px
      • iPhone 13 Pro Max = 428x926px
      • iPhone 13, iPhone 13 Pro, iPhone 12 Pro = 390x844px
      • iPhone X = 375x812px
      • iPhone 5 = 320x568
    • I used google developer tools to test the responsiveness of given iPad and iPhone devices.

7.4 Test Cases

Test Case
ID		 Test Case
Description		 Test Steps Test Data Expected Result Actual
Result		 Pass/Fail
TC01 Click Start Quiz. 1. Go to https://araldwin.github.io/Project-2/.
2. Click Start Quiz button.		 Click Start Quiz button 1. User must proceed to rules of the quiz.
2. User should see two box, Exit and Continue Box.		 As expected Pass
TC01 screen shot

TC02 Click Exit Quiz
button in Rules of the
quiz.		 1. Continuing TC01 in Rules of the quiz box.
2. Click Exit quiz button.		 Click Exit quiz button 1. User will Exit rules of the quiz box.
2. User will proceed home where the Start Quiz button is, afer clicking Exit quiz button.		 As expected Pass
TC02 screen shot
TC03 Click Continue
button in Rules of the
quiz.		 1. Continuing TC01 in Rules of the quiz box.
2. Click continue button.		 Click continue button 1. User must proceed to Main Game. As expected Pass
TC03 screen shot
TC04 When User select Correct
answer		 1. In Main Game Question number 1.
2. Click Fire(correct answer).		 Click on Fire 1. User score will Increment.
2. Timer will stop after selecting the answer.
3. A tick icon will display when user answer is correct.
4. Next button will appear at the right bottom corner of the box.		 As expected Pass
TC04 screen shot
TC05 Proceeding to the next Question. 1. In Main Game Question number 1.
2. User select an answer.
3. Click Next.		 1. Select Answer
2. Click Next button.		 1. User will proceed to the next question number 2.
2. it will increment Question index.		 As expected Pass
TC05 screen shot
TC06 When User select Incorrect
answer		 1. Continuing TC05 question number 2.
2. Click Virgin(incorrect answer).		 Click on Virgin 1. User score will not increment.
2. Timer will stop after selecting the answer.
3. A cross icon will display when user answer is incorrect.
4. It will display the correct answer with tick icon.
5. Next button will appear.		 As expected Pass
TC06 screen shot
TC07 When User run out of time. 1. Continuing TC06 question number 2
2. Click Next button to proceed to the next question number 3.
3. Let the time run out.		 Let the time run out 1. User score will not increment.
2. Timer display Time left will change into Time Off.
3. The correct answer will display.
4. Next button will appear.		 As expected Pass
TC07 screen shot
TC08 End of the game
Final score		 1. Answer all the 10 question.
2. On 10th question click next button.		 click next button 1. It will diplay a message and quote.
2. Display User total score out of 10.
3. Quit quiz button display.		 As expected Pass
TC08 screen shot
TC09 Click Quit quiz button 1. Continuing TC08 end game.
2. Click Quit quiz button.		 Click Quit quiz button 1. User will proceed to Main menu/Home. As expected Pass
TC09 screen shot

Deployment

  • via gitpod

    • go to and log in to github.
    • after login. on the top right side of the page next to the bell icon click on the "+" and select "New repository".
    • now i can create a new repository. put repository template, repository name, its description and other options, after that just go to the bottom and press "Create repository" and then it take me to gitpod.

  • via github

Credits

  • freepik.com - where i get my 404page image.
  • trivianerd.com - where i get my trivia questions with answers.
  • yesviz.com - where i got all my view port for smart phone devices.
  • codingnepalweb.com - Tutorial watched and used to create this game idea.
  • W3C School - for more knowledge that I learned.
  • stackoverflow.com/ - get ideas how to solve some of problems into my codes.
  • Code institute README.md Template
  • Google images for the background

Acknowledgements

  • Mr. Rohit to my mentor
  • Student Support
  • Slack community
  • Code institute

Disclaimer

  • History Trivia quiz was created for educational purpose only.

About

Portfolio Project no. 2 (JavaScript)

araldwin.github.io/History-Trivia-Quiz/

Topics

javascript html css3

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Packages

No packages published

Languages