Bling Quizzes

Live Website Link https://bling-quizzes-ghsoyad.netlify.app/

Description

The Project is developed using React JS

Library's used

Some of the library's that was used in the project

React Router

• To navigate the website
• To load data from the API
• To make dynamic paths for the website component

React Toastify

• To display correct answer
• To display selected answer

ReCharts

• To display statistics chart

React FontAwesome

• To display icons

Pages

The website consists of 5 main pages

• Home
• Topics
• Statistics
• Blogs
• QuizTopic

The QuizTopic page is dynamic which changes based on selected topic

Features

Features of the website

• Navbar can be used to navigate the website
• Homepage and Topics page contains Topic list that can be selected
• Selecting a Topic takes user to the selected Topic Quizzes page
• Topic page lists all the questions and their options
• Topic page title shows topic name and how many questions are in the topic
• A small section under topic page title shows live result of the selected answer
• Selecting an option pops a toast displaying if the selected option in correct
• Option color changes after selection based on correct or wrong
• After selecting an option other options will be disabled
• Each question has an Eye icon that opens a toast to show correct answer of the question
• Statistics page shows a line chart to show total quizzes of all the topics
• Blogs page shows the list of blogs
• Footer has the links of social media icons