logo
logo logo
  • หน้าหลัก
  • เข้าสู่ระบบ
  • ลงทะเบียน

เข้าสู่ระบบ

ลืมรหัสผ่าน?
ยังไม่มีบัญชี ? ลงทะเบียน
Smartyquizkids - สนุกคิด สนุกถาม

แหล่งเรียนรู้รายวิชาวิทยาการคำนวณ & การออกแบบและเทคโนโลยี ผ่านกระบวนการ Constructionism, Micro-learning และ PBL 🤖 AI Disclaimer: เนื้อหาและสื่อ บางส่วนสร้างสรรค์ร่วมกับ AI (Google Gemini) โดยผ่านการตรวจสอบความถูกต้องจากครูผู้สอนแล้ว

Abouts

  • บทเรียนสั้นกระชับ (Micro-Learning)
  • ฝึกทักษะการออกแบบอัลกอริทึม
  • ไขปัญหาท้าทายด้วยกระบวนการ PBL
  • ก้าวสู่การเป็นพลเมืองดิจิทัลอย่างมั่นใจ
  • นโยบายความเป็นส่วนตัว

Contact Us

  •   0829295259
  •   tpisit@wsst.ac.th
   
Image

© 2023 Smartyquizkids.com
All Rights Reserved.

ตัวอย่าง : กำหนดวัตถุประสงค์ของปัญหา (Objective)

💡 สูตรช่วยจำ! เขียนวัตถุประสงค์

จำคีย์เวิร์ด 3 คำนี้ไว้: "รับค่า -> นำมา -> แสดงผล"

ตัวอย่างโครงสร้าง:

"เพื่อสร้างโปรแกรมที่ [รับค่า...]
แล้วนำมา [คิดคำนวณ เช่น บวก ลบ คูณ หาร]
และแสดงผล [คำตอบ...]"

👉 ตัวอย่างเช่น (เรื่องการหาผลรวม):

เพื่อสร้างโปรแกรมที่ รับค่าตัวเลข 2 จำนวน
แล้วนำมา บวกกัน
และแสดงผล ผลรวมนั้นออกมา

ตัวอย่าง : กำหนดรูปแบบผลลัพธ์ที่ต้องการ

🖥️ สูตรจำง่าย! การกำหนดรูปแบบผลลัพธ์ (Output)

เทคนิคการตั้งคำถามกับตัวเอง:
"สุดท้ายแล้ว โปรแกรมต้องแสดงค่าอะไรออกมาให้เราเห็นบนหน้าจอ?"

👉 โครงสร้างสำหรับนำไปใช้งาน:

รูปแบบผลลัพธ์ที่ต้องการ (Output) คือ : [บอกสิ่งที่จะให้แสดงผล]

💡 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวม):

รูปแบบผลลัพธ์ที่ต้องการ (Output) คือ : ตัวเลขผลรวม (ของตัวเลขทั้ง 2 จำนวน)

เมื่อรู้แล้วว่าผลลัพธ์สุดท้ายคืออะไร กดปุ่มคัดลอก แล้วปิดหน้าต่างไปวางข้อความได้เลย!

ตัวอย่าง : กำหนดข้อมูลนำเข้า

📥 สูตรจำง่าย! การกำหนดข้อมูลนำเข้า (Input)

เทคนิคการตั้งคำถามกับตัวเอง:
"เพื่อให้ได้ผลลัพธ์นั้น เราต้องป้อนข้อมูลอะไรเข้าไปให้โปรแกรมคิดบ้าง?"

👉 โครงสร้างสำหรับนำไปใช้งาน:

ข้อมูลนำเข้า (Input) คือ : [ระบุข้อมูลที่ต้องป้อนเข้าโปรแกรม...]

💡 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวม):

ข้อมูลนำเข้า (Input) คือ : ตัวเลขจำนวนที่ 1 และ ตัวเลขจำนวนที่ 2

เมื่อรู้แล้วว่าต้องป้อนข้อมูลอะไร กดปุ่มคัดลอก แล้วปิดหน้าต่างไปวางข้อความได้เลย!

ตัวอย่าง : กำหนดข้อมูลอื่นๆ ที่ใช้ในการแก้ปัญหา

⚙️ สูตรจำง่าย! การประมวลผลและตัวแปร (Process)

เทคนิคการตั้งคำถามกับตัวเอง (ต้องตอบให้ครบ 2 ข้อนะ!):
1. โปรแกรมต้องเอาข้อมูลมาคำนวณยังไง? (บวก ลบ คูณ หาร)
2. เราต้องสร้าง "กล่อง" (ตัวแปร) ชื่ออะไรบ้าง เพื่อมาเก็บข้อมูล?

