Potterville is a brief insight into magical Harry Potter series. The quiz app is built using HTML5, CSS3, JavaScript for the Milestone 2 project of Code Institute's Full Stack Development diploma.
Live Link: https://hennasingh.github.io/Potterville/
I have always been fond of the Harry Potter book series. The books have a way of giving a magical pleasant feeling. I have had a Trivial Pursuit game (bought from London Airport) for a while and thought of making a more fun digital version of it.
The project has no prospective client, it is built for fun and engagement and learning purposes.
User Stories
- I want to be able to understand the purpose of the site.
- I want to be able to choose categories within Harry Potter series.
- I want to be able to challenge myself and time my game.
- I want to be able to see my magical quotient at the end of the game.
- I want to be able to see magical items I collected.
User Goals
- Play a simple adventure game that is fun and engaging.
- Player earns a magical item on each correct answer
Site Owner Goals
- Create a fun, interactive and engaging game.
- Design the game to be visually appealing.
- Add an extra challenge for Harry Potter fans aka Potterheads.
- The site is responsive and easy to navigate.
This took a bit of time in figuring out, it was a continuous development in this as I progressed in my javascript learning. The initial setting is to have 3 pages but this may change as I develop the working version of the website:
- Welcome Page: Introduction to Potterville and rules of the game
- Game Page: The main quiz game, that starts with category options and shows spells earned on correct answers
- End Page: Game Over Page showing magical quotient and a link to restart the game.
The quiz app does not have an elaborate navigation route. The landing page shows the rules and introduction to potterville. The button on the page redirects to the category options and game navigates using the links and then scoreboard is shown at the end.
The wireframes for mobile and desktop were created using Balsamiq. These were the original ideas but they changed as I learned and progressed in the actual development of the quiz. Some of the features will be implemented in future versions.
Desktop Wireframes
Phone Wireframes
Font suggestions were taken from chatGPT. Harry Potter font was downloaded from font-space while MedievalSharp font was taken from Google Fonts.
Color Scheme suggestions were taken from Coolers on uploading the Hogwarts background image.
Color Palette
The site header "Potterville" along with the sub-heading "Trivial Pursuit" appears on top of all the pages and in all screen sizes
The site footer is plain text showing the author of the website and appears on all pages in all screen sizes
The site landing page shows 2 accordion pannels and a button to redirect to game screen.
Desktop View of Landing Page
Responsive View of Landing Page
The site game page hides/unhides container divs as one progresses in the game.
Choose Category Container (Desktop)
Choose Category Container (Mobile)
The click on the category above takes to the quiz questions in that category. If the timer is enabled, it is shown on the right. The page also has a quit button to go back to the landing page. The page offers audio to play in the background.
Game Container with Quiz questions and input answer (Desktop)
Game Container with Quiz questions and input answer (Mobile)
The game automatically gets over at the end of the timer and goes to the end page.
Quiz Container with the timer enabled (Dekstop)
This page display details on the final score achieved. Magical Items are granted for every correct answer. Magic IQ is calculated based on the items collected. If timer is enabled, you are declared a Potterhead. The page displays a winning music.
Score Page (Desktop)
Score Page (Responsive)
This is a custom page that appears if user types incorrect url and redirects to the main page on click of the button.
404 Page
-
I would like to add a battleground along with answering the quiz questions. Each spell earned can be used to hit the enemy to reduce their power, as it shows in the design wireframe.
-
The website will take user details (name) and offers to sort into house using Sorting Hat as per the design wireframe.
-
There will be a restriction to play the same category again.
-
User scores will be saved and a leaderboard will be shown.
The accessibility tests are included in the testing section below. In addition to that
- All html pages use semantic HTML headings.
- Aria-labels are used where necessary (label, inputs)
- legend description is used for fieldset
- Color-contrast for foreground and background meet WCAG standard guidelines.
- HTML5
- CSS3
- JavaScript
- Git/Github - For version control and deployment.
- chatGPT - For content on description, and css animations.
- cwebp - For converting images from jpg/png to webp formats.
- Balsamiq - For designing wireframes for desktop and mobile.
- Font Awesome - For icons in the footer, magic wand and timer challenge.
The testing details for the website can be found in testing.md
The website is deployed using Github Pages functionality provided by Github. The steps to follow are:
- Create a Github account if you dont already have one
- The repository for Potterville was created using a template provided by Code Institute. This can be found on the repository title here.
- Go to settings tab on the menu bar of the repository.
- In the left section, under Code and automation, click on Pages.
- Under the title "Build and deployment", select the source: Deploy from a branch.
- Under the branch section below that, select /root folder and save.
- Come back to Code section of the repository. Give a few minutes and refresh the page. You will find Deployments section generated the right side with a URL to the deployed site.
You can clone the project to deploy it locally on your own computer
- Navigate to the project repository
- Click on green "Code" button and local tab as shown below:
- There are 3 methods provided to clone 'HTTPS', 'SSH',or 'Github Cli' that requires you to copy the repository link and type
git clonein your terminal (mac) or command prompt (windows) in the chosen directory. - The 4th option requires you to install Github Desktop and you can open the repository in your chosen local directory.
- The other option is to Fork the repository as shown in top right of the snapshot above. This will create a copy of repo in your own Github and you can make changes making this repo as a starting template.
- Accordion - W3C Schools - For logic on Accordions
- Web Dev Simplified - For quiz container logic
- Stack Overflow - For set interval function
- Anthony's Code - For question sorting and removal logic
- Text Shadow - W3C Schools - For text shadow on header texts to improve color-contrast
- Abigail Harrison - Webinar on Meta Tags - For open graph meta tags
- Stack Overflow - For background transparency layer using linear-gradient
- chatGPT Used to generate landing page details
- Hasbro Gaming - For Harry Potter Trivial Pursuit questions
- Henna Singh: All other content created by the developer
- UI.dev Used to generate the responsive image on top of the readMe file
- Wizarding World - For Hogwarts Castle background
- Icon Finder - Triwizard Cup Favicon and Sorting Hat vector
- ClipGrab - used to download Harry potter music from youtube
- You Tube - For Harry Potter Music
- font-space - For HarryPotter font
- Google Fonts - For MedievalSharp font