Πώς να δημιουργήσετε μια εφαρμογή κουίζ χρησιμοποιώντας το React –με συμβουλές και κώδικα εκκίνησης

Σε αυτό το σεμινάριο για αρχάριους React πρόκειται να δημιουργήσουμε μια εφαρμογή κουίζ. Θα εργαστούμε με σύνθετα αντικείμενα κατάστασης, πώς να χειριστούμε διαφορετικά άγκιστρα κατάστασης και να αποδώσουμε πράγματα με βάση την κατάσταση.

Τσέκαρέ το:

Δοκιμάστε το μόνοι σας

Αν θέλετε να κάνετε πρώτα μια προσπάθεια, ακολουθήστε τα σενάρια (μπορείτε επίσης να πάρετε τον κωδικό εκκίνησης παρακάτω):

  • Όταν ο χρήστης κάνει κλικ σε ένα κουμπί, θα πρέπει να εμφανιστεί η επόμενη ερώτηση
  • Εάν ο χρήστης πάρει τη σωστή ερώτηση, θα πρέπει να αυξήσει τη βαθμολογία του
  • Όταν ο χρήστης φτάσει στο τέλος του κουίζ, θα πρέπει να εμφανίζεται η συνολική βαθμολογία του

Περιήγηση με βίντεο

Κωδικός εκκίνησης

Πιάσε το στο GitHub εδώ.

Πάμε!

Εάν ανοίξετε τον κωδικό εκκίνησης και μεταβείτε στο App.js , θα δείτε ότι σας έδωσα μια λίστα με ερωτήσεις / απαντήσεις, αποθηκευμένες ως πίνακες που ονομάζονται ερωτήσεις . Αυτό είναι το κουίζ μας.

Ο πρώτος μας στόχος είναι να πάρουμε τα δεδομένα ερωτήσεων από τον πίνακα και να τα εμφανίσουμε στην οθόνη.

Θα καταργήσουμε το κείμενο με κωδικό κώδικα και θα πάρουμε τα δεδομένα από την πρώτη ερώτηση προς το παρόν, για να ξεκινήσουμε τα πράγματα. Θα ανησυχούμε για την εναλλαγή ερωτήσεων αργότερα.

Στο JSX μας, καταργήστε το κείμενο της ερώτησης με κωδικό και πληκτρολογήστε {questions[0]}για να λάβετε το πρώτο στοιχείο (ή ερώτηση) στον πίνακα ερωτήσεων.

 {questions[0]} 

Απόδοση της ερώτησης και των απαντήσεων

Η πρώτη ερώτηση είναι ένα αντικείμενο, οπότε μπορούμε να χρησιμοποιήσουμε το "dot notation" για να αποκτήσουμε πρόσβαση στις ιδιότητες. Τώρα θα κάνουμε απλώς {question[0].questionText}πρόσβαση στο κείμενο ερώτησης για αυτό το αντικείμενο:

 {questions[0].questionText} 

Αποθηκεύστε και εκτελέστε την εφαρμογή. Παρατηρήστε πώς ενημερώνεται το κείμενο. Θυμηθείτε ότι παίρνουμε απλώς το πρώτο κείμενο ερώτησης από το πρώτο αντικείμενο στον πίνακα ερωτήσεων.

Θα ακολουθήσουμε παρόμοια προσέγγιση με τις επιλογές απάντησης. Αφαιρέστε τα κουμπιά με κωδικοποίηση και θα χρησιμοποιήσουμε τη λειτουργία χάρτη για να περιηγηθείτε στις επιλογές απαντήσεων για μια δεδομένη ερώτηση.

Θυμηθείτε τη συνάρτηση χαρτών που περιβάλλει τον πίνακα και μας δίνει το τρέχον στοιχείο στο οποίο βρίσκεται ο βρόχος, με τη μορφή μιας μεταβλητής.

Αντικαταστήστε το "τμήμα απάντησης" με τα εξής:

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

Αποθηκεύστε και εκτελέστε την εφαρμογή. Παρατηρήστε πώς εμφανίζονται τέσσερα κουμπιά απάντησης και το κείμενο αποδίδεται δυναμικά.

