The Quiz Project is a mini quiz game -- Master Quiz -- designed for people who are looking for a quick and fun way to test their general knowledge.
Master Quiz main target is the people with a basic and above general knowledge with a predilection for educational topics. The game is aimed to offer a straight forward and easy way to test your knowledge; something that can be done, for example, while waiting at the bus stop.
- A game that can be fun and challenging in the same time.
- A straight forward path to start the quiz, without navigating throught different menus.
- A quiz that will have just educational categories, rather than lifestyle or main stream.
- A way to contact the products developer in case of any suggestions, complaints or any other relevant topics.
- A way to follow the developer on social media. In this case you will be on track with new potential releases and updates.
- A quiz with different outcomes, depending on how good you are in the game.
- As a user I am looking for a quiz game that will challenge me on an intelectual level and will be fast and fun to play in the same time so I can always have handy a fun general knowledge test kit in my pocket.
- As a user I am looking for a quiz app that will be ready to start as soon as I open the app, without making me navigate through different menus before I have the option to actually start the quiz.
- As a user I would like to be able to keep track through social media of the app updates and other future realeses from the developer.
- As a user I would like a quiz app with a simple and clear design in order to focus on the questions rather than to be distracted by other features of the app during the game.
- As a user I would like to have the option to choose from different categories.
- As a user I would like to have different awards at the end of the game depending of my in-game performances.
- As a user I would like to be have the option to restart the game immediately if I fail or if I finish the game, without having to return to the main menu first.
- Providing an interactive quiz in order to attract players and make the users hungry for more future apps from the developer.
- Providing a quick way to start the quiz and an intuitive way to operate the app in order to encourage users to play multiple times in a row.
- Providing a game that will finish quickly, in this way the user can start and finish a game everytime and everywwhere, even if she/he has just a few minutes to spare (like waiting in a bus stop or queing for something).
The goal of the app is to offer the users an easy and quick way to play the quiz. Therefore I have chosen a very simple and clear design without creating for the user potential distractions, especially when in the middle of the game.
I chose to use LATO as a main font for the entire app. In my opinion it is a clear and easy to read font and I believe it is especially important for displaying the questions. In this case the user will be able to quickly read and understand the text, her/his only focus being on the right answer.
I chose to use BALSAMIQ SANS for the main title and the name of the category display, both being h1 elements. Although I wanted to keep a simple and clear design, I believe that for the main titles, having large font sizes, it will still be very easy to read by everyone. In the same time it will give a bit of "artistic" touch to the game, making it more attractive for the eye and "friendly" for the user.
I chose to use MONTESARRAT for the call-to-action buttons because, in my opinion, it is similar to lato (although with small differences) and will help in keeping the uniformity of the game.
I used the TROPHY icon from FONT AWSOME to diplay the player's reward, in this way the user will have a more clear and significant image of the reward.
I have used worm and soft colors for the project as I wanted to protect the user from eye fatigue due to long exposure to bright colors on the screen. This may also result to longer experiences of the user with the game.
-
Primary: Turquoise #7fe7dc. I chose this as a main color because covering most of the viewport at all section, in my opinion, it fits to be a warm and in the same time happy and to a certain level bright color. It will help in keeping the player relaxed and exited.
-
Secondary: Teal #316879. I chose this color for the center container because it is close to the main color, in the same time providing the sufficient contrast in relation to the rest of the page. It makes the app clear and uniform.
-
Tertionary color: Coral #f47a60. I chose this color for call-to-action buttons because it provides the optimal contrast from the rest of the colors, making the buttons stand up on the viewport. As a result it makes the app more intuitive.
-
Text color: Grey #ced7d8. This color makes the text visible in contrast with the dark blue and orange used for the center container and buttons, making it easy to read. It's warm shade of light grey contributes to the uniformity of the app.
I have also used Green rgb(6, 191, 43) and Red rgb(153, 43, 43) for the color of the text displayed when answering the question, as these colors have the same significance pretty much globally.
I have chosen not to use any background images throughout the entire game, because I believe that the combination of colors used is sufficient to keep the player focused and excited, without additional distractions.
I built the wireframes for this project using BALSAMIQ. I've started creating the basic structure, basically the jumbotron central container. Afterwords I've added within it the call-to-action buttons and the texts (questions, titles, etc). Advancing in the project I've decided to add or remove some of the features created initially, therefore the wireframes are slightly different than the final product. I've added 2 extra categories; changed the main title, the text from the true/false buttons, the trophy display; removed email contact form and about section. I also decided not to add any images, preffering to stick only to the colors. You can view my wireframes here. You can also see the wireframes on gitpod in the 'wireframes' directory.
As this was my first time being exposed to an API, my testing was extremely thorough, making sure that I scrutinized every line of code and detail. This also allowed me to learn more in depth on how to work with an API.
-
I have tested my HTML code using The W3C Markup Validation Service. It has found no errors. It has found, however, a couple of warnings. It's found that the type attribute is unnecessary for JavaScript resources at the js folder script tag. I have since removed it. It was also a warning regarding an empty heading at the category title element. This content of this element is to be, of course, set with javascript. No action has been taken.
-
I have tested my CSS code using CSS Validation Service. It has found 1 error. I had a typo when styling the main buttons for large screens - instead of 'width' was 'windows' (probably due to autocorrect). I have since corrected the error.
-
I have also tested the catch method used when fetching the API's data. I have simply removed the URL, in this case the data from the API couldn't be accessed. The error message was diplayed at the game section as expected.
-
Half way thorugh the project, going through my HTML code, at the main section I have noticed I had more than 12 columns in a row. I have corrected the mistake immediately.
-
I have tested numerous times the outcome of the true and false buttons to check if it's corresponding with the question's correct answer. I have done this by simply logging the data 'fetched' from the API to the console. Like this, I had permanent access to all to correct anwers and see if there is a match. This also helped in adjusting the outcome for winning the game at the congratulations section, as I had permanent control on how many mistakes I want to finished the game with, thus testing the diplay of all three trophys. I have removed the console.log function since.
Responsivness:
I knew that the project needed to be fully responsive on all types of screen, especially mobile friendly. In order to accomplish this requirement I used Bootstrap as HTML framework, this option being the one that I'm most comfortable using at the moment. I've carried the testing using dev-tools throughout and a final test after the completion.
Result:
The game is fully responsive as expected, all elements and content fit within their boundaries and are easy to see on any device.
- Five differents sections which are visible only one at a time.
- Display of different quotes, relevant to the category chosen.
- Call-to-action button that allows you to play again immediately as the game finished.
- Animated trophy upon winning the game.
I've decided to use five different sections that will be hidden from the user and only visible when they are 'called'. Only one section at a time is visible to the user. This makes - in my opinion - the game and the navigations through menus more intuitive.
Implementaion:
The sections are hidden or made visible by using the jQuery methods show() and hide(). They are 'called' at certain events during the game. For example, upon clicking on the 'START QUIZ' button from the landing page, the main section will hide and the category section will be displayed.
- I've decided to add this small feature as I believe it makes the game a bit more attractive and maybe - why not - inspire or motivate the player.
Implementation:
- I've created this feature with the help of JavaScript, using a switch statement when the category is chosen.
- I chose to add this simple feature as I believe is providing a more straight forward path to quickly play again a game, without having to navigate throught the main menu.
Implementation:
- I've created a click event for the call-to-action buttons, that will target the button displayed when the game is over or upon winning the game, with the value of 'again'. The click event hides the visible section and displays the category section with jQuery hide and show methods.
- I chose to add this feature because it adds extra dynamicity to the game.
Implementaion:
- I've created an animation in CSS with where I increase - using the transform property - the scale of the trophy icon from 3 to 6. I also rotate the trophy icon from 0deg to 180deg. I've inserted the animation into a class that will be added to the trophy icon in the DOM using jQuery.
In the nearest future I'm looking to include extra features. One of them would be more educational categories to choose from. Another feature would be to connect the quote section to an API and to generate a different quote with each question.
During the development of this project I was fortunate enough not to encounter many bugs.
- I did encounter 1 bug which I mentioned before at the testing section (as it was discovered when I was testing and going over my HTML code). It was at the main section, where more than 12 columns were nested into a row. As mentioned the error has been corrected.
- There is unfortunately a known bug - if it's actually appropiate to call it this way. I have noticed towards the end of my project that I have used an old version of bootstrap. I have immediately changed with the latest version. However, as expected, the entire structure of the DOM has modified. Being very limited with time I couldn't redo the entire code, my deadline for the completion of the project being very close. Rest assured that I will change to the latest version and, of course, the appereance and functionality of the game will remain unaltered.
There are no other known bugs.
The Quiz Project was developed on GitPod using git and GitHub to host the repository.
I have made the following steps during the deployment of The Quiz Project using GitHub:
-
Opened up GitHub in the browser.
-
Signed in using username and password.
-
Selected my repositories.
-
Navigated to '/Astig-1982/The-Quiz-Project'.
-
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.
-
The-Quiz-Project is now live on GitHub Pages.
-
Cloning The-Quiz-Project from GitHub:
-
Navigate to '/Astig-1982/The-Quiz-Project'.
-
Click the green Clone or Downloand button.
-
Copy the url in the dropdown box.
-
Using your preffered IDE open up your preferred terminal.
-
Navigate to your desired file location.
-
Copy the following code and input it into your terminal to clone The Quiz Project.
git clone https://github.com/Astig-1982/The-Quiz-Project.git
The quiz questions are from the opentdb API.
No media from external sources has been used.