Блог

Как мне реализовать логику правильных и неправильных ответов? Я создал тест с одним вопросом с несколькими вариантами ответов. Я создал Quiz компонент. Вот источник:

Компонент викторины

 export default function Quiz(props) {
  
  return (
    <div className="QuizContainer">
      <div className="quizHeader">
        <h1>Question</h1>
        <p className="PracticeDescription">
          Read the question and choose the most correct option.
        </p>
      </div>
      <hr/>

      <div className="PracticeQuestionContainer">
        <p>{props.question}</p>

        <div class="option-container">
          <input type="radio" name="select" id="option-1" className="input-radio" />
          <input type="radio" name="select" id="option-2" className="input-radio" />
          <input type="radio" name="select" id="option-3" className="input-radio" />
          <input type="radio" name="select" id="option-4" className="input-radio" />

          <label for="option-1" className="option option-1">
            <div className="dot"></div>
            <span>{props.option1}</span>
          </label>

          <label for="option-2" className="option option-2">
            <div className="dot"></div>
            <span>{props.option2}</span>
          </label>

          <label for="option-3" className="option option-3">
            <div className="dot"></div>
            <span>{props.option3}</span>
          </label>

          <label for="option-4" className="option option-4">
            <div className="dot"></div>
            <span>{props.option4}</span>
          </label>
        </div>
      </div>
    </div>
  );
}

 

И я использовал этот компонент на странице вот так:

 <Quiz
  question="1. Which one is not a JavaScript variable?"
  option1="var a=5"
  option2="let b=6"
  option3="const c=3"
  option4="int x=9"
/>
 

Вот как это выглядит:

Если пользователь выберет правильный ответ, он должен colsole.log("Correct!") else console.log("Incorrect!") это сделать. Как мне это сделать? Пожалуйста, помогите мне!!

Прежде всего, вам также нужно будет передать правильный ответ в компонент викторины, после чего вам нужно будет взглянуть на обработку событий, поэтому всякий раз, когда пользователь нажимает на опцию, вызывается функция, которая сравнивает выбранный ответ с правильным ответом.

Подробнее читайте здесь: https://reactjs.org/docs/handling-events.html