When the user spins the roulette wheel (Rolette.js) it shows the number of points the user will receive if they get the question right (Quiz.js).
How to make the points count if the user gets the question right or wrong. (If the question is correct, the points of the roulette must be added, if the roulette gives -30, 30 points must be withdrawn, if the user has no points, it must return zero).
Play.js -> File Context API
export default function PlayProvider({ children }) {
const [prizeNumber, setPrizeNumber] = useState(0);
const data = [];
return (
<PlayContext.Provider value={{ prizeNumber, setPrizeNumber, data }}>
{children}
</PlayContext.Provider>
);
}
export function usePlay() {
const context = useContext(PlayContext);
const { prizeNumber, setPrizeNumber } = context;
const data = [
{ id: 1, option: 10 },
{ id: 2, option: -30 },
{ id: 3, option: 50 },
{ id: 4, option: 30 },
{ id: 5, option: 40 },
{ id: 6, option: 20 }
];
return { prizeNumber, setPrizeNumber, data };
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Rolette.js
import React, { useState } from "react";
import { Wheel } from "react-custom-roulette";
import { Link } from "react-router-dom";
import { usePlay } from "./Play";
export default () => {
const [mustSpin, setMustSpin] = useState(false);
const { prizeNumber, setPrizeNumber, data } = usePlay();
const handleSpinClick = () => {
const newPrizeNumber = Math.floor(Math.random() * data.length);
setPrizeNumber(newPrizeNumber);
setMustSpin(true);
};
return (
<>
<div align="center">
<h1 align="center">Roulette Game</h1>
<hr />
<Wheel
mustStartSpinning={mustSpin}
prizeNumber={prizeNumber}
data={data}
outerBorderColor={["#f2f2f2"]}
outerBorderWidth={[25]}
innerBorderColor={["#f2f2f2"]}
radiusLineColor={["#dedede"]}
radiusLineWidth={[10]}
textColors={["#ffffff"]}
fontSize={[50]}
perpendicularText={[true]}
backgroundColors={[
"#F22B35",
"#F99533",
"#24CA69",
"#514E50",
"#46AEFF",
"#9145B7"
]}
onStopSpinning={() => {
setMustSpin(false);
}}
/>
<button className="button2" onClick={handleSpinClick}>
SPIN
</button>
<br />
{!mustSpin ? data[prizeNumber].option : "0"}
<hr />
<div align="center">
<Link to="/quiz">
<button className="btn2" disabled={mustSpin}>
Answer
</button>
</Link>
<button className="btn2" disabled>
Finish
</button>
</div>
</div>
</>
);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Quiz.js -> Questions
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { usePlay } from "./Play";
const dat = {
question: "Dummy Question?",
answers: ["A", "B", "C", "D"],
correctAnswer: "B"
};
function Quiz(props) {
// Context API
const { prizeNumber } = usePlay();
const { data } = usePlay();
const [selectedAnswer, setSelectedAnswer] = useState("");
const [isSubmitted, setIsSubmitted] = useState(false);
const [isError, setIsError] = useState(false);
console.log(selectedAnswer);
const onSelectAnswer = (answer) => {
if (isSubmitted) return;
setIsSubmitted(true);
setSelectedAnswer(answer);
setIsError(dat.correctAnswer !== answer);
};
const getAnswerClass = (answer) => {
if (!isSubmitted) {
return "";
} else if (dat.correctAnswer === answer) {
return "correct";
}
return isError ? "incorrect" : "";
};
return (
<div>
<h1 align="center">Questions</h1>
<hr />
<div className="question">
<h3>{dat.question}</h3>
{dat.answers.map((answer) => (
<p
key={answer}
className={getAnswerClass(answer)}
onClick={() => {
onSelectAnswer(answer);
}}
>
{answer}
</p>
))}
<br />
<span align="center" disabled={!isSubmitted}>
{data[prizeNumber].option}/300
</span>
</div>
<hr />
<div align="center">
<Link to="/r2">
<button className="btn2" disabled={!isSubmitted}>
Answer
</button>
</Link>
<button className="btn2" disabled>
Finish
</button>
</div>
</div>
);
}
export default Quiz;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>