ทักษะคอมพิวเตอร์ · Computer Skills (DigComp 3.0)
บทเรียนคอมพิวเตอร์เชิงโต้ตอบภาษาไทย มีเสียงอ่านทุกข้อความ ทำงานบนเว็บเบราว์เซอร์ทุกอุปกรณ์ ไม่ต้องดาวน์โหลด
Interactive Thai computer-literacy lessons with read-aloud on every line. Runs in any browser — no download. Mapped to the EU DigComp 3.0 framework (JRC, 2025) at the Basic proficiency level, plus a separate AI-literacy course.
There are no student or teacher accounts. Progress lives in the browser session only. The one thing the server stores is a certification record (name, grade level, score) when a student passes the final boss fight.
โครงสร้าง · Structure
A Next.js (App Router) site. The lessons themselves are self-contained HTML games in public/games/, opened inside the site in an iframe. The catalog (which lesson belongs to which area) is lib/content.ts.
| Area | Lessons | Files in public/games/ |
|---|
| 0 · พื้นฐานคอมพิวเตอร์ | Computer Explorer, Click Trainer, Keyboard Master | unit1-computer-explorer, unit2-click-accuracy-trainer, unit3-keyboard-master |
| 1 · การค้นหา ประเมิน และจัดการข้อมูล | Browser Quest | unit4-browser-quest |
| 2 · การสื่อสารและการทำงานร่วมกัน | Email, Digital Citizen | unit7-message-master, unit6-digital-citizen |
| 3 · การสร้างเนื้อหาและดูแลบัญชีดิจิทัล | Google Account, Creator Rights | unit3-google-account, unit8-creator-rights |
| 4 · ความปลอดภัย ความเป็นอยู่ที่ดี | Cyber Safety Shield | unit5-safety-shield |
| 5 · การระบุปัญหาและการแก้ปัญหา | IT Doctor | unit9-it-doctor |
| 6 · ทักษะ AI เพื่ออนาคต (3 modules, 9 lessons) | AI foundations, model trainer, bias detective, AI around us; prompting, discernment, diligence; assistant design, learning with AI | ai01 … ai12 |
Also on the site:
- Final boss fight (
final-bossfight.html) — the capstone test. Passing it opens the certificate form (components/CertificateModal.tsx → POST /api/certify). It tests the basic-skills areas (hardware, mouse, keyboard, browser, cyber safety), not every lesson.
- Compete (
/compete) — live head-to-head races between students (typing, drag-and-drop, file sorting, scam quiz).
- Teacher guide (
/guide) and admin dashboard (/admin, password-protected) for seeing who passed.
- Audio check (
/audio-check) — lets a teacher confirm sound works on a classroom machine.
ไฟล์ร่วม · Shared game code
Each lesson is a single HTML file; the shared engines are in public/games/_lib/:
dlf-unit-engine.js, dlf-ai-engine.js — lesson engines (results reporting, speaker UI, confetti/applause).dlf-bossfight-engine.js — final boss fight engine.theme-base.css — shared colour tokens.try-real.js — the "try it for real" card used by the AI lessons.
เสียง · Audio (TTS)
Every spoken line calls dlf.speak(text). Each lesson embeds a map (<script id="dlfAudioData">) from md5(text)[:12] to a pre-recorded MP3 in public/games/audio/<lesson>/. On a page that has recordings, a line with no clip is silent (and logs a warning to the console) — the browser's own voice is deliberately not used, because it reads Thai badly on machines without a Thai voice.
To record missing clips:
node scripts/gen-audio-edge.mjs --dry # report what is missing, synthesize nothing
node scripts/gen-audio-edge.mjs # record the missing clips (Edge TTS)
Run it
npm install
npm run dev # http://localhost:3000
npm run build # production build
npm run lint
npm run check # health check: every lesson file in lib/content.ts exists, has teacher-guide notes, etc.
Environment variables
Copy .env.example to .env.local. With none set the app still runs; certifications just aren't saved and /admin stays locked.
| Variable | Purpose |
|---|
DATABASE_URL | Neon Postgres (pooled connection string). Stores certification records only. |
SESSION_SECRET | Signs the admin session cookie (32+ random characters). |
ADMIN_PASSWORD | Password for /admin. |
The database schema is db/schema.sql and is safe to re-run (no DROP statements). db/reset.sql is the separate, explicit wipe script.
พัฒนาโดย / Developed by PaoPao Punyasataporn · อ้างอิง DigComp 3.0 (European Commission, JRC, 2025)
© 2026 PaoPao Punyasataporn. All rights reserved.
