ทักษะคอมพิวเตอร์ · 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.