{"id":28180809,"url":"https://github.com/auxfuse/how-patrick-are-you","last_synced_at":"2026-04-18T04:33:24.901Z","repository":{"id":54137369,"uuid":"344485094","full_name":"auxfuse/how-patrick-are-you","owner":"auxfuse","description":"Shamrock or Shamerock? Let the app help you figure that out!","archived":false,"fork":false,"pushed_at":"2021-03-08T14:53:48.000Z","size":1499,"stargazers_count":0,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2023-07-13T15:49:27.034Z","etag":null,"topics":["bulma","codeinstitute","css","firebase","firestore","hackathon","html","js","march-2021","patrick","saint","teamproject"],"latest_commit_sha":null,"homepage":"https://auxfuse.github.io/how-patrick-are-you/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/auxfuse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-04T13:32:34.000Z","updated_at":"2023-07-13T15:49:27.035Z","dependencies_parsed_at":"2022-08-13T07:20:35.023Z","dependency_job_id":null,"html_url":"https://github.com/auxfuse/how-patrick-are-you","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auxfuse%2Fhow-patrick-are-you","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auxfuse%2Fhow-patrick-are-you/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auxfuse%2Fhow-patrick-are-you/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/auxfuse%2Fhow-patrick-are-you/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/auxfuse","download_url":"https://codeload.github.com/auxfuse/how-patrick-are-you/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459118,"owners_count":22074606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma","codeinstitute","css","firebase","firestore","hackathon","html","js","march-2021","patrick","saint","teamproject"],"created_at":"2025-05-16T03:11:10.869Z","updated_at":"2026-04-18T04:33:19.859Z","avatar_url":"https://github.com/auxfuse.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How Patrick are you?\n\n---\n\n## Table of Contents:\n\n- [What does it do and what does it need to fulfill?](#what-does-it-do-and-what-does-it-need-to-fulfill)\n- [Functionality of Project](#functionality-of-project)\n- [User Experience](#user-experience)\n  - [User Stories](#user-stories)\n  - [Design](#design)\n    - [1. Font](#1-font)\n    - [2. Color Scheme](#2-color-scheme)\n    - [3. Logo](#3-logo)\n    - [4. Wireframing \u0026 Proposed/Implemented Functionality per Page](#4-wireframing--proposedimplemented-functionality-per-page)\n- [Technology Used](#technology-used)\n- [Database](#database)\n- [Features](#features)\n  - [Future Features](#future-features)\n  - [Common styling](#common-styling)\n    * [Navbar](#navbar)\n    * [Footer](#footer)\n  - [Home page](#home-page)\n  - [Quiz](#quiz)\n  - [Leaderboard](#leaderboard)\n  - [Accessability](#accessability)\n  - [Privacy policy](#privacy-policy)\n\n- [Testing](#testing)\n  - [Found Bugs \u0026 Fixes](#found-bugs--fixes)\n- [Deployment](#deployment)\n- [Credits](#credits)\n  - [Special Thanks \u0026 Acknowledgements](#special-thanks--acknowledgements)\n\n---\n\n## Welcome to our Hackathon Project: How Patrick are you?\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/assets/images/logo-alt.png\" alt=\"logo\"\u003e\n\u003c/p\u003e\n\n---\n\n## What does it do and what does it need to fulfill?\n\nThis project is a collaborative effort from team `Callback(Patrick)`, for the March 2021 Code Institute Hackathon. This project is based on the theme of bringing people together during the Covid Pandemic for St.Patrick's Day 2021, as a Quiz with an emphasis on humor and laughter for the whole family comparing the User and their proposed answers to that of the main man himself...aul St.Pat!\n\nThe team consists of the following developers, for which, without them this project would not have been possible:\n\n- \u003cimg src=\"/assets/images/fav.png\" alt=\"logo\"\u003e \u003ca href=\"https://github.com/Jade-Quinn\"\u003eJade Quinn\u003c/a\u003e\n- \u003cimg src=\"/assets/images/fav.png\" alt=\"logo\"\u003e \u003ca href=\"https://github.com/maelou363\"\u003eLindsay Garza\u003c/a\u003e\n- \u003cimg src=\"/assets/images/fav.png\" alt=\"logo\"\u003e \u003ca href=\"https://github.com/kenwilde1\"\u003eKenny Wilde\u003c/a\u003e\n- \u003cimg src=\"/assets/images/fav.png\" alt=\"logo\"\u003e \u003ca href=\"https://github.com/Mr-Smyth\"\u003eEamonn Smyth\u003c/a\u003e\n- \u003cimg src=\"/assets/images/fav.png\" alt=\"logo\"\u003e \u003ca href=\"https://github.com/auxfuse\"\u003eAnthony O' Brien\u003c/a\u003e\n\n### Functionality of Project\n\nThis web application utilises a smaller tech stack then the norm in the form of HTML/CSS/JS/Bulma/Firebase to ensure that the project had ample scope to suit the timeframe available of the hackathon.\n\nThe project encompasses the use of Git \u0026 Github in a team setting using Forks/Branches/Pull Requests/Upstream Pulls etc to allow each developer on the team have some hands-on experience of a team building environment via version control. This allowed for increased security over the main upstream repository, for which this project's source code and is deployed through, and allowed each developer to have singular experience in reviewing/approving/merging Pull Requests as collaborators on this project. Again utilising this approach allowed each of us to bolster knowledge or even learn new things along the way!\n\nFirebase was utilised to host the Questions \u0026 Answers and Leaderboard rankings away from the source code, removing the _ability_ to cheat. A Backend-as-a-Service (BaaS) allowed the projects complexity to be drastically reduced as it removed the time consuming efforts of a bespoke backend and configuring same. Technically outsourcing the responsibility of maintaining and managing a typical backend and allowing us as developers to focus our efforts on the Frontend.\n\nBulma was used as a new CSS Framework for the structuring and layout of the project. It is lightweight, comes with a suite of well written documentation and more importantly does not contain a Javascript inclusion dependency. Which meant we as a team again had freedom to add custom JS to the interactive components needed fortifying our knowledge and skills with the language. The framework is mobile first and works similar to Bootstrap meaning our previous knowledge learned on the course came to great benefit.\n\n[Back to top](#table-of-contents)\n\n## User Experience:\n\n#### User Stories:\n\n_Generic (Guest/Public) User:_\n\n- As a Generic User, I want to be able to view the site on any device I may have, (mobile/tablet/desktop).\n- As a Generic User, I want to have the ability to view the established Accessibility Statement \u0026 Privacy Policy if any.\n- As a Generic User, I want to have the ability to play the game.\n- As a Generic User, I want to have the ability to view a leaderboard to see how I compared against others.\n- As a Generic User, I want to have the ability to navigate between pages seemlessly and easily.\n- As a Generic User, I want to have the ability to play a mobile friendly game to pass some time while on the go.\n\n_Developer:_\n\n- As a developer, I want to create fully responsive app to showcase my skills to a potential employer.\n- As a developer, I want an on-going project I can enhance and improve over time as my skills grow.\n- As a developer, I want to imporve on my existing skills using HTML/CSS/JS.\n- As a developer, I want to use new languages/tools/services to promote and compliment my exisiting knowledge and competencies.\n- As a developer, I want to create secrets and easter eggs in the project adding to the overall experience of the project to the user.\n- As a developer, I want to work comprehensively with Git/Github attributing to my overall competency of this globally used professional version controlling tool.\n- As a developer, I want to work in a team to enhance my communication skills.\n- As a developer, I want the experience of working in sprints with an impending closing deadline giving me the potential to learn proactively to problems as they arise.\n\n#### Design\n\n##### 1. Font\n\nThroughout this project the below fonts are used to promote a friendly and appealing nature. Both fonts are sans serif typefaces, with a backup font of `sans-serif`, in case of any particular font not rendering as expected. They both greatly compliment each other, with \"Luckiest Guy\" giving a 1950s advertisement custom hand lettering feel for our headers and \"Poppins\" bringing a more geometric sans-serif typeface allowing for increased human readability and enhanced eye-tracking on screens.\n\n- Headings - \u003ca href=\"https://fonts.google.com/specimen/Luckiest+Guy?preview.text_type=custom\"\u003eLuckiest Guy\u003c/a\u003e\n- Body - \u003ca href=\"https://fonts.google.com/specimen/Poppins?preview.text_type=custom\"\u003ePoppins\u003c/a\u003e\n\n##### 2. Color Scheme\n\nOur color scheme is inspired by St.Patrick's day and muted tones. Allowing for constrating elements to be defined by the user with ease and promoting good User Experience amongst the site.\n\n- ![#2a3719](https://placehold.it/15/2a3719/000000?text=+) `#2a3719` - Primary color\n- ![#5f6c39](https://placehold.it/15/5f6c39/000000?text=+) `#5f6c39` - Secondary color\n- ![#ddd5ba](https://placehold.it/15/ddd5ba/000000?text=+) `#ddd5ba` - Tertiary color\n- ![#e04b32](https://placehold.it/15/e04b32/000000?text=+) `#e04b32` - Supplementary color\n- ![#cd8741](https://placehold.it/15/cd8741/000000?text=+) `#cd8741` - Supplementary color 2\n\n##### 3. Logo\n\nLogo and mascot were created in Illustrator. The font \"Luckiest Guy` was used along with a palette of greens and oranges in keeping with the theme of St. Patricks day. 'Seamus' the shamrock was created as an additional asset to be included in quiz feedback.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/assets/images/logo-200x200.png\" alt=\"logo\"\u003e\n\u003c/p\u003e\n\n##### 4. Wireframing \u0026 Proposed/Implemented Functionality per Page\n\nWireframes for this project were created using Sketch, for small and large viewports. Each element was structurally planned out before building the project to allow us to build to a plan saving on time and potential bottlenecking via scope creep.\n\n\u003cdetails\u003e\n\u003csummary\u003eWireframes\u003c/summary\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/assets/images/wireframes/desktop_landing.png\" alt=\"desktop landing page\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/assets/images/wireframes/mobile_home.png\" alt=\"mobile landing page\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/assets/images/wireframes/quiz_.png\" alt=\"quiz landing page\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/assets/images/wireframes/results.png\" alt=\"results page\"\u003e\n\u003c/p\u003e\n\n\u003c/details\u003e\n\n[Back to Top](#table-of-contents)\n\n## Technology Used\n\n#### Languages, Frameworks, Editors \u0026 Version Control:\n\n- HTML/CSS/JS ~ core languages used to build this site.\n- Firebase ~ BaaS used to store Questions\u0026Answers and Leaderboard results for population to the site and to itself from the site.\n- Bulma ~ Pure CSS Component Frontend framework for layout and overall fronend architecture.\n- Gitpod/vsCode/PyCharm ~ preferred used editors/IDEs to develop the project.\n- Git ~ installed on local machines or default built into Gitpod.\n- Github ~ used to host the repository and version control the site, aswell as used for deployment of the project.\n\n#### Tools Used:\n\n- W3C HTML Validator / W3C CSS Validator / JSHint ~ Used to check the validity and efficiency of the code base.\n- Autoprefixer CSS Online ~ Used to check for possible webkits required in the applications stylesheet ensuring Cross-browser support.\n- Font Awesome Icons ~ For iconography not custom to the site.\n- Sketch ~ Used to create the wireframes.\n- Illustrator ~ Used to create the custom logos and icons.\n- tinypng.com ~ Used to compress images used throughout the site without affecting image integrity/quality.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"/assets/images/logo-alt2.png\" alt=\"logo\"\u003e\n\u003c/p\u003e\n\n## Database\n\n\u003cimg src=\"https://firebase.google.com/downloads/brand-guidelines/PNG/logo-standard.png\" height=\"100\"/\u003e\n\nGoogle's Firebase was used as a backend-as-a-service. Specifically, Cloud Firestore was used as a Cloud Database. It is a NoSQL, document-oriented database.\n\nIt was used for two collections of data `leaderboard` and `questions-and-answers`.\n\n#### Data Model:\n\nAs mentioned before, two collections of data were stored on Cloud Firestore. Firestore uses JSON model (under the hood) to store it's data and is as follows:\n\n`collection` --\u003e `document` --\u003e `fields`\n\n##### Leaderboard\n\nFor the leaderboard, it only had one Document - Scores. This document contained all user names and their subsequent scores.\n\nHere is how its modelled:\n\n```\n leaderboard { // collection\n     scores: { // document\n        \"John Smith\": 80, // field\n        \"Jane Doe\": 80, // field\n        ..\n        ..\n        ..\n    }\n}\n```\n\nAs scores are added to the document over time, it must be sorted for the leaderboard - this is handled client side in [leadboard.js](https://github.com/auxfuse/how-patrick-are-you/blob/main/assets/js/leaderboard.js) on `line: 22`.\n\n##### Questions and Answers\n\nIt was important to have a backend such as Cloud Firestore to store the Answers as to prevent people from using Dev Tools to find the correct answers. The Questions were stored alongside them for convenience. It had a Document per Question (10 in total).\n\nHere is how its modelled:\n\n```\nquestions-and-answers { // collection\n    questionOne: { // document\n        answers: [ // field\n            choiceOne,\n            choiceTwo,\n            choiceThree,\n            choiceFour,\n        ],\n        correctIndex: 2, // field\n        explained: \"explanation text\", // field\n    },\n    ..\n    ..\n    ..\n    questionTen: { // document\n        answers: [ // field\n            choiceOne,\n            choiceTwo,\n            choiceThree,\n            choiceFour,\n        ],\n        correctIndex: 0, // field\n        explained: \"explanation text\", // field\n    },\n}\n```\n\n## Features\n\nIn the nature of a Hackathon, we wanted to keep it simple, clear and succinct. We advoided adding any unnecessary features that would slow us down such as sign-up / login. We decided storing data for Users between sessions was not a priority and does not effect the overall UX.\n\nThe core features of the Web App are:\n\n- How to Play Drop-Down\n- Navbar Hamburger Menu when at ~1024px width.\n- Quiz and Submit Answers\n- Results Modal after Quiz allows you to submit your score to Leaderboard\n- Leaderboard displays all scores by users, ordered by score\n- Various Easter Eggs planted around the site\n\n### Common styling\n\nResponsive pages containing a site common navbar and footer.   \n\n#### Navbar\n\n**Contains:**\n\n+ site logo as home link.\n+ links to Home, the quiz and the leaderboard.\n\nThe navbar collapses at the Tablet scren size, condensing the menu options into a dropdown menu.\n\n#### Footer\n\n**Contains:**\n\n+ Link to privacy policy\n+ Social media links\n+ Link to Accessibility\n\n### Home page\n\n**Contains:**\n\n+ A styled responsive banner image.\n+ A How to play dropdown instructions meny - with common site styling.\n+ A call to action button to begin the quiz.\n\n### Quiz\n\n**Contains:**\n\n+ A list of 10 questions to judge how like st. Patrick you are.\n+ The questions are supplied to the user one-by-one, as the user clicks and submits his answer.\n+ The scores are then calculated and the user is given a result.\n+ The user is then able to enter their name and add their score to a leaderboard.\n+ oh and theres that thing.\n\n### Leaderboard\n\n**Contains:**\n\n+ A list of the top 10 people who played the quiz.\n+ The data is provided via Firebase.\n\n### Accessability\n\n**Contains:**\n\n+ Accessability details.\n\n\n### Privacy policy\n\n**Contains:**\n\n+ Privacy policy details.\n\n[Back to Top](#table-of-contents)\n\n\n#### Future Features:\n\n- Share functionality for the user to share their score with friends and family.\n- Difficulty setting, dependent on age group.\n- User Custom quiz creation.\n- Sign-up / Login - store past attemps, provide Rewards to be sent to the User based on score\n\n[Back to Top](#table-of-contents)\n\n## Testing\n\n#### Found Bugs \u0026 Fixes:\n\n##### Bulma\n\nAs we were getting familiar with a new CSS Framework - Bulma, we encountered a few bugs that led to some unexpected behaviour related to responsiveness and design.\n\nUsing the `.content` class to contain our ordered list for the leaderboard, lead to some uneven centering of the leaderboard items that can be observed here:\n\n\u003cimg src=\"./assets/images/bug-before.png\" alt=\"bug-before\"\u003e\n\nUsing Dev Tools, we discovered there was some `margin-left` and `margin-top` on the `\u003col\u003e` element. To fix this, we implemented the following style change:\n\n```\n.content ol {\n    margin-left: 0;\n    margin-top: 0;\n}\n```\n\nSaving these changes then fixed the issue as can be observed here:\n\n\u003cimg src=\"./assets/images/bug-after.png\" alt=\"bug-after\"\u003e\n\n##### Firebase\n\nAnother Bug we ran into was related to Firebase, we were encountering the following error message on `quiz.js`:\n\n```\nError: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()\n```\n\nWe were trying to call Firebase before it was initialized due to it being called inside an async task that was not resolved yet. We fixed this issue by implementing the following into `firebase.js`:\n\nAs a safety measure, we also added the following to [firebase.js](https://github.com/kenwilde1/how-patrick-are-you/blob/main/assets/js/firebase.js):\n\n```\nif (!firebase.apps.length) {\n    firebase.initializeApp(firebaseConfig);\n  }else {\n    firebase.app();\n  }\n```\n\nIf there were no firebase apps initialized, it would initialize it, otherwise call firebase.app() to load the methods needed.\n\n##### Navbar\n\nAt approximately ~1024px width, the Navbar Items become a hamburger-style Shamrock. We found that for certain pages the hamburger button would not trigger a drop down navbar.\n\nWe discovered that we needed to include the following to all `.html` pages to ensure navbar was working as expected:\n\n`\u003cscript src=\"assets/js/main.js\" type=\"module\" defer\u003e\u003c/script\u003e`\n\nIt contained the code that would trigger class manipulation on the click event of the hamburger icon.\n\n#### Manual Testing\n\n\u003cdetails\u003e\n\u003csummary\u003eManual Testing\u003c/summary\u003e\n\n| Function                  |                 Browser                  | Result |\n| ------------------------- | :--------------------------------------: | -----: |\n| Homepage Resposivness     | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Quiz Responsiveness       | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Leaderboard Responsivness | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Modal Responsivness       | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Privacy Responsivness     | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Leaderboard Responsivness | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Quiz Submit               | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Modal Score Submit        | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Load Leaderboard          | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n| Navbar                    | Chrome / Firefox / Safari / Opera / Edge |   Pass |\n\n\u003c/details\u003e\n\n[Back to Top](#table-of-contents)\n\n## Deployment\n\nThis application was developed in multiple editors, Gitpod/vsCode/PyCharm, and version controlling was utilised via local (git) and online (github) repository technologies.\n\nDeploying this application was achieved through Github pages by:\n\n- Selecting the Repository from my list in the Github Dashboard.\n- Navigating to \"Settings\" and to the \"Github Pages\" section.\n- From the \"Source\" section, click on the dropdown and select \"main\" branch from the associated list.\n- Once \"main\" branch is selected, the page will auto-refresh and navigate the user to the top of the page with a visual ribbon display detailing, \"Github pages source saved\", indicating the success of the deployment.\n- The link to the website can then be found under the \"Github Pages\" section, with a ribbon notification stating:\n  \"Your site is published at \"https://\u003cusername\u003e.github.io/\u003crepo-name\u003e/\"\n\nTo clone the website:\n\nSelect the Repository from the Github Dashboard.\n\n- Click on the \"Clone or download\" green button located above and to the right of the \"Add file\" button.\n- Click on the \"clipboard icon\" to the right of the Git URL to copy the web URL of the Clone.\n- Open your preferred editor/IDE and navigate to the terminal window.\n- Type `git clone \u003cpaste-clone-url-here\u003e` and press \"Enter/Return\" on your keyboard.\n- This will create a clone of the project for you.\n\n## Credits\n\n[Back to Top](#table-of-contents)\n\n#### Special Thanks \u0026 Acknowledgements:\n\nThis project and the workings of this project was an incredible experience. I truly enjoy getting to know people and learning from them. The level of knowledge and professional experience from my colleagues has been truly inspiring and one I won't soon forget. From a team perspective I couldn't have asked for greater people. Humble, willing with their time and relatable....each person has brought to this team strengths which I lacked both as a developer and as a person and allowed me to situate myself in a position to bolster my confidence and broaden my competencies. Whatever the outcome, I'm proud of us. I am very grateful for this experience, and thank you all for your hard work! 🤜\n-- Anthony\n\n###### \u003ci\u003eDisclaimer: This project was created for educational use only as part of the Code Institute 2021 March Hackathon!\u003c/i\u003e\n\n[Back to Top](#table-of-contents)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/images/logo-alt3.png\" alt=\"logo alternative\"\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauxfuse%2Fhow-patrick-are-you","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauxfuse%2Fhow-patrick-are-you","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauxfuse%2Fhow-patrick-are-you/lists"}