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

ต่อจากบทความที่แล้ว เป็นการสร้างแบบทดสอบโดยทำทีละเฟรม วันนี้จะเป็นการใช้ 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 อย่างที่บอก เป็นการแก้ไขข้อความ คำถามคำตอบ โค้ด

var NumberofQ:int = 5;// จำนวนคำถาม
var QuestionArray:Array = new Array(NumberofQ);
var ChoiceArray:Array = new Array(NumberofQ);
var RightAnsArray:Array = ["C","B","D","C","C"];//อาเรย์เก็บคำตอบที่ถูกต้อง เรียงข้อ 1 2 3 ...
//ข้อ 1 เริ่มด้วย 0 ต่อไปเรื่อยๆ
QuestionArray[0] = "จรเข้เป็นหลานใคร ?";
ChoiceArray[0] = "ไกรทอง#จรเข้#จักรยาน#ชาละวัน"; //ระหว่างตัวเลือกคับด้วย #
//ข้อ2
QuestionArray[1] = "นกอะไรอยู่ในทะเล ?";
ChoiceArray[1] = "นกกระจอก#นกอินทรีย์#นกนางนวล#นกโจรสลัด";
//ข้อ 3
QuestionArray[2] = "ผลไม้อะไรเปลือกแข็งที่สุดในโลก ?";
ChoiceArray[2] = "ทุกเรียน#ผลไม้ดอง#มะพร้าว#ผลไม้กระป๋อง";
//ข้อ 4
QuestionArray[3] = "แปดโมงเช้าวันอังคารร้องอย่างไร ?";
ChoiceArray[3] = "แปดโมงเช้าวันอังคาร ถึงจะนานที่ผ่านมา#จ้องมองเข็มนาฬิกา ช่วงเวลาครั้งสุดท้าย#ประเทศไทยรวมเลือดเนื้อชาติเชื้อไทย#คุันหูไม่รู้เป็นอะไร เอาสำลีมาปั่นก็ไม่หาย";
//ข้อ 5
QuestionArray[4] = "ทำไมปลาจึงวางใข่ ?";
ChoiceArray[4] = "เพราะปลาไม่มีมือถือไข่#เพราะถึงฤดูกาลวางใข่#เพราะถ้าโยนเดี๋ยวไข่แตก#เพราะเมื่อ ขอวางแปบนึง";
//ข้อต่อไป....

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

stop();
var getChoice:Array =new Array();
var Question:Object = new Object();//สร้างออปเจค คำถาม
var Score:int = 0;//เก็บคะแนนที่ได้
var AnsRight:int = 0;//เก็บจำนวนข้อที่ถูก
var AnsWrong:int = 0;//เก็บจำนวนข้อที่ผิด
Question.CurrentQ = 0;// ข้อที่กำลังทำอยู่
NewQuestion();//เริ่มคำถาม
function NewQuestion()
{
Question.CurrentQ++;
Question.Choose = "";// เก็บว่าคำถามนั้น มีการเลือกคำตอบหรือยัง ตอนนี้ยัง
txtQuestion.text = "ข้อที่ " + Question.CurrentQ + ". " + QuestionArray[Question.CurrentQ - 1];
getChoice = ChoiceArray[Question.CurrentQ - 1].split("#");
txtAnsA.text = getChoice[0];
txtAnsB.text = getChoice[1];
txtAnsC.text = getChoice[2];
txtAnsD.text = getChoice[3];
AnsA.buttonMode = true;
AnsB.buttonMode = true;
AnsC.buttonMode = true;
AnsD.buttonMode = true;
AnsA.addEventListener(MouseEvent.CLICK, onAns);
AnsB.addEventListener(MouseEvent.CLICK, onAns);
AnsC.addEventListener(MouseEvent.CLICK, onAns);
AnsD.addEventListener(MouseEvent.CLICK, onAns);
Btn_Next.addEventListener(MouseEvent.MOUSE_UP, onNext);
}
//เมื่อเลือกคำตอบ ข้อใดข้อหนึ่ง;
function onAns(evt:MouseEvent):void
{
Question.Choose = (evt.target.name).slice(-1,4);//เลือกเอาเฉพาะอักษรตัวสุดท้าย
txtError.text = "";//เมื่อมีการเลือกคำตอบ ก็ไม่ต้องมีการแจ้งเตือน
switch (Question.Choose)
{
case "A" :
Mark("A");
break;
case "B" :
Mark("B");
break;
case "C" :
Mark("C");
break;
case "D" ;
Mark("D");
break;
}
}
//เมื่อกดปุ่ม ถัดไป
function onNext(evt:MouseEvent):void
{
if (Question.Choose != "")
{
if (Question.Choose == RightAnsArray[Question.CurrentQ - 1])
{
Score++;//จำนวนคะแนน +1
AnsRight++;//จำนวนข้อถูก +1
}
else
{
AnsWrong++;//จำนวนการตอบผิด +1
}
//ถ้ายังไม่ถึงคำถามสุดท้ายให้แสดงคำถามต่อไป
if (Question.CurrentQ < NumberofQ)
{
Mark("None");//เรียกฟังก์ชัน ให้เคลียร์วงกลมรอบตัวเลือกออก
NewQuestion();
}
else
{
nextFrame();//ถ้าข้อที่ทำอยู่เป็นทำถามสุดท้ายให้ไปหน้าสรุปผล
}
}
else
{
txtError.text = "กรุณาเลือกคำตอบก่อน";//แจ้งเตือนเมื่อยังไม่ได้เลือกคำตอบ
}
}
//ฟังก์ชันในการวงกลมรอบตัวเลือก กขคง
function Mark(M:String)
{
AnsA.gotoAndStop(1);
AnsB.gotoAndStop(1);
AnsC.gotoAndStop(1);
AnsD.gotoAndStop(1);
switch (M)
{
case "A" :
AnsA.gotoAndStop(2);
break;
case "B" :
AnsB.gotoAndStop(2);
break;
case "C" :
AnsC.gotoAndStop(2);
break;
case "D" :
AnsD.gotoAndStop(2);
break;
case "None" :
AnsA.gotoAndStop(1);
AnsB.gotoAndStop(1);
AnsC.gotoAndStop(1);
AnsD.gotoAndStop(1);
break;
}
}

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

