En utilisant React créer un Quizz d'animaux avec deux choix
import React,{Component} from "react";
class TpQuizzPicutres extends React.Component{
constructor(props){
super(props)
this.quizz=[
{
img:'quizzImages/img1.png',
reponse:'lion',
choix1:"cow",
choix2:"lion"
},
{
img:'quizzImages/img2.png',
reponse:'dog',
choix1:"dog",
choix2:"cat"
}
, {
img:'quizzImages/img3.png',
reponse:'cat',
choix1:"cat",
choix2:"lion"
}
]
this.index=0;
this.state={
questionDisplayed:this.quizz[this.index],
score:0,
disabledChoix:false,
colorChoix1:'',
colorChoix2:''
}
}
nextQuesstoin=()=>{
//vérifier s'il existe encore des question à affichée
if(this.index<this.quizz.length-1)
{
this.index++;
this.setState({
questionDisplayed:this.quizz[this.index],
disabledChoix:false,
colorChoix1:'',
colorChoix2:''
})
}
}
getAnswer=(event)=>{
//récupérer la réponse de l'uilisateur
const reponseUser=event.target.value;
let buttonName=event.target.name;
let color1='';
let color2='';
//vérifier si la réponse est correcte
let plus=1;
if(reponseUser!=this.state.questionDisplayed.reponse)
{
plus=-1;
if(buttonName=="colorChoix1")
{
color1='red';
color2='green';
}
else
{
color1='green';
color2='red';
}
}
else
{
if(buttonName=="colorChoix1")
{
color1='green';
color2='red';
}
else
{
color1='red';
color2='green';
}
}
//changer le score selon la réponse et désactiver les boutons des choix
this.setState({
score:this.state.score+plus,
disabledChoix:true,
colorChoix1:color1,
colorChoix2:color2
})
}
render(){
//afin de ne à chaque fois faire this.state.attibut
//on peut maintenant appler les attribut du state directement
//sans passer par this.state
const {questionDisplayed,score,disabledChoix,colorChoix1,colorChoix2}=this.state;
return(<div>
<img src={this.state.questionDisplayed.img} style={ {width:'100%'}} />
<input type="button" value={questionDisplayed.choix1} name="colorChoix1" style={{backgroundColor:colorChoix1}} onClick={this.getAnswer} disabled={disabledChoix}/>
<input type="button" value={questionDisplayed.choix2} name="colorChoix2" style={{backgroundColor:colorChoix2}} onClick={this.getAnswer} disabled={disabledChoix}/>
<input type="button" onClick={this.nextQuesstoin} value="Next"/>
<h4>your score is : {score}</h4>
</div>)
}
}
export default TpQuizzPicutres
Ajouter un commentaire
Veuillez vous connecter pour ajouter un commentaire.
Pas encore de commentaires.