หากมีคำถาม ขอให้ไปโพสต์ลง เว็บบอร์ดจีทูจีเน็ตดอตคอม ตัวใหม่แทนน่ะครับ

หรือติดต่อเข้ามาทาง Inbox ที่ เฟซบุ๊ค ผมครับ

หน้าหลัก
ข่าวสาร - บทความ ทั้งหมด
VB 6/VB.Net
ASP/ASP.Net
จับฉ่ายคอมพิวเตอร์
เรียนรู้ผ่าน Flash Movie
บทความที่มีผู้ตอบล่าสุด  
 RSS Feeds
 ดาวน์โหลดโปรแกรม RSS Reader ได้ที่นี่ ...   Download โปรแกรม RSS Reader

Forum - www.g2gnet.com
Webmaster - www.g2gnet.com
Visitors - Session views
 5 1 1 2 4 4 0

7 ธันวาคม พ.ศ.2549
13 Users On-Line.
Visitors - Page views
 8 4 0 5 8 9 2
1 กุมภาพันธ์ พ.ศ.2551

Google   
เว็บ g2gnet.com
ขนาดตัวอักษร:  

การใช้งาน Drag & Drop ใน VB 6 เพื่อพัฒนาสื่อการเรียน การสอน (ภาค 1)

Category »  VB 6/VB.Net
โดย : Webmaster เมื่อ 10/3/2552   เวลา: 12:31
(อ่าน : 18660) 
CodeJock Web Siteในเวลาที่ผมพูดคุยกับอาจารย์หลายๆท่าน เกี่ยวกับเรื่องของการเขียน Code เขียน Script ขึ้นมาทีไร ท่านก็ส่ายหัวกันเป็นแถวเลย 55555+ ... พี่น้องครับ ... หากท่านไม่ยอมฝึกการเขียนโค้ดแล้ว ไม่ว่าจะสร้างสื่อการเรียน การสอน ด้วยโปรแกรมใดๆก็ตามที เช่น SwishMax, Flash, Authorware หรือ อื่นๆ มันไม่มีทางที่จะสร้างบทเรียนทั้งหลายแหล่ออกมา ให้เกิดปฏิสัมพันธ์ หรือ เกิดการโต้ตอบกับผู้เรียนได้เลย (Interactive) ... ฟันธง และ คอนเฟิร์มครับ ... อย่าไปคิดว่า การมีปุ่มเลือกเมนู เดินหน้า ถอยหลัง นั่นแหละมันคือ Interactive แล้ว ... โอ้ย แบบนี้น่ะมันแค่จิ๊บๆ และ เหตุที่ผมเลือกภาษา Basic มานำเสนอ ก็เพราะว่าภาษาโปรแกรมตัวนี้มันง่าย และสามารถเชื่อมโยงไปยังสื่อแบบ Multimedia ได้ทั้งหมด รวมไปถึงส่วนหนึ่งของภาษา Basic มันยังถูกฝังขีดความสามารถเอาไว้ใน Microsoft Office มาทุกๆรุ่น หรือ ที่เราเรียกว่า Visual Basic for Application (VBA) และ ยังตามติดมาด้วย VSTO (Visual Studio Tools for Office) เพื่อใช้กับเทคโนโลยี Dot Net (หาอ่านรายละเอียดเพิ่มเติมเอาล่ะกัน) ... สรุปให้ฟังกันอย่างง่ายๆ ส่วนใหญ่อาจารย์ท่านก็มักจะมี Power Point เป็นตัวนำเสนอให้กับผู้เรียนกันอยู่แล้ว หากท่านสามารถใช้ภาษา Basic เป็น ก็ไม่ใช่เรื่องยากที่จะปรับแก้ให้สื่อจาก Power Point ที่มีลักษณะเป็นการนำเสนอแบบทางเดียว ให้กลายเป็น 2 ทางได้อย่างไม่ยากเกินไปนักหรอกครับ ...
ดาวน์โหลด - กรณีที่ติดตั้งโปรแกรม MS Visual Basic 6.0 (SP6) เรียบร้อยแล้ว
ดาวน์โหลด Source Code สำหรับ MS Visual Basic 6.0 - Service Pack 6
 ดาวน์โหลด Microsoft Visual Basic Service Pack 6