👉 โครงสร้างสำหรับนำไปใช้งาน:

การประมวลผล คือ : [อธิบายวิธีคำนวณ เช่น นำ...มาบวกกับ...]
ตัวแปรที่ใช้ คือ : [ตั้งชื่อกล่องเก็บข้อมูล เช่น กล่องที่ 1, กล่องผลลัพธ์]

💡 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวม):

การประมวลผล คือ : นำตัวเลขจำนวนที่ 1 มาบวก (+) กับตัวเลขจำนวนที่ 2
ตัวแปรที่ใช้ คือ : ตัวแปรเก็บตัวเลขที่ 1, ตัวแปรเก็บตัวเลขที่ 2, ตัวแปรเก็บผลรวม

เมื่อรู้สูตรคำนวณและชื่อตัวแปรแล้ว กดปุ่มคัดลอก แล้วปิดหน้าต่างไปวางข้อความได้เลย!

ตัวอย่าง : ระบุข้อมูลทั้งหมดที่ได้จากการแลกเปลี่ยนกับเพื่อนและจากการสืบค้นข้อมูล

🔵 สูตรจำง่าย! กฎการตั้งชื่อตัวแปรและสูตร

🚩 กฎเหล็ก 4 ข้อในการตั้งชื่อตัวแปร (Variable):
1. ใช้ภาษาอังกฤษเท่านั้น (เช่น weight, price)
2. ห้ามเว้นวรรค (ใช้ totalPrice หรือ total_price)
3. ห้ามขึ้นต้นด้วยตัวเลข
4. ต้องเขียนให้ตรงกันเป๊ะ! (ตัวเล็ก-ตัวใหญ่ต้องเหมือนเดิมตลอด)

👉 โครงสร้างสำหรับนำไปใช้งาน:

ตัวแปรที่ใช้ : [พิมพ์ชื่อตัวแปรภาษาอังกฤษคั่นด้วยลูกน้ำ]
สูตรคำนวณ : [พิมพ์สูตร เช่น sum = number1 + number2]

💡 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวม):

ตัวแปรที่ใช้ : number1, number2 และ sum
สูตรคำนวณ : sum = number1 + number2

เมื่อได้ข้อสรุปชื่อตัวแปรกับเพื่อนแล้ว กดปุ่มคัดลอก ไปวางและพิมพ์ตอบได้เลย!

ตัวอย่าง : ระบุลักษณะรูปแบบของผังงานของโปรแกรม

🟣 สูตรจำง่าย! การเลือกรูปแบบผังงาน

เทคนิคการตั้งคำถามกับตัวเอง (เพื่อเช็คตรรกะ):
1. "โจทย์ข้อนี้มีการตัดสินใจ (มีทางแยก ใช่/ไม่ใช่) ไหม?"
2. "โจทย์ข้อนี้มีการทำงานซ้ำๆ (วนลูป) ไหม?"

👉 ถ้าคำตอบคือ "ไม่" ทั้งสองข้อ = เป็น แบบเรียงลำดับ (Sequence) แน่นอน!

👉 โครงสร้างสำหรับนำไปใช้งาน:

รูปแบบผังงานที่ใช้ คือ : [เลือกเติม: แบบเรียงลำดับ / แบบมีทางเลือก / แบบทำซ้ำ]

💡 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวม):

รูปแบบผังงานที่ใช้ คือ : แบบเรียงลำดับ (Sequence)
⚠️ ข้อควรระวัง: เมื่อเลือกแบบนี้แล้ว ตอนวาดผังงาน (Flowchart) จะต้องลากลูกศรเป็นเส้นตรงไหลลงมาทางเดียว ห้ามมีทางแยกเด็ดขาด!

เมื่อวิเคราะห์รูปแบบผังงานได้แล้ว กดปุ่มคัดลอก ไปวางและพิมพ์ตอบได้เลย!

ตัวอย่าง : ออกแบบอัลกอริทึมด้วยภาษาธรรมชาติ

📝 สูตรจำง่าย! เขียนอัลกอริทึมภาษาธรรมชาติ

