• Какую логику сделать для проверки верности вопроса в приложении тест?

    0xD34F
    @0xD34F Куратор тега React
    Начать следует не с какой-то там логики, а со структуры данных, что содержит вопросы. То, что есть сейчас, никуда не годится. Что, если завтра вместо трёх вариантов ответа надо будет сделать четыре? Будете добавлять ещё по два свойства в каждый объект в массиве вопросов, а в компоненте закопипастите ещё один input? А если в разных вопросах должно будет быть разное количество вариантов ответа? Что тогда?

    Варианты ответа складываете в массив, а корректный вариант обозначаете через его индекс:

    const questions = [
      {
        text: 'Выберите верное утверждение',
        answers: [
          'СССР распался в 1997 году',
          'Солнце вращается вокруг Земли',
          'шестью восемь - двадцать три',
        ],
        correctAnswer: 1,
      },
      {
        text: '...',
        answers: [ '...', '...', ... ],
        correctAnswer: ...,
      },
      ...
    ];

    В компоненте вопроса вместо того, чтобы копипастить input'ы, делаете цикл по вариантам ответа:

    function Question(props) {
      const onChange = e => props.onAnswerChange(+e.target.value);
    
      return (
        <div>
          <h3>{props.question.text}</h3>
          <ol>
            {props.question.answers.map((n, i) => (
              <li>
                <label>
                  <input
                    type="radio"
                    value={i}
                    checked={props.answer === i}
                    onChange={onChange}
                  />
                  {n}
                </label>
              </li>
            ))}
          </ol>
        </div>
      );
    }

    В родительском компоненте храните массив ответов:

    function App(props) {
      const [ answers, setAnswers ] = useState(Array(props.questions.length).fill(null));
    
      const updateAnswer = (questionIndex, answer) =>
        setAnswers(answers.map((n, i) => i === questionIndex ? answer : n));
    
      return (
        <div>
          {props.questions.map((n, i) => (
            <Question
              question={n}
              answer={answers[i]}
              onAnswerChange={answer => updateAnswer(i, answer)}
            />
          ))}
        </div>
      );
    }

    Ну и возвращаясь к вашему вопросу, чего там надо было?

    не получается сделать грамотную проверку правильного ответа...

    Чтобы проверить правильность ответа, надо сравнить его со значением свойства correctAnswer у соответствующего (с тем же индексом) вопроса. Например, считаем количество правильных ответов:

    const correctAnswersCount = answers.reduce((acc, n, i) => {
      return acc + (n === questions[i].correctAnswer);
    }, 0);

    ...и одновременно вывести верные ответы

    Поскольку свойство, обозначающее правильный ответ, является его индексом, просто достаём соответствующие элементы из массивов с вариантами ответа:

    const correctAnswers = questions.map(n => n.answers[n.correctAnswer]);

    Ну а массив строк вывести - надеюсь, справитесь сами.

    UPD. Посмотреть живьём можно здесь (есть отличия от того, что есть или предполагается у вас - вопросы показываются по очереди, а не все сразу; в результатах отображаются только верные ответы).
    Ответ написан
    1 комментарий