เว็บไซต์สื่อการสอนแบบ Interactive สำหรับวิชาวิทยาศาสตร์ ระดับมัธยมศึกษา
พัฒนาโดยนักเรียนชั้นมัธยมศึกษาปีที่ 3 โรงเรียนวิสุทธรังษี จังหวัดกาญจนบุรี
🌐 เข้าชมเว็บไซต์: https://outside-in.blog
🗞️ ให้ Feedback
ชื่อโครงงาน: Outside In
ประเภท: โครงงานเพื่อการศึกษา
ระยะเวลา: 6 เดือน
- นายพสิษฐ์ แสงประชาธนารักษ์ เลขที่ 13
- นางสาวดุษาร์กร พะณะงาม เลขที่ 27
- นางสาวรมณ ชูทรัพย์ เลขที่ 31
อาจารย์ที่ปรึกษา: คุณครู ธีระพล พฤฑฒิกุล
Outside In เป็นโครงงานคอมพิวเตอร์ที่พวกเราตั้งใจทำขึ้นเพื่อช่วยให้เพื่อนๆ เข้าใจระบบต่างๆ ในร่างกายมนุษย์ได้ง่ายขึ้น โดยไม่ต้องท่องจำจากหนังสือเพียงอย่างเดียว เราใช้การเขียนโค้ดสร้างภาพเคลื่อนไหวและแบบทดสอบเพื่อให้การเรียนสนุกขึ้นครับ
- พัฒนาเว็บไซต์ที่นำเสนอองค์ความรู้เกี่ยวกับโครงสร้างของร่างกายมนุษย์
- ส่งเสริมการเรียนรู้ Anatomy ด้วยวิธีที่เข้าใจง่ายและน่าสนใจ
- ให้ผู้ใช้งานสามารถสำรวจระบบต่างๆ ในร่างกายอย่างมีลำดับขั้น
- ฝึกทักษะการออกแบบและพัฒนาเว็บไซต์ด้วย HTML, CSS และ JavaScript
- ระบบไหลเวียนเลือด (Circulatory)
- ระบบหายใจ (Respiratory)
- ระบบน้ำเหลือง (Lymphatic)
- ระบบประสาท (Nervous)
- บทเรียน 4 ระบบ พร้อมสารบัญ และภาพประกอบ
- แบบทดสอบท้ายบท: สุ่มข้อและสุ่มลำดับตัวเลือก (สูงสุด 10 ข้อต่อรอบ) พร้อมเฉลยและสรุปผล
- สองภาษา: ไทย / English สลับได้ทุกหน้า
- Responsive และรองรับ
prefers-reduced-motion, การใช้งานด้วยคีย์บอร์ด
index.html หน้าแรกและเมนู
lessons/<topic>.html หน้าบทเรียน (เนื้อหาโหลดจาก data/lessons)
data/lessons/*.json เนื้อหาบทเรียน { th: {...}, en: {...} }
data/quiz-*.json ข้อสอบ { th: [...], en: [...] }
data/locales.json ข้อความ UI สองภาษา
js/ main.js, lessons.js (loader), lesson-page.js, quiz-handler.js
js/vendor/ GSAP (คัดลอกจาก node_modules/gsap/dist)
scripts/ validate-data.mjs
เพิ่มหรือแก้เนื้อหาได้โดยแก้ไฟล์ JSON ใน data/ โดยไม่ต้องแตะโค้ด แล้วรัน npm run validate เพื่อตรวจว่าข้อมูลถูกต้อง (คำตอบอยู่ในช่วง, มีเฉลย, จำนวนหน้า/ข้อ ไทยและอังกฤษเท่ากัน, รูปครบ)
- HTML5 / CSS3 / JavaScript (ES2020+) ไม่มี build step
- GSAP - Animation (เก็บไว้ใน
js/vendor/) - JSON - เก็บบทเรียน ข้อสอบ และข้อความ UI
- ESLint + Prettier + GitHub Actions - ตรวจคุณภาพโค้ด
- AI: ใช้ Gemini 3 Pro และ Claude 4.5 Sonnet ในการแก้ไขข้อผิดพลาดต่างๆ
git clone https://github.com/pxsit/outside-in.git
cd outside-in
npm install
npm start # เปิดเซิร์ฟเวอร์ที่ http://localhost:8000เปิดไฟล์
index.htmlตรงๆ (file://) ไม่ได้ เพราะเว็บโหลด JSON ผ่านfetch()ต้องรันผ่านเซิร์ฟเวอร์
สคริปต์อื่นๆ: npm run lint, npm run format, npm run format:check, npm run validate
รูปใช้ WebP ส่วนวิดีโอ hero ควรเป็น 720p, ไม่มีเสียง, +faststart:
ffmpeg -i input.mp4 -an -vf "scale=-2:720,fps=24" -c:v libx264 -preset veryslow -crf 33 \
-pix_fmt yuv420p -movflags +faststart assets/video.mp4- เพิ่มระบบร่างกายเพิ่มเติม (ผิวหนัง กล้ามเนื้อ กระดูก)
- บันทึกความคืบหน้าและคะแนนสูงสุดของแบบทดสอบ
- ตรวจทานเนื้อหาทางวิทยาศาสตร์และเพิ่มแหล่งอ้างอิง
- ระบุแหล่งที่มา/สัญญาอนุญาตของรูปภาพ
พัฒนาโดยนักเรียนชั้นมัธยมศึกษาปีที่สาม โรงเรียนวิสุทธรังษี จังหวัดกาญจนบุรี เพื่อการศึกษาและการเรียนรู้