Giters

NicolaLampis / hackathon_ci

Hackathon open to all Code Institute students. Quiz Game Webapp that will help people to celebrate St Patrick’s day together, while apart.

Home Page:https://nicolalampis.github.io/hackathon_ci/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

bootstrap5code-institutefrontendhackathonjavascriptpatricks-dayquiz-game


Hello there,
We are the Mean Green Trivia Machine 👋

Happy St. Patrick's Day Quiz

By: LaiMo, Nicola, Simon, Sue, SuzyBee, Tobi, Marina, March 2021
This Project is an Team Event Project organized by Code Institute.

Contents

UX (User Experience)

Project Goals

  • To come up with a website that will help people to celebrate St Patrick’s day together, while apart.
  • We want to make effective use of course knowledge and collaborate together.
  • Make a project that works and is practical.
  • Work together as a team and ensure each team member feels included and has the opportunity to contribute what they are able and we all have fun and learn the skills necessary for collaboration.
  • Give attention to the project presentation and adhere to the theme.
  • Build something awesome that we are proud of as a team. ​

The FEATURES on the website will:

  • Give the user a way to compete with friends and family using an Irish themed quiz game and allow them to keep up to date with our next quizzes through social media pages. ​

We achieved this by:

  • Making a fun story and game with various Irish themed questions.
  • Providing social media links in the footer section of each page.

User Goals

  • The user will test their knowledge on Irish culture, history and geography
  • The user will learn more about Irish culture, history and geography
  • The user will gain points (gold coins) and be able to compare with other users.

​

User Stories

  • As a user, I want the home screen to be simple with a clear indication of what I can do and to be able to navigate it easily.
  • As a user, I want to play the game so I can compete against my friends and win the game.
  • As a user, I want to see the button to Start the game and would like to see the answers as I select them and see the score increase as I progress through the game.
  • As a user, I would like the game to have an Irish theme.
  • As a user, I want to see social media links in the footer.
  • As a user, I want to see my score at the end of the quiz.
  • As a user, I want to know more about St Patrick, so that i have a better knowledge about it.
  • As a user, I want to see my progress, how many questions are left and how many i already answered.
  • As a user, I want to give an answer and have feedback whether it is correct or not. ​

Site Owner Goals

​

  • As a site owner, I want to create an interactive website to present a clean, easy to understand display of information.
  • As a site owner, I want the user to see the social media links in the footer so they know how to interact with us.
  • As a site owner, I want the user to learn some fun and interesting facts about Ireland.​

​ Back to contents

Design Choices

​

Fonts

​ We chose the Lobster font for the h1-h3 and the Roboto font as basic and Sans-Serif as default font. ​

Colours

