finish quiz project component

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,25 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from 'react'
+import Quiz from './components/Quiz/Quiz'
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+export default class App extends Component {
+    render() {
+        return (
+            <div>
+                <Quiz />
+            </div>
+        )
+    }
 }
-
-export default App;

src/components/Quiz/Quiz.css

@@ -0,0 +1,108 @@
+body {
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  * {
+    font-family: "Verdana", cursive, sans-serif;
+    color: #ffffff;
+  }
+
+  body {
+    background-color: #7cc6fe;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  .app {
+    background-color: #252d4a;
+    width: 450px;
+    min-height: 200px;
+    height: min-content;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 10px 10px 42px 0px rgba(0, 0, 0, 0.75);
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .score-section {
+    display: flex;
+    font-size: 24px;
+    align-items: center;
+  }
+
+  /* QUESTION/TIMER/LEFT SECTION */
+  .question-section {
+    width: 100%;
+    position: relative;
+  }
+
+  .question-count {
+    margin-bottom: 20px;
+  }
+
+  .question-count span {
+    font-size: 28px;
+  }
+
+  .question-text {
+    margin-bottom: 12px;
+  }
+
+  .timer-text {
+    background: rgb(230, 153, 12);
+    padding: 15px;
+    margin-top: 20px;
+    margin-right: 20px;
+    border: 5px solid rgb(255, 189, 67);
+    border-radius: 15px;
+    text-align: center;
+  }
+
+  /* ANSWERS/RIGHT SECTION */
+  .answer-section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  button {
+    margin-bottom: 10px;
+    width: 100%;
+    font-size: 16px;
+    color: #ffffff;
+    background-color: #252d4a;
+    border-radius: 15px;
+    display: flex;
+    padding: 5px;
+    justify-content: flex-start;
+    align-items: center;
+    border: 5px solid #234668;
+    cursor: pointer;
+  }
+
+  .correct {
+    background-color: #2f922f;
+  }
+
+  .incorrect {
+    background-color: #ff3333;
+  }
+
+  button:hover {
+    background-color: #555e7d;
+  }
+
+  button:focus {
+    outline: none;
+  }
+
+  button svg {
+    margin-right: 5px;
+  }
+

src/components/Quiz/Quiz.js

@@ -0,0 +1,117 @@
+import React from "react";
+import "./Quiz.css";
+
+export default class Quiz extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      questions: [
+        {
+          questionText: "پایتخت ایران کدام شهر است؟",
+          answerOptions: [
+            { answerText: "کرج", isCorrect: false },
+            { answerText: "شیراز", isCorrect: false },
+            { answerText: "تهران", isCorrect: true },
+            { answerText: "اصفهان", isCorrect: false },
+          ],
+        },
+        {
+          questionText: "کدام یک نود جی اس است؟",
+          answerOptions: [
+            { answerText: "پی اچ پی", isCorrect: false },
+            { answerText: "نود جی اس", isCorrect: true },
+            { answerText: "اچ تی ام ال", isCorrect: false },
+            { answerText: "سی اس اس", isCorrect: false },
+          ],
+        },
+        {
+          questionText: "کدام یک میوه است؟",
+          answerOptions: [
+            { answerText: "سیب", isCorrect: true },
+            { answerText: "میز", isCorrect: false },
+            { answerText: "پنجره", isCorrect: false },
+            { answerText: "درخت", isCorrect: false },
+          ],
+        },
+        {
+          questionText: "بلند ترین حیوان کدام است؟",
+          answerOptions: [
+            { answerText: "میمون", isCorrect: false },
+            { answerText: "گربه", isCorrect: false },
+            { answerText: "سگ", isCorrect: false },
+            { answerText: "زرافه", isCorrect: true },
+          ],
+        },
+        {
+          questionText: "بیشترین عدد کدام است؟",
+          answerOptions: [
+            { answerText: "645", isCorrect: false },
+            { answerText: "22", isCorrect: false },
+            { answerText: "333", isCorrect: false },
+            { answerText: "999", isCorrect: true },
+          ],
+        },
+      ],
+      currentQuestion: 0,
+      showScore: false,
+      score: 0,
+    };
+  }
+
+  clickHandler(isCorrect) {
+    if (isCorrect) {
+      this.setState((prevState) => {
+        return {
+          score: prevState.score + 1,
+        };
+      });
+    }
+
+    if (this.state.currentQuestion === 4) {
+      this.setState({ showScore: true });
+    } else {
+      this.setState((prevState) => {
+        return {
+          currentQuestion: prevState.currentQuestion + 1,
+        };
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="app">
+        {/* next div is for showing user score */}
+        {this.state.showScore ? (
+          <div className="score-section">
+            امتیاز شما {this.state.score} از {this.state.questions.length}
+          </div>
+        ) : (
+          <div>
+            <div className="question-section">
+              <div className="question-count">
+                <span>سوال {this.state.currentQuestion + 1}</span>/{" "}
+                {this.state.questions.length}
+              </div>
+              <div className="question-text">
+                {this.state.questions[this.state.currentQuestion].questionText}
+              </div>
+            </div>
+            <div className="answer-section">
+              {this.state.questions[
+                this.state.currentQuestion
+              ].answerOptions.map((answer) => (
+                <button
+                  onClick={this.clickHandler.bind(this, answer.isCorrect)}
+                >
+                  {answer.answerText}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}

src/index.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import ReactDOM from 'react-dom';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+// import reportWebVitals from './reportWebVitals';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();