language quiz application

DisplayQuizz.jsx

import React, { Component } from 'react';
import ReponseQuiz from './Reponse';
import SubmitTest from  './submitTest';
import AnswerIsCorrect from './answerIsCorrect';
import AnswerIsWrong from './answerIsWrong';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBCol, MDBRow, MDBIcon, MDBAnimation } from 'mdbreact';

class DisplayQuizz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contenuReponse: "?",
      answerIsCorrect: false,
      answerIsWrong: false,
    };
    this.resetAnswer = this.resetAnswer.bind(this);
    this.chargeResetAnswer = this.chargeResetAnswer.bind(this);

  }

  chargeReponseClick(valeurReponse) {
    this.setState({contenuReponse: valeurReponse});
  }

  isAnswerCorrect(valeurReponse) {
    if(valeurReponse === this.props.evalStatus.test.reponseCorrecte && this.state.answerIsWrong === false) {
      this.setState({answerIsCorrect: true})
      console.log("Bien joué", this.state.answerIsWrong)
    }
    else if(this.state.answerIsCorrect === false){
      this.setState({
      answerIsWrong: true});
      console.log("What ?!", this.state.answerIsCorrect)
    }
  }


resetAnswer() {
  if(this.state.answerIsWrong === true) {
  this.setState({
  answerIsWrong: false});

  } else if (this.state.answerIsCorrect === true) {
  this.setState({
  answerIsCorrect: false});
  }
  console.log("Ok", this.state.answerIsCorrect, this.state.answerIsWrong)
}


chargeResetAnswer() {
  setTimeout((answerIsWrong, answerIsCorrect) => this.resetAnswer(answerIsWrong, answerIsCorrect), 3000);
}
    
  componentDidUpdate(prevProps, prevState) {

      if(prevProps.evalStatus.test.questionElements !== this.props.evalStatus.test.questionElements) {
        this.setState({
          contenuReponse: "?",
          answerIsWrong: false,
          answerIsCorrect: false
        });
      }
    }

  render () {
    const{evalStatus, selectTest, cancelForm, formData, showDisplayQuizz} = this.props;

    const questions = evalStatus.test.questionElements.map(questionElement =>
      <span key={questionElement.id}>
        {questionElement.questionElement === "vide" ?
          (<ReponseQuiz reponse={this.state.contenuReponse}/>) : (questionElement.questionElement)}
      </span> )

    const displayReponses = evalStatus.test.reponses.map(reponse => {
      
      if(this.props.evalStatus.test.appMode === "ajout" & (reponse.reponse) === this.props.evalStatus.test.reponseCorrecte) {
        return <MDBBtn key={reponse.id} className='response' color='success' onClick={() =>
        this.chargeReponseClick(reponse.reponse)}>{reponse.reponse} </MDBBtn>
      } else if (this.props.evalStatus.test.appMode === "quiz") {
       
        return <MDBBtn key={reponse.id} className='response' onClick={() => {
          this.isAnswerCorrect(reponse.reponse); this.chargeReponseClick(reponse.reponse); this.chargeResetAnswer()}}>{reponse.reponse} </MDBBtn>
      } else {
        return <MDBBtn key={reponse.id} className='response' onClick={() =>
        this.chargeReponseClick(reponse.reponse)}>{reponse.reponse} </MDBBtn>
      }
      }
    )

    return (
      <MDBRow className="DisplayTest">
        <MDBCol style={{ maxWidth: "40rem" }}>
        <MDBCard  cascade>
          <MDBCardImage className="card-image" cascade tag="div" style={{
              backgroundImage:
                "url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg')"
            }}>
            
            {this.state.answerIsCorrect === false & this.state.answerIsWrong === false ? <MDBCardImage cascade className="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" style={{ maxWidth: "40rem" }} /> : ""}
            {this.props.evalStatus.test.appMode === "quiz" & this.state.answerIsCorrect === true ? <MDBCardImage className="view view-cascade gradient-card-header" cascade tag="div"><AnswerIsCorrect /></MDBCardImage> : "" }
            {this.props.evalStatus.test.appMode === "quiz" & this.state.answerIsWrong === true ? <MDBCardImage className="view view-cascade gradient-card-header" cascade tag="div"><AnswerIsWrong /></MDBCardImage> : ""}
          </MDBCardImage>
            <MDBCardBody cascade>

              <MDBCardTitle className= 'constat'>{evalStatus.test.appConsigne}</MDBCardTitle>

              <MDBCardText className='question'>{questions}</MDBCardText>
              <MDBCardText className='reponse' >{displayReponses}</MDBCardText>
              {this.state.contenuReponse !== "?" & this.props.evalStatus.test.appMode !== "ajout" ? (<MDBAnimation type="bounce" duration="5s" delay="1s">
                <SubmitTest evalStatus={evalStatus} contenuReponse={this.state.contenuReponse} selectTest={selectTest}/> 
              </MDBAnimation>) : <div />}
              {this.props.evalStatus.test.appMode === "ajout" ? (
                <SubmitTest evalStatus={evalStatus} contenuReponse={this.state.contenuReponse} selectTest={selectTest} cancelForm={cancelForm} formData={formData} showDisplayQuizz={showDisplayQuizz}/>) : ""}
            </MDBCardBody>
            <div className="rounded-bottom mdb-color lighten-3 text-center pt-3">
              <ul className="list-unstyled list-inline font-small">
                <li className="list-inline-item pr-2 white-text">
                  <MDBIcon far icon="clock" /> 05/10/2015
                </li>
                <li className="list-inline-item pr-2">
                  <a href="#!" className="white-text">
                    <MDBIcon far icon="comments" />
                    12
                  </a>
                </li>
                <li className="list-inline-item pr-2">
                  <a href="#!" className="white-text">
                    <MDBIcon fab icon="facebook-f"> </MDBIcon>
                    21
                  </a>
                </li>
                <li className="list-inline-item">
                  <a href="#!" className="white-text">
                    <MDBIcon fab icon="twitter"> </MDBIcon>5
                  </a>
                </li>
              </ul>
            </div>
          </MDBCard>

        </MDBCol>
      </MDBRow>
    );
  }
}