​ We chose for the website the Irish and St. Patrick's Day colours.
​ ​ ​ Colour palette ​

  • Rich Black FOGRA 39 (#010800) - Black
  • Kombu Green (#273301) - Dark olive green
  • Dark Spring Green (#157347) - Dark green
  • Avocado (#5A7502) - Avocado Green
  • Moss Green (#879E46) - Light Green
  • Green Pigment (#009B4B) - Bright Green
  • White (#FFFFFF) - White
  • Heat Wave (#FF7900) - Bright Orange
  • Emerald (#42D46E) - Emerald Green for the answer correct button
  • Deep Saffron (#F8953E) - Orange for the answer incorrect button

These colours will compliment each other well and provide the user with a distinct, recognisable colour scheme commonly identified with St. Patrick's Day celebrations.

Imagery

​ The background image with the shamrocks for the Body represent the luck of the irish.
The Hero image is the irish flag in a banner design. ​

Wireframes

​ paint. net was used to create the wireframes during the design process. View the wireframes here.

Back to contents

Technologies

​

Languages

​

  • HTML5
    • Used as the main markup language for the website content.
  • CSS3
    • Used to style the individual webpages.
  • JavaScript
    • Used to create the interactive functionality of the website ​

Libraries

​

Tools

​

  • Git
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
  • GitHub
    • Used to store, host and deploy the project files and source code after being pushed from Git.
  • GitPod
    • An online IDE linked to the GitHub repository used for the majority of the code development.
  • CodePen
    • An online code editor and open-source learning environment used to test small sections of code quickly and easily.
  • Visual Studio Code
    • A locally installed IDE connected to the GitHub repository for when there was no internet connection to use Gitpod.
  • Font-Awesome
    • Used for icons to enhance headings and add emphasis to text.
  • Google fonts
    • Used for the website fonts.
  • Coolors
    • An online tool used to choose the website colour scheme.
  • Am I Responsive?
    • A tool for taking a quick snapshot of the responsive breakpoints of the website to visualize how the site will look on different device screen sizes in one place. The resulting screenshot is also used as the README.md logo image.
  • What is my Screen Resolution
    • An online tool to find out the screen resolution on your device used for CSS @media queries
  • paint.net
    • paint.net is a photo and images editor program.
      ​- Favicon
    • Used for icons to enhance headings and add emphasis to text.

Back to contents

​ ​

Features

​ ​

Features Implemented

​

Responsive Design

​

  • Responsive mobile first design using a Bootstrap framework.
  • The site format was designed for smaller device sizes such as mobile and tablet devices to give a simple, user friendly display. ​ ​

Interactive Elements

​

  • The main features of the site are:

    • A home page with a welcome message and game start button as a user CTA
    • An interactive quiz with 10 questions per game.
    • A player score counter represented by gold coins.
    • The bank of questions are stored in a JavaScript dictionary for ease of deployment.
    • The questions are a random selection from the question bank to keep the game interesting for the returning player.
    • The questions are all based around an Irish Theme and St. Patrick's Day
    • There are social media links in the footer section on all pages
    • The correct and incorrect answers are shown by colouring the buttons after answering a question. quiz answer buttons
    • The quiz proceeds to the next question after a short time delay when the previous question has been answered.

  • Additional Site features:

    • A friendly HTTP 404 Error landing page for site visitors to see if a requested page is unavailable or cannot be accessed.
      • The page provides a button to click to return the visitor to the homepage. ​ 404 Error ​ ​

Future Features

​

  • This small app has the potential to be expanded with additional features:
    • Further questions added in a JSON file
    • 2+ player games
      • Add in Player's names

​

Site Construction

​ ​

Page Layout

INDEX.HTML

  • Body

    • The page contains a welcome message and game start button index-body

  • Footer

    • The footer section contains the social media links index-footer

​

GAME.HTML

  • Body
    • The page contains the main game functionality

      • The Question

      • The 4 answer submission buttons containing the answers

      • The gold coins score counter

      • The Quit Game and New Game buttons game-body

      • The quiz answer buttons show the correct answer to the user quiz-buttons

​

Construction Table

​ ​

Site Page Page Section JavaScript File
game.html Answer Buttons script.js
game.html Questions script.js
game.html Pot of Gold score counter script.js
​

​ ​Back to contents

Development Lifecycle and Task Allocation

  • The Team is made up of all experience levels from those who have only just started the course, right up to Alumni.
    • Our first task was to figure out at which level everyone is and how much time each of us has.
  • Our team is Suzy, Tobi, Laith, Nicola, Simon and Marina
  • We split all the tasks between us based on our individual experience levels:
    • Suzy came up with this great quiz idea and wrote all the questions.
      • She created a huge part of the README including the User Stories
      • She also worked really well with Nicola, Tobi and Laith on the coding.
    • Marina worked on the website layout ideas
      • She created the wireframe, the design and game styling and took care of finding all the content images.
    • Simon helped us to get it set our team project on GitHub.
      • He provided us with everything what we need for our dashboard
      • Explained how to work with Forked repositories, and helped us patiently when we had trouble with fetching and merging branches as well as other queries and troubles.
        • We would be lost without him, or at least we wouldn't have made it so fast!
    • Tobi was behind creating the interactive game functionality in JavaScript and managed to solve the JSON file import (which was just awesome).
    • Laith and Nicola worked on creating the main website and supported Tobi with the JavaScript; linking it all together.
      • A big thank you to Nicola who hosted the master branch on his GitHub account and had all the work to do with the pull requests and merging as well as having to fix all the inevitable merge conflicts.
    • Simon and Nicola did all the unit testing and bug reporting.
  • We had a fantastic team spirit and wish you could all see the slack channel conversations and collaboration!
    • We kept each other permanently up to date.
    • Helped each other where we could and what each was able to help with.
    • Every single one of us gave 100% and more to make sure that this website will be:
      • Easy to understand and simple to use.
      • A lot of fun to play.

Back to contents

Project Management

​ GitHub Projects are used to organize the planning and development of the website. Three GitHub projects are used to manage different aspects of the site development:

  • Steal the gold
    • Manages all project tasks and files including Documentation, HTML, CSS & JavaScript. ​ The Projects are created using the following GitHub templates:
  • Automated kanban template for the Steal the gold project ​ The following kanban project cards are used to manage the tasks:
  • Start - this card is used to capture ideas for project tasks.
    • New issues and pull requests are automatically added to this column using project card automation options.
  • In Work - this is the list of tasks currently in work.
  • Finished Tasks - completed tasks ​ ​ Markdown syntax is used to create "To-Do" list style checkboxes by adding - [ ] for an un-ticked checkbox and - [x] for a ticked checkbox on cards as a way of splitting a single complex task into a list of steps to be completed. ​

GitHub Projects - Development ​

Back to contents

Version Control

Version control for this repository is managed within GitHub and Gitpod using separate forked repositories for each team member.

Each member synchronised their own GitHub repositories by adding an additional remote named upstream linked to the team's main GitHub Repository by entering the following steps Git commands:

git remote add upstream https://github.com/NicolaLampis/hackathon_ci.git
git fetch upstream
git merge upstream/master
git push

The following describes a typical Team Member's forked repository branch structure:

  • Master - this is the default branch and the source for the repository deployment.
    • Documentation - this branch is used for updating the README.md and testing.md documentation only.
    • Development - this branch is used as the main working branch for the website development
    • Each individual bug fixes are raised within their own separate branches using the naming convention <GitHub Issue ID Number>-<bug fix description> e.g. branch name 12-correct-navbar-links ​ The following workflow steps are used to create and update branches within Gitpod and to push changes back to GitHub. ​ ​

Gitpod Workspaces

  1. Open Gitpod from Github using the Gitpod button. This needs to only be done once at the start of the project.
  2. Start the Gitpod Workspace which opens an online IDE editor window. ​ ​

Branches

  1. For changes to be made to any documentation files, the git command git checkout documentation is used to checkout and switch to the documentation branch.
  2. For changes to be made to other files under normal site development, the git command git checkout development is used to checkout and switch to the development branch.
  3. To create a new branch for bug fixes, use the git command git checkout -b <branch-name> to create and switch to the new branch. ​ ​

Working within a branch

  1. New or modified files are staged using the git add . command
  2. The changes are committed using git commit -m "<commit message>" command.
  3. If the changes are in a newly created branch, the committed changes are pushed from Gitpod to GitHub using the git push --set-upstream origin <branch-name> command as there is currently no upstream branch in the remote repository.
  4. For branches that have already been synchronized, the committed changes are pushed from Gitpod to GitHub using the git push command. ​ ​

Merging branches in GitHub

  1. Opening the repository in Github, a new pull request is created for the updated branch and assigned to its related Development, Development - JavaScript or Bug Fixes project.
  2. The changes are reviewed to ensure there are no conflicts between the updated branch and the Master branch.
  3. The changes are then merged into the Master branch and the merge request is closed. The Project entry is automatically moved to the Done card. ​ ​

Update Gitpod with the latest GitHub commits

  1. To update Gitpod with the latest commits From GitHub, the git checkout master command is used to checkout and switch to the master branch.
  2. Use the git pull command to update the master branch and reset the pointer.
  3. Now switch to the other branches in Gitpod using the git checkout <branch-name> command and use the git merge origin/master command to update each branch in turn.
  4. Use the git push on each branch to update the relevant GiHub Branches to the same commit as the Master branch.
  5. Repeat steps 3 - 17 regularly to ensure updates are saved and correctly version controlled in GitHub.

Pull Requests

  1. To update the upstream remote repository, each Team Member creates a pull request from the their forked master branch (origin/master) to the upstream Team repository (upstream/master)
  2. The pull request is reviewed and any merge conflicts are resolved before merging into the upstream master branch.
  3. Team Members must then fetch the latest commits again to their forked repositories using the following Git commands:
git fetch upstream
git merge upstream/master
git push

​Back to contents

Testing

​

  • Testing information can be found in a separate TESTING.md file. ​

Back to contents

Bugs

​

To manage bugs and issues tracking, the default GitHub bug_report.md template) has been created and activated within the repository settings Features > Issues section. All new bugs and issues are tracked within the GitHub repository Issues section . Open issues are managed within the [GitHub Projects section](project GitHub repo URL/projects/projects.

​ Each branch is then merged into the master branch using a pull request that is linked to the open issue. Once merged, and the bug report closed, the branch is deleted. ​ Fixed bugs and issues are marked as closed. ​

Back to contents

Deployment

​ The website was developed using both Gitpod and Visual Studio Code and using Git pushed to GitHub, which hosts the repository. I made the following steps to deploy the site using GitHub Pages: ​

  • Opened up GitHub in the browser.
  • Signed in with my username and password.
  • Selected my repositories.
  • Navigated to NicolaLampis/hackathon_ci.
  • In the top navigation clicked settings.
  • Scrolled down to the GitHub Pages area.
  • Selected Master Branch from the Source dropdown menu.
  • Clicked to confirm my selection.
  • Steal the Gold is now live on GitHub Pages. ​

Running Locally

​ Cloning from GitHub: ​

  • Navigate to hackerthon-ci.
  • Click the Code button.
  • Copy the url in the dropdown box.
  • Using your favourite IDE open up your preferred terminal.
  • Navigate to your desired file location. ​​
gh repo clone NicolaLampis/hackathon_ci

​ Back to contents

Credits

​

Images

​ The background image, the irish banner and the Shamrock image are from the website pixabay. ​ ​

Colour

​

  • The colour palette was identified on Coolors ​ ​

Inspiration

​ The following websites were used as the starting point and inspiration for creating the HTML Canvas clock code:

  • Federvgh MS-2 Project MS-2 Quiz Game
  • FastWeb Fun St. Patrick's Day Quiz ​

​

Acknowledgements

​

​The team thanks Sue for her support, encouraging us along the way

​ ​ ​

About

Hackathon open to all Code Institute students. Quiz Game Webapp that will help people to celebrate St Patrick’s day together, while apart.

https://nicolalampis.github.io/hackathon_ci/

bootstrap5code-institutefrontendhackathonjavascriptpatricks-dayquiz-game

Languages

Language:HTML 46.6%Language:JavaScript 24.0%Language:CSS 19.2%Language:Shell 5.2%Language:Dockerfile 5.0%