Всем привет. Я делаю квиз на реакте. Из json файла подтягиваю текст вопроса, варианты ответа и признак верности ответа. При нажатии выполняется функция handleAnswerOptionClick, которая принимает на параметр isCorrect и в зависимости от ответа увеличивает очки или ничего не делает. Хочу так же добавить чтобы в случае если isCorrect истина, то кнопка покрасится в зеленый, иначе в красный и небольшая пауза чтобы было видно перекраску перед переходом к следующему вопросу. Вот только я понятия не имею как это сделать корректно. Либо указать на конкретный стиль, либо прописать его в js. Скормил гуглу кучу формулировок но нигде не нашел нужного решения. Подскажите пожалуйста решение.
Quizz.jsx
import React, { useState } from "react"
import "./Quizz.css";
const Quizz = () => {
const questions = require("./questions.json")
const [currentQuestion, setCurrentQuestion] = useState(0)
const [score, setScore] = useState(0)
const [showScore, setShowScore] = useState(false)
const handleAnswerOptionClick = (isCorrect) => {
if (isCorrect)
setScore((score + 1))
// this.style.background = '#7bb970'
// this.style.color = '#green'
// }
// else {
// this.style.background = '#7bb970'
// this.style.color = 'ffffff'
// }
const nextQuestion = currentQuestion + 1
if (nextQuestion < questions.length) setCurrentQuestion(nextQuestion)
else setShowScore(true)
}
const refresh = () => {
setCurrentQuestion(0)
setScore(0)
setShowScore(false)
}
return (
<section className="test">
<h2 className="test__heading">Проверь себя</h2>
<p className="test__description">Пройди тест из 8 вопросов и узнай, <br /> почему планету необходимо спасать уже сейчас</p>
<div className="quizz">
{
showScore
? <div className="section__score">
<div>Правильных ответов {score} из {questions.length}</div>
<button className="refresh_btn"
onClick={refresh}>Попробовать еще раз</button>
</div>
: <div className="question__section">
{/* <div className="question__count">
<span>Вопрос {currentQuestion + 1} </span> / {questions.length}
</div> */}
<div className="question__text">
{questions[currentQuestion].questionText}
</div>
<div className="answer__section">
{questions[currentQuestion].answerOptions.map(item => (
<button className="button__quizz" onClick={() => handleAnswerOptionClick(item.isCorrect)}>
{item.answerText}
</button>
))}
</div>
</div>
}
</div>
</section>
)
}
export default Quizz;
questions.json
[
{
"questionText": "Сколько литров пресной воды тратится на 100 мл кофе?",
"answerOptions": [
{
"answerText": "Менее 30 л",
"isCorrect": false
},
{
"answerText": "50 л",
"isCorrect": false
},
{
"answerText": "130 л",
"isCorrect": true
}
]
},
{
"questionText": "Повторное использование вещей сокращает эко-след на:",
"answerOptions": [
{
"answerText": "70 %",
"isCorrect": true
},
{
"answerText": "50 л",
"isCorrect": false
},
{
"answerText": "10 л",
"isCorrect": false
}
]
},
{
"questionText": "Сколько лет будет разлагается полиэтиленовый пакет?",
"answerOptions": [
{
"answerText": "~ 50 лет",
"isCorrect": false
},
{
"answerText": "~ 100 - 200 лет",
"isCorrect": true
},
{
"answerText": "~ 500 лет",
"isCorrect": false
}
]
},
{
"questionText": "Сколько нужно пластиковых бутылок, чтобы сделать 1 пару кроссовок?",
"answerOptions": [
{
"answerText": "Более 150",
"isCorrect": false
},
{
"answerText": "Около 100",
"isCorrect": false
},
{
"answerText": "Около 20",
"isCorrect": true
}
]
},
{
"questionText": "Переработка сокращает загрязнение воды на:",
"answerOptions": [
{
"answerText": "20 %",
"isCorrect": false
},
{
"answerText": "50 %",
"isCorrect": true
},
{
"answerText": "80 %",
"isCorrect": false
}
]
},
{
"questionText": "Сколько тонн нефти ежегодно попадает в океан?",
"answerOptions": [
{
"answerText": "Менее 1 млн тонн",
"isCorrect": false
},
{
"answerText": "Менее 5 млн тонн",
"isCorrect": false
},
{
"answerText": "От 5 до 10 млн тонн",
"isCorrect": true
}
]
},
{
"questionText": "Сколько лет будет разлагаться пластиковая зубная щетка?",
"answerOptions": [
{
"answerText": "От 80 до 200 лет",
"isCorrect": false
},
{
"answerText": "До 500 лет",
"isCorrect": false
},
{
"answerText": "От 500 до 1000 лет",
"isCorrect": true
}
]
},
{
"questionText": "Сколько кг мусора производит российская семья из 4 человек?",
"answerOptions": [
{
"answerText": "Около 400 кг",
"isCorrect": true
},
{
"answerText": "Около 200 кг",
"isCorrect": false
},
{
"answerText": "Менее 100 кг",
"isCorrect": false
}
]
}
]