ดาวน์โหลด - กรณีที่ไม่ได้ติดตั้งโปรแกรม MS Visual Basic 6.0 (SP6)
ดาวน์โหลดโปรแกรมทดสอบการ Drag & Drop (EXE File)
 ดาวน์โหลด Visual Basic 6.0 SP5: Run-Time Redistribution Pack
 ดาวน์โหลดชุดติดตั้งโปรแกรม Microsoft Visual Basic 6.0 Enterprise Edition (หากไม่คิดจะเขียนโปรแกรมด้วย VB6 ก็ไม่ต้องดาวน์โหลดก็ได้ครับกระผม)
เรื่องที่เกี่ยวข้อง
การใช้งาน Drag & Drop ใน VB 6 เพื่อพัฒนาสื่อการเรียน การสอน (ภาค 2)
โปรแกรมสุ่มตัวเลขจำนวนเต็มแบบไม่ให้ซ้ำกันเลย - Random Number
การประยุกต์ใช้งาน MS Visual Basic 6.0 กับการพัฒนาสื่อการเรียนการสอน
เริ่มต้นกระบวนการทำงาน

Design Time - ออกแบบหน้าตาหน้าจอ


Run Time - สั่งให้โปรแกรมทำงาน


Run Time - ทำแบบทดสอบเรียบร้อย


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

Option Explicit

' ตัวแปรที่ใช้ในการระบุตำแหน่ง เมื่อเริ่มต้นการลาก (Drag)
Dim AxisX As Integer
Dim AxisY As Integer

' ตัวแปรเพื่อแจ้งการ Drop ลงตามตำแหน่งว่าถูกต้องหรือไม่ (ไม่จำเป็นต้องใช้ก็ได้ ... ดูจากเหตุการณ์ DragDrop)
Dim RedFlag As Boolean
Dim GreenFlag As Boolean
Dim BlackFlag As Boolean

' ตัวแปรสำหรับตรวจสอบการทำแบบทดสอบได้ถูกต้องหมดแล้วหรือไม่
Dim TotalScore As Integer

' ตัวแปรใช้เก็บเวลาเริ่มต้นการทำแบบทดสอบ
Dim StartTime As Date

' ผมจะอธิบายในส่วนที่เกี่ยวข้องกับสีแดง (RED) เท่านั้นพอ ... น่ะครับ
' เหตุการณ์ (Event) ในการกดเมาส์ลงที่ Control (Coomand Button) เพื่อลาก
Private Sub cmdRed_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    
    ' ระบุตำแหน่งแกน X แกน Y เมื่อเริ่มต้นการลาก (Drag)
    ' เพราะหากลากไปวางผิดตำแหน่งมันก็จะได้กระโดดกลับมาอยู่ที่เดิมได้
    AxisX = X
    AxisY = Y
    
    ' ตรวจสอบก่อนว่าปุ่มตัวเลือก (สีแดง) ไปวางลงตรงตามตำแหน่งของมันหรือไม่
    ' หากไม่ใช่ ก็ให้เกิดการเคลื่อนที่ได้ ... หากใช่ ต้องไม่ให้เกิดการเคลื่อนย้ายปุ่มนี้ไปไหน
    If Not RedFlag Then cmdRed.Drag vbBeginDrag
End Sub

' กดเมาส์แล้วลาก Control มาวาง ... ปล่อยเมาส์
Private Sub cmdRed_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    ' เมื่อปล่อยเมาส์ออก ... ก็สิ้นสุดการลากมาวางแล้ว
    cmdRed.Drag vbEndDrag
End Sub

' เหมือนกันกับ cmdRed ... เลยไม่อธิบาย
Private Sub cmdGreen_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    AxisX = X
    AxisY = Y
    If Not GreenFlag Then cmdGreen.Drag vbBeginDrag
End Sub

Private Sub cmdGreen_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    cmdGreen.Drag vbEndDrag
End Sub

Private Sub cmdBlack_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
    AxisX = X
    AxisY = Y
    If Not BlackFlag Then cmdBlack.Drag vbBeginDrag
End Sub

Private Sub cmdBlack_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
    cmdBlack.Drag vbEndDrag
End Sub

Private Sub Form_DragDrop(Source As Control, X As Single, Y As Single)
    ' เคลื่อนย้าย Control มาเรียบร้อย ก็ให้วางลงในตำแหน่งของ Control ปลายทาง (Label บอกสี)
    Source.Move X - AxisX, Y - AxisY
End Sub

