แปลความหมายเพลง Olivia Ong – Make It Mutual

05/08/2014

Flash AS 3.0 – พื้นฐานการทำข้อสอบ, แบบทดสอบ แบบที่ 2 – การใช้ Array และการใช้ไฟล์ XML เก็บคำถามคำตอบ

14/08/2014

Flash AS 3.0 – พื้นฐานการทำข้อสอบ, แบบทดสอบ แบบที่ 1 – คำถามละเฟรม

09/08/2014
empty image
empty image

เคยบอกว่าจะทำตั้งนานแล้ว ไม่ได้ทำซักที วันนี้จะมาทำแบบทดสอบ หรือข้อสอบ เป็นแบบพื้นฐานก่อน คือให้ 1 คำถามต่อเฟรม ถ้ามีหลายคำถามเราก็ต้องทำหลายเฟรม แก้ไขเองทุกเฟรม ซึ่งอาจจะทำให้เสียเวลา แต่จริงๆแล้ว การทำแบบนี้มันก็เหมาะสำหรับคำถามและคำตอบที่อาจจะไม่ได้เป็นแค่ตัวหนังสือ อาจจะมีรูปภาพเยอะ หรือคำตอบไม่คงที่ รูปบ้าง ตัวหนังสือบ้าง เช่นข้อสอบคณิตศาสตร์ ฟิสิกส์ เคมี อะไรประมาณนี้  การทำที่ละเฟรมจึงเหมาะกว่า

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

1. สร้างไฟล์ใหม่ เลือก AS3
– ใส่ภาพพื้นหลัง จะวาดเองหรือ import มาก็ได้ ในเลเยอร์แรก ตั้งชื่อเลเยอร์ BG แล้วล๊อกไว้
– สร้างเลเยอร์ใหม่
– วาดกรอปของข้อความ จะไม่มีก็ได้
– ใส่ปุ่มถัดไป ตั้งชื่อ Btn_Next การทำปุ่มไม่บอกแล้วนะ ดูที่ > การใช้งานปุ่ม

2. ใส่ข้อความต่างๆ
– ข้อความเพื่อใส่คำถาม ใช้ Text Tool [T] ชนิด Static text
– ข้อความคำตอบทั้ง 4 ข้อ ใช้ Static text เหมือนกัน
– กล่องข้อความด้านล่าง ใช้ Text Tool [T] ชนิด Dynamic Text ตั้งชื่อ txdError เอาไว้แสดงข้อความแจ้งเตือนว่าให้เลือกคำตอบก่อน ถึงจะกด “ถัดไป” ได้
– ปุ่มเลือกตอบ กขคง ตั้งชื่อ AnsA, AnsB, AnsC, AnsD เรียงๆ กันไปตามลำดับ
–> วิธีทำปุ่มตัวเลือกก็คือ
1. วาดรูปปุ่มแล้วใส่ตัวอักษร ก ข ค ง ทีละปุ่มแล้วแปลงเป็น Symbol แบบ Movie clip
2. จากภาพ ตัว ก. อยู่ในตำแหน่งเดียวกันทั้ง 2 เฟรมนะ เฟรมแรก มีแค่ ก. เฟรมที่ 2 ใส่วงกลมล้อมรอบ

3. สร้างเลเยอร์ใหม่ เขียนสคริปต์ stop();
4. ทำแบบนี้ให้ครบ 4 ตัวเลือก
5. สร้างเลเยอร์ใหม่ แล้วลากที่ทำไปเมื่อกี้ มาวางให้ตรงกับ ข้อความของแต่ละตัวเลือก แล้วอย่าลืมตั้งชื่อด้วย ตามด้านบน เมื่อเสร็จแล้วให้คลิกที่เฟรมแรกในเลเยอร์นี้แหละ แล้วกด [F6] รัวๆ ไปจนถึงคำถามสุดท้าย
เมื่อเสร็จข้อ 2 ทั้งหมด ก็จะได้ประมาณนี้

3. ตอนนี้ก็ได้กล่องคำถามและคำตอบแล้ว สามารถพิมพ์คำถามและคำตอบลงไปได้เลย
– พิมพ์คำถามและคำตอบ เสร็จแล้วกด [F6] เพื่อ Insert Keyframe
– เราจะมาอยู่ที่เฟรมถัดมา ก็ให้แก้คำถามคำตอบด้วย แล้วก็กด [F6] แล้วก็แก้คำถามคำตอบ ทำแบบนี้ไปเรื่อยๆ จนครบตามจำนวนข้อที่เราต้องการ
– โดยผมทำ 5 คำถาม 5 เฟรม
– ที่เฟรมที่ 6 เป็นสรุปผลการทำ ประกอบด้วย Dynamic text 3 กล่อง ตั้งชื่อ txtScore, txtRight, txtWrong และมีปุ่ม เล่นใหม่ ตั้งชื่อ Btn_New

4. เขียนโปรแกรม
– สร้างเลเยอร์ใหม่
– โค้ดจะมีอยู่ 2 ส่วนส่วนแรกเป็นการถามตอบคำถาม อยู่ในเฟรม 1 ถึง 5
– ส่วนที่ 2 จะอยู่ในเฟรมที่ 6 เป็นการพิมพ์ค่าคะแนนที่ได้
ตัวอย่าง ดูในเลเยอร์ที่เขียนว่า as

โค้ดในเฟรมแรก (1 – 5)

โค้ดส่วนที่สอง ในเฟรมที่ 6

เมื่อเสร็จ โดยที่ไม่มีอะไรผิดพลาดก็จะได้แบบนี้

ที่ทำมาเป็นเพียวตัวอย่างเท่านั้น ถ้าจะเพิ่มคำชี้แจงก่อนถาม ก็แค่เพิ่มเฟรมแทรกไปแค่นั้น หรือจะเก็บไว้โหลดไปใช้ในไฟล์การเรียนการสอนก็ได้
ต่อไปจะเป็นการเขียนแบบคำถามเฟรมเดียว เก็บคำถามและคำตอบไว้ใน Array และเก็บคำถามไว้นอกไฟล์ สำหรับวันนี้… Zzz

Download Source File

บทความอื่นๆ ที่เกี่ยวข้อง
แบบทดสอบ แบบที่ 2 – การใช้ Array และการใช้ไฟล์ XML เก็บคำถามคำตอบ
แบบทดสอบ แบบที่ 3 – การสุ่มคำถามและตัวเลือก
แบบทดสอบ แบบที่ 4 – สุ่มคำถามคำตอบ สองภาษา บันทึกคะแนน ส่งออกไฟล์