Узнайте, как создать полнофункциональное приложение-викторину с помощью React

В этом руководстве мы увидим, как создать приложение для викторины и как обрабатывать различные перехватчики состояния в зависимости от состояния.

Сценарии в нашем приложении-викторине

  1. Когда отображается вопрос, пользователь должен щелкнуть кнопку из вариантов.
  2. После нажатия кнопки ответа переходите к следующему вопросу.
  3. Если ответ правильный, увеличьте оценку.
  4. После ответа на все вопросы будет отображен счет.

Код

Теперь откройте свой начальный код, перейдите в App.js, задайте свои вопросы и ответы и сохраните их в виде массива под названием questions. Наша викторина скоро будет готова.

Следующая задача - получить вопрос из массива и отобразить его на экране. Для этого мы должны ввести {question [0]}, чтобы получить первый вопрос из массива вопросов.

<div className='question-text'>{questions[0]}</div>

Теперь просто выполните {question[0].questionText}, чтобы получить доступ к тексту вопроса для этого объекта. Здесь первый вопрос - это объект, поэтому для доступа к свойствам используется точечная нотация (.).

<div className='question-text'>{questions[0].questionText}</div>

Теперь ясно, что мы берем текст первого вопроса из первого объекта в нашем массиве вопросов. Аналогичным образом процедура аналогична и для вариантов ответа.

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

Здесь функция карты используется для перебора вариантов ответа на заданный вопрос.

Первый вопрос - это объект, содержащий массив answerOptions. Мы можем получить доступ к этому массиву, используя точечную запись: questions[0].answerOptions

Поскольку answerOptions является массивом, мы можем сопоставить это: questions[0].answerOptions.map

<div className='answer-section'>
	{questions[0].answerOptions.map((answerOption, index) => (
		<button>{answerOption.answerText}</button>
	))}
</div>

Внутри функции карты мы визуализируем кнопку для каждого answerOption и отображаем текст.

Изменение состояния вопроса

Теперь пришло время изменить состояние вопроса. вернемся к нашему JSX. Взятие данных из разных вопросов в нашем массиве вопросов, в зависимости от индекса. Каждый раз, когда мы переходим от одного вопроса к другому, пользовательский интерфейс обновляется.

Для этого мы должны использовать объект состояния, чтобы удерживать, на каком вопросе в данный момент находится пользователь, и при нажатии кнопки ответа он перейдет к следующему вопросу (пользовательский интерфейс обновится).

const [currentQuestion, setCurrentQuestion] = useState(0);

мы добавили объект состояния, он инициализирован до 0, поэтому викторина берет первый вопрос из массива.

Теперь вернитесь к разделу с текстом вопроса и замените [0] на [currentQuestion].

<div className='question-text'>{questions[currentQuestion].questionText}</div>

А также для раздела ответов:

<div className='answer-section'>
	{questions[currentQuestion].answerOptions.map((answerOption, index) => (
		<button>{answerOption.answerText}</button>
	))}
</div>

CurrentQuestion инициализируется для доступа к текущему вопросу в викторине, пользовательский интерфейс обновится и отобразит вопрос и ответ для этого конкретного вопроса.

Теперь нам нужно создать новую функцию под названием handleAnswerButtonClick. Он вызывается, когда пользователь щелкает ответ, увеличивает значение currentQuestion на единицу, сохраняет его в новую переменную с именем nextQuestion и устанавливает эту новую переменную в состояние. Это приведет нас к следующему вопросу:

const handleAnswerButtonClick = (answerOption) => {
	const nextQuestion = currentQuestion + 1;
	setCurrentQuestion(nextQuestion);
};

Затем добавьте событие onClick к нашей кнопке следующим образом:

<button onClick={() => handleAnswerButtonClick()}>{answerOption.answerText}</button>

Кроме того, мы следим за тем, чтобы не превысить лимит. Если номер следующего вопроса меньше общего количества вопросов, обновите состояние до следующего вопроса. В противном случае мы подошли к концу викторины, так что покажите экран с результатами.

В нашу функцию handleAnswerButtonClic k добавим следующее условие:

if (nextQuestion < questions.length) {
	setCurrentQuestion(nextQuestion);
} else {
	setShowScore(true);
}

Отображение экрана счета

Как я уже сказал, после ответа на все вопросы отобразится экран оценки, поэтому в части else мы добавляем код setShowScore(true).. Если вы заглянете в JSX, вам нужно заменить его ложной логикой в ​​разделе разметки.

А затем добавьте объект состояния, используемый для хранения результатов, и он будет показывать экран результатов всякий раз, когда мы хотим его увидеть.

const [showScore, setShowScore] = useState(false);

А затем замените false на showscore в нашем JSX:

<div className='app'>{showScore ? <div className='score-section'>// ... score section markup</div> : <>// ... quiz question/answer markup</>}</div>

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

Теперь нам нужно заменить логическую функцию предупреждений на логику переменной showScore, чтобы установить значение true:

if (nextQuestion < questions.length) {
	setCurrentQuestion(nextQuestion);
} else {
	setShowScore(true);
}

Теперь, если мы нажали на ответы викторины, в конце будет отображаться счет.

Сохранение счета

Теперь наша следующая задача - удерживать счет в нашем приложении, а затем увеличивать это значение, когда пользователь ответил на правильные ответы.

Эти логические операции должны выполняться внутри функции handleAnswerOptionClick.

Затем выполните итерацию по answerOptions, которые отображают функцию abject для каждого, который включает questionText и логическое значение, показываемое только в том случае, если ответ правильный. Используемое нами логическое значение используется для увеличения нашего счета.

Обновите функцию кнопкой:

onClick={()=> handleAnswerButtonClick(answerOption.isCorrect)

А затем обновите функцию, чтобы принять это как параметр:

const handleAnswerButtonClick = (isCorrect) => {
	//... other code
};

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

const handleAnswerButtonClick = (isCorrect) => {
	if (isCorrect) {
		alert(“the answer is correct!”)
	}

Эти шаги аналогичны предыдущим шагам if (isCorrect == true), это покажет предупреждение, когда мы нажмем правильный ответ.

Теперь нам нужно добавить еще одно состояние для оценки и инициализировать его с помощью setScore = 0:

const [score, setScore] = useState(0);

И затем вместо отображения предупреждения мы должны обновить счет до 1, если пользователь ответил правильно.

В функции handleAnswerButtonClick удалите предупреждение и увеличьте оценку на единицу:

const handleAnswerButtonClick = (isCorrect) => {
	if (answerOption.isCorrect) {
		setScore(score + 1);
	}

Отображение счета

Чтобы показать результат, мы должны внести небольшое изменение в наш JSX-код для рендеринга нашей оценки. В нашем JSX добавляем новую переменную:

div className='score-section'>
	You scored {score} out of {questions.length}
</div>

Теперь, если мы запустим это приложение, оно станет динамическим и в конце отобразит правильные ответы. Обратите внимание, что наш пользовательский интерфейс всегда установлен на «1», поэтому нам нужно изменить этот порядок, чтобы сделать его более динамичным.

Замените «количество вопросов» следующим, а затем нам нужно добавить +1, поскольку компьютерный счет начинается с 0, а не с 1.

<div className='question-count'>
	<span>Question {currentQuestionIndex + 1}</span>/{questions.length}
</div>

Вывод

Надеюсь, вам понравилось, и вы найдете что-то полезное, чтобы научиться создавать приложение для викторин в React. React - это мощная технология для изучения, которая используется для создания приложений в реальном времени.

Спасибо за чтение!

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!