Welcome to SCIENTIA geographia. A website developed to Test your Geography knowledge.
The site is a fun but challenging quiz.
It is target audience is assumed to have a good level of general knowledge or have studied geography as part of their academics.
The site's design is informed by the users stories and aims to provide:
- An elegant yet simple and intuitive interface
- A place to input a name to tailor their unique results
- Be able to discern what question they are on
- Give a visual cue to how much time is left to answer the current question
- Use a simple mouse click to select the answer to each question
- Provide the option to change their mind before moving to the next question
- Get feedback during the quiz on how they answered the previous questions
- At the end of the quiz to get a bespoke message on how they performed
- Have the option to play again
- Have a means of viewing the developer's other work and contacting them via LinkedIn
Wireframes were created using Balsamiq desktop.
As the project developed other features were added to realise functionality. These included:
- A call to action button to begin the quiz
- A name input section before the first question
- A replay button in the results section to easily navigate to the beginning of the page
The color scheme was derived from a piece of family tartan passed through Adobe Color
To meet WCAG 2.0 criteria, the generated color scheme was then passed to eightshapes.com to generate an accessibility table.
Extensive use was made of flexbox to position elements on the page.
Were possible classes were applied from within the html to apply most of the CSS styles. This reduced the size and complexity of the CSS used and should aid maintainability of the site.
<section id="quiz" class="flex-column flex-center rounded-border max-width">
</section>.rounded-border {
border-radius: 10px;
}For ease, the site is limited to one page as this is my first time using Javascript (JS) within the DOM. Given current limitations, I was still able to activate the page by showing/hiding different sections by adding event listeners to specific elements. This gives the appearance of the site being more complex than it actually is.
function startNewGame() {
landingSection.style.display = "none";
newGameSection.style.display = "inline-flex";
playerName.focus();
}
playQuizButton.addEventListener("click", startNewGame);Further development implementations could be:
- A leaderboard (initially using JSON/localStorage())
- An option for the user to change the site color scheme. JS can easily do this by adding/removing classes on targeted elements. Color classes are present in the css for this eventuality.
- A facility to print a certificate
- Quiz length could be modified. This would require a redraw of the
#score-trackerelement using template literals. The number of child elements would reflect thequizLengthvariable in the JS file.
The site follows a simple one page design therefore an anchor tag isn't required on the header.
No menus are needed as all navigation is handled by JS.
An alpha value of 0.85 is used to help blend the heading into the background image set as a body property. An old fashioned globe implicitly tells the user the site is geography based.
Note the use of Latin and two contrasting font styles, one modern and the other cursive. This is to convey that Geography is a modern science grounded in classical knowledge.
The footer provides access to the developer's Github repos and LinkedIn profile via the favicon links. These open in new tabs as per best practice.
Their goal is to allow others use the code in their own projects and have a means of contact.
This section is a launch point for the user and is minimalist by design. The call to action button acts as a signpost to begin the quiz.
The name section has a few useful features:
- Autofocus on the name input element to save the user having to manually select it. This is useful on mobile devices. The blinking cursor shows the application is ready for input.
- Two buttons to either start or leave quiz and return to landing section. This gives the user added control before beginning the game.
- An error handler that applies a red border to the input box in the event where no player name is provided.
- An additional event listener has been added to the input element. Pressing Enter or Go on a mobile device keypad has the same result as clicking the Start button.
Features include:
- An indicator stating the current question number out of the total quiz length
- A countdown timer with intuitive favicon showing a person and clockface
- A countdown bar for the more visual user
Features include:
- One question and four multiple choice answers
- The selected answer has a different format
- The user can change their mind and select a different answer before clicking next button to move to next question (many similar quizes lack this feature)
- Shuffle functionality uses the Fisher/Yates method. This consistently varies our questions each time the quiz runs. This was noted by regular players during testing.
Ten circle divs are hard coded into the html to provide the user feedback on their progress / current performance.
Elements are color coded and mean the following:
- Yellow shows the question the user is currently on. This supplements the question number display in the quiz info bar above the question
- Gray shows the user didn't confirm an answer on the previous question before time ran out.
- Red shows a wrong answer
- Green shows a correct answer
The results modal provides users with:
- The total score out of 10
- A bespoke message comprised of the player's name with text feedback based on their score.
- Links to notable geographers through the ages to give the user an extra learning boost.
- A REPLAY button
See TESTING.md for bugs and fixes across popular browsers (2021).
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab.
- From the source section drop-down menu, select the Main Branch.
- Once the Main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - https://stevenweir038.github.io/Scientia-Geographia-Quiz/
In order to make a local copy of this repository, you can clone the project by typing the follow into your IDE terminal:
git clone https://github.com/StevenWeir038/Scientia-Geographia-Quiz.git
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
People
My appreciation to my mentor Tim for his approachability, knowhow and assistance in refactoring. Being methodical and trying new things often leads to better solutions.
Also I'd like to thank my fellow students and alumni at Code Institute for sharing their insights and approaches via Slack.
Technologies Used
Wireframes created using Balsamiq
Images on README compressed using TinyPNG
Use was made of CSS root variables and Flexbox to set colors, positioning and enhance code reusability.
To track issues and progress during the development stage, I made rudimentary use of the Issue and Project tabs on Github. Linking issues found/solved into the project Kanban made the project more manageable. Through this exercise I have learned that setting priorities and compartmentalising smaller areas makes the development process more streamlined and less stressful.
Citations
Credit goes to Mike Bostock as I used some of his code in my project. His explanation of the Fisher/Yates method to randomly shuffle an array is one of the best I have read to date.
Sites
Britannica. An inspired site which gave me the courage to build an in-quiz score tracking system into my own project.
Questions are based of my own general knowledge and too many years spent studying maps and documentaries.
External Links Links from the results section are credited to:
Images Body background courtesy of Teahub.
Favicons from Font Awesome.