Da skal vi fortsette med MultipleChoice koden vår. Husker du hvordan det så ut der vi slapp i forrige uke? Nei, da kan du se her:
For at denne koden skal kunne fungere i et elæringskurs så trenger vi å gjøre noen endringer og forbedringer.
Vi pleier å skille ut innholdet og det gjorde vi delvis sist. Men da la vi data inn i samme fil og det er jo ikke så fleksibelt. Som regel vil dette innholdet komme fra en database, eller et API. Det vanligste formatet for å sende data fra et API er JSON. Det er et format som er lett å lese og lett å skrive. JSON står for JavaScript Object Notation.
Vi har ikke tid til å lage en database eller et API eller no sånt akkurat nå, så for dette eksempelet lagrer vi datene våre i en fil som heter data.json. Denne filen ligger i samme mappe som App.js og index.js. Og i react så kan vi importere data fra en fil ved å bruke import kommandoen. Så da kan vi skrive import data from './data.json' og da vil vi få innholdet fra data.json inn i variabelen data.
Siden vi ofte også har mer enn bare ett spørsmål så har vi også brukt en datastruktur som heter array. Det er en liste med ting. Her er et eksempel som er en liste med ord: ["Dette", "er", "en", "array"]. I koden under er det en liste med objekter. Hvert objekt har en id, en question og igjen en array kalt responses som er en liste med svaralternativer. Hvert svaralternativ har en id og en label. Hvert element i en array kan referes til ved å bruke en indeks (en teller). Og indeksen starter på 0. Så det første elementet i en array har indeks 0, det andre elementet har indeks 1, det tredje elementet har indeks 2 osv.
Ta en titt på koden her, så ser du sikkert også noen flere endringer som er gjort:
I vår MultipleChoice-komponent har jeg også lagt til noen variabler som bruker en innebygd React funksjon som heter useState. Denne funksjonen lar oss lage en variabel som vi kan endre på. Og når vi endrer på den så vil React oppdatere siden vår. Det er en av de tingene som gjør React "reaktivt". Vi kan endre på variabler og React vil oppdatere siden vår automatisk. Variabelen counter brukes til å holde styr på hvilket spørsmål vi er på. Den viser til hvilken indeks i listen (array'en) vi skal gå til.
Men jeg bruker også en funksjon som heter useRef som lar oss lage en variabel som ikke vil oppdatere siden vår. Denne funksjonen er nyttig når vi skal lage en referanse til et HTML-element. I dette tilfellet så bruker jeg den til å lage en referanse til <button> elementet som sender inn svar. Og ved å ha denne referansen kan jeg deaktivere knappen når vi er ferdig med alle spørsmålene.
Hver gang vi trykker på svar-knappen så lagrer vi resultatet med 1 eller 0 poeng. Dersom vi har flere spørsmål så viser vi neste spørsmål. Dersom vi ikke har flere spørsmål så viser vi resultatet.
Her brukes if else som er en typisk måte å bygge opp logikk i koden.
For å summere opp poengene så bruker vi en funksjon som heter reduce. Denne funksjonen tar en liste med tall og summerer dem. I dette tilfellet så har vi en liste med objekter og vi bruker reduce til å summere opp poengene. Les mer om reduce her: Array.prototype.reduce()
På tide å være litt mer aktivt deltakende. Prøv å legge til flere spørsmål og svaralternativer. Det må jo ikke nødvendigvis være bare tre alternativer.
Og når du først er i gang, så kan du jo også prøve å endre litt på utseende til siden. Du kan for eksempel endre på fargene, eller legge til en bakgrunnsfarge. Gå inn i styles.css og prøv deg frem!
Og får du opp masse feilmeldinger du ikke blir kvitt så er det bare å laste inn siden på nytt og starte om igjen. Lykke til!