Private Sub Form_Load()
    
    Me.Move (Screen.Width - Width) \ 2, (Screen.Height - Height) \ 2
    TotalScore = 0
    ' กำหนดไว้เป็นเท็จ ... เพื่อให้รู้ว่ามันยังไม่ได้ถูกลากไปวางตรงตามตำแหน่ง
    RedFlag = False
    GreenFlag = False
    BlackFlag = False
    
    ' เริ่มต้นจับเวลา
    StartTime = FormatDateTime(Now(), vbLongTime)
    
    ' อันที่จริงแล้ว เราควรสุ่มตำแหน่งของวัตถุต่างๆก่อน ... น่าจะดีกว่า เพื่อไม่ให้เด็กเกิดการจดจำได้
    ' วิธีคิด คือ สมมุติให้สุ่มตำแหน่งของป้ายลาเบล (Label) ทั้งหมด 3 ตัว เช่น ...
    ' กำหนดให้ A(1, 1) / A(1,2)  เก็บตำแหน่งซ้าย/บนของลาเบลตัวที่ 1 = Left, Top
    ' กำหนดให้ A(2, 1) / A(2, 2) เก็บตำแหน่งซ้าย/บนของลาเบลตัวที่ 2 = Left, Top
    ' กำหนดให้ A(3, 1) / A(3, 2) เก็บตำแหน่งซ้าย/บนของลาเบลตัวที่ 3 = Left, Top
    ' แน่นอนว่า ... กำหนดค่าตัวแปรเป็นแบบ Array ขนาด 3 แถว 2 หลัก
    ' สุ่มตัวเลขระหว่าง 1 - 3 (ดูในบทความเรื่องของการสุ่มตัวเลขแบบไม่ซ้ำ)
    ' เช่น 3, 1, 2 (ค่าที่ต้องใช้ใน Array) ... นั่นก็หมายความว่า
    ' ให้ลาเบลตัวที่ 1 ไปอยู่ในตำแหน่งที่ 3
    ' ให้ลาเบลตัวที่ 2 ไปอยู่ในตำแหน่งที่ 1
    ' ให้ลาเบลตัวที่ 3 ไปอยู่ในตำแหน่งที่ 2
    ' เอาเท่านี้ก่อนล่ะครับ ... มาสรุปท้ายไว้ให้ครู อาจารย์ ท่านได้นำไปคิดเล่นๆก่อน (แต่เอาจริง)
End Sub

' เหตุการณ์เมื่อลากปุ่มมาวาง และปล่อยเมาส์ออกไปเรียบร้อย ... ผมเลือกใช้เหตุการณ์ DragDrop
' หรือเราอาจจะเลือกวิธีการลากปุ่มมาวางไว้เหนือลาเบลก็ได้ (เหตุการณ์ DragOver)
Private Sub lblRed_DragDrop(Source As Control, X As Single, Y As Single)
    
    ' ทดสอบว่าปุ่มที่ลากมาวางนั้นชื่อ cmdRed หรือไม่
    If Source.Name = "cmdRed" Then
        ' ให้วางปุ่มลงเหนือลาเบล
        Source.Move lblRed.Left, lblRed.Top
        
        ' วางเรียบร้อยแล้ว ... สิ้นสุดการลากมาวาง
        cmdRed.Drag vbEndDrag
        
        ' ============================================================
        ' แจ้งให้รู้ว่าปุ่มได้ถูกมาวางลงตรงตามตำแหน่งแล้ว เพื่อไม่ให้เกิดการเคลื่อนย้ายหนีไปไหนได้อีก
        ' จะสัมพันธ์กับเหตุการณ์เมาส์กดเลือกปุ่ม (MouseDown)
        RedFlag = True
        '
        ' หรือ กำหนดให้ปุ่มนี้ไม่สามารถกดอะไรได้เลย
        cmdRed.Enabled = False
        ' อันที่จริง เมื่อกำหนดให้ปุ่มไม่สามารถให้กดได้ (Enabled = False)
        ' เราก็ไม่จำเป็นให้มีตัวแปรแบบ Boolean (RedFlag) เพื่อใช้ในการทดสอบก็ได้ ...
        ' แค่ผมทำเผื่อๆไว้ให้ดูเท่านั้นเองครับ ... พี่น้อง ... เพราะไม่แน่ว่าอาจจะใช้งานก็เป็นไปได้
        ' ============================================================
        
        ' เพิ่มคะแนนขึ้นอีก 1
        TotalScore = TotalScore + 1
        ' ตรวจสอบว่าทำถูกต้องครบหมด 3 ข้อแล้วหรือไม่
        ' หากใช่ให้จบโปรแกรม
        If CheckScore(TotalScore) Then End
        
        
    ' กรณีที่ไม่ใช่ อาจจะไม่จำเป็นต้องแจ้งข้อความบอกก็ได้หรอก ...
    ' แต่ก็ควรจะเก็บข้อมูลในการทำผิดไว้ด้วย เพื่อสรุปในตอนท้าย
    ' ลากมาทำถูกเท่าไร ทำผิดเท่าไร ... เข้าใจมั้ยนักเรียน เอ้ย คุณครู 55555+
    Else
        ' หลังจากแสดงข้อความแล้ว ปุ่มที่ไม่ถูกต้องจะเด้งกลับไปตำแหน่งที่เดิมตามที่กำหนดมาจาก AxisX และ AxisY
        MsgBox "ไม่ถูกต้องน่ะค่ะคุณหนูๆ.", vbOKOnly + vbExclamation, "ทำผิดจ้า"
    End If
