Warhammer 40.000 Quiz

Click here to go to the Live Project

Welcome to my first JavaScript project!

PLEASE NOTE this project is quite small in scope and size, because it is a fallback project.

My initial JavaScript project can be found here: KILL TEAM Helper Repo KILL TEAM Helper LivePage

It works! But during development, I used a tutorial that cannot be easily expended with the functionality that I wanted and the final results is lacking in certain features required by Code Institute.

After careful consideration and input from friends, I decided to reduce the scope and produce a barebone, but fun, Quiz for Warhammer.

I hope you enjoy it!

Table of contents

• Warhammer 40.000 Quiz
  • Table of contents
  • Planning
    • Site Owner Goals
    • User Stories
  • Features
    • Used Technologies
    • Design
  • Testing
    • Manual Testing
    • Validation and Issues
      • HTML
      • CSS
      • JavaScript
    • Bugs
  • Deployment
  • Version Control
  • Development Process and Commands
  • Clone and Fork the Repository
    • Clone the Repository
    • Fork the Repository
  • Future Enhancements
  • Credits
  • Finished Product

Planning

Site Owner Goals

• As a site owner, I want to enhance my JavaScript Skills
• As a site owner, I want to provide my friends with a cool gimmik website for our favorite hobby

User Stories

• As a user, I want to test my knwledge on Warhammer and Games Workshop
• As a user, I want to compare my knowledge of Warhammer with others

Features

Warhammer 40.000 Quiz is a small quiz created in JavaScript with a bit of HTML and CSS for optics, that test your knowledge on Warhammer 40.000 and Games Workshop.

The Quiz includes four questions as well as a detailed sumary page giving the user the correct answers after the quiz.

The Quiz loops back to the start for the user to complete it again.

| |

Used Technologies

• HTML: Hyper Text Markup Language
• CSS: Cascading Style Sheets
• JavaScript JavaScript

Design

The Design is completely responsive and should work well on all common devices. The measurements are different for eacht viewport when needed and -when possible- the CSS relies on relative measurements (min and max) and not absolutes (i.e. px)

Aestetics and Design is completely utalitarian and fuctional due to time constraints. It is the JavaScript that counts.

Testing

Manual Testing

• Manual testing was used during the entire development proccess.
• Testing was done on multiple Devices and Viewports
  • 4k Monitor
  • 1080p Monitor
  • IPad Air 4.Gen
  • iPhone 13
• Build in Developer Tools in Microsoft Edge and Google Chrome where used for debugging

Validation and Issues

HTML

index.html

HTML was validated using the W3C Markup Validation Service

Result: No errors found.

CSS

CSS was validated using the W3C CSS Validation Service.

Result: No errors found.

JavaScript

JavaScript was validated using the JSHint.

Result: No errors found.

However, the validation returned 29 Warnings in regards to either ES6 Version or the Mozilla Browser.

Bugs

No known defects remaining.

Deployment

Code Institutes Guidlines for deployments are used and recommended:

1. Open the repository and go to the Settings tab.
2. Navigate to the Pages tab in the left menu.
3. Choose Deploy from a main and select the according branch, main in my case.
4. Click save. The link to the deployed website can then be found in the repository on the right menu under Environments.

The link to my live site is: Warhammer Quiz

Version Control

• GitHub is used for Version Control.
• There is only a single branch main used.

Development Process and Commands

• Using the template provide by Code Institute as basis gitpod template.
• I used VSCode and via GitPod and tried to maintain meningfull and regular commits (i.e. features, bugs fixes, etc...).
• Sometimes commits where commited as temporary if the code was too big to push at once.
• Each Git Commit deployes after a short delay directly als to GitHub Pages.

Clone and Fork the Repository

You can easily clone or fork the Warhammer 40.000 Quiz repository to make changes or use it as a reference. Follow the steps below based on your operating system:

Fork the Repository

1. Visit the repository on GitHub: Warhammer Quiz.
2. Click the Fork button in the top-right corner to create your own copy of the repository under your GitHub account.

Clone the Repository

The repository has a single branch, with code committed sequentially for clarity. It can be forked or cloned for further development.

Future Enhancements

To further improve the typing game, I would add the following features:

• More Content: Include more Questions (up to 30).
• Score: Include a User Score as a number.
• Difficulty Level: Introduce three difficulty levels of questions.
• Pictures: Include images to the questions.
• Highscore: Include a Highscore with user names.

Credits

• My Neighbor for CSS Help.
• Code Institute Students and Alumnis for JavaScript support.
• Quiz Tutorial.
• Games Workshop Favicon.

Finished Product

Screenshots can be found below.

Thank you for reading this. I hope you enjoy my work!

Author: Malte M. Boettcher