แปลความหมายเพลง Olivia Ong – Make It Mutual
05/08/2014Flash AS 3.0 – พื้นฐานการทำข้อสอบ, แบบทดสอบ แบบที่ 2 – การใช้ Array และการใช้ไฟล์ XML เก็บคำถามคำตอบ
14/08/2014เคยบอกว่าจะทำตั้งนานแล้ว ไม่ได้ทำซักที วันนี้จะมาทำแบบทดสอบ หรือข้อสอบ เป็นแบบพื้นฐานก่อน คือให้ 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
บทความอื่นๆ ที่เกี่ยวข้อง
แบบทดสอบ แบบที่ 2 – การใช้ Array และการใช้ไฟล์ XML เก็บคำถามคำตอบ
แบบทดสอบ แบบที่ 3 – การสุ่มคำถามและตัวเลือก
แบบทดสอบ แบบที่ 4 – สุ่มคำถามคำตอบ สองภาษา บันทึกคะแนน ส่งออกไฟล์
3 Comments
ขอบคุณมากค่ะ ทีช่วยสอนเรื่องพื้นฐานการทำข้อสอบ, แบบทดสอบ กำลังหาแบบ AS 3.0 อยู่เลยจะลองเอาไปทำเป็นโครงงาน ขอทราบหน่อยได้ไหมค่ะ ว่าพี่ใช่ Flash เวอร์ชั่นไหนค่ะ พอดีหนูใช่เวอร์ชั่นเก่าเลยเปิดไฟล์ไม่ได้
ผมใช้ CS6 ครับซึ่งโปรแกรมมันสามารถบันทึกเป็นเวอร์ชันเก่าได้แค่ CS5ถ้าคุณใช้ CS5 เดี๋ยวผมจะอัพให้ใหม่ได้ แต่ถ้าต่ำกว่าก็ต้องทำเองแล้วหล่ะซึ่งจริงๆ สามารถเปิดโปรแกรม แล้วทำตามได้เลยนะ แล้วก็ก๊อปปี้โค้ดไปใส่ถ้าลองทำเองจะทำให้เราเข้าใจได้มากกว่า ลองดูนะครับขอบคุณมากคร้าบ : )
ใช่ CS3 นะค่ะ คืออยากจะลองไปแกะดูนะค่ะ ลองดูแล้วก็ยังงง ไม่เคยใช่ Flash แบบจริงจังมาก่อนเลย พอจะรู้พื้นฐานมาหน่อย เดี๋ยวจะลองพยามดูค่ะ
ขอบคุณมากๆเลยนะค่ะ m(_ _)m
ว่าจะเปลี่ยน เวอร์ชั่นแล้วละ