End Sub

Private Sub lblBlack_DragDrop(Source As Control, X As Single, Y As Single)
    
    If Source.Name = "cmdBlack" Then
        Source.Move lblBlack.Left, lblBlack.Top
        cmdBlack.Drag vbEndDrag
        BlackFlag = True
        cmdBlack.Enabled = False
        TotalScore = TotalScore + 1
        If CheckScore(TotalScore) Then End
    Else
        MsgBox "ไม่ถูกต้องน่ะค่ะคุณหนูๆ.", vbOKOnly + vbExclamation, "ทำผิดจ้า"
    End If
End Sub

Private Sub lblGreen_DragDrop(Source As Control, X As Single, Y As Single)
    
    If Source.Name = "cmdGreen" Then
    Source.Move lblGreen.Left, lblGreen.Top
        cmdGreen.Drag vbEndDrag
        GreenFlag = True
        cmdGreen.Enabled = False
        TotalScore = TotalScore + 1
        If CheckScore(TotalScore) Then End
    Else
        MsgBox "ไม่ถูกต้องน่ะค่ะคุณหนูๆ.", vbOKOnly + vbExclamation, "ทำผิดจ้า"
    End If
End Sub

' ฟังค์ชั่นที่ใช้ในการตรวจสอบการทำแบบทดสอบ ... ครบตามที่กำหนดไว้แล้วหรือไม่
' ให้รับค่าคะแนนที่ได้เข้ามา ... หากได้ครบตามกำหนด (3 ข้อ) ให้คืนค่าจริง (True) กลับไป
Function CheckScore(ByRef TotalScore As Integer) As Boolean
    If TotalScore = 3 Then
        ' ให้กำลังใจ และ แจ้งรายงานผลการทำแบบทดสอบ
        MsgBox "ทำได้ถูกต้องหมดเลย ... หนูเก่งจังเลยค่ะ." & vbCrLf & _
                        "ใช้เวลาทั้งสิ้น : " & FormatDateTime(Time - StartTime, vbLongTime), _
                        vbOKOnly + vbInformation, "จบโปรแกรม"
        CheckScore = True
    Else
        CheckScore = False
    End If
End Function
Conclusion:
แน่นอนครับว่า ... บทความแต่ละชิ้นของผมคงไม่เหมาะสำหรับผู้ที่ไม่เคยสัมผัส MS Visual Basic 6.0 มาก่อนเลย ครู อาจารย์ ก็สามารถศึกษาหาข้อมูลแบบพื้นฐานได้ตามเว็บไซต์ต่างๆ หรือ ควรซื้อหาหนังสือ VB6 เบื้องต้นมาอ่าน มาฝึกเอาเองก่อนล่ะครับ แต่นี่ก็คงไม่ใช่ประเด็นหลักในการนำเสนอครั้งนี้ ผมต้องการเผยแพร่ข้อมูลออกมาเพื่อเป็นแนวทาง และ สร้างแรงกระตุ้น แรงจูงใจให้เฉพาะสำหรับบุคคลใดๆที่เป็นครูอาชีพเท่านั้น ...

จี ทู จี เน็ต ดอต คอม - g2gNet Dot Com
เลขทะเบียนพาณิชย์อิเล็กทรอนิกส์ 0407314800231
CopyLeft © 2004 - 2099 g2gNet.Com All rights reserved.
Email: [email protected] หรือ โทร. 08-6862-6560