Ας ανακεφαλαιώσουμε:

  • Λαμβάνουμε την πρώτη ερώτηση από τον πίνακα ερωτήσεων: questions[0]
  • Η πρώτη ερώτηση είναι ένα αντικείμενο, το οποίο περιέχει έναν πίνακα answerOptions. Μπορούμε να φτάσουμε σε αυτόν τον πίνακα χρησιμοποιώντας σημείωση σημείων:questions[0].answerOptions
  • Επειδή answerOptionsείναι ένας πίνακας, μπορούμε να χαρτογραφήσουμε πάνω από αυτό:questions[0].answerOptions.map
  • Μέσα στη λειτουργία του χάρτη, δίνουμε ένα κουμπί για κάθε ένα answerOptionκαι εμφανίζεται το κείμενο

Αλλαγή ερωτήσεων χρησιμοποιώντας κατάσταση

Τώρα ας επιστρέψουμε στο JSX μας. Παρατηρήστε πώς εάν αλλάξουμε questions[0]σε questions[1]ή questions[2], το UI θα ενημερωθεί. Αυτό συμβαίνει επειδή παίρνει τα δεδομένα από διαφορετικές ερωτήσεις στη σειρά ερωτήσεων, ανάλογα με το ευρετήριο.

Αυτό που θέλουμε να κάνουμε είναι να χρησιμοποιήσουμε ένα αντικείμενο κατάστασης για να κρατήσουμε την ερώτηση στην οποία βρίσκεται ο χρήστης και να το ενημερώσουμε όταν κάνετε κλικ σε ένα κουμπί απάντησης. Μπορείτε να το δείτε από την εκτέλεση του κώδικα στο τελικό παράδειγμα.

Προχωρήστε και προσθέστε ένα αντικείμενο κατάστασης, το οποίο θα κρατήσει τον τρέχοντα αριθμό ερώτησης στον οποίο βρίσκεται ο χρήστης. Αυτό θα αρχικοποιηθεί σε 0, ώστε το κουίζ να λάβει την πρώτη ερώτηση από τον πίνακα:

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

Τώρα θέλουμε να αντικαταστήσουμε τον σκληρό κώδικα '0' στο JSX μας με αυτήν τη μεταβλητή. Πρώτα για το κείμενο της ερώτησης:

 {questions[currentQuestion].questionText} 

Και επίσης για την ενότητα ερωτήσεων:

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

Τώρα, εάν ξεκινήσετε την τρέχουσα ερώτηση σε κάτι διαφορετικό από το 0, για παράδειγμα 1 ή 2, η διεπαφή χρήστη θα ενημερωθεί για να εμφανίσει την ερώτηση και τις απαντήσεις για τη συγκεκριμένη ερώτηση. Πολύ ωραίο!

Ας προσθέσουμε κάποιο κώδικα, ώστε όταν κάνουμε κλικ σε μια απάντηση, αυξάνουμε την τιμή currentQuestion για να μας οδηγήσει στην επόμενη ερώτηση.

Δημιουργήστε μια νέα συνάρτηση που ονομάζεται handleAnswerButtonClick . Αυτό θα καλείται όταν ο χρήστης κάνει κλικ σε μια απάντηση.

Θα αυξήσουμε την τρέχουσα τιμή ερώτησης κατά μία, θα την αποθηκεύσουμε σε μια νέα μεταβλητή και θα θέσουμε αυτήν τη νέα μεταβλητή σε κατάσταση:

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

Στη συνέχεια προσθέστε ένα συμβάν onClick στο κουμπί μας όπως:

 handleAnswerButtonClick()}>{answerOption.answerText} 

Εάν το δοκιμάσουμε, θα δείτε ότι λειτουργεί, έως ότου φτάσουμε στο τέλος:

Τι συμβαίνει λοιπόν; Λοιπόν, στη λειτουργία handleAnswerButtonClick , αυξάνουμε τον αριθμό και τον ρυθμίζουμε ως κατάσταση. Εντάξει.

