search

mg-dotcom / PROJECT2-SEC-2-JaRernPorn

https://project-2-sec-2-ja-rern-porn.vercel.app
1 stars 0 forks source link

readme

Project2-sec-2-JaRernPorn

Members

Student Id Name Responsible Percentage
65130500086 หทัยทัต แย้มชมชื่น - Game1
- Unit Page
- SoundControl
20%
65130500103 ณัฐธิดา รุ่งเรือง - Game2
- Flashcard Page
- Result Page		 20%
65130500109 ใบตอง แซ่โค้ว - Game3
- Main Menu
- FetchApi collection		 20%
65130500113 มัณฑนา คชรินทร์ - Game4
- Main Menu
- Router Flashcard		 20%
65130500120 อภิสรา ชลประสิทธิ์ - Collaction Page
- Flashcard Page
- Router Collection
20%

List of feature

Home Feature

  1. กด Play เพื่อไปหน้า Categories เเละเลือกหมวดคำศัพท์ที่อยากเล่น
  2. กด Flashcard เพื่อไปหน้า Flashcard
  3. กด How to play เพื่อดูวิธีการเล่น
     - เป็น Pop-up ขึ้นมา สามารถเลื่อนดู และกดปิดที่มุมบนขวาหรือกดที่พื้นที่ว่างบนหน้าจอ

Categories Feature

  1. เลือกหมวดคำศัพท์ที่ต้องการเล่น
  2. เมื่อกดไปที่หมวดไหน จะมี unit ย่อยให้เลือกเล่น 3 units โดยแบ่งเป็น unit ละ 3 คำศัพท์ของหมวดนั้นๆ

Flashcard Feature

  1. หน้าแรกของ Flashcard
     - สามารถเพิ่ม collection และเขียนชื่อแบ่งเป็นหมวดหมู่ตามความต้องการได้
     - สามารถแก้ไข/ลบ collection ได้
  2. เมื่อกดเข้าไปตาม collection ที่สร้างมาจะเป็นหน้าของ flashcard ที่
     - แสดงผล header ตาม collection ที่กดเข้ามา
     - สามารถเพิ่ม คำศัพท์ภาษาจีน, พินอิน, และความหมายของคำศัพท์นั้นๆ ได้ (Restart)
     - สามารถแก้ไข/ลบ flashcard ได้
     - เมื่อสร้าง flashcard มาแล้วจะแสดงผลแค่คำศัพท์ภาษาจีนและพินอินเท่านั้น หากต้องการรู้ความหมายสามารถ toggle ที่การ์ดใบนั้นเพื่อเป็นการพลิกดูความหมายได้

Quiz Feature ใน "Quiz" จะมีเกม 4 ประเภท

  1. การเลือกคำตอบที่เป็นรูปภาพ: มีปุ่มเสียงภาษาจีนของคำนั้นๆ และเมื่อเลือกคำตอบแล้วต้องกดปุ่ม "check" เพื่อตรวจสอบคำตอบ
     - ถ้าเลือกคำตอบที่ถูกต้อง พื้นหลังคำตอบที่เลือกจะเป็นสีเขียว
     - แต่ถ้าเลือกคำตอบผิดจะเปลี่ยนเป็นสีแดง
  2. การเลือกคำตอบที่เป็นคำศัพท์: สามารถกดเพื่อฟังเสียงของคำถามได้ และเมื่อเลือกคำตอบแล้วต้องกดปุ่ม "check" เพื่อตรวจสอบคำตอบ
     - ถ้าเลือกคำตอบที่ถูกต้อง พื้นหลังคำตอบที่เลือกจะเป็นสีเขียว
     - แต่ถ้าเลือกคำตอบผิดจะแสดง pop-up คำตอบที่ถูกต้อง และกด next ไปข้อต่อไป
  3. การเลือกคำตอบที่เป็นคำศัพท์: ปุ่มคำตอบสามารถเสียงได้ และเมื่อเลือกคำตอบแล้วต้องกดปุ่ม "check" เพื่อตรวจสอบคำตอบ
     - ถ้าเลือกคำตอบที่ถูกต้อง พื้นหลังคำตอบที่เลือกจะเป็นสีเขียว
     - แต่ถ้าเลือกคำตอบผิดจะแสดง pop-up คำตอบที่ถูกต้อง และกด next ไปข้อต่อไป
  4. เกมการจับคู่คำศัพท์: ในส่วนตัวเลือกที่เป็นคำศัพท์ภาษาจีนสามารถกดเพื่อฟังเสียงได้ เมื่อจับคู่คำศัพท์และความหมายแล้ว กดปุ่ม "check" เพื่อตรวจสอบคำตอบ
     - ถ้าจับคู่ถูกต้อง พื้นหลังคำตอบที่เลือกจะเป็นสีเขียว
     - แต่ถ้าตอบผิดพื้นหลังจะเปลี่ยนเป็นสีแดง 2 วินาที แล้วต้องเลือกคำตอบใหม่จนกว่าจะถูกครบทุกคู่
     - จากนั้นปุ่ม check จะเปลี่ยนเป็นปุ่ม continue เพื่อไปยังหน้าต่อไป
  5. ขณะเล่นเกม มี Menu ที่สามารถ
     - กดเพื่อไปหน้าหมวดหมู่ (Categories)
     - กดเพื่อเล่นหมวดนี้ใหม่อีกครั้ง (Replay)
     - กดเพื่อเล่นต่อ (Resume)