export default DisplayQuizz;

Formteacher.jsx

import React from "react";
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCard, MDBCardBody, MDBInput, MDBSelect} from 'mdbreact';
import DisplayQuizz from '../../../screens/displayQuizz';

const initState = {
  isClicked: false,
  appEvaluation: true,
  appNiveau: true,
  appCertification: true,
  appExercice: true,
  appLangueConsigne: [
    {
      checked: false,
      text: "Japanese",
      value: "ja"
    },
    {
      checked: false,
      text: "French",
      value: "fr"
    },
    {
      checked: false,
      text: "English",
      value: "en"
    }
  ],
  appLangue: [
    {
      checked: false,
      disabled: false,
      text: "Japanese",
      value: "ja"
    },
    {
      checked: false,
      disabled: false,
      icon: null,
      text: "French",
      value: "fr"
    },
    {
      checked: false,
      disabled: false,
      icon: null,
      text: "English",
      value: "en"
    }
  ],
  appConsigne: "",
  questionElements: [
    {
      id: 0,
      questionElement: "",
      vide: false,
    },
    {
      id: 1,
      questionElement:"",
     vide: false,
    },

    {
      id: 2,
      questionElement:"",
     vide: false,
    }
  ],
  reponseCorrecte: "",
  reponses: [
    {
      id : 0,
      reponse: ""
    },

    {
      id : 1,
      reponse: ""
    },
    {
      id : 2,
      reponse: ""
    },
    {
      id : 3,
      reponse: ""
    }
  ],
}


class FormTeacher extends React.Component {
  constructor(props) {
    super(props);
      this.state = initState
  }


handleQuestions = idx => evt => {
    evt.persist();
    const newQuestionElements = [...this.state.questionElements];
    newQuestionElements[idx].questionElement = evt.target.value;

    if (newQuestionElements.every(el => el.questionElement.length)) {
      newQuestionElements.push({
        id: newQuestionElements.length,
        questionElement: "",
        vide: false
      });
    }
    this.setState({
      questionElements: newQuestionElements
    });
  };

  handleAnswers = index => e => {
    e.persist();
    const newReponses = [...this.state.reponses];
    newReponses[index].reponse = e.target.value;

    if(newReponses.every(el => el.reponse.length)) {
      newReponses.push({
        id: newReponses.length,
        reponse: ""
      });
    }

    this.setState({reponses: newReponses});
    if(this.state.reponses[0].id === 0) {
      this.setState((state) => ({reponseCorrecte: state.reponses[0].reponse}));
      console.log(this.state.reponseCorrecte);
    }
  }

  submitHandler = (event) => {
    event.preventDefault();
    /*event.target.className += " was-validated";*/

  };

  changeHandler = (event) => {
    event.persist()
    this.setState({ [event.target.name]: event.target.value });
  };

  showDisplayQuizz = () => {
      this.setState({ isClicked: !this.state.isClicked});
  }

