hogwarts house quiz

Hogwarts-House-Quiz

ตามชื่อแนะนำเว็บแอพนี้ซึ่งฉันสร้างขึ้นโดยใช้ HTML, CSS, & Vanilla Typescript ทำให้ผู้ใช้มีโอกาสได้เห็นบ้านฮอกวอตส์ที่พวกเขาน่าจะถูกจัดเรียงไว้ ด้านล่างฉันอธิบายวิธีการทำงาน สำหรับรายละเอียดเพิ่มเติมโปรดดูรหัสของฉันและความคิดเห็นภายใน

• ภาพสุ่มจะแสดงเป็นพื้นหลังหน้า ฉันเก็บ URL ภาพหลายภาพจาก unsplash ในอาร์เรย์และวนลูปผ่านการเลือกแบบสุ่มเมื่อหน้าโหลด & เมื่อคำถามใหม่จะปรากฏขึ้น ฉันตั้งค่าพื้นหลังเฉพาะในหน้าผลลัพธ์

• เมื่อโหลดหน้าเว็บผู้ใช้จะได้รับการต้อนรับและได้รับแจ้งให้คลิกปุ่มเพื่อเริ่มต้นแบบทดสอบไม่ว่าพวกเขาจะต้องการเล่นสั้นลง (15 คำถาม) หรือเวอร์ชันที่ยาวกว่า (30 คำถาม)

• เมื่อเริ่มต้นแบบทดสอบคำทักทายจะถูกซ่อนและคำถามแรกจะแสดง สำหรับคำถามแต่ละข้อฉันแสดงคำถามจากคำถามทั้งหมดซึ่งฉันเก็บไว้เป็นวัตถุภายในอาร์เรย์ดังนั้นมันจึงแสดงเป็น: ดัชนีของคำถาม / ความยาวของอาร์เรย์คำถามซึ่งเป็นแบบสุ่มยกเว้นคำถามสุดท้ายของคำถาม แบบทดสอบซึ่งถามผู้ใช้สำหรับการตั้งค่าบ้านของพวกเขา เมื่อผู้ใช้เล่นเวอร์ชันที่สั้นกว่าคำถามสุ่ม 14 คำถามที่ไม่เกี่ยวกับการตั้งค่าบ้านของพวกเขาจะถูกเลือกและเพิ่มลงในอาร์เรย์คำถาม ไม่ว่าจะเป็นการเล่นรุ่นสั้นหรือยาวคำถามเกี่ยวกับการตั้งค่าของพวกเขาจะถูกผนวกเข้ากับอาร์เรย์คำถาม

• คำถามเองซึ่งเป็นทรัพย์สินของวัตถุคำถามที่กำหนดภายในอาร์เรย์ที่มีคำถามทั้งหมดแสดงภายใต้รายการ ตัวเลือกคำตอบจะถูกสั่งแบบสุ่ม

• ภายในวัตถุของคำถามแต่ละข้อฉันยังเพิ่มคุณสมบัติ 'น้ำหนัก' ซึ่งเป็นตัวเลขที่แสดงถึงความสำคัญของคำถามในการกำหนดบ้านของผู้ใช้ เมื่อผู้ใช้เลือกตัวเลือกคุณสมบัติ 'น้ำหนัก' นี้จะถูกเพิ่มลงในจุดรวมของบ้านที่สอดคล้องกันซึ่งจะถูกเก็บไว้ในอาร์เรย์

• เมื่อย้ายไปยังคำถามถัดไป (ซึ่งเกิดขึ้นทันทีเมื่อผู้ใช้เลือกตัวเลือกคำถามข้อมูลสำหรับคำถามนั้นจะถูกล้างออกจาก DOM และหากมีคำถามต่อเนื่องข้อมูลสำหรับคำถามนั้นจะปรากฏ DOM; ไม่มีคำถามที่จะติดตามพื้นที่คำถามจะถูกลบออกจากพื้นที่ DOM และพื้นที่ผลลัพธ์

• ในตอนท้ายของการตอบคำถามบ้านที่มีจุดรวมสูงสุดจะถูกเลือกและ Crest & Heading ที่สอดคล้องกันจะปรากฏขึ้น สำหรับสิ่งนี้ฉันได้เพิ่มภาพเคลื่อนไหวที่ยอดเยี่ยมสองสามภาพ

หากคุณอยากรู้อยากเห็นด้วยตัวเองไปที่นี่: https://whats-my-hogwarts-house.netlify.app/

ฉันมีความสุขที่ได้รับฟังความคิดเห็นใด ๆ ไม่ว่าจะเป็นประสบการณ์ของการใช้แอพนี้หรือในรหัสของฉัน ขอบคุณสำหรับการอ่าน!