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

09/08/2014

Olivia Ong – Ice Bucket Challenge

23/08/2014

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

14/08/2014
empty image
empty image

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

แบบที่ 2.1 การใช้ Array เก็บข้อความ

ตรงนี้ก็ไม่มีไรมาก คงจะคุ้นเคยกันดี การประกาศตัวแปรก็
var myArray:Array = new Array();
var myArray:Array = new Array(“A”,”B”,”C”,”D”);
myArray[0] = “A”;//เป็นการกำหนดค่าให้ในตำแหน่งที่ 0 มีค่าเท่ากับตัวอักษร A

แล้วเราจะใช้เก็บคำถามและคำตอบล่ะ
var QuestionArray:Array = new Array();
var ChoiceArray:Array = new Array();
QuestionArray[0] = “จรเข้เป็นหลานใคร ?”; //เก็บคำถาม ChoiceArray[0] = “ไกรทอง#จรเข้#จักรยาน#ชาละวัน”; //เก็บตัวเลือกเรียง กขคง ซึ่งคั่นด้วย #

น่าจะพอเข้าใจแล้ว มาเริ่มทำกันเลย
1. เฟรมแสดงคำถาม (เฟรมที่ 2)
จะใช้ไฟล์เดิม ที่ > การทำข้อสอบแบบที่ 1 หรือจะสร้างใหม่ก็ได้ โดยมี
1. กล่องข้อความ Dynamic Text คำถามตั้งชื่อ txtQuestion
2. กล่องข้อความ Dynamic Text คำตอบทั้ง 4 ตัวเลือก ตั้งชื่อ txtAnsA, txtAnsB, txtAnsC, txtAnsD เรียงลงมา
3. กล่องข้อความ Dynamic Text แจ้งเตือนเมื่อยังไม่เลือกคำตอบ ชื่อ txtError
4. ปุ่ม กขคง ซึ่งเอาไว้กดเลือก ตั้งชื่อ AnsA, AnsB, AnsC, AnsD เรียง กขคง นะ
5. ปุ่มถัดไป ตั้งชื่อ Btn_Next จะได้หน้าตาประมาณนี้

2. เฟรมแสดงผลการทำ (เฟรมที่3)
ส่วนเฟรมสุดท้ายก็เหมือนอันเก่า โดยมี
1. กล่องข้อความ Dynamic Text แสดงคะแนนตั้งชื่อ txtScore
2. กล่องข้อความ Dynamic Text แสดงจำนวนข้อที่ตอบถูก ชื่อ txtRight
3. กล่องข้อความ Dynamic Text แสดงจำนวนข้อที่ตอบผิด ชื่อ txtWrong
4. ปุ่มเล่นใหม่ ตั้งชื่อ Btn_New จะได้หน้าตาประมาณนี้

3. เฟรมที่ 1 ไว้เขียนโค้ดการโหลดไฟล์ข้างนอก
เฟรมนี้จะเขียนโค้ดการโหลดไฟล์จากภายนอกหรือประกาศตัวแปรอาร์เรย์ ใส่รายละเอียดคำถาม คำตอบ เขียนแยกกันเพื่อความสะดวกในการแก้ไข ในเฟรมนี้จะใส่เป็นคำชี้แจ้งก็ได้ โดยเมื่อทำเสร็จทั้ง 3 เลเยอร์จะได้ประมาณนี้  **ยังไม่ได้ใส่โค้ดนะ เอาให้ได้แบบนี้ก่อน โดย เฟรมที่ 1 – ปล่อยว่างไว้ เฟรมที่ 2 – แสดงคำถาม เฟรมที่ 3 – สรุปผลการทำ

ขั้นตอนการเขียนโปรแกรม

เฟรมที่ 1 อย่างที่บอก เป็นการแก้ไขข้อความ คำถามคำตอบ โค้ด

คงไม่ต้องอธิบาย…
เฟรมที่ 2       การทำงานจะวนอยู่ที่เฟรมที่ 2 เพื่อแสดงคำถาม จนกว่าจะครบทุกคำถามแล้วจึงไปเฟรมที่ 3 ซึ่งเป็นการสรุปผล โดยโค้ดดัดแปลงแก้ไขจากแบบแรก นิดเดียว
โค้ด

อธิบายในโค้ดนั่นแหละนะ
เฟรมที่ 3    เหมือนกับอันเก่าเลย ไม่ต้องแก้ไขอะไร ยกเว้นปุ่มเล่นใหม่ ให้มาเล่นเฟรม 2

เสร็จแล้วก็จะได้แบบนี้

ซึ่งภายนอกมันก็ไม่ได้ต่างอะไรกันเลยซักกะนิดเดียว -.-
Download Source File สำหรับตัวอย่างนี้

แบบที่ 2.2 การเก็บข้อความในไฟล์ XML

ต่อมาจะเป็นการโหลดคำถามและคำตอบจากไฟล์ XML ซึ่งอยู่ภายนอก สามารถอ่านเพิ่มเติมได้จาก ทำงานร่วมกับไฟล์ภายนอก มันเป็นการโหลดไฟล์ภายนอกนั่นแหละ
พื้นฐานการโหลด ลองทำกันเลย
969

//2.ที่อยู่ url
var Qurl:URLRequest =new URLRequest(“question.xml”)

//3.ทำการโหลดตามที่อยู่ url
Qloader.load(Qurl);

//ระหว่างโหลด
Qloader.addEventListener(ProgressEvent.PROGRESS, onLoading)
function onLoading(evt:ProgressEvent):void{
//ระหว่างที่มีการโหลดให้ทำอะไร
}

//เมื่อโหลดเสร็จ
Qloader.addEventListener(Event.COMPLETE, onComplete)
function onComplete(evt:Event):void{
//ให้ทำอะไร
}

เอาล่ะ ลองดูโค้ดทั้งหมดและไฟล์ xml กันเลย
1. ไฟล์ XML ตั้งชื่อว่า question.xml

โหลดไฟล์ : question.xml

2. ไฟล์งาน Fla
ใช้จากตัวอย่างที่ผ่านๆ มาเลย

2.1 เฟรมที่ 1 จะเป็นการโหลดไฟล์ XML

2.2 เฟรมที่ 2 เป็นการแสดงคำถาม
ก๊อปของเดิมมาเลย แต่ปรับเปลี่ยนอะไรเล็กน้อย

2.3 เฟรมที่ 3 สรุปผลการตอบคำถาม
เหมือนเดิมเลย

เสร็จเรียบร้อยก็จะได้ … เหมือนเดิมอีกนั่นแหละ -..-
เนื่องจาก Google Site มันไม่ให้เปิดไฟล์ xml ถ้าจะดูตัวอย่างก็คลิ๊กที่นี่ ตัวอย่างข้อสอบด้วย xml

Download Source File

เรียบร้อย น่าจะพอเป็นตัวอย่างได้ สำหรับการสร้างข้อสอบหรือแบบทดสอบด้วย Flash ซึ่งสามารถใช้ Adobe Captivate สร้างได้แบบง่ายๆ เลยล่ะ และยังมีตัวเลือก แนวข้อสอบที่หลากหลายกว่าเยอะเลย ซึ่งเหมาะมากกว่า แถมยังไม่ต้องเขียนโค้ดอะไรให้ยุ่งยากอีก ฮ่าๆ แต่ Flash นั้นต้องสร้างเองทั้งหมด จึงปรับแต่งหน้าตาได้ตามต้องการ สุดท้ายก็ออกมาเป็นไฟล์ swf เหมือนกัน ก็ดีไปคนละแบบล่ะนะ… Zzz