quiz

src/App.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import './index.scss';
 
 const questions = [
@@ -8,7 +9,11 @@ const questions = [
   },
   {
     title: 'Компонент - это ... ',
-    variants: ['приложение', 'часть приложения или страницы', 'то, что я не знаю что такое'],
+    variants: [
+      'приложение',
+      'часть приложения или страницы',
+      'то, что я не знаю что такое',
+    ],
     correct: 1,
   },
   {
@@ -22,37 +27,67 @@ const questions = [
   },
 ];
 
-function Result() {
+function Result({ correct }) {
   return (
     <div className="result">
       <img src="https://cdn-icons-png.flaticon.com/512/2278/2278992.png" />
-      <h2>Вы отгадали 3 ответа из 10</h2>
-      <button>Попробовать снова</button>
+      <h2>
+        Вы отгадали {correct} ответа из {questions.length}
+      </h2>
+      <a href="/">
+        <button>Попробовать снова</button>
+      </a>
     </div>
   );
 }
 
-function Game() {
+function Game({ step, question, onClickAnswer }) {
+  const percentage = Math.round(step / questions.length);
+
   return (
     <>
       <div className="progress">
-        <div style={{ width: '50%' }} className="progress__inner"></div>
+        <div
+          style={{ width: `${percentage}%` }}
+          className="progress__inner"
+        ></div>
       </div>
-      <h1>Что такое useState?</h1>
+      <h1>{question.title}</h1>
       <ul>
-        <li>Это функция для хранения данных компонента</li>
-        <li>Это глобальный стейт</li>
-        <li>Это когда на ты никому не нужен</li>
+        {question.variants.map((v, index) => (
+          <li onClick={() => onClickAnswer(index)} key={v}>
+            {v}
+          </li>
+        ))}
       </ul>
     </>
   );
 }
 
 function App() {
+  const [step, setStep] = useState(0);
+  const [correct, setCorrect] = useState(0);
+  const question = questions[step];
+
+  const handleClickAnswer = (index) => {
+    setStep(step + 1);
+
+    if (index === question.correct) {
+      setCorrect(correct + 1);
+    }
+  };
+
   return (
     <div className="App">
-      <Game />
-      {/* <Result /> */}
+      {step !== questions.length ? (
+        <Game
+          step={step}
+          question={question}
+          onClickAnswer={handleClickAnswer}
+        />
+      ) : (
+        <Result correct={correct} />
+      )}
     </div>
   );
 }