Kvízalkalmazás készítése a React használatával - tippekkel és kezdőkóddal

Ebben a kezdő React bemutatóban kvíz alkalmazást fogunk építeni. Dolgozunk összetett állapotobjektumokkal, a különböző állapothorgok kezelésével és a dolgok állapot alapján történő megjelenítésével.

Nézd meg:

Próbáld ki magad

Ha először magának szeretne menni, íme a forgatókönyv (az alábbi indító kódot is megragadhatja):

  • Amikor a felhasználó egy gombra kattint, megjelenik a következő kérdés
  • Ha a felhasználó helyesnek találja a kérdést, növelnie kell a pontszámát
  • Amikor a felhasználó a kvíz végére ér, meg kell jeleníteni a teljes pontszámát

Videók áttekintése

Kezdő kód

Fogd át itt a GitHubon.

Gyerünk!

Ha megnyitja a starter kódot, és menjen App.js , látni fogod, adtam egy listát kérdések / válaszok, tárolásra nevű tömbben kérdésekre . Ez a mi vetélkedőnk.

Első célunk, hogy a kérdés adatait vegyük a tömbből, és megjelenítsük a képernyőn.

Eltávolítjuk a keményen kódolt szöveget, és egyelőre átvesszük az első kérdés adatait, csak a dolgok elindítása érdekében. Később aggódunk a kérdések váltása miatt.

A JSX-ben távolítsa el a keményen kódolt kérdés szövegét és típusát, {questions[0]}hogy megkapja a kérdéstömb első elemét (vagy kérdését).

 {questions[0]} 

A kérdés és a válaszok megadása

Az első kérdés egy objektum, így a „dot jelöléssel” hozzáférhetünk a tulajdonságokhoz. Most csak annyit teszünk {question[0].questionText}, hogy hozzáférjünk az objektum kérdésszövegéhez:

 {questions[0].questionText} 

Mentse és futtassa az alkalmazást. Figyelje meg, hogyan frissül a szöveg. Ne feledje, hogy csak az első kérdés szövegét vesszük a kérdéstömb első objektumától.

Hasonló megközelítést alkalmazunk a válaszlehetőségekre. Távolítsa el a kemény kódolású gombokat, és a térkép funkcióval áttekintjük az adott kérdésre adott válaszlehetőségeket.

Ne feledje, hogy a térképfüggvény a tömb felett hurkol, és megadja nekünk az aktuális elemet, amelyen a hurok éppen van, egy változó formájában.

Cserélje ki a "answer-section" div szót a következővel:

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

Mentse és futtassa az alkalmazást. Figyelje meg, hogyan jelenik meg négy válasz gomb, és a szöveg dinamikusan jelenik meg.

Összefoglaljuk:

  • Az első kérdést a kérdések tömbjéből kapjuk: questions[0]
  • Az első kérdés egy objektum, amely egy tömböt tartalmaz answerOptions. Ehhez a tömbhöz a dot jelölés használatával juthatunk:questions[0].answerOptions
  • Mivel az answerOptionsegy tömb, ezt áttekinthetjük:questions[0].answerOptions.map
  • A térkép funkcióban mindegyikhez megjelenítünk egy gombot answerOption, és megjelenítjük a szöveget

Kérdések megváltoztatása állapot használatával

Most menjünk vissza a JSX-be. Figyeljük meg, hogy ha megváltoztatjuk questions[0]a questions[1], vagy questions[2]az UI frissíti. Ez azért van, mert az index függvényében veszi fel a kérdéstömb különböző kérdéseinek adatait.

Azt szeretnénk megtenni, hogy egy állapotobjektum segítségével megtartjuk, melyik kérdésen van jelenleg a felhasználó, és frissítsük ezt, amikor a válasz gombra kattintunk. Ezt a kód futtatásából láthatja az utolsó példában.

Folytassa, és adjon hozzá egy állapotobjektumot, amely megtartja a felhasználó aktuális kérdésszámát . Ezt 0-ra inicializáljuk, így a kvíz az első kérdést veszi fel a tömbből:

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

Most ezzel a változóval szeretnénk lecserélni a JSX-ben a keményen kódolt „0” -t. Először a kérdés szövegéhez:

 {questions[currentQuestion].questionText} 

És a kérdés szakaszra is:

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

Most, ha inicializálja az currentQuestion- t 0-tól eltérő értékre , például 1-re vagy 2-re, a felhasználói felület frissül, hogy megjelenítse a kérdést és az adott kérdésre adott válaszokat. Elég jó!

Adjunk hozzá egy kis kódot, hogy amikor rákattintunk egy válaszra, növeljük a currentQuestion értéket, hogy a következő kérdésre térjünk át.

Hozzon létre egy új függvényt, amelynek neve: handAnswerButtonClick . Ezt fogják hívni, amikor a felhasználó rákattint egy válaszra.

Fogjuk eggyel növelni az aktuális kérdés értékét, menteni egy új változóba, és ezt az új változót állapotba állítani:

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

Ezután adjon hozzá egy onClick eseményt a gombunkhoz, így:

 handleAnswerButtonClick()}>{answerOption.answerText} 

Ha megpróbáljuk ezt, látni fogja, hogy működik, amíg a végére nem érünk:

Szóval mi történik? Nos, a handAnswerButtonClick függvényünkben növeljük a számot, és állapotra állítjuk. Rendben van.

