กิจกรรมของคอร์สอบรม

การนำเนื้อหาไปทำกิจกรรมในกรณีต่างๆ

สรุปการนำชุดกิจกรรมนี้ไปอบรม ข้อมูลอ่านจาก activities.json

activities = FileAttachment("history/activities.json").json()
  .then(d => d.activities.slice().sort((a, b) => b.date.localeCompare(a.date)))

total = d => d.sessions.reduce((n, s) => n + s.participants, 0)
thaiDate = iso => new Date(iso + "T00:00:00").toLocaleDateString("th-TH", { dateStyle: "long" })

html`<div class="history-summary">
  <div><strong>${activities.length}</strong><span>ครั้ง</span></div>
  <div><strong>${activities.reduce((n, a) => n + a.sessions.length, 0)}</strong><span>รอบ</span></div>
  <div><strong>${activities.reduce((n, a) => n + total(a), 0)}</strong><span>ผู้เข้าร่วม</span></div>
</div>`

html`${activities.map(a => html`<article class="history-card">
  <h3>${thaiDate(a.date)} · ${a.venue}</h3>
  <p class="history-meta">${a.province} · ${a.title}</p>
  <p><strong>จัดโดย/เชิญโดย:</strong> ${a.host}<br>
     <strong>ผู้เข้าร่วม:</strong> ${a.audience} รวม ${total(a)} คน</p>
  <table class="history-sessions">
    <thead><tr><th>รอบ</th><th>เวลา</th><th style="text-align:right">จำนวน (คน)</th></tr></thead>
    <tbody>${a.sessions.map(s => html`<tr><td>${s.name}</td><td>${s.time}</td><td style="text-align:right">${s.participants}</td></tr>`)}</tbody>
  </table>
  <div class="history-images">${(a.images || []).map(img => html`<figure>
    <img src="history/${img.file}" alt="${img.alt}" loading="lazy">
    <figcaption>${img.caption}</figcaption>
  </figure>`)}</div>
</article>`)}`

เพิ่มกิจกรรมใหม่

เพิ่มรายการใน activities ของ content/history/activities.json และวางรูปไว้ใน content/history/figs/ แล้ว push เว็บจะอัปเดตเอง

ฟิลด์	ความหมาย
id	รหัสไม่ซ้ำ เช่น 2026-10-05-assumption-bangkok
date	วันที่จัด รูปแบบ YYYY-MM-DD (ค.ศ.) หน้าเว็บแปลงเป็น พ.ศ. ให้
title, venue, province	ชื่อกิจกรรม สถานที่ จังหวัด
host, audience	ผู้จัดหรือผู้เชิญ และกลุ่มผู้เข้าร่วม
sessions	รายการรอบ: name, time, participants (ยอดรวมคำนวณให้เอง)
images	รูป: file (ที่อยู่ใต้ content/history/), alt (คำบรรยายสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ), caption

Warningรูปที่มีนักเรียน

เบลอใบหน้านักเรียนก่อนเผยแพร่เสมอ และไม่เก็บรูปต้นฉบับที่ไม่เบลอไว้ใน repo (repo นี้เป็นสาธารณะ)