Quiz App - deel 2

We zijn bezig met het maken van een Quiz app te maken in REACT. Dit is deel twee waarin we onze App verder gaan afmaken. We leren hier ook een nieuwe techniek waarmee we in JSX door een array heen kunnen loopen.

Zorg ervoor dat je Quiz App - deel 1 goed hebt doorlopen en dat alles goed werkt.

Stap 1 - een loop in JSX met de map functie

Onze render methode in de class App ziet er tot nu toe zo uit:

render() {
  var antwoorden=questions[this.state.vraagNr].answerOptions;
  return (
    <div className="app">
        <div>{questions[this.state.vraagNr].questionText}</div>
        <button onClick={() => this.handleAnswerOptionClick(antwoorden[0].isCorrect)}>{antwoorden[0].answerText}</button>
        <button onClick={() => this.handleAnswerOptionClick(antwoorden[1].isCorrect)}>{antwoorden[1].answerText} {antwoorden[1].isCorrect}</button>
        <button onClick={() => this.handleAnswerOptionClick(antwoorden[2].isCorrect)}>{antwoorden[2].answerText} {antwoorden[2].isCorrect}</button>
        <button onClick={() => this.handleAnswerOptionClick(antwoorden[3].isCorrect)}>{antwoorden[3].answerText} {antwoorden[3].isCorrect}</button>
    </div>
  );
}

Regel 6,7, 8 en 9 lijken erg veel op elkaar en kunne in een loop worden geplaatst. De code is JSX (uitleg zie eerste les) en binnen JSX maken we een loop met de map functie. Lees hiervoor de uitleg op:

https://www.telerik.com/blogs/beginners-guide-loops-in-react-jsx

Lees de uitleg goed en vervang de vier regels dan door de volgende code:

{ antwoorden.map((antwoord) => (
  <button onClick={() => this.handleAnswerOptionClick(antwoord.isCorrect)}>{antwoord.answerText} {antwoord.isCorrect}</button>
))}

Je loopt dus door het array antwoorden heen en het element komt telkens in antwoord. Dus de eerste keer in de loop geldt:

antwoord = antwoorden[0]

daarna wordt

antwoord = atwoorden[1]

antwoord = antwoorden[2]

etc.

Stap 2 - Voortgang (vraagnummer)

 In de state variabele vraagNr houden we bij bij welke vraag we zijn. Deze telt vanaf 0. We zin dus bij vraag vraagNr+1 en we hebben in totaal questions.length vragen. Dat hadden we in onze vorige les al gebruikt om te bepalen of we al bij de laatste vraag waren.

We willen op de regels afdrukken "Vraag X van Y. X is dus de state variabale vraagNr en y is de lengte van het questionsArray. We maken een aparte div zodat we de tekst straks apart kunnen stijlen.

<div>
  Vraag {this.state.vraagNr + 1} van {questions.length}
</div>

Plaats deze JSX code zodat deze regel boven aan wordt geplaatst.

We stijlen deze dic met een margin-bottom: 20px

Maak een stijl question-count in de CSS en voeg de className toe aan de div die we net hebben gemaakt.

Onze app ziet er nu zo uit:

xxx