Cara Membuat Aplikasi Quiz Menggunakan React – Dalam tutorial React pemula ini kita akan membuat aplikasi kuis. Kami akan bekerja dengan objek status yang kompleks, cara menangani kait status yang berbeda, dan merender sesuatu berdasarkan status.
Cara Membuat Aplikasi Quis Menggunakan React
mystudiyo – Jika Anda ingin mencoba sendiri terlebih dahulu, berikut skenarionya (Anda juga dapat mengambil kode starter di bawah):
- Ketika pengguna mengklik tombol, pertanyaan berikutnya akan muncul
- Jika pengguna menjawab pertanyaan dengan benar, itu akan menambah skor mereka
- Ketika pengguna mencapai akhir kuis, skor total mereka harus ditampilkan
Jika Anda membuka kode awal dan membuka App.js , Anda akan melihat bahwa saya telah memberi Anda daftar pertanyaan/jawaban, disimpan sebagai larik bernama question. Ini adalah kuis kami. Tujuan pertama kami adalah mengambil data pertanyaan dari array, dan menampilkannya di layar.
Kami akan menghapus teks hardcode dan mengambil data dari pertanyaan pertama untuk saat ini, hanya untuk menyelesaikannya. Kami akan khawatir tentang beralih pertanyaan nanti.
Baca Juga : Panduan Pemula untuk Membuat Widget Web
Di BEJ kami, hapus teks pertanyaan hardcoded dan ketik {questions[0]} untuk mendapatkan item pertama dalam larik pertanyaan kami.
Menyajikan Pertanyaan dan Jawaban
Pertanyaan pertama adalah objek, jadi kita bisa menggunakan “notasi titik” untuk mendapatkan akses ke properti. Sekarang kita lakukan {question[0].questionText}untuk mendapatkan akses ke teks pertanyaan untuk objek ini:
<div className=’question-text’>{questions[0].questionText}</div>
Simpan dan jalankan aplikasi. Perhatikan bagaimana teks diperbarui. Ingat kita hanya mengambil teks pertanyaan pertama dari objek pertama dalam larik pertanyaan kita.
Kami akan mengambil pendekatan serupa untuk opsi jawaban. Hapus tombol hardcoded dan kami akan menggunakan fungsi peta untuk mengulang opsi jawaban untuk pertanyaan yang diberikan. Ingat fungsi peta mengulang array dan memberi kita item saat ini loop berada, dalam bentuk variabel.
Ganti div “jawaban-bagian” dengan yang berikut:
<div className=’answer-section’>
{questions[0].answerOptions.map((answerOption, index) => (
<button>{answerOption.answerText}</button>
))}
</div>
Simpan dan jalankan aplikasi. Perhatikan bagaimana empat tombol jawaban muncul dan teks ditampilkan secara dinamis. Mari kita rekap:
- Kami mendapatkan pertanyaan pertama dari larik pertanyaan:questions[0]
- Pertanyaan pertama adalah objek, yang berisi array answerOptions. Kita bisa mendapatkan array ini dengan menggunakan notasi titik:questions[0].answerOptions
- Karena answerOptionsini adalah array, kita dapat memetakan ini:questions[0].answerOptions.map
- Di dalam fungsi peta, kami membuat tombol untuk masing-masing answerOption, dan menampilkan teks
Mengubah pertanyaan menggunakan status
Sekarang mari kita kembali ke BEJ kita. Perhatikan bagaimana jika kita mengubah questions[0]ke questions[1], atau questions[2], UI akan diperbarui. Ini karena ia mengambil data dari pertanyaan yang berbeda dalam larik pertanyaan kita, bergantung pada indeks.
Yang ingin kami lakukan adalah menggunakan objek status untuk menampung pertanyaan mana yang sedang diajukan pengguna, dan memperbaruinya saat tombol jawaban diklik. Anda dapat melihat ini dari menjalankan kode pada contoh terakhir.
Lanjutkan dan tambahkan objek status, yang akan menampung nomor pertanyaan saat ini yang digunakan pengguna. Ini akan diinisialisasi ke 0 sehingga kuis mengambil pertanyaan pertama dari array:
const [currentQuestion, setCurrentQuestion] = useState(0);
Sekarang kita ingin mengganti hardcoded ‘0’ di BEJ kita dengan variabel ini. Pertama untuk teks pertanyaan:
<div className=’question-text’>{questions[currentQuestion].questionText}</div>
Dan juga untuk bagian pertanyaan:
<div className=’answer-section’>
{questions[currentQuestion].answerOptions.map((answerOption, index) => (
<button>{answerOption.answerText}</button>
))}
</div>
Sekarang jika Anda menginisialisasi pertanyaan saat ini ke sesuatu selain 0, misalnya 1 atau 2, UI akan memperbarui untuk menampilkan pertanyaan dan jawaban untuk pertanyaan tertentu. Cukup keren!
Mari tambahkan beberapa kode sehingga ketika kita mengklik jawaban, kita menaikkan nilai currentQuestion untuk membawa kita ke pertanyaan berikutnya.
Buat fungsi baru bernama handleAnswerButtonClick . Inilah yang akan dipanggil ketika pengguna mengklik jawaban.
Kami akan menambah nilai pertanyaan saat ini satu per satu, menyimpannya ke variabel baru, dan mengatur variabel baru ini ke dalam status:
const handleAnswerButtonClick = (answerOption) => {
const nextQuestion = currentQuestion + 1;
setCurrentQuestion(nextQuestion);
};
Selanjutnya tambahkan acara onClick ke tombol kami seperti:
<button onClick={() => handleAnswerButtonClick()}>{answerOption.answerText}</button>
Jadi apa yang terjadi? Nah di fungsi handleAnswerButtonClick kami , kami menambah angka dan mengaturnya ke status. Tidak apa-apa.
Tetapi ingat bahwa kami menggunakan nomor ini untuk mengakses array, untuk mendapatkan opsi tanya jawab. Setelah kita mencapai 5, itu akan pecah karena tidak ada elemen ke-5!
Mari kita periksa untuk memastikan kita tidak melewati batas. Dalam fungsi handleAnswerButtonClick kami, mari tambahkan kondisi berikut:
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
} else {
alert(‘you reached the end of the quiz’);
}
Ini pada dasarnya mengatakan jika nomor pertanyaan berikutnya kurang dari jumlah total pertanyaan, perbarui status ke pertanyaan berikutnya. Jika tidak, kita telah mencapai akhir kuis, jadi tunjukkan peringatan untuk saat ini.
Menampilkan layar skor
Alih-alih menampilkan peringatan, yang ingin kami lakukan adalah menampilkan layar “skor”.
Jika kita melihat di BEJ, Anda akan melihat bahwa saya telah menempatkan markup di sini untuk Anda, kita hanya perlu mengganti “false” dengan logika.
Jadi bagaimana kita melakukannya? Nah ini adalah hal yang sempurna untuk dimasukkan ke dalam negara! Tambahkan objek status lain yang akan menyimpan apakah kita ingin menampilkan layar skor atau tidak:
const [showScore, setShowScore] = useState(false);
Dan ganti falsedengan showScoredi BEJ kami:
<div className=’app’>{showScore ? <div className=’score-section’>// … score section markup</div> : <>// … quiz question/answer markup</>}</div>
Tidak ada yang akan berubah, tetapi jika kita mengubah nilai status menjadi true, maka div skor akan ditampilkan. Ini karena semuanya terbungkus dalam ternary, artinya: “Jika showScore benar, buat markup bagian skor, jika tidak, buat markup pertanyaan/jawaban kuis”
Sekarang, kami ingin memperbarui variabel status ini ketika pengguna telah mencapai akhir kuis. Kami telah menulis logika untuk ini di fungsi handleAnswerButtonClick kami. Yang harus kita lakukan adalah mengganti logika peringatan yang memperbarui variabel showScore menjadi true:
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowScore(true);
}
Jika kita mengklik jawaban kuis, itu akan menunjukkan bagian skor ketika kita sampai di akhir. Saat ini, teks dan skor yang ditampilkan adalah string yang di-hardcode, jadi kita harus membuatnya dinamis.
Menyimpan skor
Tugas kita selanjutnya adalah menahan skor di suatu tempat di aplikasi kita, dan menambah nilai ini jika pengguna memilih opsi yang benar. Tempat logis untuk melakukan ini adalah dalam fungsi “handleAnswerOptonClick”.
Ingat ketika kita mengulangi answerOptions , fungsi peta memberi kita objek untuk masing-masing yang menyertakan questionText, dan nilai boolean yang menunjukkan apakah jawaban itu benar atau tidak. Boolean inilah yang akan kami gunakan untuk membantu kami meningkatkan skor kami.
Di tombol kami, perbarui fungsi seperti:
onClick={()=> handleAnswerButtonClick(answerOption.isCorrect)
Selanjutnya perbarui fungsi untuk menerima parameter ini:
const handleAnswerButtonClick = (isCorrect) => {
//… other code
};
Sekarang kita dapat menambahkan beberapa logika di sini di fungsi kita. Untuk saat ini kami ingin mengatakan “jika isCorrect benar, kami ingin menunjukkan peringatan”:
const handleAnswerButtonClick = (isCorrect) => {
if (isCorrect) {
alert(“the answer is correct!”)
}
//…other code
};
Ini sama dengan if(isCorrect === true), hanya versi singkatan. Sekarang jika kami mencoba ini, Anda akan melihat kami mendapat peringatan ketika kami mengklik jawaban yang benar.
Hanya untuk rekap sejauh ini:
Saat kami mengulangi tombol, kami meneruskan nilai isCorrectboolean untuk tombol itu ke fungsi handleAnswerButtonClick
Dalam fungsi kami memeriksa apakah nilai ini benar dan menunjukkan peringatan jika itu benar.
Selanjutnya kami ingin benar-benar menyimpan skor. Bagaimana menurut Anda kita melakukan ini? Jika Anda mengatakan nilai negara Anda benar!
Silakan dan tambahkan nilai status lain yang disebut “skor”. Ingatlah untuk memberi awalan fungsi untuk mengubah nilainya dengan “set” sehingga menjadi setScore. Inisialisasi ke 0:
const [score, setScore] = useState(0);
Selanjutnya alih-alih menampilkan peringatan, kami ingin memperbarui skor kami dengan 1 jika pengguna menjawab dengan benar.
Dalam fungsi handleAnswerButtonClick kami , hapus peringatan dan tingkatkan skor kami satu per satu:
const handleAnswerButtonClick = (isCorrect) => {
if (answerOption.isCorrect) {
setScore(score + 1);
}
//…other code
};
Menampilkan skor
Untuk menampilkan skor kita hanya perlu membuat sedikit perubahan pada kode rendering kita. Di BEJ kami, hapus string hardcode di bagian skor, dan tambahkan variabel baru ini:
<div className=’score-section’>
You scored {score} out of {questions.length}
</div>
<div className=’score-section’>
You scored {score} out of {questions.length}
</div>
Sekarang jika kita menjalankan jawaban, skornya dinamis dan akan ditampilkan dengan benar di akhir!
Satu hal terakhir sebelum kami menyelesaikan aplikasi kuis kami: Anda akan melihat pertanyaan saat ini yang ditampilkan di UI selalu “1”, karena di-hardcode. Kita perlu mengubah ini menjadi lebih dinamis.
Ganti “jumlah pertanyaan” dengan yang berikut:
<div className=’question-count’>
<span>Question {currentQuestionIndex + 1}</span>/{questions.length}
</div>
Ingat kita membutuhkan +1 karena komputer mulai menghitung dari 0 dan bukan 1.