De ne feledje, hogy ezt a számot egy tömb elérésére használjuk, hogy megkaphassuk a kérdés és a válasz lehetőségeit. Amint eljutunk az 5-re, megtörik, mivel nincs 5. elem!

Ellenőrizzük, hogy nem lépjük-e túl a határt. A handAnswerButtonClick függvényünkben adjuk hozzá a következő feltételt:

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

Ez alapvetően azt mondja, hogy ha a következő kérdés száma kisebb, mint az összes kérdés száma, frissítse az állapotot a következő kérdésre. Egyébként a kvíz végéhez érkeztünk, ezért egyelőre mutasson riasztást.

A pontszám képernyő megjelenítése

Ahelyett, hogy riasztást jelenítenénk meg, meg kell mutatnunk a „pontszám” képernyőt.

Ha megnézzük a JSX-t, akkor észreveszi, hogy ide helyeztem el a jelölést, csak a „hamis” szót kell cserélnünk a logikára.

Szóval, hogy járunk el? Nos, ezt tökéletes állapotba hozni!

Adjon hozzá egy másik állapotobjektumot, amely tárolja, hogy szeretnénk-e megjeleníteni a pontszám képernyőt, vagy sem:

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

És cserélje falseki showScorea következőre a JSX-ben:

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

Semmi sem változik, de ha az állapotértéket igazra változtatjuk, akkor a div pontszám jelenik meg. Ez azért van, mert minden egy három részbe van csomagolva, vagyis:

"Ha a showScore igaz, akkor tegye a pontszám szakasz jelölését, különben tegye vissza a kvíz kérdés / válasz jelölését"

Most szeretnénk frissíteni ezt az állapotváltozót, amikor a felhasználó elérte a kvíz végét. Ennek logikáját már megírtuk a handleAnswerButtonClick függvényünkben.

Csak annyit kell tennünk, hogy lecseréljük a showScore változót igazra frissítő riasztási logikát :

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

Ha rákattintunk a vetélkedő válaszaira, akkor megjelenik a pontszám szakasz, amikor a végére érünk. Jelenleg a bemutatott szöveg és pontszám kemény kódolású karakterlánc, ezért dinamikussá kell tennünk.

A pontszám mentése

A következő feladatunk az, hogy pontszámot tartsunk valahol az alkalmazásunkban, és növeljük ezt az értéket, ha a felhasználó a megfelelő opciót választja.

Ennek logikus helye a „handleAnswerOptonClick” függvényen belül található.

Ne feledje, amikor iterálunk az answerOptions felett, a térképfüggvény mindegyikhez ad egy objektumot, amely tartalmazza a questionText-et , és egy logikai értéket, amely megmutatja, hogy a válasz helyes-e vagy sem. Ezt a logikai értéket fogjuk használni, hogy növeljük a pontszámunkat.

Gombunkban frissítse a funkciót így:

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

Ezután frissítse a függvényt a paraméter elfogadásához:

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

Most hozzáadhatunk némi logikát a funkciónkhoz. Most azt akarjuk mondani, hogy „ha az isCorrect igaz, akkor figyelmeztetést akarunk mutatni”:

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

Ez ugyanaz if(isCorrect === true), mint egy gyorsírás. Most, ha megpróbáljuk, látni fogja, hogy riasztást kapunk, amikor a helyes válaszra kattintunk.

Csak összefoglalva eddig:

  • Amikor a gombok felett iterálunk , átadjuk a isCorrectgomb logikai értékét a handleAnswerButtonClick függvénynek
  • A függvényben ellenőrizzük, hogy ez az érték igaz-e, és riasztást mutatunk, ha igen.

Ezután meg akarjuk menteni a pontszámot. Mit gondolsz, hogyan csináljuk ezt? Ha állami értéket mondtál, akkor igazad van!

Folytassa, és adjon hozzá egy másik „érték” nevű állapotértéket. Ne felejtse el előtagolni a függvényt, hogy megváltoztassa az értéket a „set” értékkel, így setScore lesz. Inicializálja 0:

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

Ezután riasztás megjelenítése helyett 1-vel szeretnénk frissíteni pontszámunkat, ha a felhasználó helyes választ kap.

A handAnswerButtonClick függvényünkben távolítsa el a figyelmeztetést, és növelje eggyel a pontszámunkat:

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

A pontszám megjelenítése

A pontszám megjelenítéséhez csak egy kis változtatást kell végrehajtanunk a megjelenítési kódon. A JSX-ben távolítsa el a keménykódolt karakterláncot a pontszám szakaszból, és adja hozzá ezt az új változót:

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

Ha átfutjuk a válaszokat, a pontszám dinamikus és a végén helyesen jelenik meg!

Még egy utolsó dolog, mielőtt befejeznénk a kvízalkalmazásunkat: észreveszi, hogy a felhasználói felületen megjelenő aktuális kérdés mindig „1”, mivel kemény kódolású. Ezen változtatnunk kell, hogy dinamikusabbak legyünk.

Cserélje ki a "kérdésszám" szöveget a következővel:

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

Ne feledje, hogy szükségünk van a +1-re, mivel a számítógépek 0-tól és nem 1-től kezdenek számolni.

Szeretne több projektötletet?

Miért ne próbálna meg néhány React-projektet felépíteni a tanulás további fokozása érdekében? Minden héten küldök egy új projektet az Ön számára, hogy kipróbálhasson egy működő példát, kezdőkódot és tippeket. Iratkozzon fel, hogy ezt egyenesen a postaládájába juttassa!