I am working on creating a survey page with some Likert scales using react-Likert-scale dependency. After I proceed to the next question, I am hoping the scales to be unchecked and not be the same as the previous responses when a user proceeds to the next page on clicking the next button.
import Likert from 'react-likert-scale';
var num = 30
var responses_likert = [
{ value: 1, text: "Strongly Disagree" },
{ value: 2, text: "Disagree" },
{ value: 5, text: "Neither Agree nor Disagree" },
{ value: 6, text: "Agree" },
{ value: 7, text: "Strongly Agree" }
]
class VisQuiz extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.setState({
session_id: this.props.location.state.data.session_id,
current_visualization_index: 0,
responses: {},
resize_bool: true,
device_info: '',
}
)
window.addEventListener('resize', this.handleWindowResize.bind(this))
}
handleWindowResize(e) {
this.setState({
resize_bool: !this.state.resize_bool
})
}
handleTextChange(e) {
this.setState({ comment: e.target.value })
}
next_btn() {
this.setState({
current_visualization_index: this.state.current_visualization_index + 1,
})
}
render() {
if (this.state == null || this.state.image_list == null) {
return (<p>Loading...</p>)
}
if (this.state.current_visualization_index < 30) {
console.log("Index is " + this.state.current_visualization_index)
let src_img = this.state.current_visualization_index
return (
<Container className={'container-class'} fluid>
<Row className={'vis-quiz-row'}>
<Col lg={6} className={'vis-column'}>
<img src={`./get_image?image_name=${this.state.image_list[src_img]}`} className='img_rand' resized={this.state.resize_bool}></img>
</Col>
<Col lg={6} className={'quiz-column'}>
<div className='grid-ques'>
<p className={'q1'}>Do you agree with Mr. ABC words at the show?</p>
<div className='que1'><Likert id="1" responses={responses_likert} onChange={(val) =>
this.record_ques(this.state.image_list[src_img], 10, val)
} /></div>
<p className={'q2'}>Do you think he was creative?</p>
<div className='que2'><Likert id="2" responses={responses_likert} onChange={(val) =>
this.record_ques(this.state.image_list[src_img], 11, val)
} /></div>
<div className={'sub-btn'}>
<Button className={'btn-1'} type={"button"} onClick={() =>
this.next_btn()
}>Next</Button>
</div>
</div>
</Col>
</Row>
</Container>
)
}
}
}
}
export default SurveyQues;
I am trying to figure out how to have the buttons unselected when going to the next page. Here is the link to the Likert-react-scale dependency (https://github.com/Craig-Creeger/react-likert-scale)
