• UX
  • Project Goals
  • User Goals
  • User Stories
  • Designer Goals
  • Design Choices
    • Fonts
    • Colours
• Wireframes
• Features
• Future Goals
• Technology Used
• Testing
  • Issues and Resolutions
• Known Bugs
• Deployment
• Credits
• Acknowledgements

The goal of this project is to create a simple and user friendly quiz game sourcing data from a trivia API to allow for a new constant feed of new questions across various categories whilst removing the requirement to program new questions to keep this up to date. This will give users a reason to come back and keep playing when they have completed the quiz.

The main expected user is a broad field but expected to fall into one of the below criteria

1. A casual user
2. Someone wanting a quiz time waster with little to invest
3. Quiz enthusiast

With regards to other sites online, this site ideally needs to be

1. Easy to use
2. Be quick and easy to start and complete
3. Be able to restart and keep the user engaged consistently
4. Be updated with new content regularly
5. Visually appealing but not too harsh on the eye

1. As a user i want the site to be easy to use with a colourful and welcoming interface.
2. As a user i want to be able to choose what questions i'm given
3. As a user i want to be able to select how hard the questions are so my kids could play it
4. As a user i want to be challenged!
5. As a user i want to come back and know i'm getting new questions not the same quiz over and over.

1. Create a simple but engaging quiz game
2. Minimise continued maintenance with externally sourced quiz questions
3. Be engaging enough to hold peoples attention to users coming back to the site after first use.

Due to the minimal approach to the design i decided to use a single font to allow the content to be consistent throughout, deciding on Solway provided through the Google font service, i felt this offered the user a simple easy to read font allowing content to be easily read on all devices.

After discussing various colour combinations with potential users of this site, i decided upon the following fonts allowing for a vibrant colour pallet with good contract ratios.

• Background color: #2828fc
• Logo & Content: #e6a11c 3.38 contrast score with a black outline allows the content to stand out easily.
• Text and social icons: #d3d3d3 5.01 contrast score over background.
• Text over answers: #000 a standard black text allows answers to be easily read.

As the primary feature of the site is to provide a quiz application to the user it will allow the below options to expand the users experiance to their tastes.

The user is presented with an option to choose a topic of choice from all available topics helping to provide a more tailored game to the user.

For younger users or for people wanting a lesser or harder challenge the user is given the option to select a difficulty of questions from either Easy, Medium or Hard.

As people may want a longer game or shorter game the user is presented with the option to select the amount of questions the app will provide them.

When the user selects an answers the user is presented with a pop up to give the outcome of their answer, this was initially handled through CSS classes however Sweet Alert offered a much better experience for the user.

With the implementation of all of the above features, this allows the user to have a customised quiz to their choice.

As this application develops going forward the future goals for the project are

With the user being presented with a score upon completion, ideally in the future as my skills increase, adding a leader board could help incetivise users to keep playing and trying to being their score or potentially beat a friend

In future i would also like to add a challenge mode which would mix genres and test the user in an initial test of a chosen topic then on general knowledge which could also feed into a leader board system

• HTML
• CSS
• JavaScript
• Bootstrap - to help adapt for numerous input types
• Sweet Alert 2 - Popups for answer feedback
• Google Fonts -
• VSCode - IDE for local development
• GIT - Version Control
• GitHub - to host the repositories for this project and the live website preview

As this was my first time developing a full project using JavaScript & external API data i ensured i was extremely thorough with testing to ensure that all functions ran correctly and data was provided to the DOM as expected without any issues. Taking this approach has helped increase my knowledge of JavaScript and best practice greatly.

As this project is the most complex thing i have worked on, i wanted to ensure that a methodical approach was taken with constant feature testing throughout development. In it's initial state i created dummy html items to ensure data was being passed and displayed correctly and as expected. In future projects i will look to using more automated testing to aid me in my development.

• Upon my initial completion of JS features i was told that my colour pallet was too dull and "boring" which was against my initial plan for the project which led to me implementing a new colour scheme.

• In my initial coding stages i was using the classic XHR HTTP request which i found to be quite cumbersome to develop with which led me to learn and use the newer fetch API method which i found much easier to use and sped up my progress greatly

• When i was initially developing the confirmation of correct answer, i used css classes to clarify with either a red or green to indicate a correct or incorrect answer, speaking with users this was found to be fit for purpose but dull. At this point i made the decision to move to Sweet Alert to allow for a much more engaging feature for the user.