Αλλά θυμηθείτε ότι χρησιμοποιούμε αυτόν τον αριθμό για πρόσβαση σε έναν πίνακα, προκειμένου να λάβουμε τις επιλογές ερωτήσεων και απαντήσεων. Μόλις φτάσουμε στο 5, θα σπάσει καθώς δεν υπάρχει 5ο στοιχείο!

Ας κάνουμε έναν έλεγχο για να βεβαιωθούμε ότι δεν υπερβαίνουμε το όριο. Στη συνάρτηση handleAnswerButtonClick, ας προσθέσουμε την ακόλουθη συνθήκη:

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

Αυτό βασικά λέει εάν ο επόμενος αριθμός ερωτήσεων είναι μικρότερος από τον συνολικό αριθμό ερωτήσεων, ενημερώστε την κατάσταση στην επόμενη ερώτηση. Αλλιώς, φτάσαμε στο τέλος του κουίζ, οπότε δείξτε μια ειδοποίηση προς το παρόν.

Εμφάνιση της οθόνης σκορ

Αντί να εμφανίζουμε μια ειδοποίηση, αυτό που θέλουμε να κάνουμε είναι να δείξουμε την οθόνη «σκορ».

Αν κοιτάξουμε το JSX, θα παρατηρήσετε ότι έχω τοποθετήσει τη σήμανση εδώ για εσάς, απλώς πρέπει να αντικαταστήσουμε το "false" με τη λογική.

Πώς λοιπόν το κάνουμε αυτό; Λοιπόν, αυτό είναι ένα τέλειο πράγμα για να το θέσετε!

Προσθέστε ένα άλλο αντικείμενο κατάστασης που θα αποθηκεύσει είτε θέλουμε να δείξουμε την οθόνη βαθμολογίας είτε όχι:

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

Και αντικαταστήστε falseμε showScoreστο JSX μας:

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

Τίποτα δεν θα αλλάξει, αλλά αν αλλάξουμε την τιμή κατάστασης σε αληθές, τότε το σκορ div θα εμφανιστεί. Αυτό συμβαίνει επειδή όλα είναι τυλιγμένα σε τριμερές, που σημαίνει:

"Εάν το showScore είναι αληθινό, δώστε τη βαθμολογία ενότητας βαθμολογίας, αλλιώς, δώστε τη σήμανση ερωτήσεων / απαντήσεων κουίζ"

Τώρα, θέλουμε να ενημερώσουμε αυτήν τη μεταβλητή κατάστασης όταν ο χρήστης έχει φτάσει στο τέλος του κουίζ. Έχουμε ήδη γράψει τη λογική για αυτό στη λειτουργία handleAnswerButtonClick.

Το μόνο που πρέπει να κάνουμε είναι να αντικαταστήσουμε τη λογική ειδοποίησης που ενημερώνει τη μεταβλητή showScore να είναι αληθινή:

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

Εάν κάνουμε κλικ στις απαντήσεις του κουίζ, θα εμφανιστεί η ενότητα σκορ όταν φτάσουμε στο τέλος. Προς το παρόν, το κείμενο και το σκορ που εμφανίζονται είναι μια συμβολοσειρά με σκληρό κώδικα, οπότε πρέπει να το κάνουμε δυναμικό.

Αποθήκευση της βαθμολογίας

Η επόμενη αποστολή μας είναι να διατηρήσουμε μια βαθμολογία κάπου στην εφαρμογή μας και να αυξήσουμε αυτήν την τιμή εάν ο χρήστης επιλέξει τη σωστή επιλογή.

Το λογικό μέρος για να γίνει αυτό είναι μέσα στη συνάρτηση "handleAnswerOptonClick".

Θυμηθείτε όταν επαναλαμβάνουμε τις απαντήσεις Επιλογές , η συνάρτηση χαρτών μας δίνει ένα αντικείμενο για το καθένα που περιλαμβάνει το ερώτημα Κείμενο και μια δυαδική τιμή που δείχνει εάν αυτή η απάντηση είναι σωστή ή όχι. Αυτό το boolean είναι αυτό που θα χρησιμοποιήσουμε για να μας βοηθήσουν να αυξήσουμε τη βαθμολογία μας.

