Skyline Quiz App

The Skyline Quiz App is a web-based quiz game that challenges users' knowledge of city skylines from around the world. It's a fun and interactive way to test your familiarity with iconic cityscapes.

Features

• Randomly generated questions of city skyline images.
• Progress tracking with a visual progress bar.
• Score tracking that display result at the end of the quiz.
• Validation to prevent empty answers

Existing Features

• Landing Page

  • Background image with gradient overlay for a smooth transition between image and background
  • Straight forward view and easy to understand

• Question view

  • Single choice question
  • Straight forward layout and easy to understand question navigation

• Result view

  • Single choice question
  • Straight forward layout and easy to understand question navigation

Features Left to Implement

• Alert message to user when answer choice is missing
• Retake quiz button on the Result view
• Randomize question to present in array
• Progressbar to be clickable and allows navigation between questions Progress items style
• Feedback window when answering correct/incorrect to provide more information
• Hover state on buttons
• Add favicon images

Technologies Used

• HTML
• CSS
• JavaScript

Getting Started

To run the Skyline Quiz locally:

1. Clone this repository to your local machine:

   git clone https://github.com/pernilla_strandberg/skyline-quiz.git
   

2. Open the index.html file in your web browser to start.

Testing

App is working nicely when testing it on different sizes in chromes developing tool.

Validator Testing

• HTML - No errors - https://validator.w3.org/
• CSS - No errors - https://jigsaw.w3.org/css-validator/validator.html.en
• JS - Minor issues with citation/quotation marks and unused variables - https://jshint.com/

Unfixed Bugs

No bugs found.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • 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 - https://pernilla-strandberg.github.io/skyline-quiz/

Credits

assets/images

The skyline photos used for background picture and questions are from Pexels:

Image 1 Photo by Aleksandar Pasaric: https://www.pexels.com/photo/landscape-photograpy-of-city-during-night-692103/

Image 2 Photo by Andrea De Santis: https://www.pexels.com/photo/lighted-city-buildings-near-body-of-water-at-night-10998027/

Image 3 Photo by Aykut Kılıç: https://www.pexels.com/photo/a-stunning-view-of-the-bosphorus-bridge-at-istanbul-during-the-night-7386650/

Image 4 Photo by Francesco Ungaro: https://www.pexels.com/photo/green-leafed-trees-near-concrete-buildings-409127/

Image 5 Photo by Kin Pastor: https://www.pexels.com/photo/marina-bay-sands-singapore-777059/

Image 6 Photo by Luciann Photography: https://www.pexels.com/photo/white-concrete-bridge-3566191/

Image 7 Photo by Nextvoyage: https://www.pexels.com/photo/photography-of-high-rise-buildings-1095826/

Image 8 Photo by Pipo Stoltz: https://www.pexels.com/photo/city-skyline-across-body-of-water-13071531/

Image 9 Photo by Roberto Nickson: https://www.pexels.com/photo/white-and-brown-buildings-2709964/

Image 10 Photo by Umar Mukhtar: https://www.pexels.com/photo/scenic-view-of-city-during-evening-1538177/

Background image Photo by Pixabay: https://www.pexels.com/photo/shanghai-china-cityscape-302820/

Enjoy playing the Skyline Quiz!