Kako izraditi kviz putem React-a - sa savjetima i početnim kodom

U ovom početnom vodiču za React izradit ćemo aplikaciju za kviz. Radit ćemo sa složenim objektima stanja, kako upravljati različitim kukama stanja i prikazivati ​​stvari na temelju stanja.

Pogledajte:

Isprobajte sami

Ako prvo želite krenuti sami, evo scenarija (možete i preuzeti početni kôd u nastavku):

  • Kad korisnik klikne gumb, trebalo bi se pojaviti sljedeće pitanje
  • Ako korisnik postavi pitanje točno, trebao bi povećati svoj rezultat
  • Kada korisnik dođe do kraja kviza, treba prikazati njegov ukupni rezultat

Video vodič

Početni kod

Dohvatite ga ovdje na GitHubu.

Idemo!

Ako otvorite početni kôd i odete na App.js , vidjet ćete da sam vam dao popis pitanja / odgovora, pohranjenih kao niz koji se zove pitanja . Ovo je naš kviz.

Naš prvi cilj je uzeti podatke iz niza i prikazati ih na zaslonu.

Uklonit ćemo kodirani tekst i zasad uzeti podatke iz prvog pitanja, samo da pokrenemo stvari. Kasnije ćemo se brinuti o promjeni pitanja.

U našem JSX-u uklonite kodirani tekst pitanja i upišite {questions[0]}da biste dobili prvu stavku (ili pitanje) iz našeg niza pitanja.

 {questions[0]} 

Renderiranje pitanja i odgovora

Prvo je pitanje objekt, pa možemo koristiti "točku notacije" za pristup svojstvima. Sada ćemo samo {question[0].questionText}pristupiti tekstu pitanja za ovaj objekt:

 {questions[0].questionText} 

Spremite i pokrenite aplikaciju. Primijetite kako se tekst ažurira. Imajte na umu da upravo uzimamo prvi tekst pitanja iz prvog objekta u našem nizu pitanja.

Zauzet ćemo sličan pristup opcijama odgovora. Uklonite tvrdo kodirane gumbe i koristit ćemo funkciju karte da bismo premotavali opcije odgovora na dano pitanje.

Zapamtite da se funkcija mape petlja preko niza i daje nam trenutnu stavku u kojoj se petlja trenutno nalazi, u obliku varijable.

Zamijenite div "odjeljka za odgovore" sljedećim:

 {questions[0].answerOptions.map((answerOption, index) => ( {answerOption.answerText} ))} 

Spremite i pokrenite aplikaciju. Primijetite kako se pojavljuju četiri gumba za odgovor i tekst se dinamički prikazuje.

Sažmimo:

  • Prvo pitanje dobivamo iz niza pitanja: questions[0]
  • Prvo pitanje je objekt koji sadrži niz answerOptions. Do ovog polja možemo doći pomoću točkaste notacije:questions[0].answerOptions
  • Budući da answerOptionsje niz, možemo preslikati ovo:questions[0].answerOptions.map
  • Unutar funkcije karte prikazujemo gumb za svaku answerOptioni prikazujemo tekst

Promjena pitanja pomoću stanja

Vratimo se sada našem JSX-u. Primijetite kako ćemo questions[0]se questions[1], ako se promijenimo u ili questions[2], UI ažurirati. To je zato što uzima podatke iz različitih pitanja u našem nizu pitanja, ovisno o indeksu.

Ono što želimo učiniti je da pomoću objekta stanja zadržimo pitanje na kojem se korisnik trenutno nalazi i to ažuriramo kad se klikne gumb za odgovor. To možete vidjeti iz pokretanja koda u posljednjem primjeru.

Samo naprijed dodajte objekt stanja koji će sadržavati trenutni broj pitanja na kojem je korisnik. To će biti inicijalizirano na 0, tako da kviz uzima prvo pitanje iz niza:

const [currentQuestion, setCurrentQuestion] = useState(0); 

Sada želimo zamijeniti kodirani '0' u našem JSX-u ovom varijablom. Prvo za tekst pitanja:

 {questions[currentQuestion].questionText} 

A također i za dio pitanja:

 {questions[currentQuestion].answerOptions.map((answerOption, index) => ( {answerOption.answerText} ))} 

Sada ako inicijalizirate currentQuestion na nešto drugo osim 0, na primjer 1 ili 2, korisničko sučelje će se ažurirati tako da prikaže pitanje i odgovore na to određeno pitanje. Baš super!

Dodajmo neki kôd tako da kada kliknemo odgovor, povećamo vrijednost currentQuestion da bismo došli do sljedećeg pitanja.

Stvorite novu funkciju nazvanu handleAnswerButtonClick . To je ono što će se pozvati kada korisnik klikne odgovor.

Povećat ćemo trenutnu vrijednost pitanja za jedan, spremiti je u novu varijablu i postaviti ovu novu varijablu u stanje:

const handleAnswerButtonClick = (answerOption) => { const nextQuestion = currentQuestion + 1; setCurrentQuestion(nextQuestion); }; 

Zatim na naš gumb dodajte događaj onClick tako:

 handleAnswerButtonClick()}>{answerOption.answerText} 

Ako ovo pokušamo, vidjet ćete da djeluje dok ne dođemo do kraja:

Pa što se događa? Pa u našoj funkciji handleAnswerButtonClick povećavamo broj i postavljamo ga u stanje. To je u redu.

Ali imajte na umu da taj broj koristimo za pristup nizu kako bismo dobili mogućnosti pitanja i odgovora. Jednom kad dođemo do 5, puknut će jer nema 5. elementa!

Napravimo provjeru da ne prijeđemo ograničenje. U našu funkciju handleAnswerButtonClick dodajte sljedeći uvjet:

