lostjerome/project1-sec-1-kbpjj

lnwTrivia - Quiz App with Vue.js

Preview: lnwtrivia-kbpjj.vercel.app

A simple and interactive quiz app built with Vue.js. The app allows users to take quizzes on various topics and get instant results with scores.

Features

• A user-friendly interface with a responsive design.
• Instant scoring and result display after each quiz.
• Randomization of questions for each user to ensure a unique quiz experience.
• Various question categories and difficulties.
• Theme song and sound effects for quiz completion and correct/incorrect answers.
• Dark mode feature for improved user experience in low-light environments.

Getting started

1. Select category and difficulty

Choose the category and difficulty you want to play.

2. Click Let's play button to start playing

If both category and difficulty are not selected, the button will not be displayed.

3. In the game, you will see

• Back: Return to home page

• Score: Shows scores scored during quiz in real time.

• Song button: Music button to switch background music on or off.

• Dark mode button: Switch to dark mode or light mode.

• The question box shows the current verse number and the question.

• The answer button has a total of 4 options. When pressed, button with the correct answer will turn green. Then the next question will replace.

• If the player answers the question correctly, the score will increase by 1 point each time.

• Restart button: Starting over in the same category and difficulty, and recount the score.

4. After finish the quiz, you will see

• Result window will displays your category and difficulty selected by the user and scores obtained from all 10 questions

• Try other one: Return to the category and difficulty selection page again.

• Play again: Start playing again in the same category and difficulty.

API Reference

The API question used in this project are provided by The Trivia API. Special thanks to the API team for providing the data for this project.

Members

• @sealbb 64130500013 Chonticha Li (20%)

รับผิดชอบในส่วนของการทำ UI และ function ที่อยู่ในหน้าแรกของ Web application ทั้งหมด
รับผิดชอบในส่วนของ function หลักที่เกี่ยวกับการแสดงผลของคำตอบ
และจัดทำเนื้อหาและวางโครงใน how to play ร่วมกับ @darKKOREO

• @lostjerome 64130500017 Naronkrach Tanajarusawas (20%)

เป็นที่ปรึกษาหลักของเพื่อนในกลุ่ม และคอยรวม code จากเพื่อนคนอื่นและปรับปรุงแก้ไข
จัดเรียงและ coding ในส่วนของ how to play

• @bamxxls 64130500026 Thaksaporn Lachaisong (20%)

รับผิดชอบในส่วนของการทำ UI และ function ที่อยู่ในหน้าของการเลือก category และ ระดับความยากของคำถาม
รวมไปถึง function ของการเล่นเพลงและเอฟเฟคเสียงต่าง ๆ

• @CRYINGV 64130500030 Thanaphat Julmeewong (20%)

รับผิดชอบในส่วนของ UI ที่อยู่ในหน้า quiz หรือหน้าหลังจากกดเริ่มเกมและรับผิดชอบส่วนของ navigation bar ร่วมกับ @darKKOREO
รับผิดชอบในส่วนของ Dark mode ทั้งหมด และรับผิดชอบส่วน responsive ของหน้า quiz

• @darKKOREO 64130500031 Tanapat Daoloy (20%)

รับผิดชอบในส่วนของ UI ที่อยู่ในหน้า quiz หรือหน้าหลังจากกดเริ่มเกมและรับผิดชอบส่วนของ navigation bar ร่วมกับ @CRYINGV
รับผิดชอบในส่วนการแสดงข้อคำถามและคำตอบ ทำ popup result
และจัดทำเนื้อหาและวางโครงใน how to play ร่วมกับ @sealbb