เทคนิคการคิด (เอาข้อมูลเก่ามาประกอบร่าง!):
การเขียนอัลกอริทึม ต้องเขียนเรียงเป็นข้อๆ โดยมี 5 โครงสร้างหลัก คือ:
1. เริ่ม (ต้องมีคำว่า เริ่มต้นการทำงาน)
2. รับ (ถามผู้ใช้ และรับค่ามาเก็บใน "ตัวแปร Input")
3. คิด (คำนวณตาม "สูตร" แล้วเก็บผลลัพธ์ใน "ตัวแปร Output")
4. โชว์ (นำผลลัพธ์มาแสดงออกทางหน้าจอ)
5. จบ (ต้องมีคำว่า สิ้นสุดการทำงาน)
*หมายเหตุ: ในขั้นตอน รับ, คิด, โชว์ สามารถแตกออกเป็นหลายบรรทัดได้นะ ขึ้นอยู่กับข้อมูลของเรา!

👉 โครงสร้างสำหรับนำไปใช้งาน:

  1. เริ่มต้นการทำงาน
  2. รับค่า [ข้อมูลนำเข้า] มาเก็บในตัวแปร [ชื่อตัวแปร]
  3. นำ [ตัวแปร] มา [ประมวลผล] แล้วเก็บผลลัพธ์ในตัวแปร [ชื่อตัวแปรผลลัพธ์]
  4. แสดงผลลัพธ์ [ชื่อตัวแปรผลลัพธ์] ออกทางหน้าจอ
  5. สิ้นสุดการทำงาน

💡 ดูตัวอย่าง (เรื่องการหาผลรวมของตัวเลข 2 จำนวน):

1. เริ่มต้นการทำงาน
2. แสดงข้อความ "กรุณาป้อนตัวเลขที่ 1" เพื่อบอกผู้ใช้
3. รับค่าตัวเลขที่ 1 มาเก็บไว้ในตัวแปร number1
4. แสดงข้อความ "กรุณาป้อนตัวเลขที่ 2" เพื่อบอกผู้ใช้
5. รับค่าตัวเลขที่ 2 มาเก็บไว้ในตัวแปร number2
6. นำ number1 มาบวกกับ number2 แล้วเก็บผลลัพธ์ในตัวแปร sum
7. แสดงผลลัพธ์ที่เก็บอยู่ในตัวแปร sum ออกทางหน้าจอ
8. สิ้นสุดการทำงาน

สังเกตไหม? เราแค่เอาข้อมูล Input, Process, Output ที่หาไว้มาแต่งเป็นประโยคเท่านั้นเอง!

ตัวอย่าง : ออกแบบอัลกอริทึมด้วยรหัสจำลอง

💻 สูตรจำง่าย! แปลงร่างเป็นรหัสจำลอง (Pseudocode)

เทคนิคการคิด (เปิดพจนานุกรมแปลภาษา!):
นำ "ภาษาธรรมชาติ" จากข้อที่แล้ว มาแปลเป็นคำศัพท์สากล ดังนี้:
  • 1. เริ่มต้น / สิ้นสุด → START / END
  • 2. แสดงข้อความ → PRINT "..."
  • 3. รับค่าตัวแปร → INPUT (ตามด้วยชื่อตัวแปร)
  • 4. คำนวณ/กำหนดค่า → SET (ตามด้วยสูตรคำนวณ)

👉 โครงสร้างสำหรับนำไปใช้งาน:

START
    [พิมพ์คำสั่ง PRINT, INPUT, SET ของน้องๆ ที่นี่...]
END

💡 ดูตัวอย่าง (เรื่องการหาผลรวมของตัวเลข 2 จำนวน):

START
    PRINT "กรุณาใส่ตัวเลขที่ 1:"
    INPUT number1
    PRINT "กรุณาใส่ตัวเลขที่ 2:"
    INPUT number2
    SET sum = number1 + number2
    PRINT sum
END

เมื่อรู้คำศัพท์แล้ว กดปุ่มคัดลอกโครงสร้าง ปิดหน้าต่าง แล้วเริ่มเขียนโค้ดได้เลย!

ตัวอย่าง : ออกแบบอัลกอริทึมด้วยผังงาน

🎀 สูตรจำง่าย! แปลงรหัสจำลองเป็นผังงาน (Flowchart)

เทคนิคการคิด (ลอกของเดิม มาเติมกรอบ!):
กฎเหล็ก: ให้นำ "รหัสจำลอง (Pseudocode)" ที่น้องๆ เขียนไว้ในข้อที่แล้ว มาวาดใส่กรอบสัญลักษณ์ทีละบรรทัด ห้ามคิดคำขึ้นมาใหม่เด็ดขาด!

📘 พจนานุกรมสัญลักษณ์ผังงาน (ที่ถูกต้องตามหลักวิชาการ):

1. สัญลักษณ์ แคปซูล (Terminator) 💊
START / END

