Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped

Hallo teman-teman Source Code Aplikasi, kembali lagi dengan saya Shelli Ripati. Pembahasan sebelumnya saya pernah membahas mengenai kegunaan draggable di jquery ui dan pembahasan kini hampir sama dengan pembahasan sebelumnya namun ada sedikit tambahan kegunaan yaitu Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped.

Manfaat dropped berfungsi bagi meletakkan faktor lain di atas faktor tersebut. Dan disini saya menggunakan kegunaan accept dimana berfungsi bagi menata faktor draggable yang mesti diterima. Di studi kasus kali ini saya merancang sebuah game edukasi bagi memasangkan nama hewan pada bahasa inggris dengan bahasa Indonesia dan bila betul karenanya faktor dropped akan berubah warnanya dan bila salah tak akan berubah warnanya.Oke teman-teman- seketika saja bagi dapat Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped kita bikin terlebih dahulu struktur htmlnya selaku berikut.

Bila telah selesai kita seketika saja merancang script jquerynya dan berikut scriptnya ya teman-teman.

<script>      
   $(function() {
            $( #bird,#rabbit,#ant,#cat ).draggable();

            $( #burung ).droppable({
               accept: #bird,
               drop: function( event, ui ) {
                  $( this )
                  .addClass( ui-state-highlight )
                  .find( p )
                  .html( Dropped! );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( ui-state-highlight )
                  .find( p )
                  .html( Burung );
               }    
            });

            $( #kelinci ).droppable({
               accept: #rabbit,
               drop: function( event, ui ) {
                  $( this )
                  .addClass( ui-state-highlight )
                  .find( p )
                  .html( Dropped! );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( ui-state-highlight )
                  .find( p )
                  .html( Kelinci );
               }      
            });

            $( #semut ).droppable({
               accept: #ant,
               drop: function( event, ui ) {
                  $( this )
                  .addClass( ui-state-highlight )
                  .find( p )
                  .html( Dropped! );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( ui-state-highlight )
                  .find( p )
                  .html( Semut );
               }    
            });

            $( #kucing ).droppable({
               accept: #cat,
               drop: function( event, ui ) {
                  $( this )
                  .addClass( ui-state-highlight )
                  .find( p )
                  .html( Dropped! );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( ui-state-highlight )
                  .find( p )
                  .html( Kucing );
               }    
            });
         });
      </script>

Nah bila telah karenanya akan tampil seperti di gambar di bawah ini.

Dan bila di drag ke faktor yang berwarna orange dan bernilai benar karenanya akan berubah warna dan bila salah warnanya akan tetap seperti semula.

Demikian artikel mengenai cara Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped. Semoga dapat bermanfaat dan selamat mencoba.

Sumber https://kursuswebsite.org