menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





Exercice:Quizz

En utilisant React créer un Quizz d'animaux avec deux choix

Exemple :avec les components fonctionnels

import React, { useState } from "react";

const TpQuizzPicutres = () => {
  const 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"
    }
  ];

  const [index, setIndex] = useState(0);

  const [questionDisplayed, setQuestionDisplayed] = useState(quizz[index]);
  const [score, setScore] = useState(0);
  const [disabledChoix, setDisabledChoix] = useState(false);
  const [colorChoix1, setColorChoix1] = useState('');
  const [colorChoix2, setColorChoix2] = useState('');

  const nextQuesstoin = () => {
    if (index < quizz.length - 1) {
      setIndex(index + 1);
      setQuestionDisplayed(quizz[index + 1]);
      setDisabledChoix(false);
      setColorChoix1('');
      setColorChoix2('');
    }
  };

  const getAnswer = (event) => {
    const reponseUser = event.target.value;
    const buttonName = event.target.name;

    let color1 = '';
    let color2 = '';
    let plus = 1;

    if (reponseUser !== 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';
      }
    }

    setScore(score + plus);
    setDisabledChoix(true);
    setColorChoix1(color1);
    setColorChoix2(color2);
  };

  return (
    <div>
      <img src={questionDisplayed.img} style={{ width: '100%' }} alt="quiz" />
      <input type="button" value={questionDisplayed.choix1} name="colorChoix1" style={{ backgroundColor: colorChoix1 }} onClick={getAnswer} disabled={disabledChoix} />
      <input type="button" value={questionDisplayed.choix2} name="colorChoix2" style={{ backgroundColor: colorChoix2 }} onClick={getAnswer} disabled={disabledChoix} />
      <input type="button" onClick={nextQuesstoin} value="Next" />
      <h4>Your score is: {score}</h4>
    </div>
  );
};

export default TpQuizzPicutres;
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