I decided to develop the site based around bootstrap as this is a utility i'm accustomed with and allowed me to make sure the site was responsive to all devices accessing the site. Using this grid system made laying out items quick and easy.

The main aim of my site was to use a simple but vivid colour pallet to help the site feel welcoming and also easy to use, to aid me in this i used bootstrap to help me style elements such as buttons and dropdowns. When choosing a colour pallet i used both contrast-ration.com & colorsafe.co to ensure my choices are easily to read and follow WCAG Guidelines

During my initial development of this project i found an API i wanted to use which provided a wide variety of categories to choose from, as this could change if content creators added new categories, i wanted this to be self populating from the API.

When researching the API documentation, i found the site offered their categories list as a separate API. When loading the site, i used the fetch API to obtain this list which is then sorted and passed across to the DOM.

The categories list drop down operates as expected, populating the API data to the DOM allowing the user to select a required category which then influences the Quiz data pulled from the API.

The main aim of the project was to have a fully playable quiz from the choices provided by the user, sourced from an external API which is being continuously updated.

Looking through the API documentation, I created a variable for the base url to access the data which was then completed using the users choices. When these variables had been defined i used the Fetch API function to get the required data, convert to json and then mapped to allow the data to be accessible and functional. After this the answers were put into an array and randomised to ensure if the question was accessed again in a playthrough the answers weren't displayed in the same place.

The quiz operates as expected, allowing the user to play their chosen quiz in full consistently and without bugs.

At the end of the game the aim was to provide the user with the choice to play the game again with the same choices or to go back to the start to choose a new category/difficulty/question number

When creating the results page i decided the best approach would be to give the user two buttons, one to restart the quiz with the same conditions the other to go back to the start of the game and offer the choices again.

This worked as expected with little effort.

Later in development, one of my users said the initial welcome page could use some extra content, i decided on implementing another API to provide a piece of random trivia

As i had already completed work on my quiz, i used the same methods to fetch the API data and pass to the DOM

This worked as expected, however the API chosen has proven to be unreliable as it's down frequently. This was then replaced with a random Chuck Norris joke until a suitable alternative could be found

During development of this project i encountered a number of bugs which stalled progress, below are examples of the larger bugs and the fixes.

When sweet alert opened to show the result, it continued to iterate through the questions array

To fix this i decided to make sure that when the user selected an answer it would stop accepting inputs until the next question was loaded, this was done by creating a boolean variable which toggled true and false.

This fixed the issue and allowed all questions to be produced as expected.

When the user selected the amount of questions they wanted, it would always give 10 questions.

This was due to the wrong id being reference causing the API to default to 10 questions, changing the variable to the correct id corrected this.

When this was changed the correct amount of questions were provided from the API.

On Apple and Samsung default browsers, the logo was being warped.

To fix this i found an error in my bootstrap html causing the logo element to sit outside of it's container.

The logo in initial testing now scales correctly.

Categories with less than requested questions returned a blank array

Investigating this issue i found that if the page requested more questions than were available in the API it would return a blank array but still giving the ok to the request meaning it wouldn't be caught with the catch error. To fix this, i added an if statement after the data is returned to check if there is any data within the array, if there isn't then it resets the game and gives the user a coming soon pop up.

I don't feel this is the perfect solution to the issue but ensures the game still works as expected.

Triva API has been replaced with a random Chuck Norris joke until a suitable alternative can be found.

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. From the menu items near the top of the page, select Settings.
2. Scroll down to the GitHub Pages section.
3. Under Source click the drop-down menu labelled None and select Master Branch
4. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
5. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

To clone this project from GitHub:

1. Under the repository name, click "Clone or download".
2. In the Clone with HTTPs section, copy the clone URL for the repository.
3. In your local IDE open Git Bash.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type git clone, and then paste the URL you copied in Step 3.

git clone https://github.com/D0nni387/The-Quiz-Hub.git

6. Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub here.

• Did you know base image sourced from clker
• API data source from opentdb
• The main logo was designed by me based on Royaltea font sourced from dafont
• Temporary Chuck Norris jokes sourced from Chuck Norris API
• Loader based on W3 schools lesson w3schools

Simen Daehlin - (mentor) for his invaluable input and advice

and my peers for their input in #peer-review-code

Please note the content and images on this website are for educational purposes only.