hogwarts house quiz

Hogwarts-House-Quiz

Seperti namanya, aplikasi web ini, yang saya buat menggunakan HTML, CSS, & Vanilla TypeScript, memberi pengguna kesempatan untuk melihat rumah Hogwarts mana yang mungkin akan mereka surut. Di bawah ini, saya menjelaskan cara kerjanya. Untuk detail lebih lanjut, silakan lihat kode saya dan komentar di dalamnya.

• Gambar acak ditampilkan sebagai latar belakang halaman. Saya menyimpan beberapa URL gambar dari Unsplash dalam array & melingkarkannya, memilih yang acak ketika halaman memuat & ketika pertanyaan baru ditampilkan. Saya menetapkan latar belakang tertentu di halaman hasil.

• Setelah memuat halaman, pengguna disambut & diminta untuk mengklik tombol untuk memulai kuis, apakah mereka ingin memainkan yang lebih pendek (15 pertanyaan) atau versi yang lebih panjang (30 pertanyaan).

• Setelah memulai kuis, salam tersembunyi & pertanyaan pertama ditampilkan. Untuk setiap pertanyaan, saya menampilkan penghitungan pertanyaan dari pertanyaan total, yang saya simpan sebagai objek di dalam array, sehingga ditampilkan sebagai: indeks pertanyaan / panjang array pertanyaan, yang juga diacak, kecuali untuk pertanyaan terakhir dari Kuis, yang meminta pengguna untuk preferensi rumah mereka. Ketika pengguna memainkan versi yang lebih pendek, 14 pertanyaan acak bukan tentang preferensi rumah mereka dipilih dan ditambahkan ke array pertanyaan. Apakah versi pendek atau panjang dimainkan, pertanyaan tentang preferensi mereka ditambahkan ke array pertanyaan.

• Pertanyaan itu sendiri, yang merupakan properti dari objek pertanyaan yang diberikan di dalam array yang berisi semua pertanyaan, ditampilkan di bawah penghitungan. Opsi jawaban dipesan secara acak.

• Di dalam objek setiap pertanyaan, saya juga menambahkan properti 'berat', yang merupakan angka yang menunjukkan pentingnya pertanyaan dalam menentukan rumah pengguna. Ketika pengguna memilih opsi, properti 'berat' ini ditambahkan ke total titik untuk rumah yang sesuai, yang disimpan dalam array.

• Setelah pindah ke pertanyaan berikutnya (yang terjadi segera ketika pengguna memilih opsi pertanyaan, info untuk pertanyaan itu dihapus dari DOM, dan, jika ada pertanyaan berurutan, info untuk pertanyaan itu mengisi DOM; jika ada Tidak ada pertanyaan untuk diikuti, area pertanyaan dihapus dari DOM & Area Hasil.

• Di akhir kuis, rumah dengan total titik tertinggi dipilih & puncak & tajuk yang sesuai muncul. Untuk ini, saya menambahkan beberapa animasi keren.

Jika Anda penasaran untuk mencobanya sendiri, buka di sini: https://whats-my-hogwarts-house.netlify.app/

Saya senang mendengar umpan balik apa pun, apakah itu pengalaman menggunakan aplikasi ini, atau pada kode saya. Terima kasih sudah membaca!