if (nextQuestion < questions.length) { setCurrentQuestion(nextQuestion); } else { alert('you reached the end of the quiz'); } 

To u osnovi govori ako je sljedeći broj pitanja manji od ukupnog broja pitanja, ažurirajte stanje na sljedeće pitanje. Inače, došli smo do kraja kviza, zato za sada pokažite upozorenje.

Prikazivanje zaslona s rezultatima

Umjesto da prikazujemo upozorenje, ono što želimo učiniti je prikazati zaslon "rezultat".

Ako pogledamo JSX, primijetit ćete da sam ovdje stavio oznaku umjesto vas, samo trebamo zamijeniti "false" logikom.

Pa kako da krenemo s tim? Pa ovo je savršena stvar za staviti u stanje!

Dodajte još jedan objekt stanja koji će pohraniti kada želimo prikazati zaslon s rezultatima ili ne:

const [showScore, setShowScore] = useState(false); 

I zamijenite falsesa showScoreu našem JSX-u:

 {showScore ? // ... score section markup : // ... quiz question/answer markup} 

Ništa se neće promijeniti, ali ako vrijednost stanja promijenimo u true, tada će se prikazati rezultat div. To je zato što je sve zamotano u ternar, što znači:

"Ako je showScore istinit, prikažite oznaku odjeljka rezultata, u suprotnom, označite pitanje / odgovor kviza"

Sada želimo ažurirati ovu varijablu stanja kada je korisnik došao do kraja kviza. Logiku za to već smo napisali u našoj funkciji handleAnswerButtonClick.

Sve što moramo učiniti je zamijeniti logiku upozorenja koja ažurira varijablu showScore na istinitu:

if (nextQuestion < questions.length) { setCurrentQuestion(nextQuestion); } else { setShowScore(true); } 

Ako kliknemo na odgovore u kvizu, prikazat će se bodovni odjeljak kad dođemo do kraja. Trenutno su prikazani tekst i partiture kodirani niz, pa bismo ga trebali učiniti dinamičnim.

Spremanje rezultata

Naš sljedeći zadatak je zadržati rezultat negdje u našoj aplikaciji i povećati ovu vrijednost ako korisnik odabere ispravnu opciju.

Logično mjesto za to je unutar funkcije “handleAnswerOptonClick”.

Zapamtite kada prelazimo preko answerOptions , funkcija karte daje nam objekt za svaki koji uključuje questionText i logičku vrijednost koja pokazuje je li taj odgovor točan ili ne. Ovom logičkom vrijednošću služit ćemo se kako bismo povećali rezultat.

U našem gumbu ažurirajte funkciju ovako:

onClick={()=> handleAnswerButtonClick(answerOption.isCorrect) 

Sljedeće ažuriranje funkcije da prihvati ovaj parametar:

const handleAnswerButtonClick = (isCorrect) => { //... other code }; 

Sada ovdje u našu funkciju možemo dodati malo logike. Za sada želimo reći "ako je isCorrect istina, želimo prikazati upozorenje":

const handleAnswerButtonClick = (isCorrect) => { if (isCorrect) { alert(“the answer is correct!”) } //...other code }; 

Ovo je isto kao if(isCorrect === true)i samo skraćena verzija. Ako ovo pokušamo, vidjet ćemo da ćemo dobiti upozorenje kada kliknemo na točan odgovor.

Samo da rezimiram do sada:

  • Kad prelazimo preko gumba, logičkuisCorrect vrijednost za taj gumb prosljeđujemo funkciji handleAnswerButtonClick
  • U funkciji provjeravamo je li ta vrijednost istinita i prikazujemo upozorenje ako jest.

Dalje želimo zapravo spremiti rezultat. Što mislite kako to radimo? Ako ste rekli državna vrijednost, u pravu ste!

Samo naprijed dodajte još jednu državnu vrijednost koja se naziva "rezultat". Ne zaboravite prefiksu funkcije za promjenu vrijednosti dodati "set", tako da će biti postavljenaScore. Inicirajte ga na 0:

const [score, setScore] = useState(0); 

Zatim umjesto prikazivanja upozorenja, želimo ažurirati rezultat za 1 ako je korisnik dobio točan odgovor.

U našoj funkciji handleAnswerButtonClick uklonite upozorenje i povećajte rezultat za jedan:

const handleAnswerButtonClick = (isCorrect) => { if (answerOption.isCorrect) { setScore(score + 1); } //...other code }; 

Prikaz rezultata

Da bismo prikazali rezultat, samo moramo napraviti malu promjenu koda za prikazivanje. U našem JSX-u uklonite kodirani niz u odjeljku rezultata i dodajte ovu novu varijablu:

 You scored {score} out of {questions.length} 
 You scored {score} out of {questions.length} 

Ako sada prođemo kroz odgovore, rezultat je dinamičan i na kraju će se ispravno prikazati!

Još jedna zadnja stvar prije nego što završimo našu kviz aplikaciju: primijetit ćete da je trenutno pitanje prikazano na korisničkom sučelju uvijek "1", jer je kodirano. Moramo to promijeniti kako bismo bili dinamičniji.

Zamijenite "brojanje pitanja" sljedećim:

 Question {currentQuestionIndex + 1}/{questions.length} 

Zapamtite da nam je potreban +1 jer računala počinju računati od 0, a ne od 1.

Želite još projektnih ideja?

Zašto ne biste pokušali izgraditi neke React projekte kako biste dodatno potaknuli svoje učenje? Svaki tjedan šaljem novi projekt za vas kako biste isprobali radni primjer, početni kod i savjete. Pretplatite se da biste ovo prenijeli ravno u vašu pristiglu poštu!