Big Brain Quiz

Many people already know about educational quizzes, but few know their true potential.

An educational quiz is a tool that can be used in a classroom, course, or for reviewing content in a teaching process.

This game also has an evaluation method.

We can say that quizzes are a practical way of learning, because this method assesses the degree of prior knowledge of a student on a given topic, as well as evaluating what is retained after entering the classroom in an interesting and innovative way.

Visit our page by clicking here: Big Brain Quiz

User Experience

User stories

• First Time Visitor Goals
• As a first-time user, I want to easily understand the main goal of the game and how it works.
• That the messages are clear, and the responsiveness works correctly.
• That the content is not visually polluted and does not cause unexpected distractions.

• Returning Visitor Goals
• As a repeat visitor, I would like to switch order of questions and answers.

Design

• Colour
• A summer color scheme has been used, happy yet calm colors that match the logo of the game very well.

• Typography
• The font selection was appropriate for the volume of text, as it helps reading with greater continuity and without so much eye strain.

• Imagery
• Only one background image is used, with light colors that refer to the questions theme, to keep a clean look, without visual pollution so that the user's focus is on the questionnaire.

Flowchart

Wireframes

Mobile Wireframe

Home Page Wireframe

Features

Responsiveness

• Viewports
• Desktop 1600px x 992px
• Laptop 1280px x 802px
• Tablet 768px x 1024px
• Mobile 320px x 480px

Initial Page

• Start screen containing name and logo, introduction about question content.
• It also has username input (required), a button to start the game and limited to 10 characters.

Header Game

• Start screen containing name and logo.
• Greeting the user who remains throughout the game and tracking the number of questions.

Game Page

• Game screen with title and answers.
• If the selected answer is correct the background color will be green, if the wrong answer is selected the color will be red and the right answer will appear in green.
• Next button to advance the questions, restart button (returns to the first screen) and exit button returns the login screen.

Message Congratulations

• Final message containing percentage of hits, and how many questions you got correct.
• Play button again (restarts the game on the first question) and Exit game button (closes screen on browser and returns to home page on smaller screens).

Technologies Used

Languages Used

• HTML
• CSS
• JavaScript

Frameworks, Libraries & Programs Used

1. Google Fonts
   • Google fonts were used to import the font for copleting the design.
2. Balsamic
   • Balsamiq was used to create the wireframes during the design process.
3. GitHub
   • GitHub is used to store the projects code after being pushed from Git.
4. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
5. Miro
   • Used to create the flowchart.

Testing

• W3C Markup Validator
• W3C CSS Validator
• Code Beautify (JavaScript Validator)
• Lighthouse (Chrome Developer Tools)

Testing User Stories from User Experience (UX) Section

• As a user, I want to consume content about world history, wars and politics.
• As a user, I want a site that is intuitive and easy to navigate.
• As a user, I want it to challenge me to improve my knowledge.

Manual Testing

The manual test was done on a self-built desktop with an HP Pavilion Gaming Laptop, 16.1", Windows 10 Home, Intel® Core™ i5, 8GB RAM, 1TB HDD, NVIDIA® GeForce® GTX 1650 Ti

Feature tested	Expected result	Current results	Approved disapproved
Send username	Required User Collection.	as expected	To spend
Start button	When clicked, the survey page should open.	as expected	To spend
Greetings to the user	Captures user name and displays it on the quiz screen along with a greeting.	as expected	To spend
Question Counting	Shows the number of questions answered and the quiz total.	as expected	To spend
Quiz	Shows questions and answers on the screen, switching automatically after clicking on the answer.	as expected	To spend
Scoreboard	Scores appear at the end of the quiz, showing the number and percentage of correct answers.	as expected	To spend
Check Answers	Correct or Incorrect Response Message (tells you the correct answer).	as expected	To spend
Restart Button / Play Again Button	Guides the user to the first question and resets the score to zero.	as expected	To spend
Exit Button	In the browser, it closes the screen, and on the mobile screen, there is no button.	as expected	To spend
Final message	Congratulates user, informs percentage and how many questions he got right.	as expected	To spend

Browser Test

Browser Tested	Work Status
Microsoft Edge	Works as expected
Chrome	Works as expected
Firefox	Works as expected

Device Test

Browser Tested	Work Status
Huawei Y5	Works as expected
Samsung Galaxy A12	Works as expected

Improvements to be Implemented

• Insert Intermediate and Advanced Levels Sections

Known Bugs

• ????????????????????
• ????????????????????

Deployment

GitHub

1. In the GitHub body of my page, click the menu button: repository;
2. Locate the Big Brain Quiz project and click;
3. Click on the button: settings;
4. Click on the button: pages;
5. Click on the button: visit the site.

Cloning the GitHub Repository

1. On GitHub.com, navigate to the main page of the repository.
2. To clone your repository using the command line using HTTPS, under "Quick setup", click in copying. To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click in copying.
3. Open Git Bash.
4. Change the current working directory to the location where you want the cloned directory.
5. Type git clone, and then paste the URL you copied earlier.
6. Press Enter to create your local clone.

Credits

Code

• Stack Overflow
  • Used to increment the code with the restriction function to capture only letters in the input (browser).
• Codi Academy TV
  • Youtube channel in which I used the video / code as reference for this project.
• Code Institute
  • README references.
  • The tutoring and assistance of Sara, who helped me figure out how to fix a bug in my code.
• Hora de Codar
  • Channel in Portuguese where I was able to remember some of the functions, and increase the code with the SHUFFLE function.

Content

• World History Encyclopedia
  • All historical content.

Media

• Freepik
  • Background image (question mark).
• Favicon
  • Icon lamp.
• Ave Mateiu (pallete)
• Colors.

Acknowledgements

• To my husband and my daughter for their patience during all the long hours I spent at the computer.

• The Code institute team for the support and attention provided to me these past months.