Στο κουμπί μας, ενημερώστε τη λειτουργία ως εξής:

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

Επόμενη ενημέρωση της συνάρτησης για αποδοχή αυτής της παραμέτρου:

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

Τώρα μπορούμε να προσθέσουμε κάποια λογική εδώ στη λειτουργία μας. Προς το παρόν θέλουμε να πούμε "εάν το isCorrect είναι αλήθεια, θέλουμε να δείξουμε μια ειδοποίηση":

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

Αυτό είναι το ίδιο όπως if(isCorrect === true), απλά μια σύντομη έκδοση. Τώρα, αν το δοκιμάσουμε, θα δείτε ότι λαμβάνουμε μια ειδοποίηση όταν κάνουμε κλικ στη σωστή απάντηση.

Απλώς για να ανακεφαλαιώσω μέχρι τώρα:

  • Όταν επαναλαμβάνουμε τα κουμπιά, μεταδίδουμε τη isCorrectboolean τιμή για αυτό το κουμπί στη λειτουργία handleAnswerButtonClick
  • Στη συνάρτηση ελέγχεται αν αυτή η τιμή είναι αληθινή και εμφανίζουμε μια ειδοποίηση εάν είναι.

Στη συνέχεια θέλουμε να σώσουμε το σκορ. Πώς νομίζετε ότι το κάνουμε αυτό; Εάν είπατε την τιμή της κατάστασης, έχετε δίκιο!

Προχωρήστε και προσθέστε μια άλλη τιμή κατάστασης που ονομάζεται "σκορ". Θυμηθείτε να προθέσετε τη συνάρτηση για να αλλάξετε την τιμή με το "set", ώστε να είναι setScore. Αρχικοποιήστε το σε 0:

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

Στη συνέχεια, αντί να εμφανιστεί μια ειδοποίηση, θέλουμε να ενημερώσουμε τη βαθμολογία μας κατά 1 εάν ο χρήστης πήρε τη σωστή απάντηση.

Στη λειτουργία handleAnswerButtonClick , καταργήστε την ειδοποίηση και αυξήστε τη βαθμολογία μας κατά ένα:

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

Εμφάνιση του σκορ

Για να δείξουμε το σκορ, πρέπει απλώς να κάνουμε μια μικρή αλλαγή στον κώδικα απόδοσης. Στο JSX μας, αφαιρέστε τη συμβολοσειρά με σκληρό κώδικα στην ενότητα σκορ και προσθέστε αυτήν τη νέα μεταβλητή:

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

Τώρα αν περάσουμε από τις απαντήσεις, το σκορ είναι δυναμικό και θα εμφανιστεί σωστά στο τέλος!

Ένα τελευταίο πράγμα πριν ολοκληρώσουμε την εφαρμογή κουίζ μας: θα παρατηρήσετε ότι η τρέχουσα ερώτηση που εμφανίζεται στο περιβάλλον χρήστη είναι πάντα "1", καθώς είναι κωδικοποιημένη. Πρέπει να το αλλάξουμε για να είμαστε πιο δυναμικοί.

Αντικαταστήστε το "ερωτηματικό" με το ακόλουθο:

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

Θυμηθείτε ότι χρειαζόμαστε το +1 καθώς οι υπολογιστές αρχίζουν να μετρούν από το 0 και όχι το 1.

Θέλετε περισσότερες ιδέες για έργα;

Γιατί να μην προσπαθήσετε να δημιουργήσετε κάποια έργα React για να ενισχύσετε ακόμη περισσότερο τη μάθησή σας; Κάθε εβδομάδα στέλνω ένα νέο έργο για να δοκιμάσετε ένα λειτουργικό παράδειγμα, έναν κωδικό εκκίνησης και συμβουλές. Εγγραφείτε για να το μεταφέρετε απευθείας στα εισερχόμενά σας!