a Simple and Fun Quiz App

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 <FunQuiz />},
+    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
 ];

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 (
+      <div
+        className={`display-question ${
+          currentQuestion.correct ? "correct" : "incorrect"
+        }`}
+      >
+        <div className='question-number'>Question: {currentQuestion?.qNo}</div>
+        <li
+          dangerouslySetInnerHTML={{
+            __html: `${currentQuestion?.question}`,
+          }}
+        />
+        <span
+          dangerouslySetInnerHTML={{
+            __html: `<br/><b>Ans</b>: ${currentQuestion?.correct_answer}<br/>`,
+          }}
+        />
+        <span
+          dangerouslySetInnerHTML={{
+            __html: `<b>Your Answer</b>: ${currentQuestion?.your_answer}`,
+          }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <Fragment>
+      <div className='fun-quiz-main'>
+        <div className='main-child'>
+          <h1>Quiz Summary</h1>
+          {!cheatedAnswers ? (
+            <h2 className='congrats'>Congratulations!</h2>
+          ) : (
+            <h2 className='cheated'>You Cheated!</h2>
+          )}
+          <div className='quiz-summary'>
+            <div>
+              <h4>
+                <span>{correctAnswers}</span>
+                <span>Correct Answers</span>
+              </h4>
+              {!!cheatedAnswers && (
+                <h4 className='cheated'>({cheatedAnswers} cheated)</h4>
+              )}
+            </div>
+            <div>
+              <span>{wrongAnswers}</span>
+              <span>Wrong Answers</span>
+            </div>
+          </div>
+          <div className='front-footer'>
+            <button onClick={redirectHome}>Home</button>
+          </div>
+          <div className='circle-area'>
+            {result.map((item, index) => {
+              return (
+                <div
+                  key={`${item.question + index}`}
+                  className={
+                    item.correct ? "circle-correct" : "circle-incorrect"
+                  }
+                  onClick={() =>
+                    setCurrentQuestion({ ...item, qNo: index + 1 })
+                  }
+                >
+                  {index + 1}
+                </div>
+              );
+            })}
+          </div>
+          <ShowCurrentQuestionDetails currentQuestion={currentQuestion} />
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default EndScreen;

src/plays/fun-quiz/FrontScreen.jsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+
+// css
+import "./FrontScreen.scss";
+import options from './options.json'
+
+const CATEGORY_SELECTION = "CATEGORY_SELECTION";
+const RULES_DISPLAY = "RULES_DISPLAY";
+
+const QuizSelectionScreen = ({ getSelectedCategory }) => {
+  const [selectedOption, setSelectedOption] = useState("");
+  const [view, setView] = useState(CATEGORY_SELECTION);
+
+  const letMeInHandler = () => {
+    if (!selectedOption) return;
+    setView(RULES_DISPLAY);
+  };
+
+  const RulesComponent = () => {
+    return (
+      <>
+        <p>1. There will be 20 Unique Questions.</p>
+        <p>2. Every Question will have 4 multiple choices to chooose.</p>
+        <p>
+          3. Among 4 options only one option will be correct answer of the
+          Question.
+        </p>
+        <p>
+          4. Answer selection isn't mandatory. You can skip choosing any answer
+          and it will be counted as incorrect answer.
+        </p>
+        <p>
+          5. After answer confirmation you cannot go back to previous question
+          or donot refresh the page otherwise you will lose you progress.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          7. After selecting an option you can click on selected option to unselect it.
+        </p>
+        <p>8. You can use cheats to cheat the answer.</p>
+        <div className='front-footer'>
+          <button onClick={() => getSelectedCategory(selectedOption)}>
+            Yes, Lets Start!
+          </button>
+        </div>
+        <div>
+          <button className='back' onClick={(e) => setView(CATEGORY_SELECTION)}>
+            &#171; Back
+          </button>
+        </div>
+      </>
+    );
+  };
+
+  const CategorySelector = () => {
+    return (
+      <>
+        <p>
+          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.
+        </p>
+        <div className='selectable-options'>
+          {options.map((option) => {
+            return (
+              <div
+                key={option.id}
+                onClick={(e) => setSelectedOption(option.id)}
+                className={`single-selection ${
+                  selectedOption === option.id && "active-selected"
+                }`}
+              >
+                {option.name}
+              </div>
+            );
+          })}
+        </div>
+        <div className='front-footer'>
+          <button onClick={letMeInHandler}>Let me in</button>
+        </div>
+      </>
+    );
+  };
+
+  const renderView = view === CATEGORY_SELECTION;
+
+  return (
+    <div className='fun-quiz-main'>
+      <div className='main-child'>
+        <h1>{!renderView ? "Quiz Rules" : "Quiz App"}</h1>
+        {renderView && <CategorySelector />}
+        {!renderView && <RulesComponent />}
+      </div>
+    </div>
+  );
+};
+
+export default QuizSelectionScreen;