  cancelForm = () => {
    this.setState({
      questionElements: [
        {
          id: 0,
          questionElement: ""
        },
        {
          id: 1,
          questionElement:""
        },

        {
          id: 2,
          questionElement:""
        }
      ],
      reponseCorrecte: "",
      reponses: [
        {
          id : 0,
          reponse: ""
        },

        {
          id : 1,
          reponse: ""
        },
        {
          id : 2,
          reponse: ""
        },
        {
          id : 3,
          reponse: ""
        }
      ],
      });
  }

  handleCheckbox = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  removeEmptyAnswer = () => {
    const valueToRemove = "";

        const nReponses = this.state.reponses.filter(answerItem => answerItem.reponse !== valueToRemove)
         console.log("remove", nReponses);
        this.setState({ reponses: nReponses})
  }

  render() {
    const{evalStatus, selectTest, updateFormTeacher} = this.props;
    const{appConsigne, questionElements, reponses, reponseCorrecte, appLangueConsigne, appEvaluation, appExercice, appCertification, appNiveau, appLangue, vide} = this.state;
    const appMode = this.props.evalStatus.test.appMode;
    const appEtape = this.props.evalStatus.test.appEtape;
 
    const displayQuestions = questionElements.map((questionItem, idx) => (
      <div key={idx}>
      <MDBInput
        key={questionItem.id}
        value={questionItem.questionElement}
        name="questionElements"
        type="text"
        id={'displayQuestions'+questionItem.id.toString()}
        label="question"
        required
        onChange={this.handleQuestions(idx)}
        style={{ maxWidth: "5rem" }}>
        <div className="valid-feedback">Looks good!</div>
      </MDBInput>
      <MDBInput label="vide" type="checkbox" id="checkbox5" name="vide" checked={questionItem.vide} onChange={this.handleCheckbox} />
      </div>
    ));

//affiche les réponses
    const displayAnswers = reponses.map((answerItem, index) => {
      /*si c'est la première réponse afficher label : réponse correcte*/
      if( index === 0) {
       return <MDBInput
        key={answerItem.id}
        value={answerItem.reponse}
        name="reponses"
        type="text"
        id={'displayAnswers'+answerItem.id.toString()}
        label="reponse correcte"
        required
        onChange={this.handleAnswers(index)}>
        <div className="valid-feedback">Looks good!</div>
      </MDBInput>
    } else {
      return <MDBInput
        key={answerItem.id}
        value={answerItem.reponse}
        name="reponses"
        type="text"
        id={'displayAnswers'+answerItem.id.toString()}
        label="reponse"
        required
      onChange={this.handleAnswers(index)}>
        <div className="valid-feedback">Looks good!</div>
      </MDBInput>
    }
  });

    return (
      <MDBContainer>
        <MDBRow>
          <MDBCol>
            <MDBCard>
              <MDBCardBody>
                <div>
                  <form
                    className="needs-validation"
                    onSubmit={this.submitHandler}
                    noValidate
                  >
                    <MDBRow>
                      <MDBCol md="4">
                        <div style={{ maxWidth: "5rem" }}>
                          <MDBSelect options={this.state.appLangueConsigne} selected="Instruction language"/>
                        </div>
                      </MDBCol>
                      <MDBCol md="4">
                        <div style={{ maxWidth: "5rem" }}>
                          <MDBSelect options={this.state.appLangue} selected="Test language" />
                        </div>
                      </MDBCol>
                      <MDBCol md="4">
                        <div >
                          <MDBInput label="evaluation" type="checkbox" id="checkbox1" name="appEvaluation" checked={this.state.appEvaluation} onChange={this.handleCheckbox} />

                          <MDBInput label="exercice" type="checkbox" name="appExercice" id="checkbox2" checked={this.state.appExercice} onChange={this.handleCheckbox}/>

                          <MDBInput label="niveau" type="checkbox" name="appNiveau" id="checkbox3" checked={this.state.appNiveau} onChange={this.handleCheckbox}/>

                          <MDBInput label="certification" type="checkbox" name="appCertification" id="checkbox4" checked={this.state.appCertification} onChange={this.handleCheckbox}/>
                        </div>
                      </MDBCol>
                      <MDBCol md="4" style={{ maxWidth: "20rem" }}>
                      {/*Affiche les consignes du test*/}
                        <MDBInput
                          value={this.state.appConsigne}
                          name="appConsigne"
                          onChange={this.changeHandler}
                          type="text"
                          id="materialFormRegisterNameEx"
                          label="consigne"
                          required
                        >
                          <div className="valid-feedback">Looks good!</div>
                        </MDBInput>
                      </MDBCol>
                    </MDBRow>
                    <MDBRow>
                      <MDBCol md="4" style={{ maxWidth: "8rem" }}>
                        <div>Q: {displayQuestions}</div>
                      </MDBCol>
                    </MDBRow>
                    <MDBRow>
                      <MDBCol md="4" style={{ maxWidth: "8rem" }}>
                      <div>R: {displayAnswers}</div>
                      </MDBCol>
                    </MDBRow>
                    <MDBBtn color="success" type="submit" onClick={() => { updateFormTeacher({appMode, appEtape, appConsigne, questionElements, reponses, reponseCorrecte, appLangueConsigne, appLangue, appEvaluation, appCertification, appExercice, appNiveau, vide}); this.showDisplayQuizz(); this.removeEmptyAnswer()}}>
                      Preview
                    </MDBBtn>
                  </form>
                </div>
              </MDBCardBody>
              {this.state.isClicked === true ? (<DisplayQuizz evalStatus= {evalStatus} selectTest={selectTest} cancelForm={this.cancelForm} formData ={this.state} showDisplayQuizz={this.showDisplayQuizz}/>) : ""}
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    );
  }
}

