People are always curious about knowing about other countries. To gather knwoledge they approach various mediums and resources. This website was developed with an intention to provide any one wanting to know about different countries and have fun playing onling quize game at the same time to gain knowledge about countries. The quiz game provided by this website currently focuses only on European countries. However, the deveoper aims to include whole world countries in future versions.
The primary objective of LatQuiz is to provide its users a user-friendly, intuitive website capable of providing all required information about how to use the website and play the quiz within a user-friendly platform.
This website focuses mainly two types of users: - Young children - Grown Ups
- Looking for information about countries
- Looking for a site where they can play games about countries
- Looking for how to play the game
- Looking for how to contact the site owner to provide their feedback and suggestions
- Looking for information about countries
- Looking for a site where they can play games about countries
- Looking for how to play the game
- Looking for how to contact the site owner to provide their feedback and suggestions
As a First Time Visitor,
- I want to easily understand the main purpose of the site.
- I want to be able to easily navigate throughout the site to find the content.
- I want to learn about various countries.
- I want to know how to play the quiz.
- I want to offer my suggestions and advice about the game.
- I wnat to play the quiz on various devices.
- I want to connect with the business throgh their social media links.
As a Returning Visitor
- I want to see more options in the game.
- I want more questions on various aspects and areas.
- I want information about attractions and opportunities in different countries.
- I want to know how to travel to other countries.
As a Frequent Visitor
- I want to see any new options and games added.
- I want to see the other users' feedback and their rating of the site.
- Design and develop a well-illustrated website that can be attracted by any user at first sight
- Provide a professional touch in every feature, content and layout
- Implement everything required to make the website easy to use and make users stress free and happy
This website was designed using user centric approach and for that special attention was given in choosing various elements
- Primary Font: Roboto – simple and allowing letters to be settled into their natural width
- Secondary Font: Lato – The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness
- All icons used are relevant to the subject to make navigation easy
The main colours used are white, off light-yellow, and off ligt-green (Quiz game board). Light background has been applied to navigation bar and and dark background to footer.
- Tried to keep consistency in design in order to maintain a feeling of relationship between items
- Boxes, images, containers and buttons were given round corners to look smooth
- Both header and footer were given different color patterns to make it more appealing
- All icons used were given same color to maintain the consistency
- Carousal: Images of various attractions from different parts of europe were used to resemble the nature of the business.
- Responsive on all device sizes
- Interactive elements
- Home page:– Logo, navbar, header and footer
- Quiz Page:- Added with a game board where quiz questions, answer options, scores, questions asked, questions remaining, correct/wrong notification label, next question button, play again button and the final result were included.
- Contact:- This section features with Name text filed, Email field and Message box text area by which users can communicate with the business.
- To include all countries around the world.
- To include more different questions on various aspects and areas.
- To include more pages about various attractions and opportunities in different countries.
- To include travel information about each country.
- To apply more styles and features.
- Bootstrap Framework - Bootstrap was used to assist with the responsiveness and styling of the website
- jQuery - jQuery has been used for HTML DOM/ CSS manipulation
- EmailJS - EmailJS was used in contact form to send emails to the business
- Google Fonts: - Google fonts were used to import 'Roboto' and 'Arimo' fonts into the style.css file which is used on all pages throughout the project
- Font Awesome: - Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes
- Git - Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub
- GitHub: - GitHub is used to store the projects code after being pushed from Git
- Balsamiq: - Balsamiq was used to create the wireframes during the design process
- Gitpod: - Gitpod was used as a text editor to create and edit files
- Rest Countries - Rest Countires API was used for quiz questions and country data preparation
- Google Maps Platform - Rendering of the map was done using Google Maps API
- Google Chrome - Google Chrome was used to browse the pages
Wireframes were created using Balsamiq Desktop App.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
- W3C Markup Validator - Result
- W3C CSS Validator - Result
- The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge, FireFox, Opera and Safari web browsers
- The website was tested on a variety of devices such as Desktop, Laptop, Moto G4, iPad Mini, Galaxy S5, Pixel 2, Pixel 2 XL, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPhone X, iPad, iPad Pro, Surface Duo and Galaxy Fold.
- A large amount of testing was done to ensure that all pages were linking correctly
- Friends, mentor, colleagues and family members were asked to review the site and documentation to point out any bugs and/or user experience issues
-
First Time Visitor Goals
- The Home page greets every user with a warm and attractive carousal with images from different parts of Europe.
- The Navigation Bar at the top right clearly added with menu items to navigate to different sections and pages.
- The Logo on the top left corner mentions the name of the business .
- Country Data and Map section displays the information about the selected country in the combo box.
- About section at the bottom of the home page describes about the nature and purpose of the site.
- Connect section in the footer embedded with businesse's social media link icons.
- About the Game section in the Quiz page explains about how to play the game and its rules.
- Contact page has the feature to send messages to the business. This section is provided with Name field, Email field, Message field and Send button.
- The site has implemented various media queries to work on numerous devices including mobile phones, tablets and desktops.
-
Returning Visitor Goals
- More questions, attractions and opportunities in various countries and travel information to be implemented in the next version of the site.
-
Frequent User Goals
- To be implemented in the next version of the site.
- On some mobiles a tiny white gap can be seen on the right side of some sections in the home and quiz page.
- On some tablets quiz game pad stretches horizontally.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
-
Log in to GitHub and locate the GitHub Repository
-
Under the repository name, click "Clone or download".
-
To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
-
Open Git Bash
-
Change the current working directory to the location where you want the cloned directory to be made.
-
Type 'git clone', and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
-
Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
Cloning into 'CI-Clone' remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remove: Total 10 (delta 1), reused 10 (delta 1) Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
-
Text content about european countries was generated using the information available on the website Kids World Travel Guide
-
Quiz questions and country data were prepared using Rest Countries API.
The images used in the site were obtained from
Following sites were consulted to design the layout of the site pages:
Following sites were consulted to develop coding strategy for the site:
- Web Dev Simplified
- Kindson The Tech Pro
- Code Institute Course Module
- W3Schools
- Google Maps Platform
- EmailJS
- Mr. Antonio Rodriguez(Mentor) for support and advice.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
