nkpe / flash-quiz

A quiz to test the knowledge of beginner climbers.

Flash-Quiz

Designed to test basic knowledge of best climbing practises and techniques of new climbers.

UX

Overview

Bootstrap used to achieve a clean, minimal and easy to use layout. The questions and answers are clear to the user.

Features

All Pages

Bootstrap components used:

• Nav Bar
• Container Fluid - used on the main area, and each fieldset, of the webpage for responsive design.
• Rows & Columns - with responsive class (such as xl) to create the layout and ensure the layout is responsive.

Technologies Used

• HTML 5 - used to create the basic content of the website.
• CSS3 - used to add custom styling to the content of the webpage.
• Bootstrap - used to create the header and navigation bar and provides modal features. The bootstrap grid provides responsive layout to the website as a whole.
• Bootstrap Icons - used to render GitHub icon in footer and the how to button within the header.
• JavaScript - heavily used for the validating the correct answer. The correct answers are defined by a class, ensuring the quiz is easy to scale up.
• Git - this was used during production to efficiently commit and push changes to the GitHub repository so no code could be lost.
• GitHub - this was used to create and manage a remote repository which holds all commits and pushed from Git. I made uses of the repository branches to separate and track working changes, in case of bugs, before committing new changes to the master branch.

Deployment

Start of project

At the start of the development I created a repository on GitHub and cloned a local copy to my machine. To do this I followed these steps:

1. On GitHub webpage I went to 'your repositories' page and clicked 'new' to create a new repository for this project called 'Pairs-Game'.
2. I went into the new repository, clicking on the green 'code' button, I selected the 'download ZIP' option from the dropdown.
3. Once the ZIP folder had downloaded, I saved it in a relevant place on my machine and create the file directory structure.

Development

During development I regularly used the git command line tool to create branches, push my code to the remote repo and manage commits. Once a large code block had been added I used GitHub to create pull requests to merge branches into the main branch. Some commands I used were:

4. git add . (to add all modified files to the staging area)
5. git commit -m "" (to commit files with a message)
6. git push (to upload the code from the local repository to the remote repository)
7. git cherry-pick (with a commit hash, to copy a commit from one branch to another)
8. git pull (to bring remote changes into my local repository)

Deployment

The page has been deployed to GitHub pages for hosting - Flash Quiz hosted on GitHub pages.

I followed the following steps to deploy to GitHub pages:

1. Opened the repository on GitHub
2. Under 'settings' I found the 'Pages' section in the list on the left.
3. Under 'source' I chose the master branch and ensured the '/root' folder was selected.

As I deployed the main branch to GitHub pages at the start of my project, it is kept up to date with each pull request to the main branch.

Repo Link

Flash Quiz Repo.

Running Code Locally

The code can be run locally by downloading from my GitHub repository following these steps:

1. Click on the green 'Code' button.
2. From the drop down menu select 'download ZIP' or select the relevant clone option.
3. If downloading ZIP, this should be unzipped before running the index.html file in a browser.

Credits

Code

• Adding name / label to several checkboxes

• Contains Method

Media

Image for Favicon