stop();
txtScore.text = String(Score);
txtRight.text = String(AnsRight);
txtWrong.text = String(AnsWrong);
Btn_New.addEventListener(MouseEvent.MOUSE_UP, RePlay);
function RePlay(evt:MouseEvent):void{
gotoAndStop(2);
}

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

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

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

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

//1.ตัวโหลด
var Qloader:URLLoader = new URLLoader();

//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

<?xml version="1.0" encoding="UTF-8"?>
<Questions>
<Question id="1"><!--ในส่วนของ id หมายถึงหมายเลขข้อ หรือรหัสของคำถาม-->
<Detail>จระเข้เป็นหลานใคร ?</Detail> <!--รายลำเอียดคำถาม-->
<Choice><!--ตัวเลือก แล้วก็ไล่ๆ ลงไป-->
<A>ไกรทอง</A>
<B>จระเข้</B>
<C>จักรยาน</C>
<D>ชาละวัน</D>
</Choice>
<Ans>C</Ans><!--คำตอบที่ถูกต้อง-->
</Question>
<Question id="2">
<Detail>นกอะไรอยู่ในทะเล ?</Detail>
<Choice>
<A>นกกระจอก</A>
<B>นกอินทรีย์</B>
<C>นกนางนวล</C>
<D>จกโจรสลัด</D>
</Choice>
<Ans>B</Ans>
</Question>
<Question id="3">
<Detail>ผลไม้อะไรเปลือกแข็งที่สุดในโลก ?</Detail>
<Choice>
<A>ทุเรียน</A>
<B>ผลไม้ดอง</B>
<C>มะพร้าว</C>
<D>ผลไม้กระป๋อง</D>
</Choice>
<Ans>D</Ans>
</Question>
<Question id="4">
<Detail>เพลงแปดโมงเช้าวันอังคารร้องอย่างไร ?</Detail>
<Choice>
<A>แปดโมงเช้าวันอังคาร ถึงจะนานที่ผ่านมา</A>
<B>จ้องมองเข็มนาฬิกา ช่วงเวลาครั้งสุดท้าย</B>
<C>ประเทศไทยรวมเลือดเนื้อชาติเชื้อไทย</C>
<D>คุันหูไม่รู้เป็นอะไร เอาสำลีมาปั่นก็ไม่หาย</D>
</Choice>
<Ans>C</Ans>
</Question>
<Question id="5">
<Detail>ทำไมปลาจึงวางใข่ ?</Detail>
<Choice>
<A>เพราะปลาไม่มีมือถือไข่</A>
<B>เพราะถึงฤดูกาลวางใข่</B>
<C>เพราะถ้าโยนเดี๋ยวไข่แตก</C>
<D>เพราะเมื่อ ขอวางแปบนึง</D>
</Choice>
<Ans>C</Ans>
</Question>
</Questions>

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

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

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

