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

เคยบอกว่าจะทำตั้งนานแล้ว ไม่ได้ทำซักที วันนี้จะมาทำแบบทดสอบ หรือข้อสอบ เป็นแบบพื้นฐานก่อน คือให้ 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)

stop();
var NumberofQ:int = 5;// จำนวนคำถาม
var Question:Object = new Object();//สร้างออปเจค คำถาม
var RightAnsArray:Array = ["C","B","D","C","C"];//อาเรย์เก็บคำตอบที่ถูกต้อง เรียงข้อ 1 2 3 ...
var Score:int = 0;//เก็บคะแนนที่ได้
var AnsRight:int = 0;//เก็บจำนวนข้อที่ถูก
var AnsWrong:int = 0;//เก็บจำนวนข้อที่ผิด
Question.CurrentQ = 0;// ข้อที่กำลังทำอยู่
NewQuestion();//เริ่มคำถาม
function NewQuestion(){
Question.CurrentQ++;
Question.Choose = "";// เก็บว่าคำถามนั้น มีการเลือกคำตอบหรือยัง ตอนนี้ยัง
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
  }
  Mark("None");//เรียกฟังก์ชัน ให้เคลียการวงกลมรอบตัวเลือกออก
  nextFrame();//เล่นเฟรมถัดไป
  //ถ้ายังไม่ถึงคำถามสุดท้ายให้แสดงคำถามต่อไป
  if (Question.CurrentQ < NumberofQ){
   NewQuestion();//เรียกฟังก์ชันเพื่อไปคำถามข้อต่อไป
  }
 }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;
}
}

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

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(1);
}

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

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

Download Source File

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