Result Feature

  1. หน้านี้จะแสดงคำศัพท์ตามเกมที่ได้เล่นไป
  2. แต่ละการ์ดจะสามารถกดฟังเสียงได้

How to play

คู่มือการใช้งานของแอปพลิเคชัน

  1. เมื่อเข้ามาสู่หน้าหลัก จะมีทั้งหมด สองปุ่ม มีปุ่ม "Play" และปุ่ม "Flashcard" เมื่อกดปุ่ม "Play" เพื่อเข้าสู่หน้าเลือกหมวดหมู่ที่ต้องการเล่น
  2. สามารถกดปุ่ม "How to play" เพื่อดูวิธีการเล่น จากนั้นเลือกหมวดหมู่คำศัพท์ที่ต้องการฝึก
  3. ถ้าต้องการกลับไปหน้าหลัก ให้กดที่ลูกศรด้านซ้ายบน
  4. เมื่อเข้าสู่หน้าหมวดเกม จะมีทั้งหมด 3 units ให้เลือก โดย 1 unit จะมี 3 คำศัพท์ภาษาจีน และมีเกมทั้งหมด 4 รูปแบบ เกมแรกเลือกรูปภาพให้ตรงกับคำถาม เกมสองเลือกคำศัพท์ให้ตรงกับคำภาษาจีน เกมสามเลือกคำภาษาอังกฤษให้ตรงกับคำจีน และเกมสุดท้ายคือจับคู่คำจีนให้ตรงกับคำภาษาอังกฤษ โดยกดที่คำศัพท์ที่คิดว่าถูกต้อง
  5. เมื่อเกมจบแล้ว จะมีการทบทวนคำศัพท์ที่ได้เล่น
  6. ผู้ใช้สามารถกลับไปหน้าเลือกหมวดคำศัพท์โดยการกดปุ่ม "Main Menu" และเริ่มเล่นใหม่อีกครั้งโดยการกดปุ่ม "Play Again"
  7. เมื่อกดปุ่ม "Flashcard" จะมีหน้าต่างให้ผู้ใช้สร้าง Collection หมวดคำศัพท์ที่ผู้ใช้ต้องการ
  8. เมื่อกดเข้าไปใน Collection นั้นจะมี หน้าต่างให้สร้าง Flashcard หรือคำศัพท์ที่ผู้ใช้ต้องการจะบันทึก
  9. การสร้าง Flashcard จะมีให้กรอก ทั้งหมด 3 อย่าง 1.คำภาษาจีน 2.พินอิน 3.คำแปล เมื่อสร้างเสร็จจะแสดง รูปการ์ดคำศัพท์ ประกอบไปด้วย คำภาษาจีน และพินอิน ถ้าผู้ใช้ต้องการดูความหมาย ให้กดที่รูปการ์ดเหมือน พลิกการ์ดแสดงคำแปล

Demonstration video

Source of reference information

Inspiration Application