Tạo một component QuizGame với state bằng ReactJS

// src/components/QuizGame.js
import React, { useState } from 'react';
import Question from './Question';
import './QuizGame.css';

const QuizGame = () => {
  const [score, setScore] = useState(0);
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);

  const questions = [
    {
      question: 'Đâu là thủ đô của pháp',
      options: ['London', 'Berlin', 'Madrid', 'Paris'],
      correctAnswer: 'Paris',
    },
    {
      question: 'Động vật có vú lớn nhất là gì?',
      options: ['Voi', 'Cá voi xanh', 'Hươu cao cổ', 'Hổ'],
      correctAnswer: 'Cá voi xanh',
    },
    {
      question: 'Đồng tiền của Nhật Bản là gì?',
      options: ['Won', 'Yuan', 'Ringgit', 'Yen'],
      correctAnswer: 'Yen',
    },
    {
      question: 'Hành tinh nào được gọi là Hành tinh Đỏ?',
      options: ['Sao Kim', 'Sao Hỏa', 'Sao Mộc', 'Sao Thổ'],
      correctAnswer: 'Sao Hỏa',
    },
    {
      question: 'Đại dương lớn nhất trên Trái đất là gì?',
      options: ['Đại Tây Dương', 'Bắc Băng Dương', 'Ấn Độ Dương', 'Thái Bình Dương'],
      correctAnswer: 'Thái Bình Dương',
    },
    // Add more questions as needed
  ];

  const handleAnswer = (isCorrect) => {
    if (isCorrect) {
      setScore(score + 1);
    }
    setCurrentQuestionIndex(currentQuestionIndex + 1);
  };

  const currentQuestion = questions[currentQuestionIndex];

  return (
    <div className="quiz-game">
      {currentQuestion ? (
        <Question
          question={currentQuestion.question}
          options={currentQuestion.options}
          correctAnswer={currentQuestion.correctAnswer}
          onAnswer={handleAnswer}
        />
      ) : (
        <p>Game Over! Điểm của bạn là: {score}</p>
      )}
    </div>
  );
};

export default QuizGame;

// src/components/Question.js
import React, { useState } from 'react';

const Question = ({ question, options, correctAnswer, onAnswer }) => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleOptionSelect = (option) => {
    setSelectedOption(option);
  };

  const handleSubmit = () => {
    const isCorrect = selectedOption === correctAnswer;
    onAnswer(isCorrect);
    setSelectedOption(null);
  };

  return (
    <div className="question">
      <h3>{question}</h3>
      <ul>
        {options.map((option, index) => (
          <li
            key={index}
            className={selectedOption === option ? 'selected' : ''}
            onClick={() => handleOptionSelect(option)}
          >
            {option}
          </li>
        ))}
      </ul>
      <button onClick={handleSubmit} disabled={!selectedOption}>
        Submit
      </button>
    </div>
  );
};

export default Question;

/* src/components/QuizGame.css */

.quiz-game {
    text-align: center;
    margin-top: 20px;
  }
  
  .question {
    border: 2px solid #ddd;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
  }
  
  .question ul {
    list-style: none;
    padding: 0;
  }
  
  .question li {
    margin: 10px 0;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .question li.selected {
    background-color: #aaffaa;
  }
  
  button {
    padding: 10px;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
  }
  
  button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  

/* src/components/Question.css */
.question {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
}

.question h3 {
  color: #333;
}

.question ul {
  list-style: none;
  padding: 0;
}

.question li {
  background-color: #eee;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.question li:hover {
  background-color: #ddd;
}

.question li.selected {
  background-color: #aaffaa;
}