<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>infographic tools Archives - ครูชัชดอทคอม</title>
	<atom:link href="https://www.kroochut.com/tag/infographic-tools/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.kroochut.com/tag/infographic-tools/</link>
	<description>เว็บไซต์เพื่อการเรียนรู้ของทุกคน</description>
	<lastBuildDate>Wed, 10 Sep 2025 04:32:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>

<image>
	<url>https://www.kroochut.com/wp-content/uploads/2024/12/cropped-5dd646cee6656-32x32.png</url>
	<title>infographic tools Archives - ครูชัชดอทคอม</title>
	<link>https://www.kroochut.com/tag/infographic-tools/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>บทเรียนออนไลน์การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ 🎨</title>
		<link>https://www.kroochut.com/infographic-design/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 10 Sep 2025 04:32:02 +0000</pubDate>
				<category><![CDATA[Information Technology]]></category>
		<category><![CDATA[Canva]]></category>
		<category><![CDATA[creative learning]]></category>
		<category><![CDATA[Data Visualization]]></category>
		<category><![CDATA[Infographic Design]]></category>
		<category><![CDATA[infographic elements]]></category>
		<category><![CDATA[infographic examples]]></category>
		<category><![CDATA[infographic tools]]></category>
		<category><![CDATA[infographic types]]></category>
		<category><![CDATA[Piktochart]]></category>
		<category><![CDATA[visual communication]]></category>
		<category><![CDATA[การนำเสนอข้อมูล]]></category>
		<category><![CDATA[การออกแบบอินโฟกราฟิก]]></category>
		<category><![CDATA[คอมพิวเตอร์ ม.3]]></category>
		<category><![CDATA[บทเรียนออนไลน์ ม.3]]></category>
		<category><![CDATA[ออกแบบกราฟิก]]></category>
		<category><![CDATA[อินโฟกราฟิก ม.3]]></category>
		<category><![CDATA[เทคโนโลยีการศึกษา]]></category>
		<category><![CDATA[แบบทดสอบออนไลน์]]></category>
		<guid isPermaLink="false">https://www.kroochut.com/?p=853</guid>

					<description><![CDATA[<p>การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ &#124; Creative Infographic Design 🎨 การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ TH EN ความคืบหน้า: 1/11 🎨 การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ 🎨 ข้อมูลในโลกดิจิทัลมีปริมาณมหาศาล การนำเสนอข้อมูลอย่างมีประสิทธิภาพ สวัสดีนักเรียนม.3 ทุกคน! 😊 ยินดีต้อนรับสู่บทเรียนเรื่องการออกแบบอินโฟกราฟิก ในโลกที่เต็มไปด้วยข้อมูล การนำเสนอข้อมูลให้น่าสนใจและเข้าใจง่ายเป็นทักษะสำคัญที่ทุกคนควรมี 🧠 คำถามกระตุ้นความคิด คุณเคยพบข้อมูลที่เข้าใจยากหรือน่าเบื่อบ้างไหม? ถ้ามีโอกาส คุณจะนำเสนอข้อมูลนั้นอย่างไรให้น่าสนใจขึ้น? 🎯 วัตถุประสงค์การเรียนรู้ เข้าใจความหมาย ความสำคัญ และประเภทของอินโฟกราฟิก สามารถออกแบบอินโฟกราฟิกเบื้องต้นได้อย่างสร้างสรรค์ นำความรู้ไปใช้ในการเรียนและการนำเสนอผลงานได้จริง ก่อนหน้า ต่อไป 📊 ความหมายและความสำคัญของอินโฟกราฟิก ตัวอย่างอินโฟกราฟิก การสื่อสารข้อมูลที่มีประสิทธิภาพ อินโฟกราฟิก (Infographic) คืออะไร? อินโฟกราฟิกคือการนำข้อมูลมาสรุปและเรียบเรียงใหม่ โดยใช้ภาพ กราฟิก สัญลักษณ์ และข้อความสั้นๆ เพื่อให้เข้าใจข้อมูลได้ง่ายและรวดเร็ว ความสำคัญของอินโฟกราฟิกในยุคดิจิทัล ช่วยให้เข้าใจข้อมูลที่ซับซ้อนได้ง่ายขึ้น ดึงดูดความสนใจมากกว่าข้อความล้วนๆ เหมาะกับการแบ่งปันบนโซเชียลมีเดีย ช่วยให้จดจำข้อมูลได้ดีขึ้น เหตุผลที่ควรใช้การนำเสนอข้อมูลในรูปแบบอินโฟกราฟิก สมองของมนุษย์ประมวลผลภาพได้เร็วกว่าข้อความมาก คนทั่วไปจดจำข้อมูลที่เป็นภาพได้มากกว่าข้อความ อินโฟกราฟิกช่วยเพิ่มการมีส่วนร่วมบนโซเชียลมีเดีย 🧠 คำถามกระตุ้นความคิด ข้อมูลใดบ้างที่คุณคิดว่าถ้านำเสนอเป็นอินโฟกราฟิกแล้วจะเข้าใจง่ายขึ้น? ก่อนหน้า ต่อไป 📚 ความรู้เบื้องต้นเกี่ยวกับอินโฟกราฟิก อินโฟกราฟิกประเภทต่างๆ การใช้งานอินโฟกราฟิกในชีวิตประจำวัน ประเภทของอินโฟกราฟิก 📈 สถิติ (Statistical) เน้นการนำเสนอข้อมูลตัวเลข โดยใช้กราฟและแผนภูมิ 🔄 กระบวนการ (Process) อธิบายลำดับขั้นตอนการทำงานอย่างเป็นขั้นเป็นตอน 🗺️ แผนที่ (Geographical) นำเสนอข้อมูลตามพื้นที่ทางภูมิศาสตร์ ⏰ ไทม์ไลน์ (Timeline) แสดงข้อมูลเรียงตามลำดับเวลา 📋 เปรียบเทียบ (Comparison) เปรียบเทียบความแตกต่างระหว่างหลายสิ่ง 🧠 คำถามกระตุ้นความคิด คุณเคยเห็นอินโฟกราฟิกประเภทใดบ้างในชีวิตประจำวัน? และช่วยอย่างไร? ก่อนหน้า ต่อไป 🧩 องค์ประกอบสำคัญของอินโฟกราฟิก องค์ประกอบต่างๆ ในอินโฟกราฟิก การออกแบบที่มีประสิทธิภาพ องค์ประกอบ 5 อย่างที่ทำให้อินโฟกราฟิกมีประสิทธิภาพ 📊 ข้อมูล (Data) ข้อมูลต้องถูกต้องและน่าเชื่อถือ 📝 ข้อความ (Text) ใช้ถ้อยคำกระชับ เข้าใจง่าย 🖼️ ภาพและสัญลักษณ์ (Visuals) ใช้ภาพ/ไอคอนที่สื่อความหมายชัดเจน 📐 การจัดวาง (Layout) สมดุล เน้นประเด็นสำคัญ และไหลลื่น 🎨 สีและตัวอักษร (Color &#038; Type) เลือกสี/ฟอนต์ให้เหมาะกับกลุ่มเป้าหมาย 🧠 คำถามกระตุ้นความคิด ถ้าออกแบบเรื่อง “อนุรักษ์น้ำ” คุณจะใช้สีใด และเพราะอะไร? ก่อนหน้า ต่อไป 🛠️ ขั้นตอนการออกแบบอินโฟกราฟิกอย่างสร้างสรรค์ การวางแผนและการออกแบบ กระบวนการสร้างสรรค์ผลงาน 6 ขั้นตอน กำหนดวัตถุประสงค์/กลุ่มเป้าหมาย/ข้อมูลสำคัญ เลือกประเภทอินโฟกราฟิกที่เหมาะสม ร่างโครง (Sketch/Storyboard) ออกแบบด้วยเครื่องมือดิจิทัล (เช่น Canva, Piktochart) ตรวจสอบความถูกต้อง/ปรับแก้ เผยแพร่/นำเสนอ 🧠 คำถามกระตุ้นความคิด ถ้าทำอินโฟกราฟิก “ประวัติส่วนตัว” จะเลือกประเภทใด เพราะเหตุใด? ก่อนหน้า ต่อไป ✨ เทคนิคการทำให้อินโฟกราฟิกน่าสนใจ การใช้สีที่ดึงดูดความสนใจ การเล่าเรื่องด้วยภาพ เทคนิคสำคัญ ใช้สีอย่างมีความหมาย และจำกัด 3–5 สี ใช้ไอคอนที่เข้าใจง่าย และสอดคล้องทั้งงาน เล่าเรื่องด้วยภาพ (Visual Storytelling) ข้อมูลกระชับ น่าเชื่อถือ อ้างอิงที่มา ปรับให้เหมาะกับแพลตฟอร์ม (เว็บ/โซเชียล) 🧠 คำถามกระตุ้นความคิด Visual Storytelling สำคัญอย่างไรในการออกแบบอินโฟกราฟิก? ก่อนหน้า ต่อไป 🌍 ตัวอย่างอินโฟกราฟิกสร้างสรรค์ อินโฟกราฟิกด้านการศึกษา อินโฟกราฟิกด้านสุขภาพ ตัวอย่างด้านต่างๆ 🎓 การศึกษา: แผนผังบทเรียน/Timeline 🏥 สุขภาพ: โภชนาการ/ป้องกันโรค 🌳 สิ่งแวดล้อม: วงจรผลิตภัณฑ์/รีไซเคิล 💼 ธุรกิจ: การเติบโต/แผนการตลาด/เปรียบเทียบ 🧠 คำถามกระตุ้นความคิด ถ้าคุณต้องสร้างอินโฟกราฟิกชิ้นหนึ่ง คุณจะเลือกเรื่องอะไร เพราะเหตุใด? ก่อนหน้า ต่อไป 🛠️ เครื่องมือและแหล่งเรียนรู้ออนไลน์ เครื่องมือออกแบบอินโฟกราฟิก แหล่งเรียนรู้การออกแบบ เครื่องมือสำหรับผู้เริ่มต้น Canva — ใช้ง่าย มีเทมเพลตหลากหลาย Piktochart — ถนัดงานอินโฟกราฟิกโดยเฉพาะ Venngage — เครื่องมือจัดภาพข้อมูล Adobe Express — คุณภาพสายโปร PowerPoint / Google Slides — คุ้นมืออยู่แล้ว แหล่งเรียนรู้เพิ่มเติม คอร์ส/คลิป YouTube ด้านการออกแบบ บล็อกบทความ &#038; tutorials ชุมชน Facebook/กลุ่มนักออกแบบ หนังสือ/อีบุ๊ก Data Visualization 🧠 คำถามกระตุ้นความคิด เครื่องมือไหนเหมาะกับคุณที่สุด และเพราะอะไร? ก่อนหน้า ต่อไป ✅ สรุปบทเรียน สรุปเนื้อหาการเรียนรู้ การนำความรู้ไปใช้ สิ่งที่เราเรียนรู้ อินโฟกราฟิกช่วยย่อยข้อมูลซับซ้อนให้ง่ายและน่าสนใจ เป็นทักษะสำคัญในศตวรรษที่ 21 นำไปใช้ได้จริงทั้งการเรียนและงานนำเสนอ ทักษะที่ได้พัฒนา คิดเชิงวิเคราะห์/สรุปข้อมูล ความคิดสร้างสรรค์/ออกแบบ การสื่อสารอย่างมีประสิทธิภาพ มองภาพรวมด้วยภาพแทนข้อความ 🧠 คำถามทบทวน อะไรคือสิ่งสำคัญที่สุดที่ได้เรียนรู้ และจะนำไปใช้อย่างไร? ก่อนหน้า ต่อไป 📝 แบบทดสอบหลังเรียน กรุณากรอกชื่อของคุณและทำแบบทดสอบ 20 ข้อต่อไปนี้ ก่อนหน้า ส่งคำตอบ 🎓 ผลการเรียนรู้ ชื่อ: คะแนน: /20 คำแนะนำ ก่อนหน้า เริ่มบทเรียนใหม่</p>
<p>The post <a href="https://www.kroochut.com/infographic-design/">บทเรียนออนไลน์การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ 🎨</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ | Creative Infographic Design</title>
  <meta name="description" content="บทเรียนสองภาษา (ไทย/English): การออกแบบอินโฟกราฟิกสำหรับ ม.3 พร้อมตัวอย่าง เทคนิค และแบบทดสอบ 20 ข้อ | Bilingual lesson (TH/EN) on creative infographic design with examples, techniques, and a 20-item quiz."/>
  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&#038;display=swap" rel="stylesheet">
  <style>
    *{margin:0;padding:0;box-sizing:border-box;font-family:'Kanit',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif}
    body{background:#f8f9fa;color:#333;line-height:1.65}
    .lesson-container{max-width:1000px;margin:0 auto;padding:16px 16px 28px;background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
    .topbar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 8px}
    .lang-switch{display:flex;gap:8px;align-items:center}
    .lang-switch button{padding:8px 12px;border:1px solid #d0d7ff;background:#eef2ff;color:#3444d4;border-radius:8px;cursor:pointer;font-weight:600}
    .lang-switch button.active{background:#4e73df;color:#fff;border-color:#4e73df}
    .progress-text{font-weight:700;color:#4e73df;margin:6px 0 6px 0}
    .progress-container{width:100%;height:14px;background:#e9ecef;border-radius:999px;overflow:hidden}
    .progress-bar{height:100%;width:0;background:linear-gradient(90deg,#4e73df,#6f42c1)}
    h1{color:#4e73df;text-align:center;margin:14px 0 12px;font-size:2rem}
    h2{color:#6f42c1;margin:14px 0 8px;font-size:1.5rem}
    h3{color:#6c757d;margin:10px 0 6px;font-size:1.2rem}
    p{margin:0 0 12px}
    ul,ol{margin:0 0 14px 26px}
    .image-container{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:14px 0}
    .image-box{flex:1 1 220px;max-width:300px;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.08)}
    .image-box img{width:100%;height:160px;object-fit:cover;transition:transform .25s}
    .image-box img:hover{transform:scale(1.04)}
    .image-caption{padding:8px;background:#f1f3f9;text-align:center;font-size:.95rem}
    .nav-buttons{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
    .btn{padding:12px 18px;border:none;border-radius:8px;background:#4e73df;color:#fff;font-size:1rem;cursor:pointer;transition:.2s}
    .btn:hover{background:#2e59d9;transform:translateY(-1px)}
    .btn:disabled{background:#b0b7d1;cursor:not-allowed;transform:none}
    .page{display:none;padding:10px 8px;animation:fade .35s}
    .page.active{display:block}
    @keyframes fade{from{opacity:0}to{opacity:1}}
    .quiz-container{background:#f8f9fa;padding:16px;border-radius:10px;margin:14px 0}
    .question{margin-bottom:16px;padding:12px;background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
    .options label{display:block;padding:10px;margin:6px 0;background:#eef1f4;border-radius:8px;cursor:pointer}
    .options label:hover{background:#e5e9ee}
    input[type="radio"]{margin-right:10px}
    input[type="text"]{width:100%;padding:12px;margin:10px 0 14px;border:1px solid #ced4da;border-radius:8px}
    .result-container{text-align:center;padding:20px}
    .score-display{font-size:2.2rem;font-weight:800;color:#4e73df;margin:12px 0}
    .grade-info{background:#f8f9fa;padding:16px;border-radius:10px;margin:14px 0}
    .thinking-question{background:#e8f4fd;border-left:6px solid #4e73df;padding:12px;margin:14px 0;border-radius:0 10px 10px 0}
    .emoji{font-size:1.25rem;margin-right:6px}
    .en-summary{margin:8px 0 4px;padding:10px 12px;border:1px dashed #cfd8ff;background:#f7f9ff;border-radius:10px}
    .muted{opacity:.9}
    @media (max-width:768px){
      .lesson-container{padding:12px}
      h1{font-size:1.7rem}
      h2{font-size:1.35rem}
    }
  </style>
</head>
<body data-lang="th">
  <div class="lesson-container">
    <div class="topbar">
      <div class="muted" id="courseTitle">🎨 การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์</div>
      <div class="lang-switch" role="group" aria-label="Language switch">
        <button class="active" id="btnTH" onclick="setLang('th')">TH</button>
        <button id="btnEN" onclick="setLang('en')">EN</button>
      </div>
    </div>

    <div class="progress-text" id="progressText">ความคืบหน้า: <span id="current-page">1</span>/11</div>
    <div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div>

    <!-- Page 1 -->
    <div class="page active" id="page1">
      <h1 data-i18n="p1_title">🎨 การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ 🎨</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/57690/pexels-photo-57690.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="ข้อมูลดิจิทัล / Digital data">
          <div class="image-caption" data-i18n="p1_cap1">ข้อมูลในโลกดิจิทัลมีปริมาณมหาศาล</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/590022/pexels-photo-590022.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="การนำเสนอข้อมูล / Data presentation">
          <div class="image-caption" data-i18n="p1_cap2">การนำเสนอข้อมูลอย่างมีประสิทธิภาพ</div>
        </div>
      </div>

      <p data-i18n="p1_intro">สวัสดีนักเรียนม.3 ทุกคน! 😊 ยินดีต้อนรับสู่บทเรียนเรื่องการออกแบบอินโฟกราฟิก ในโลกที่เต็มไปด้วยข้อมูล การนำเสนอข้อมูลให้น่าสนใจและเข้าใจง่ายเป็นทักษะสำคัญที่ทุกคนควรมี</p>
      <div class="en-summary" data-i18n="p1_intro_en"></div>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p1_q">คุณเคยพบข้อมูลที่เข้าใจยากหรือน่าเบื่อบ้างไหม? ถ้ามีโอกาส คุณจะนำเสนอข้อมูลนั้นอย่างไรให้น่าสนใจขึ้น?</p>
      </div>

      <h2 data-i18n="obj_title">🎯 วัตถุประสงค์การเรียนรู้</h2>
      <ol>
        <li data-i18n="obj_1">เข้าใจความหมาย ความสำคัญ และประเภทของอินโฟกราฟิก</li>
        <li data-i18n="obj_2">สามารถออกแบบอินโฟกราฟิกเบื้องต้นได้อย่างสร้างสรรค์</li>
        <li data-i18n="obj_3">นำความรู้ไปใช้ในการเรียนและการนำเสนอผลงานได้จริง</li>
      </ol>

      <div class="nav-buttons">
        <button class="btn" disabled id="btnPrev1" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(1,2)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 2 -->
    <div class="page" id="page2">
      <h1 data-i18n="p2_title">📊 ความหมายและความสำคัญของอินโฟกราฟิก</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/356043/pexels-photo-356043.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Infographic example">
          <div class="image-caption" data-i18n="p2_cap1">ตัวอย่างอินโฟกราฟิก</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Effective communication">
          <div class="image-caption" data-i18n="p2_cap2">การสื่อสารข้อมูลที่มีประสิทธิภาพ</div>
        </div>
      </div>

      <h2 data-i18n="p2_h2_1">อินโฟกราฟิก (Infographic) คืออะไร?</h2>
      <p data-i18n="p2_p1">อินโฟกราฟิกคือการนำข้อมูลมาสรุปและเรียบเรียงใหม่ โดยใช้ภาพ กราฟิก สัญลักษณ์ และข้อความสั้นๆ เพื่อให้เข้าใจข้อมูลได้ง่ายและรวดเร็ว</p>
      <div class="en-summary" data-i18n="p2_p1_en"></div>

      <h2 data-i18n="p2_h2_2">ความสำคัญของอินโฟกราฟิกในยุคดิจิทัล</h2>
      <ul>
        <li data-i18n="p2_l1">ช่วยให้เข้าใจข้อมูลที่ซับซ้อนได้ง่ายขึ้น</li>
        <li data-i18n="p2_l2">ดึงดูดความสนใจมากกว่าข้อความล้วนๆ</li>
        <li data-i18n="p2_l3">เหมาะกับการแบ่งปันบนโซเชียลมีเดีย</li>
        <li data-i18n="p2_l4">ช่วยให้จดจำข้อมูลได้ดีขึ้น</li>
      </ul>

      <h2 data-i18n="p2_h2_3">เหตุผลที่ควรใช้การนำเสนอข้อมูลในรูปแบบอินโฟกราฟิก</h2>
      <ul>
        <li data-i18n="p2_l5">สมองของมนุษย์ประมวลผลภาพได้เร็วกว่าข้อความมาก</li>
        <li data-i18n="p2_l6">คนทั่วไปจดจำข้อมูลที่เป็นภาพได้มากกว่าข้อความ</li>
        <li data-i18n="p2_l7">อินโฟกราฟิกช่วยเพิ่มการมีส่วนร่วมบนโซเชียลมีเดีย</li>
      </ul>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p2_q">ข้อมูลใดบ้างที่คุณคิดว่าถ้านำเสนอเป็นอินโฟกราฟิกแล้วจะเข้าใจง่ายขึ้น?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(2,1)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(2,3)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 3 -->
    <div class="page" id="page3">
      <h1 data-i18n="p3_title">📚 ความรู้เบื้องต้นเกี่ยวกับอินโฟกราฟิก</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Types of infographics">
          <div class="image-caption" data-i18n="p3_cap1">อินโฟกราฟิกประเภทต่างๆ</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/1591061/pexels-photo-1591061.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Infographic in daily life">
          <div class="image-caption" data-i18n="p3_cap2">การใช้งานอินโฟกราฟิกในชีวิตประจำวัน</div>
        </div>
      </div>

      <h2 data-i18n="p3_h2_types">ประเภทของอินโฟกราฟิก</h2>
      <h3 data-i18n="p3_t1">📈 สถิติ (Statistical)</h3>
      <p data-i18n="p3_t1p">เน้นการนำเสนอข้อมูลตัวเลข โดยใช้กราฟและแผนภูมิ</p>

      <h3 data-i18n="p3_t2">🔄 กระบวนการ (Process)</h3>
      <p data-i18n="p3_t2p">อธิบายลำดับขั้นตอนการทำงานอย่างเป็นขั้นเป็นตอน</p>

      <h3 data-i18n="p3_t3">🗺️ แผนที่ (Geographical)</h3>
      <p data-i18n="p3_t3p">นำเสนอข้อมูลตามพื้นที่ทางภูมิศาสตร์</p>

      <h3 data-i18n="p3_t4">⏰ ไทม์ไลน์ (Timeline)</h3>
      <p data-i18n="p3_t4p">แสดงข้อมูลเรียงตามลำดับเวลา</p>

      <h3 data-i18n="p3_t5">📋 เปรียบเทียบ (Comparison)</h3>
      <p data-i18n="p3_t5p">เปรียบเทียบความแตกต่างระหว่างหลายสิ่ง</p>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p3_q">คุณเคยเห็นอินโฟกราฟิกประเภทใดบ้างในชีวิตประจำวัน? และช่วยอย่างไร?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(3,2)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(3,4)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 4 -->
    <div class="page" id="page4">
      <h1 data-i18n="p4_title">🧩 องค์ประกอบสำคัญของอินโฟกราฟิก</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/356043/pexels-photo-356043.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Infographic elements">
          <div class="image-caption" data-i18n="p4_cap1">องค์ประกอบต่างๆ ในอินโฟกราฟิก</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/147413/twitter-facebook-together-exchange-of-information-147413.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Design efficiency">
          <div class="image-caption" data-i18n="p4_cap2">การออกแบบที่มีประสิทธิภาพ</div>
        </div>
      </div>

      <h2 data-i18n="p4_h2">องค์ประกอบ 5 อย่างที่ทำให้อินโฟกราฟิกมีประสิทธิภาพ</h2>
      <h3 data-i18n="p4_e1">📊 ข้อมูล (Data)</h3><p data-i18n="p4_e1p">ข้อมูลต้องถูกต้องและน่าเชื่อถือ</p>
      <h3 data-i18n="p4_e2">📝 ข้อความ (Text)</h3><p data-i18n="p4_e2p">ใช้ถ้อยคำกระชับ เข้าใจง่าย</p>
      <h3 data-i18n="p4_e3">🖼️ ภาพและสัญลักษณ์ (Visuals)</h3><p data-i18n="p4_e3p">ใช้ภาพ/ไอคอนที่สื่อความหมายชัดเจน</p>
      <h3 data-i18n="p4_e4">📐 การจัดวาง (Layout)</h3><p data-i18n="p4_e4p">สมดุล เน้นประเด็นสำคัญ และไหลลื่น</p>
      <h3 data-i18n="p4_e5">🎨 สีและตัวอักษร (Color &#038; Type)</h3><p data-i18n="p4_e5p">เลือกสี/ฟอนต์ให้เหมาะกับกลุ่มเป้าหมาย</p>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p4_q">ถ้าออกแบบเรื่อง “อนุรักษ์น้ำ” คุณจะใช้สีใด และเพราะอะไร?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(4,3)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(4,5)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 5 -->
    <div class="page" id="page5">
      <h1 data-i18n="p5_title">🛠️ ขั้นตอนการออกแบบอินโฟกราฟิกอย่างสร้างสรรค์</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/7376/startup-photos.jpg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Planning">
          <div class="image-caption" data-i18n="p5_cap1">การวางแผนและการออกแบบ</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/1109543/pexels-photo-1109543.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Creation">
          <div class="image-caption" data-i18n="p5_cap2">กระบวนการสร้างสรรค์ผลงาน</div>
        </div>
      </div>

      <h2 data-i18n="p5_h2">6 ขั้นตอน</h2>
      <ol>
        <li data-i18n="p5_s1">กำหนดวัตถุประสงค์/กลุ่มเป้าหมาย/ข้อมูลสำคัญ</li>
        <li data-i18n="p5_s2">เลือกประเภทอินโฟกราฟิกที่เหมาะสม</li>
        <li data-i18n="p5_s3">ร่างโครง (Sketch/Storyboard)</li>
        <li data-i18n="p5_s4">ออกแบบด้วยเครื่องมือดิจิทัล (เช่น Canva, Piktochart)</li>
        <li data-i18n="p5_s5">ตรวจสอบความถูกต้อง/ปรับแก้</li>
        <li data-i18n="p5_s6">เผยแพร่/นำเสนอ</li>
      </ol>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p5_q">ถ้าทำอินโฟกราฟิก “ประวัติส่วนตัว” จะเลือกประเภทใด เพราะเหตุใด?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(5,4)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(5,6)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 6 -->
    <div class="page" id="page6">
      <h1 data-i18n="p6_title">✨ เทคนิคการทำให้อินโฟกราฟิกน่าสนใจ</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Color usage">
          <div class="image-caption" data-i18n="p6_cap1">การใช้สีที่ดึงดูดความสนใจ</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/1370296/pexels-photo-1370296.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Storytelling">
          <div class="image-caption" data-i18n="p6_cap2">การเล่าเรื่องด้วยภาพ</div>
        </div>
      </div>

      <h2 data-i18n="p6_h2">เทคนิคสำคัญ</h2>
      <ul>
        <li data-i18n="p6_l1">ใช้สีอย่างมีความหมาย และจำกัด 3–5 สี</li>
        <li data-i18n="p6_l2">ใช้ไอคอนที่เข้าใจง่าย และสอดคล้องทั้งงาน</li>
        <li data-i18n="p6_l3">เล่าเรื่องด้วยภาพ (Visual Storytelling)</li>
        <li data-i18n="p6_l4">ข้อมูลกระชับ น่าเชื่อถือ อ้างอิงที่มา</li>
        <li data-i18n="p6_l5">ปรับให้เหมาะกับแพลตฟอร์ม (เว็บ/โซเชียล)</li>
      </ul>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p6_q">Visual Storytelling สำคัญอย่างไรในการออกแบบอินโฟกราฟิก?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(6,5)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(6,7)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 7 -->
    <div class="page" id="page7">
      <h1 data-i18n="p7_title">🌍 ตัวอย่างอินโฟกราฟิกสร้างสรรค์</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Education">
          <div class="image-caption" data-i18n="p7_cap1">อินโฟกราฟิกด้านการศึกษา</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/40568/medical-appointment-doctor-healthcare-40568.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Health">
          <div class="image-caption" data-i18n="p7_cap2">อินโฟกราฟิกด้านสุขภาพ</div>
        </div>
      </div>

      <h2 data-i18n="p7_h2">ตัวอย่างด้านต่างๆ</h2>
      <h3>🎓 <span data-i18n="p7_edu">การศึกษา: แผนผังบทเรียน/Timeline</span></h3>
      <h3>🏥 <span data-i18n="p7_health">สุขภาพ: โภชนาการ/ป้องกันโรค</span></h3>
      <h3>🌳 <span data-i18n="p7_env">สิ่งแวดล้อม: วงจรผลิตภัณฑ์/รีไซเคิล</span></h3>
      <h3>💼 <span data-i18n="p7_biz">ธุรกิจ: การเติบโต/แผนการตลาด/เปรียบเทียบ</span></h3>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p7_q">ถ้าคุณต้องสร้างอินโฟกราฟิกชิ้นหนึ่ง คุณจะเลือกเรื่องอะไร เพราะเหตุใด?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(7,6)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(7,8)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 8 -->
    <div class="page" id="page8">
      <h1 data-i18n="p8_title">🛠️ เครื่องมือและแหล่งเรียนรู้ออนไลน์</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Design tools">
          <div class="image-caption" data-i18n="p8_cap1">เครื่องมือออกแบบอินโฟกราฟิก</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/147413/twitter-facebook-together-exchange-of-information-147413.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Learning sources">
          <div class="image-caption" data-i18n="p8_cap2">แหล่งเรียนรู้การออกแบบ</div>
        </div>
      </div>

      <h2 data-i18n="p8_h2_tools">เครื่องมือสำหรับผู้เริ่มต้น</h2>
      <ul>
        <li data-i18n="p8_t1">Canva — ใช้ง่าย มีเทมเพลตหลากหลาย</li>
        <li data-i18n="p8_t2">Piktochart — ถนัดงานอินโฟกราฟิกโดยเฉพาะ</li>
        <li data-i18n="p8_t3">Venngage — เครื่องมือจัดภาพข้อมูล</li>
        <li data-i18n="p8_t4">Adobe Express — คุณภาพสายโปร</li>
        <li data-i18n="p8_t5">PowerPoint / Google Slides — คุ้นมืออยู่แล้ว</li>
      </ul>

      <h2 data-i18n="p8_h2_more">แหล่งเรียนรู้เพิ่มเติม</h2>
      <ul>
        <li data-i18n="p8_m1">คอร์ส/คลิป YouTube ด้านการออกแบบ</li>
        <li data-i18n="p8_m2">บล็อกบทความ &#038; tutorials</li>
        <li data-i18n="p8_m3">ชุมชน Facebook/กลุ่มนักออกแบบ</li>
        <li data-i18n="p8_m4">หนังสือ/อีบุ๊ก Data Visualization</li>
      </ul>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามกระตุ้นความคิด</h3>
        <p data-i18n="p8_q">เครื่องมือไหนเหมาะกับคุณที่สุด และเพราะอะไร?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(8,7)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(8,9)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 9 -->
    <div class="page" id="page9">
      <h1 data-i18n="p9_title">✅ สรุปบทเรียน</h1>
      <div class="image-container">
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Recap">
          <div class="image-caption" data-i18n="p9_cap1">สรุปเนื้อหาการเรียนรู้</div>
        </div>
        <div class="image-box">
          <img decoding="async" src="https://images.pexels.com/photos/1370296/pexels-photo-1370296.jpeg?auto=compress&#038;cs=tinysrgb&#038;w=1260&#038;h=750&#038;dpr=1" alt="Apply">
          <div class="image-caption" data-i18n="p9_cap2">การนำความรู้ไปใช้</div>
        </div>
      </div>

      <h2 data-i18n="p9_h2_1">สิ่งที่เราเรียนรู้</h2>
      <ul>
        <li data-i18n="p9_l1">อินโฟกราฟิกช่วยย่อยข้อมูลซับซ้อนให้ง่ายและน่าสนใจ</li>
        <li data-i18n="p9_l2">เป็นทักษะสำคัญในศตวรรษที่ 21</li>
        <li data-i18n="p9_l3">นำไปใช้ได้จริงทั้งการเรียนและงานนำเสนอ</li>
      </ul>

      <h2 data-i18n="p9_h2_2">ทักษะที่ได้พัฒนา</h2>
      <ul>
        <li data-i18n="p9_s1">คิดเชิงวิเคราะห์/สรุปข้อมูล</li>
        <li data-i18n="p9_s2">ความคิดสร้างสรรค์/ออกแบบ</li>
        <li data-i18n="p9_s3">การสื่อสารอย่างมีประสิทธิภาพ</li>
        <li data-i18n="p9_s4">มองภาพรวมด้วยภาพแทนข้อความ</li>
      </ul>

      <div class="thinking-question">
        <h3 data-i18n="think_title">🧠 คำถามทบทวน</h3>
        <p data-i18n="p9_q">อะไรคือสิ่งสำคัญที่สุดที่ได้เรียนรู้ และจะนำไปใช้อย่างไร?</p>
      </div>

      <div class="nav-buttons">
        <button class="btn" onclick="navigate(9,8)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="navigate(9,10)" data-i18n="next">ต่อไป</button>
      </div>
    </div>

    <!-- Page 10 (Quiz) -->
    <div class="page" id="page10">
      <h1 data-i18n="quiz_title">📝 แบบทดสอบหลังเรียน</h1>
      <p data-i18n="quiz_intro">กรุณากรอกชื่อของคุณและทำแบบทดสอบ 20 ข้อต่อไปนี้</p>
      <input type="text" id="student-name" placeholder="กรุณากรอกชื่อของคุณ / Your name">
      <div class="quiz-container" id="quiz-container"></div>
      <div class="nav-buttons">
        <button class="btn" onclick="navigate(10,9)" data-i18n="prev">ก่อนหน้า</button>
        <button class="btn" onclick="submitQuiz()" data-i18n="submit">ส่งคำตอบ</button>
      </div>
    </div>

    <!-- Page 11 (Result) -->
    <div class="page" id="page11">
      <div class="result-container">
        <h1 data-i18n="result_title">🎓 ผลการเรียนรู้</h1>
        <p><span data-i18n="name_label">ชื่อ</span>: <span id="result-name"></span></p>
        <div class="score-display"><span data-i18n="score_label">คะแนน</span>: <span id="score"></span>/20</div>
        <div class="grade-info" id="grade-info"></div>
        <h2 data-i18n="advice_title">คำแนะนำ</h2>
        <p id="recommendation"></p>
        <div class="nav-buttons">
          <button class="btn" onclick="navigate(11,10)" data-i18n="prev">ก่อนหน้า</button>
          <button class="btn" onclick="restartLesson()" data-i18n="restart">เริ่มบทเรียนใหม่</button>
        </div>
      </div>
    </div>
  </div>

  <audio id="click-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3" preload="auto"></audio>

  <script>
    // ===== State =====
    let currentPage = 1;
    const totalPages = 11;
    const clickSound = document.getElementById('click-sound');

    // ===== i18n dictionary (TH → EN) =====
    const dict = {
      // Top / common
      prev:{th:"ก่อนหน้า",en:"Previous"},
      next:{th:"ต่อไป",en:"Next"},
      submit:{th:"ส่งคำตอบ",en:"Submit"},
      restart:{th:"เริ่มบทเรียนใหม่",en:"Restart Lesson"},
      name_label:{th:"ชื่อ",en:"Name"},
      score_label:{th:"คะแนน",en:"Score"},
      advice_title:{th:"คำแนะนำ",en:"Suggestions"},
      result_title:{th:"🎓 ผลการเรียนรู้",en:"🎓 Learning Result"},
      quiz_title:{th:"📝 แบบทดสอบหลังเรียน",en:"📝 Post-lesson Quiz"},
      quiz_intro:{th:"กรุณากรอกชื่อของคุณและทำแบบทดสอบ 20 ข้อต่อไปนี้",en:"Please enter your name and complete the following 20-item quiz."},
      think_title:{th:"🧠 คำถามกระตุ้นความคิด",en:"🧠 Thinking Question"},
      obj_title:{th:"🎯 วัตถุประสงค์การเรียนรู้",en:"🎯 Learning Objectives"},

      // Page 1
      p1_title:{th:"🎨 การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ 🎨",en:"🎨 Creative Infographic Design for Clear Communication 🎨"},
      p1_cap1:{th:"ข้อมูลในโลกดิจิทัลมีปริมาณมหาศาล",en:"Digital information is massive in volume."},
      p1_cap2:{th:"การนำเสนอข้อมูลอย่างมีประสิทธิภาพ",en:"Present data effectively to be understood."},
      p1_intro:{th:"สวัสดีนักเรียนม.3 ทุกคน! 😊 ยินดีต้อนรับสู่บทเรียนเรื่องการออกแบบอินโฟกราฟิก ในโลกที่เต็มไปด้วยข้อมูล การนำเสนอข้อมูลให้น่าสนใจและเข้าใจง่ายเป็นทักษะสำคัญที่ทุกคนควรมี",en:"Welcome! In a data-rich world, presenting information clearly and engagingly is an essential skill."},
      p1_intro_en:{th:"",en:"Quick English summary: This lesson introduces why infographics matter and how they help audiences understand complex ideas quickly."},
      p1_q:{th:"คุณเคยพบข้อมูลที่เข้าใจยากหรือน่าเบื่อบ้างไหม? ถ้ามีโอกาส คุณจะนำเสนอข้อมูลนั้นอย่างไรให้น่าสนใจขึ้น?",en:"Have you seen confusing or boring information? How would you redesign it to be engaging?"},

      // Objectives
      obj_1:{th:"เข้าใจความหมาย ความสำคัญ และประเภทของอินโฟกราฟิก",en:"Understand meaning, importance, and types of infographics."},
      obj_2:{th:"สามารถออกแบบอินโฟกราฟิกเบื้องต้นได้อย่างสร้างสรรค์",en:"Be able to design simple, creative infographics."},
      obj_3:{th:"นำความรู้ไปใช้ในการเรียนและการนำเสนอผลงานได้จริง",en:"Apply the knowledge in classwork and presentations."},

      // Page 2
      p2_title:{th:"📊 ความหมายและความสำคัญของอินโฟกราฟิก",en:"📊 Meaning & Importance of Infographics"},
      p2_cap1:{th:"ตัวอย่างอินโฟกราฟิก",en:"Infographic example"},
      p2_cap2:{th:"การสื่อสารข้อมูลที่มีประสิทธิภาพ",en:"Effective information communication"},
      p2_h2_1:{th:"อินโฟกราฟิก (Infographic) คืออะไร?",en:"What is an infographic?"},
      p2_p1:{th:"อินโฟกราฟิกคือการนำข้อมูลมาสรุปและเรียบเรียงใหม่ โดยใช้ภาพ กราฟิก สัญลักษณ์ และข้อความสั้นๆ เพื่อให้เข้าใจข้อมูลได้ง่ายและรวดเร็ว",en:"An infographic summarizes and reorganizes information using visuals and concise text so audiences grasp it quickly."},
      p2_p1_en:{th:"",en:"English summary: Infographics combine visuals and short texts to speed up comprehension."},
      p2_h2_2:{th:"ความสำคัญของอินโฟกราฟิกในยุคดิจิทัล",en:"Why infographics matter today"},
      p2_l1:{th:"ช่วยให้เข้าใจข้อมูลที่ซับซ้อนได้ง่ายขึ้น",en:"Clarify complex information."},
      p2_l2:{th:"ดึงดูดความสนใจมากกว่าข้อความล้วนๆ",en:"Attract attention better than plain text."},
      p2_l3:{th:"เหมาะกับการแบ่งปันบนโซเชียลมีเดีย",en:"Great for social sharing."},
      p2_l4:{th:"ช่วยให้จดจำข้อมูลได้ดีขึ้น",en:"Improve recall."},
      p2_h2_3:{th:"เหตุผลที่ควรใช้การนำเสนอข้อมูลในรูปแบบอินโฟกราฟิก",en:"Why choose infographics"},
      p2_l5:{th:"สมองของมนุษย์ประมวลผลภาพได้เร็วกว่าข้อความมาก",en:"Humans process visuals much faster than text."},
      p2_l6:{th:"คนทั่วไปจดจำข้อมูลที่เป็นภาพได้มากกว่าข้อความ",en:"People remember visuals better than text."},
      p2_l7:{th:"อินโฟกราฟิกช่วยเพิ่มการมีส่วนร่วมบนโซเชียลมีเดีย",en:"Infographics boost engagement."},
      p2_q:{th:"ข้อมูลใดบ้างที่คุณคิดว่าถ้านำเสนอเป็นอินโฟกราฟิกแล้วจะเข้าใจง่ายขึ้น?",en:"Which data would be clearer as an infographic?"},

      // Page 3
      p3_title:{th:"📚 ความรู้เบื้องต้นเกี่ยวกับอินโฟกราฟิก",en:"📚 Infographic Basics"},
      p3_cap1:{th:"อินโฟกราฟิกประเภทต่างๆ",en:"Different types of infographics"},
      p3_cap2:{th:"การใช้งานอินโฟกราฟิกในชีวิตประจำวัน",en:"Infographics in daily life"},
      p3_h2_types:{th:"ประเภทของอินโฟกราฟิก",en:"Types of infographics"},
      p3_t1:{th:"📈 สถิติ (Statistical)",en:"📈 Statistical"},
      p3_t1p:{th:"เน้นการนำเสนอข้อมูลตัวเลข โดยใช้กราฟและแผนภูมิ",en:"Emphasizes numbers with charts and graphs."},
      p3_t2:{th:"🔄 กระบวนการ (Process)",en:"🔄 Process"},
      p3_t2p:{th:"อธิบายลำดับขั้นตอนการทำงานอย่างเป็นขั้นเป็นตอน",en:"Shows step-by-step procedures."},
      p3_t3:{th:"🗺️ แผนที่ (Geographical)",en:"🗺️ Geographical"},
      p3_t3p:{th:"นำเสนอข้อมูลตามพื้นที่ทางภูมิศาสตร์",en:"Visualizes data by location."},
      p3_t4:{th:"⏰ ไทม์ไลน์ (Timeline)",en:"⏰ Timeline"},
      p3_t4p:{th:"แสดงข้อมูลเรียงตามลำดับเวลา",en:"Orders events along time."},
      p3_t5:{th:"📋 เปรียบเทียบ (Comparison)",en:"📋 Comparison"},
      p3_t5p:{th:"เปรียบเทียบความแตกต่างระหว่างหลายสิ่ง",en:"Highlights differences."},
      p3_q:{th:"คุณเคยเห็นอินโฟกราฟิกประเภทใดบ้างในชีวิตประจำวัน? และช่วยอย่างไร?",en:"Which types have you seen? How did they help?"},

      // Page 4
      p4_title:{th:"🧩 องค์ประกอบสำคัญของอินโฟกราฟิก",en:"🧩 Key Components of Infographics"},
      p4_cap1:{th:"องค์ประกอบต่างๆ ในอินโฟกราฟิก",en:"Core elements in an infographic"},
      p4_cap2:{th:"การออกแบบที่มีประสิทธิภาพ",en:"Efficient design"},
      p4_h2:{th:"องค์ประกอบ 5 อย่างที่ทำให้อินโฟกราฟิกมีประสิทธิภาพ",en:"Five elements for effective infographics"},
      p4_e1:{th:"📊 ข้อมูล (Data)",en:"📊 Data"},
      p4_e1p:{th:"ข้อมูลต้องถูกต้องและน่าเชื่อถือ",en:"Accurate, trustworthy data."},
      p4_e2:{th:"📝 ข้อความ (Text)",en:"📝 Text"},
      p4_e2p:{th:"ใช้ถ้อยคำกระชับ เข้าใจง่าย",en:"Concise, readable copy."},
      p4_e3:{th:"🖼️ ภาพและสัญลักษณ์ (Visuals)",en:"🖼️ Visuals & Icons"},
      p4_e3p:{th:"ใช้ภาพ/ไอคอนที่สื่อความหมายชัดเจน",en:"Clear, meaningful visuals."},
      p4_e4:{th:"📐 การจัดวาง (Layout)",en:"📐 Layout"},
      p4_e4p:{th:"สมดุล เน้นประเด็นสำคัญ และไหลลื่น",en:"Balance, emphasis, and flow."},
      p4_e5:{th:"🎨 สีและตัวอักษร (Color & Type)",en:"🎨 Color & Typography"},
      p4_e5p:{th:"เลือกสี/ฟอนต์ให้เหมาะกับกลุ่มเป้าหมาย",en:"Appropriate colors and type."},
      p4_q:{th:"ถ้าออกแบบเรื่อง “อนุรักษ์น้ำ” คุณจะใช้สีใด และเพราะอะไร?",en:"Designing about water conservation—what colors and why?"},

      // Page 5
      p5_title:{th:"🛠️ ขั้นตอนการออกแบบอินโฟกราฟิกอย่างสร้างสรรค์",en:"🛠️ Creative Infographic Workflow"},
      p5_cap1:{th:"การวางแผนและการออกแบบ",en:"Planning & design"},
      p5_cap2:{th:"กระบวนการสร้างสรรค์ผลงาน",en:"Creation process"},
      p5_h2:{th:"6 ขั้นตอน",en:"6 Steps"},
      p5_s1:{th:"กำหนดวัตถุประสงค์/กลุ่มเป้าหมาย/ข้อมูลสำคัญ",en:"Define goals, audience, and key data."},
      p5_s2:{th:"เลือกประเภทอินโฟกราฟิกที่เหมาะสม",en:"Choose an appropriate type."},
      p5_s3:{th:"ร่างโครง (Sketch/Storyboard)",en:"Sketch a structure/storyboard."},
      p5_s4:{th:"ออกแบบด้วยเครื่องมือดิจิทัล (เช่น Canva, Piktochart)",en:"Design with digital tools."},
      p5_s5:{th:"ตรวจสอบความถูกต้อง/ปรับแก้",en:"Validate and refine."},
      p5_s6:{th:"เผยแพร่/นำเสนอ",en:"Publish and present."},
      p5_q:{th:"ถ้าทำอินโฟกราฟิก “ประวัติส่วนตัว” จะเลือกประเภทใด เพราะเหตุใด?",en:"For a “personal profile” infographic, which type and why?"},

      // Page 6
      p6_title:{th:"✨ เทคนิคการทำให้อินโฟกราฟิกน่าสนใจ",en:"✨ Techniques to Make Infographics Engaging"},
      p6_cap1:{th:"การใช้สีที่ดึงดูดความสนใจ",en:"Color usage that attracts attention"},
      p6_cap2:{th:"การเล่าเรื่องด้วยภาพ",en:"Visual storytelling"},
      p6_h2:{th:"เทคนิคสำคัญ",en:"Key techniques"},
      p6_l1:{th:"ใช้สีอย่างมีความหมาย และจำกัด 3–5 สี",en:"Use meaningful palettes; limit to 3–5 colors."},
      p6_l2:{th:"ใช้ไอคอนที่เข้าใจง่าย และสอดคล้องทั้งงาน",en:"Use clear, consistent icons."},
      p6_l3:{th:"เล่าเรื่องด้วยภาพ (Visual Storytelling)",en:"Tell a story visually."},
      p6_l4:{th:"ข้อมูลกระชับ น่าเชื่อถือ อ้างอิงที่มา",en:"Concise, credible, with sources."},
      p6_l5:{th:"ปรับให้เหมาะกับแพลตฟอร์ม (เว็บ/โซเชียล)",en:"Optimize for the platform."},
      p6_q:{th:"Visual Storytelling สำคัญอย่างไรในการออกแบบอินโฟกราฟิก?",en:"Why is visual storytelling important?"},

      // Page 7
      p7_title:{th:"🌍 ตัวอย่างอินโฟกราฟิกสร้างสรรค์",en:"🌍 Creative Infographic Examples"},
      p7_cap1:{th:"อินโฟกราฟิกด้านการศึกษา",en:"Education"},
      p7_cap2:{th:"อินโฟกราฟิกด้านสุขภาพ",en:"Health"},
      p7_h2:{th:"ตัวอย่างด้านต่างๆ",en:"Examples across domains"},
      p7_edu:{th:"การศึกษา: แผนผังบทเรียน/Timeline",en:"Education: lesson maps & timelines"},
      p7_health:{th:"สุขภาพ: โภชนาการ/ป้องกันโรค",en:"Health: nutrition & prevention"},
      p7_env:{th:"สิ่งแวดล้อม: วงจรผลิตภัณฑ์/รีไซเคิล",en:"Environment: product cycles & recycling"},
      p7_biz:{th:"ธุรกิจ: การเติบโต/แผนการตลาด/เปรียบเทียบ",en:"Business: growth, marketing, comparisons"},
      p7_q:{th:"ถ้าคุณต้องสร้างอินโฟกราฟิกชิ้นหนึ่ง คุณจะเลือกเรื่องอะไร เพราะเหตุใด?",en:"If you create one infographic, what topic and why?"},

      // Page 8
      p8_title:{th:"🛠️ เครื่องมือและแหล่งเรียนรู้ออนไลน์",en:"🛠️ Tools & Learning Resources"},
      p8_cap1:{th:"เครื่องมือออกแบบอินโฟกราฟิก",en:"Infographic tools"},
      p8_cap2:{th:"แหล่งเรียนรู้การออกแบบ",en:"Design learning resources"},
      p8_h2_tools:{th:"เครื่องมือสำหรับผู้เริ่มต้น",en:"Tools for beginners"},
      p8_t1:{th:"Canva — ใช้ง่าย มีเทมเพลตหลากหลาย",en:"Canva — easy, many templates"},
      p8_t2:{th:"Piktochart — ถนัดงานอินโฟกราฟิกโดยเฉพาะ",en:"Piktochart — infographic-focused"},
      p8_t3:{th:"Venngage — เครื่องมือจัดภาพข้อมูล",en:"Venngage — data visuals"},
      p8_t4:{th:"Adobe Express — คุณภาพสายโปร",en:"Adobe Express — pro quality"},
      p8_t5:{th:"PowerPoint / Google Slides — คุ้นมืออยู่แล้ว",en:"PowerPoint/Google Slides — familiar"},
      p8_h2_more:{th:"แหล่งเรียนรู้เพิ่มเติม",en:"More learning"},
      p8_m1:{th:"คอร์ส/คลิป YouTube ด้านการออกแบบ",en:"Design courses on YouTube"},
      p8_m2:{th:"บล็อกบทความ & tutorials",en:"Blogs & tutorials"},
      p8_m3:{th:"ชุมชน Facebook/กลุ่มนักออกแบบ",en:"Communities & groups"},
      p8_m4:{th:"หนังสือ/อีบุ๊ก Data Visualization",en:"Books & eBooks on data viz"},
      p8_q:{th:"เครื่องมือไหนเหมาะกับคุณที่สุด และเพราะอะไร?",en:"Which tool fits you best and why?"},

      // Page 9
      p9_title:{th:"✅ สรุปบทเรียน",en:"✅ Lesson Summary"},
      p9_cap1:{th:"สรุปเนื้อหาการเรียนรู้",en:"Recap"},
      p9_cap2:{th:"การนำความรู้ไปใช้",en:"Applying knowledge"},
      p9_h2_1:{th:"สิ่งที่เราเรียนรู้",en:"What we learned"},
      p9_l1:{th:"อินโฟกราฟิกช่วยย่อยข้อมูลซับซ้อนให้ง่ายและน่าสนใจ",en:"Infographics simplify complex information."},
      p9_l2:{th:"เป็นทักษะสำคัญในศตวรรษที่ 21",en:"A key 21st-century skill."},
      p9_l3:{th:"นำไปใช้ได้จริงทั้งการเรียนและงานนำเสนอ",en:"Practical for class and presentations."},
      p9_h2_2:{th:"ทักษะที่ได้พัฒนา",en:"Skills developed"},
      p9_s1:{th:"คิดเชิงวิเคราะห์/สรุปข้อมูล",en:"Analytical thinking & summarizing"},
      p9_s2:{th:"ความคิดสร้างสรรค์/ออกแบบ",en:"Creativity & design"},
      p9_s3:{th:"การสื่อสารอย่างมีประสิทธิภาพ",en:"Effective communication"},
      p9_s4:{th:"มองภาพรวมด้วยภาพแทนข้อความ",en:"Visual perspective"},
      p9_q:{th:"อะไรคือสิ่งสำคัญที่สุดที่ได้เรียนรู้ และจะนำไปใช้อย่างไร?",en:"What’s most important you learned, and how will you apply it?"}
    };

    // ===== Quiz (TH + EN options) =====
    const quizQuestions = [
      { thQ:"อินโฟกราฟิกคืออะไร?", enQ:"What is an infographic?",
        thO:["การนำเสนอข้อมูลด้วยข้อความล้วนๆ","การสรุปข้อมูลด้วยภาพและกราฟิก","การวาดภาพศิลปะ","การเขียนโปรแกรม"],
        enO:["Presenting information only with text","Summarizing info with visuals/graphics","Making art freely","Computer programming"], a:1 },
      { thQ:"แบบใดเหมาะแสดงการเปลี่ยนแปลงตามเวลา?", enQ:"Which suits change over time?",
        thO:["แผนที่","กระบวนการ","ไทม์ไลน์","เปรียบเทียบ"],
        enO:["Map","Process","Timeline","Comparison"], a:2 },
      { thQ:"ข้อใด ‘ไม่ใช่’ องค์ประกอบสำคัญของอินโฟกราฟิก?", enQ:"Which is NOT a key component?",
        thO:["ข้อมูล","ภาพและสัญลักษณ์","เสียงเพลง","การจัดวาง"],
        enO:["Data","Visuals & icons","Music","Layout"], a:2 },
      { thQ:"เครื่องมือเริ่มต้นที่เหมาะคือข้อใด", enQ:"Which is a beginner-friendly tool?",
        thO:["Canva","Visual Studio Code","Microsoft Excel","Adobe Premiere Pro"],
        enO:["Canva","Visual Studio Code","Microsoft Excel","Adobe Premiere Pro"], a:0 },
      { thQ:"เทคนิคที่ทำให้น่าสนใจคือข้อใด", enQ:"Which technique boosts engagement?",
        thO:["ใช้ข้อความยาวๆ","ใช้สีเดียวทั้งแผ่น","เล่าเรื่องด้วยภาพ","ไม่ต้องอ้างอิงที่มา"],
        enO:["Very long text","Single color only","Visual storytelling","No sources"], a:2 },
      { thQ:"ขั้นตอนแรกของงานออกแบบ", enQ:"First step of designing?",
        thO:["เลือกสี","วิเคราะห์ข้อมูลที่จะสื่อ","เผยแพร่ผลงาน","วาดภาพประกอบ"],
        enO:["Pick colors","Analyze information to present","Publish","Draw illustrations"], a:1 },
      { thQ:"เหมาะสำหรับแสดง ‘ขั้นตอน’", enQ:"Best for showing steps?",
        thO:["สถิติ","กระบวนการ","แผนที่","ไทม์ไลน์"],
        enO:["Statistical","Process","Map","Timeline"], a:1 },
      { thQ:"เลือกสีควรคำนึงถึง", enQ:"Choosing colors should consider…",
        thO:["ตามชอบส่วนตัว","ใช้ให้มากที่สุด","เหมาะกับเนื้อหา/กลุ่มเป้าหมาย","ขาวดำเท่านั้น"],
        enO:["Personal taste only","As many as possible","Fit content/audience","Only B&W"], a:2 },
      { thQ:"ข้อมูลการเติบโตของบริษัทเหมาะด้านใด", enQ:"Company growth fits which domain?",
        thO:["การศึกษา","สุขภาพ","สิ่งแวดล้อม","ธุรกิจ/การตลาด"],
        enO:["Education","Health","Environment","Business/Marketing"], a:3 },
      { thQ:"เหตุผลสำคัญของอินโฟกราฟิก", enQ:"Key reason infographics matter?",
        thO:["ช่วยเข้าใจข้อมูลซับซ้อนได้ง่ายขึ้น","เพราะเป็นเทรนด์","เพราะยาก","เพราะแพง"],
        enO:["Clarify complex info","Because it’s trendy","Because it’s hard","Because it’s expensive"], a:0 },
      { thQ:"การจัดวางควรเป็นอย่างไร", enQ:"Good layout should be…",
        thO:["สมดุลและเน้นประเด็น","สุ่มสี่สุ่มห้า","วางทุกอย่างกลางภาพ","ไม่สนใจการไหล"],
        enO:["Balanced with emphasis","Random","Everything centered","Ignore flow"], a:0 },
      { thQ:"Visual Storytelling คือ", enQ:"Visual Storytelling is…",
        thO:["เขียนยาวๆ","ถ่ายวิดีโอ","เล่าเรื่องผ่านภาพ","บันทึกเสียง"],
        enO:["Long writing","Filming videos","Telling stories via visuals","Voiceover"], a:2 },
      { thQ:"ข้อมูลภูมิศาสตร์เหมาะกับ", enQ:"Geographical data suits…",
        thO:["แผนที่","กระบวนการ","สถิติ","เปรียบเทียบ"],
        enO:["Map","Process","Statistical","Comparison"], a:0 },
      { thQ:"เลือกฟอนต์ควร", enQ:"Choosing typefaces should…",
        thO:["หลากหลายมากที่สุด","อ่านง่ายเหมาะเนื้อหา","อังกฤษเท่านั้น","เล็กเพื่อประหยัดพื้นที่"],
        enO:["Use many fonts","Be readable/appropriate","English only","Tiny to save space"], a:1 },
      { thQ:"ทำไมต้องอ้างอิงที่มา", enQ:"Why cite sources?",
        thO:["เพิ่มความน่าเชื่อถือ","ทำให้งานยาว","โชว์ความรู้","เอาคะแนน"],
        enO:["Increase credibility","Make it longer","Show off knowledge","For points"], a:0 },
      { thQ:"กรณีเปรียบเทียบผลิตภัณฑ์", enQ:"Comparing products fits…",
        thO:["แผนที่","กระบวนการ","เปรียบเทียบ","ไทม์ไลน์"],
        enO:["Map","Process","Comparison","Timeline"], a:2 },
      { thQ:"สำหรับโซเชียลควร", enQ:"For social media, design should be…",
        thO:["ข้อมูลเยอะ","ใหญ่และละเอียด","กระชับ ดึงดูด แชร์ง่าย","สีมืดเท่านั้น"],
        enO:["Very dense","Very large & detailed","Concise, eye-catching, shareable","Only dark colors"], a:2 },
      { thQ:"ไอคอนที่ดีควร", enQ:"Good icons should be…",
        thO:["ซับซ้อน","เข้าใจง่าย","abstract","ใหญ่มาก"],
        enO:["Complex","Easy to understand","Abstract art","Very large"], a:1 },
      { thQ:"ตรวจความถูกต้องอยู่ในขั้นตอนใด", enQ:"Check data accuracy in which step?",
        thO:["วิเคราะห์ข้อมูล","เลือกประเภท","ตรวจสอบ/ปรับแก้","เผยแพร่"],
        enO:["Analyze","Choose type","Validate/Refine","Publish"], a:2 },
      { thQ:"ทักษะที่พัฒนาได้คือ", enQ:"A skill developed here is…",
        thO:["คิดเชิงวิเคราะห์และสรุปข้อมูล","เล่นกีฬา","ร้องเพลง","ทำอาหาร"],
        enO:["Analytical & summarizing","Sports","Singing","Cooking"], a:0 }
    ];

    // ===== Language handling =====
    function setLang(lang){
      document.body.setAttribute('data-lang', lang);
      document.getElementById('btnTH').classList.toggle('active', lang==='th');
      document.getElementById('btnEN').classList.toggle('active', lang==='en');
      // Update static texts
      document.querySelectorAll('[data-i18n]').forEach(el=>{
        const key = el.getAttribute('data-i18n');
        if(dict[key]){
          el.textContent = dict[key][lang] || dict[key]['th'] || el.textContent;
        }
      });
      // Progress label
      document.getElementById('progressText').innerHTML = (lang==='th' ? "ความคืบหน้า: " : "Progress: ") + `<span id="current-page">${currentPage}</span>/`+ totalPages;
      // Course title small
      document.getElementById('courseTitle').textContent = (lang==='th'
         ? "🎨 การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์"
         : "🎨 Creative Infographic Design for Clear Communication");

      // Re-render quiz if on page 10
      if(currentPage===10){ renderQuiz(); }
      // Rebuild grade box if exists
      rebuildGradeTexts();
      // Update placeholders
      const nameInput = document.getElementById('student-name');
      if(nameInput){
        nameInput.placeholder = (lang==='th' ? "กรุณากรอกชื่อของคุณ" : "Please enter your name");
      }
    }

    function navigate(from,to){
      try{ clickSound.currentTime=0; clickSound.play().catch(()=>{});}catch(e){}
      document.getElementById(`page${from}`).classList.remove('active');
      document.getElementById(`page${to}`).classList.add('active');
      currentPage = to;
      updateProgressBar();
      if(to===10){ renderQuiz(); }
    }

    function updateProgressBar(){
      const pct = (currentPage/totalPages)*100;
      document.getElementById('progress-bar').style.width = `${pct}%`;
      const lang = document.body.getAttribute('data-lang')||'th';
      document.getElementById('current-page').textContent = currentPage;
      // (label handled by setLang)
    }

    function renderQuiz(){
      const lang = document.body.getAttribute('data-lang')||'th';
      const cont = document.getElementById('quiz-container');
      cont.innerHTML='';
      quizQuestions.forEach((q,idx)=>{
        const qDiv = document.createElement('div');
        qDiv.className='question';
        const questionText = (lang==='th'? q.thQ : q.enQ);
        const opts = (lang==='th'? q.thO : q.enO);
        qDiv.innerHTML = `<h3>${idx+1}. ${questionText}</h3>
          <div class="options">
            ${opts.map((opt,i)=>`<label><input type="radio" name="q${idx}" value="${i}"> ${opt}</label>`).join('')}
          </div>`;
        cont.appendChild(qDiv);
      });
    }

    function submitQuiz(){
      const lang = document.body.getAttribute('data-lang')||'th';
      const name = (document.getElementById('student-name')||{}).value || '';
      if(!name){
        alert(lang==='th' ? 'กรุณากรอกชื่อของคุณก่อนส่งคำตอบ' : 'Please enter your name before submitting.');
        return;
      }
      let score=0;
      quizQuestions.forEach((q,i)=>{
        const sel = document.querySelector(`input[name="q${i}"]:checked`);
        if(sel && parseInt(sel.value)===q.a) score++;
      });
      document.getElementById('result-name').textContent = name;
      document.getElementById('score').textContent = score;
      showGradeAndRecommendation(score);
      navigate(10,11);
    }

    function showGradeAndRecommendation(score){
      const lang = document.body.getAttribute('data-lang')||'th';
      const g = document.getElementById('grade-info');
      const r = document.getElementById('recommendation');

      if(score>=18){
        g.innerHTML = (lang==='th'
          ? `<h3>ระดับ: ดีเยี่ยม! 🎉</h3><p>คุณเข้าใจเรื่องอินโฟกราฟิกเป็นอย่างดี</p>`
          : `<h3>Level: Excellent! 🎉</h3><p>You have a solid understanding of infographics.</p>`);
        r.textContent = (lang==='th'
          ? 'พร้อมออกแบบอินโฟกราฟิกของตนเอง ลองใช้ในงานจริงดูเลย!'
          : 'You are ready to design your own infographic—try it in a real task!');
      }else if(score>=15){
        g.innerHTML = (lang==='th'
          ? `<h3>ระดับ: ดี 👍</h3><p>ความเข้าใจอยู่ในเกณฑ์ดี</p>`
          : `<h3>Level: Good 👍</h3><p>Your understanding is good.</p>`);
        r.textContent = (lang==='th'
          ? 'ทบทวนส่วนที่ผิดอีกเล็กน้อย แล้วลองทำแบบทดสอบใหม่'
          : 'Review missed items and try the quiz again.');
      }else if(score>=12){
        g.innerHTML = (lang==='th'
          ? `<h3>ระดับ: พอใช้ 👌</h3><p>ความเข้าใจปานกลาง</p>`
          : `<h3>Level: Fair 👌</h3><p>Moderate understanding.</p>`);
        r.textContent = (lang==='th'
          ? 'ทบทวนหัวข้อพื้นฐานเพิ่ม โดยเฉพาะประเภท/องค์ประกอบ'
          : 'Revise basics—especially types and components.');
      }else{
        g.innerHTML = (lang==='th'
          ? `<h3>ระดับ: ปรับปรุง 🔄</h3><p>ควรทบทวนบทเรียนอีกครั้ง</p>`
          : `<h3>Level: Needs Improvement 🔄</h3><p>Please review the lesson again.</p>`);
        r.textContent = (lang==='th'
          ? 'ย้อนกลับไปอ่านบทนำ ความหมาย และองค์ประกอบสำคัญ'
          : 'Go back to intro, definitions, and key components.');
      }
    }

    function rebuildGradeTexts(){
      // re-run grade block to match language after switching (if already on result page)
      if(currentPage===11){
        const score = parseInt(document.getElementById('score').textContent||'0',10);
        if(!isNaN(score)) showGradeAndRecommendation(score);
      }
    }

    function restartLesson(){
      document.querySelectorAll('input[type="radio"]').forEach(i=>i.checked=false);
      const name = document.getElementById('student-name'); if(name) name.value='';
      navigate(11,1);
    }

    // Init
    window.onload = function(){
      updateProgressBar();
      setLang('th'); // default Thai
    }
  </script>
</body>
</html>

<p>The post <a href="https://www.kroochut.com/infographic-design/">บทเรียนออนไลน์การออกแบบอินโฟกราฟิกเพื่อการนำเสนอข้อมูลอย่างสร้างสรรค์ 🎨</a> appeared first on <a href="https://www.kroochut.com">ครูชัชดอทคอม</a>.</p>
]]></content:encoded>
					
		
		<enclosure url="https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3" length="0" type="audio/mpeg" />

			</item>
	</channel>
</rss>
