REACTJS EXAMPLE
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

Trong bài tập này, mình sẽ xây dựng một trò chơi Quiz đơn giản sử dụng ReactJS. Trò chơi sẽ có khả năng hiển thị các câu hỏi, các lựa chọn và cập nhật điểm số của người chơi khi họ trả lời đúng.

Quiz Game trong ReactJS

File và cấu trúc dự án

Hãy bắt đầu bằng việc tạo các file và thư mục cần thiết cho dự án của chúng ta:

z5106429503920 bb45f216d3253b8042e5b27361cbb8aa jpg

QuizGame.js (Component chính của trò chơi):

// 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;

Question.js (Component hiển thị câu hỏi và lựa chọn):

// 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;

QuizGame.css và Question.css (File CSS để tùy chỉnh giao diện):

/* 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;
}

Giải thích:

QuizGame.js:

  • QuizGame là component chính của trò chơi, sử dụng useState để theo dõi điểm số (score).
  • handleAnswer là hàm xử lý khi người chơi trả lời câu hỏi. Nếu đúng, điểm số sẽ được tăng lên.
  • Component sẽ hiển thị trong một thẻ div có class quiz-game.

Question.js:

  • Question là component hiển thị câu hỏi và lựa chọn.
  • Sử dụng useState để theo dõi câu trả lời được chọn (selectedAnswer).
  • Hàm handleOptionClick xử lý khi người chơi chọn một lựa chọn. Nếu đúng, sẽ thực hiện callback onAnswer và truyền giá trị true.
  • Component sẽ hiển thị một danh sách ul với các lựa chọn và thay đổi màu nền khi được chọn.

QuizGame.css và Question.css:

  • CSS được sử dụng để tùy chỉnh giao diện của trò chơi và câu hỏi.

Kết quả:

z5106429380446 cdf15a034a27716f9e63f7468ab1ebcd jpg

z5106429182569 52bbf19df08efcec58dbad81d1949a18 jpg

Kết bài:

Mình đã tạo thành công một trò chơi Quiz đơn giản sử dụng ReactJS! Bạn có thể mở rộng dự án bằng cách thêm nhiều câu hỏi và chức năng mới. Hy vọng bạn đã có trải nghiệm học tốt và tận hưởng việc xây dựng ứng dụng ReactJS của mình. Hãy tiếp tục thực hiện các bài tập khác để nâng cao kỹ năng của bạn!

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Thiết kế và quản lý form đơn giản với thư viện Formik

Thiết kế và quản lý form đơn giản với thư viện Formik

React Microservices, xây dựng ứng dụng React mạnh mẽ

React Microservices, xây dựng ứng dụng React mạnh mẽ

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Performance Optimization trong React Js, tăng hiệu suất cực ngon

Performance Optimization trong React Js, tăng hiệu suất cực ngon

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

useEffect trong React Hooks

useEffect trong React Hooks

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks.…

Tìm hiểu React Hook useState

Tìm hiểu React Hook useState

React Hooks bao gồm rất 10 hooks khác nhau, trong phạm vi bài viết này…

Top