Utilizing the RadioButton component to showcase different options of a question within a custom-built component:
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Grid from "@material-ui/core/Grid";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup/RadioGroup";
import Typography from "@material-ui/core/Typography";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import SyntaxHighlighter from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { Dispatch } from "redux";
import { incrementQuestion, IQuestion, questionRequest } from "../../actions/index";
import ContentQuiz from "../../components/ContentQuiz";
import history from "../../history/history";
interface IProps {
currentQuestionNumber: number;
loadingData: boolean;
questions: IQuestion[];
questionRequest: () => void;
incrementQuestion: (arg: number) => void;
numberOfQuestions: number;
}
const Quiz = (props: IProps) => {
const { currentQuestionNumber,
loadingData,
questions,
questionRequest,
incrementQuestion,
numberOfQuestions } = props;
const [answerOption, setAnswerOption] = useState(1);
useEffect(() => {
questionRequest();
}, [questionRequest]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setAnswerOption(Number((event.target as HTMLInputElement).value));
};
const handleNextQuiz = () => {
if (currentQuestionNumber === numberOfQuestions - 1) {
history.push("/homepage");
} else {
incrementQuestion(answerOption);
history.push("/contentQuiz");
}
};
const currentQuestion = questions[currentQuestionNumber];
return (
<div>
{loadingData ? ("Loading ...") : (
< ContentQuiz
questionNumber={currentQuestionNumber + 1}
handleClick={handleNextQuiz} >
<div>
<Typography variant="h3" gutterBottom> What's the output of </Typography>
<>
<SyntaxHighlighter language="javascript" style={dark} >
{currentQuestion.description.replace(";", "\n")}
</SyntaxHighlighter >
<Grid container direction="column" alignItems="baseline">
<Grid>
<FormControl component="fieldset">
<RadioGroup
name="option"
value={answerOption}
onChange={handleChange}>
{currentQuestion.options.map((option: string, index: number) => (
<FormControlLabel
key={index}
control={<Radio color="secondary" />}
label={option}
value={index + 1}
labelPlacement="end"
/>))
}
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</>
</div >
</ContentQuiz >
)}
</div>
);
};
const mapStateToProps = (state: any) => {
const { currentQuestionNumber, loadingData, questions, numberOfQuestions } = state.quiz;
return {
currentQuestionNumber,
loadingData,
questions,
numberOfQuestions
};
};
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
incrementQuestion: (answer: any) => dispatch<any>(incrementQuestion(answer)),
questionRequest: () => dispatch<any>(questionRequest())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Quiz);
Nevertheless, the code above allows for checking different options, even though the standard functionality of Radio buttons dictates that only one option can be selected at a time.
Seeing a similar query on Stack Overflow, I attempted to modify my code based on the answer provided. However, the handleChange function is not being triggered in my case, and I'm uncertain as to why.