Docs Gamification Mechanics

Cách gamification hoạt động

Giải thích chi tiết từng cơ chế đang chạy trong FLYER Kids — cái nào có state thật (lưu localStorage), cái nào mới là hiệu ứng hình ảnh.

Tóm tắt nhanh: Tim / Streak / Coin / Gem / Sticker / Mở khoá tuần tự chạy trên state.js (localStorage thật, lưu qua các lần vào lại). Sao và Confetti là hiệu ứng hoạt ảnh phát ngay lúc đó, không lưu lại. Rương báu hiện là mốc trang trí trên bản đồ, chưa mở được khi bấm vào.

Tim (Hearts) Có state thật

Mỗi bài học bắt đầu với 3 tim. Trả lời sai một câu (tap-choice hoặc yes/no) sẽ mất 1 tim.

  • Tim reset về 3 mỗi lần mở lại một bài — không lưu qua session, không cộng dồn giữa các bài.
  • Mất hết 3 tim trong 1 bài → màn hình "Hết tim rồi!" (Bingo mặt buồn) chặn lại, chỉ có nút Làm lại chặng (reload từ đầu).
  • Vị trí: góc trên phải màn học (lesson.html).

Streak Có state thật

Đếm số ngày liên tiếp bé mở app, không tính số bài học trong ngày.

  • Tăng đúng 1 lần/ngày — mở app 5 lần trong 1 ngày vẫn chỉ +1.
  • Nếu hôm qua có vào mà hôm nay mới vào → streak +1. Nếu bỏ cách từ 2 ngày trở lên → streak reset về 1.
  • Được tính ngay khi mở bất kỳ trang nào trong program.html, program-safari.html, hoặc lesson.html (gọi FlyerKidsState.bumpStreak()).
  • Hiển thị: icon lửa trên top bar của cả 2 bản đồ.

Coin Có state thật

Tiền thưởng học tập, cộng dồn thật vào ví localStorage mỗi lần hoàn thành một bài.

  • Mỗi bài hoàn thành (đến màn hình cuối) → +15 coin, kể cả khi học lại bài đã xong trước đó.
  • Hiện chưa có màn hình "cửa hàng" để tiêu coin — số coin chỉ tích lũy, chưa đổi được gì.
  • Hiển thị: stat-pill hình đồng xu trên top bar cả 2 bản đồ.

Gem Có state thật

Tiền thưởng "cao cấp" hơn coin, cùng cơ chế cộng dồn thật.

  • Mỗi bài hoàn thành → +2 gem, cùng lúc với coin.
  • Cũng chưa có nơi để tiêu — giống coin, đang chỉ là số tích lũy hiển thị.
  • Hiển thị: stat-pill hình kim cương trên top bar cả 2 bản đồ.

Sao (Stars) Chỉ hiệu ứng

4 sao bung ra ở màn hình hoàn thành bài học, tạo cảm giác "đạt điểm tối đa".

  • Luôn hiện đúng 4/4 sao mỗi lần hoàn thành — không có logic chấm điểm (không phân biệt trả lời đúng 100% hay có sai vài câu).
  • Chỉ là hoạt ảnh @keyframes star-pop, không lưu vào state, không ảnh hưởng coin/gem.

Rương báu (Treasure Chest) Chỉ trang trí

Mốc trang trí đặt giữa các chương trên bản đồ Cambridge Starters, báo hiệu "hết chương 1, chương 2...".

  • Hiện tại không bấm được — không có phần thưởng ẩn, không mở ra khi hoàn thành chương.
  • Rương cuối cùng (sau chặng 12) là "Chứng chỉ Cambridge Starters" — cũng chỉ là hình trang trí, chưa cấp chứng chỉ thật.
  • Vị trí: giữa các section-divider trên program.html.

Hiệu ứng Confetti Chỉ hiệu ứng

40 hình SVG nhỏ (sao/tim/coin/gem) bắn ra từ giữa màn hình rồi biến mất, phát khi trả lời đúng hoặc hoàn thành bài.

  • Kích hoạt tại: trả lời đúng ở màn tap-choice / yes-no, và khi vào màn hình hoàn thành bài.
  • Thuần hiệu ứng — dùng requestAnimationFrame để bay ra rồi tự xoá khỏi DOM sau 1.5s, không liên quan đến state.

Mở khoá tuần tự Có state thật

Quy tắc: chặng "current" luôn là chặng đầu tiên chưa hoàn thành, mọi chặng sau đó bị khoá.

  • Không lưu "current" trực tiếp trong state — luôn tự tính lại từ danh sách chặng đã hoàn thành, mỗi lần tải trang.
  • Bấm vào chặng locked → node rung nhẹ (shake), không chuyển trang.
  • Áp dụng riêng cho từng bản đồ: 12 chặng Cambridge và 10 chặng Super Safari tính độc lập nhau.