export default FormTeacher;

Quiz.js

import React, { Component } from 'react';
import Evaluation from './modes/evaluation';
import Exercice from './modes/exercice';
import Professeur from './modes/professeur';

const  afficheInit = {
  questionElements: [],
  reponses: [],
  reponseCorrecte: null
}

const sessionId = document.getElementById("sessionId");
const appSession = sessionId.getAttribute('data');

class Quiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      test:  afficheInit,
      appSession: appSession,
    };
    this.getTest = this.getTest.bind(this);
    this.updateFormTeacher = this.updateFormTeacher.bind(this);
  }

  updateFormTeacher(consigne) {
    this.setState({
      test: consigne
    },console.log("FormTeacher", consigne, this.state.test.appConsigne));
  }

  componentDidMount() { 
    this.getTest(this.state);
  }

  getTest(apiRequest) {
      fetch("https://someAPI.html", {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'text/plain'
        },
        body: JSON.stringify(apiRequest),
      })
        .then(response => response.json())
        .then(data => {
          console.log(data)
          this.setState({
            test: data,
          });
        });
  }

  render() {
    if (appSession) {
    return (
      <div>

      {{evaluation : <Evaluation  evalStatus = {this.state} selectTest = {this.getTest} />,
      quiz : <Exercice exoStatus = {this.state} selectTest = {this.getTest}/>,
      ajout : <Professeur evalStatus = {this.state} selectTest = {this.getTest} updateFormTeacher={this.updateFormTeacher}/>}[this.state.test.appMode]
    }
      </div>
    );
  } else {
    return(
      <div>
        <p>Please check your internet connexion and retry</p>
      </div>
    );
  }
}
}

export default Quiz;

received_from_API_json

{
    "appMode": "ajout",
    "appEtape": "question",
    "appConsigne": "Choisissez la bonne particule",
    "questionElements": [
        {
            "id": 1,
            "questionElement": "\u304a\u3061\u3083"
        },
        {
            "id": 2,
            "questionElement": "vide"
        },
        {
            "id": 3,
            "questionElement": "\u304f\u3060\u3055\u3044\u3002"
        }
    ],
    "reponseCorrecte": "\u3092",
    "reponses": [
        {
            "id": 1,
            "reponse": "\u306f"
        },
        {
            "id": 2,
            "reponse": "\u306e"
        },
        {
            "id": 3,
            "reponse": "\u3092"
        },
        {
            "id": 4,
            "reponse": "\u304a"
        }
    ]
}

SubmitTest.jsx

import  React, { Component }  from  'react';
import { MDBBtn, MDBIcon  } from 'mdbreact';

class SubmitTest extends Component{

  render(){
    const{ selectTest, evalStatus, contenuReponse, cancelForm, formData, showDisplayQuizz} =this.props;
    const appSession =  (evalStatus.appSession);
    const test = (evalStatus.test);
    return (
      <div  className="submitTest">
        {this.props.evalStatus.test.appMode === "ajout" ? (
          <MDBBtn floating tag="a" className="ml-1 lighten-3 mdb-coalor float-right" action onClick={() => { selectTest({contenuReponse, appSession, test},  console.log({selectTest, contenuReponse}, appSession)); cancelForm({formData}); showDisplayQuizz({formData})}}>
            <MDBIcon icon="chevron-right" />
          </MDBBtn>) : (
          <MDBBtn floating tag="a" className="ml-1 lighten-3 mdb-coalor float-right" action onClick={() => selectTest({contenuReponse, appSession, test},  console.log({selectTest, contenuReponse}, appSession))}>
            <MDBIcon icon="chevron-right" />
          </MDBBtn>)}
      </div>
    );
  }
}

export default SubmitTest;