👉 นำมาครอบคำว่า: START และ END
💡 เหตุผล: รูปทรงนี้ใช้เป็นประตู เพื่อเป็นจุดสังเกตให้รู้ว่าโปรแกรมมี "จุดเริ่มต้น" และ "จุดสิ้นสุด" ที่ตรงไหน
2. สัญลักษณ์ สี่เหลี่ยมด้านขนาน (Data) ▱
INPUT / PRINT

👉 นำมาครอบคำว่า: INPUT (รับค่า) และ PRINT (แสดงข้อความ/ผลลัพธ์)
💡 เหตุผล: สัญลักษณ์ที่มีความเอียงนี้ ใช้แทน "ข้อมูล" ที่กำลังไหลเข้าสู่ระบบ (ตอนผู้ใช้พิมพ์) หรือกำลังไหลออกจากระบบ (ตอนโชว์บนหน้าจอ) ครับ
3. สัญลักษณ์ สี่เหลี่ยมผืนผ้า (Process) ▭
SET

👉 นำมาครอบคำว่า: SET (การคำนวณ/กำหนดค่า)
💡 เหตุผล: รูปทรงกล่องทึบๆ นี้ ใช้แทน "การประมวลผล" หรือการคำนวณทางคณิตศาสตร์ที่คอมพิวเตอร์แอบคิดอยู่หลังบ้าน (ผู้ใช้มองไม่เห็น) ครับ
⚠️ ทริคเล็กๆ ก่อนอัปโหลด: วาดในเว็บเสร็จแล้ว อย่าลืมเซฟเป็นรูปภาพนะ!
โดยไปที่เมนู File > Export as > PNG... (หรือ JPEG) แล้วกด Download ลงเครื่องได้เลยครับ

จำคู่สัญลักษณ์ให้แม่นๆ แล้วกดกากบาท ปิดหน้าต่างนี้ แล้วคลิกลิงก์สีฟ้าไปวาดรูปได้เลย!

ตัวอย่าง : กรอก HTML Code (Iframe)

🐱 ตัวช่วยฉบับพกพา: ปลุกชีพโค้ด Scratch

กฎเหล็ก: ห้ามเดาบล็อกคำสั่งเด็ดขาด! ให้น้องๆ เปิด "ผังงาน" ขึ้นมาดู แล้วต่อบล็อกให้ตรงตามขั้นตอนเป๊ะๆ นะครับ
🧩 1. พจนานุกรมแปลงผังงานเป็น Scratch (คลิกเพื่อดู)
เริ่มต้น / สิ้นสุด
💊 แคปซูล
➔ บล็อกเหตุการณ์ / ควบคุม
เมื่อคลิก ⛳
รับข้อมูล / แสดงผล
▱ สี่เหลี่ยมด้านขนาน
➔ บล็อกตรวจจับ / รูปลักษณ์
ถาม ... แล้วรอ
ประมวลผล / คำนวณ
▭ สี่เหลี่ยมผืนผ้า
➔ บล็อกตัวแปร / คำนวณ
ตั้งค่า [ตัวแปร] เป็น ...
💡 ทริค: สังเกต "สี" ของบล็อกคำสั่งให้ดี! สีใน Scratch ถูกแบ่งตามหมวดหมู่ไว้แล้ว!
🛠️ 2. คลินิกแก้บั๊ก (โค้ดไม่รัน เช็คตรงนี้!)
เช็กลิสต์ก่อนส่งงาน:
  • ⬜ พิมพ์ชื่อตัวแปร (Variable) ถูกต้องทุกตัวอักษรไหม?
  • ⬜ ลำดับของบล็อกคำสั่ง เรียงตามลูกศรในผังงานเป๊ะๆ หรือยัง?
  • ⬜ ใส่เครื่องหมายคณิตศาสตร์ (+, -, *, /) ถูกช่องสีเขียวไหม?
📥 3. ขั้นตอนการนำโค้ดมาส่ง
1. ไปสร้างโปรเจกต์และต่อบล็อกที่เว็บ Scratch 🚀 คลิกไปที่ Scratch
2. 🚨 สำคัญมาก! ต้องกดปุ่ม Share (แชร์) สีส้มด้านบนเสมอ ไม่งั้นโค้ดจะไม่แสดง!
3. กดปุ่ม Copy Link (คัดลอกลิงก์) ที่อยู่ด้านล่างขวาของจอ
4. คลิกคำว่า Copy Embed (คัดลอกโค้ดสำหรับฝัง)
5. นำโค้ดที่ได้ มา Paste (วาง) ลงในกล่องข้อความของระบบ
📌 จุดสังเกต: โค้ดของน้องๆ จะต้องขึ้นต้นด้วยคำว่า
<iframe ...> เสมอ!