diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index f701e1c8ad..c4f72248b7 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -15,6 +15,7 @@ import {
PasswordGenerator,
WhyTypescript,
NetlifyCardGame,
+FunQuiz,
//import play here
} from "plays";
@@ -230,5 +231,18 @@ export const plays = [
video: '',
language: 'js',
featured: true,
+ }, {
+ id: 'pl-fun-quiz',
+ name: 'Fun Quiz',
+ description: 'Its a Fun Quiz app which lets player to choose desirable category to answer 20 unique question with 4 options and pick the correct one.',
+ component: () => {return },
+ path: '/plays/fun-quiz',
+ level: 'Intermediate',
+ tags: 'QuizApp,FunQuiz,API',
+ github: 'Angryman18',
+ cover: 'https://cdn.pixabay.com/photo/2019/05/22/22/28/brainstorm-4222728_960_720.jpg',
+ blog: 'https://hashnode.com/@imsmahanta',
+ video: '',
+ language: 'js'
}, //replace new play item here
];
diff --git a/src/plays/fun-quiz/EndScreen.jsx b/src/plays/fun-quiz/EndScreen.jsx
new file mode 100644
index 0000000000..f8fdaf908c
--- /dev/null
+++ b/src/plays/fun-quiz/EndScreen.jsx
@@ -0,0 +1,91 @@
+// vendors
+import { Fragment, useState } from "react";
+
+//css
+import "./FrontScreen.scss";
+
+const EndScreen = ({ quizSummary, redirectHome }) => {
+ const { correctAnswers, cheatedAnswers, wrongAnswers, result } = quizSummary;
+ const [currentQuestion, setCurrentQuestion] = useState({});
+
+ const ShowCurrentQuestionDetails = ({ currentQuestion }) => {
+ if (!Object.keys(currentQuestion).length) return false;
+ return (
+
+
Question: {currentQuestion?.qNo}
+
+
Ans: ${currentQuestion?.correct_answer}
`,
+ }}
+ />
+
Your Answer: ${currentQuestion?.your_answer}`,
+ }}
+ />
+
+
+
Quiz Summary
+ {!cheatedAnswers ? (
+
Congratulations!
+ ) : (
+
You Cheated!
+ )}
+
+
+
+ {correctAnswers}
+ Correct Answers
+
+ {!!cheatedAnswers && (
+ ({cheatedAnswers} cheated)
+ )}
+
+
+ {wrongAnswers}
+ Wrong Answers
+
+
+
+
+
+
+ {result.map((item, index) => {
+ return (
+
+ setCurrentQuestion({ ...item, qNo: index + 1 })
+ }
+ >
+ {index + 1}
+
+ );
+ })}
+
+
+
+
1. There will be 20 Unique Questions.
+ 2. Every Question will have 4 multiple choices to chooose.
+
+ 3. Among 4 options only one option will be correct answer of the
+ Question.
+
+
+ 4. Answer selection isn't mandatory. You can skip choosing any answer
+ and it will be counted as incorrect answer.
+
+
+ 5. After answer confirmation you cannot go back to previous question
+ or donot refresh the page otherwise you will lose you progress.
+
+
+ 6. You will be given 30 seconds to answer each question and timeup is
+ considered as an incorrect answer and next question will be displayed.
+
+
+ 7. After selecting an option you can click on selected option to unselect it.
+
+ 8. You can use cheats to cheat the answer.
+
+
+
+
+
+
+
+ );
+ };
+
+ const CategorySelector = () => {
+ return (
+ <>
+
+ The Quiz app requires to have a specefic category in order to start
+ with. Select one of the below options in which you have expertise in.
+
+
+ {options.map((option) => {
+ return (
+
setSelectedOption(option.id)}
+ className={`single-selection ${
+ selectedOption === option.id && "active-selected"
+ }`}
+ >
+ {option.name}
+
+ );
+ })}
+
+
+
+
+ );
+ };
+
+ const renderView = view === CATEGORY_SELECTION;
+
+ return (
+
+
+
{!renderView ? "Quiz Rules" : "Quiz App"}
+ {renderView && }
+ {!renderView && }
+
+
This Page is under Maintenance
;
+
+ return (
+ <>
+
+
+
+ {/* Your Code Starts Here */}
+ {!category && !quizCompleted && (
+
+ )}
+ {category && !quizCompleted && (
+
+ )}
+ {quizCompleted && (
+
+ )}
+ {/* Your Code Ends Here */}
+
+
We Apologize! Something Error Occured!
)
+ }
+
+ return (
+
+ {quizData.loading && (
+
+
+
+ )}
+ {!quizData.loading && (
+
+
{timer}
+
Question: {questionNumber + 1}
+
+
+
+
+ {currentQuestion?.options?.map((option, index) => {
+ return (
+
+ );
+ })}
+
+
+
+ {answer.answer && !answer.cheat && (
+
+ )}
+ {!answer.answer && (
+
+ )}
+
+
+ )}
+