var NumberofQ:int = 5;// จำนวนคำถาม
var Qxml:XML = new XML();
var Qloader:URLLoader = new URLLoader();
var Qurl:URLRequest =new URLRequest("question.xml")
Qloader.load(Qurl);
Qloader.addEventListener(Event.COMPLETE, onComplete);
function onComplete(evt:Event):void{
Qxml = XML(evt.target.data);
nextFrame();
}

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

stop();
var Score:int = 0;//เก็บคะแนนที่ได้
var AnsRight:int = 0;//เก็บจำนวนข้อที่ถูก
var AnsWrong:int = 0;//เก็บจำนวนข้อที่ผิด
var CurrentQ:int = 0;// ข้อที่กำลังทำอยู
var QChoose:String = new String();
NewQuestion();//เริ่มคำถาม
function NewQuestion()
{
CurrentQ++;
QChoose = "";// เก็บว่าคำถามนั้น มีการเลือกคำตอบหรือยัง ตอนนี้ยัง
txtQuestion.text = "ข้อที่ " + CurrentQ + ". " + Qxml.Question.(@id==CurrentQ).Detail;
txtAnsA.text = Qxml.Question.(@id==CurrentQ).Choice.A;
txtAnsB.text = Qxml.Question.(@id==CurrentQ).Choice.B;
txtAnsC.text = Qxml.Question.(@id==CurrentQ).Choice.C;
txtAnsD.text = Qxml.Question.(@id==CurrentQ).Choice.D;
AnsA.buttonMode = true;
AnsB.buttonMode = true;
AnsC.buttonMode = true;
AnsD.buttonMode = true;
AnsA.addEventListener(MouseEvent.CLICK, onAns);
AnsB.addEventListener(MouseEvent.CLICK, onAns);
AnsC.addEventListener(MouseEvent.CLICK, onAns);
AnsD.addEventListener(MouseEvent.CLICK, onAns);
Btn_Next.addEventListener(MouseEvent.MOUSE_UP, onNext);
}
//เมื่อเลือกคำตอบ ข้อใดข้อหนึ่ง;
function onAns(evt:MouseEvent):void
{
QChoose = (evt.target.name).slice(-1,4);//เลือกเอาเฉพาะอักษรตัวสุดท้าย
txtError.text = "";//เมื่อมีการเลือกคำตอบ ก็ไม่ต้องมีการแจ้งเตือน
AnsA.gotoAndStop(1);
AnsB.gotoAndStop(1);
AnsC.gotoAndStop(1);
AnsD.gotoAndStop(1);
switch (QChoose)
{
case "A" :
AnsA.gotoAndStop(2);
break;
case "B" :
AnsB.gotoAndStop(2);
break;
case "C" :
AnsC.gotoAndStop(2);
break;
case "D" :
AnsD.gotoAndStop(2);
break;
}
}
//เมื่อกดปุ่ม ถัดไป
function onNext(evt:MouseEvent):void
{
if (QChoose != "")
{
if (QChoose == Qxml.Question.(@id==CurrentQ).Ans)
{
Score++;//จำนวนคะแนน +1
AnsRight++;//จำนวนข้อถูก +1
}
else
{
AnsWrong++;//จำนวนการตอบผิด +1
}
//ถ้ายังไม่ถึงคำถามสุดท้ายให้แสดงคำถามต่อไป
if (CurrentQ < NumberofQ)
{
AnsA.gotoAndStop(1);
AnsB.gotoAndStop(1);
AnsC.gotoAndStop(1);
AnsD.gotoAndStop(1);
NewQuestion();
}
else
{
nextFrame();//ถ้าข้อที่ทำอยู่เป็นทำถามสุดท้ายให้ไปห้าสรุปผล
}
}
else
{
txtError.text = "กรุณาเลือกคำตอบก่อน";//แจ้งเตือนเมื่อยังไม่ได้เลือกคำตอบ
}
}

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

stop();
txtScore.text = String(Score);
txtRight.text = String(AnsRight);
txtWrong.text = String(AnsWrong);
Btn_New.addEventListener(MouseEvent.MOUSE_UP, RePlay);
function RePlay(evt:MouseEvent):void{
gotoAndStop(2);
}

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

Download Source File

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