Langsung ke konten utama

Menambahkan Tombol Kedua ke Layar Otak - Berbasis Blok

Ikon Kotak Peralatan Guru Kotak Peralatan Guru - Tujuan dari Aktivitas ini

Sekarang setelah siswa memiliki pengalaman memperlakukan layar otak seperti satu tombol besar, mereka dapat mengubah layar tersebut menjadi dua tombol. Aktivitas ini akan memperkenalkan siswa pada penggunaan blok bersarang [If then else] untuk mengelola pernyataan kondisional dengan lebih baik dan logika yang mendasarinya. Para siswa pertama-tama dibimbing untuk membangun proyek agar tombol pada layar dapat memutar robot ke kiri atau ke kanan. Namun, mereka kemudian diminta untuk menukar tombol sehingga tombol yang tadinya memutar robot ke kiri sekarang memutarnya ke kanan, dan sebaliknya.

Untuk informasi lebih lanjut tentang blok [Jika maka]dan[Jika maka else] atau blok lain yang digunakan dalam aktivitas ini, kunjungi informasi bantuan di dalam VEXcode V5. Untuk informasi lebih lanjut mengenai alat bantu bawaan ini, klikdi sini.

Berikut ini adalah garis besar kegiatan yang akan dilakukan siswa Anda dalam aktivitas ini:

  • Meninjau proyekStopOrDrivedan tata letak layar otak dalam piksel.

  • Membangun proyekLeftOrRightbaru sambil dipandu melalui penalaran pemrograman.

  • Merevisi proyek agar tombol-tombol di layar berfungsi sebaliknya.

  • Perluas Pembelajaran Anda: Membagi layar menjadi dua tombol yang, ketika ditekan, akan memutar robot ke kiri atau ke kanan.

Bahan-bahan yang Dibutuhkan:
Kuantitas Bahan-bahan yang Dibutuhkan
1

VEX V5 Classroom Starter Kit (dengan firmware terbaru)

1

VEXcode V5 (versi terbaru, Windows, macOS, Chromebook)

1

Buku Catatan Teknik

1

Proyek StopOrDrive dari halaman Play sebelumnya

Ikon Kotak Peralatan Guru Kotak Peralatan Guru

Untuk saran mengenai strategi pengajaran untuk bagian ini, tinjau kolom Penyampaian pada Panduan Pengaturan Tempo yang Harus Dilakukan atau Tidak Dilakukan! (Google Doc / .docx / .pdf)

Layar otak dapat memiliki lebih dari satu tombol.

Aktivitas ini memungkinkan Anda memprogram robot untuk bergerak maju dan berbelok kiri atau kanan tergantung pada sisi layar otak mana yang ditekan.

Tiga jenis blok tambahan yang Anda perlukan selama aktivitas ini adalah sebagai berikut:

Blok VEXcode V5 dari kotak peralatan - blok Putar yang diatur ke kanan; operator kurang dari; dan posisi layar yang diatur ke x.

Anda dapat menggunakan informasi Bantuan di dalam VEXcode V5 untuk mempelajari tentang blok-blok tersebut. Untuk panduan penggunaan fitur Bantuan, lihat tutorial Menggunakan Bantuan.

Toolbar VEXcode V5 dengan panah merah yang menunjuk ke ikon Tutorial. Tutorial terletak di paling kanan setelah logo V5, ikon globe, dan File.

 

Langkah 1: Mari kita mulai dengan meninjau proyek StopOrDrive.

Proyek StopOrDrive membuat Clawbot berhenti jika layar ditekan, atau sebaliknya akan bergerak maju.
layar adalah satu tombol besar, tetapi dalam proyek berikutnya ini, kami ingin setengah layar menjadi satu tombol dan setengah lainnya menjadi tombol yang lain.

Proyek Stop or Drive dari pelajaran sebelumnya. Proyek ini dimulai dengan blok "when started" yang terhubung dengan blok "Forever". Di dalam blok "forever" terdapat blok "if then else" yang berbunyi: jika layar ditekan, maka berhenti mengemudi; tunggu hingga layar tidak ditekan. Jika tidak, teruslah melaju.

Untuk membagi layar menjadi dua tombol, kita perlu memahami lebih lanjut tentang tata letak layar.

Kisi piksel pada layar V5 Brain menunjukkan 12 baris bernomor di sepanjang sisi kiri, dengan baris teratas diberi label Baris 1 dan baris terbawah diberi label Baris 12. Di bagian atas terdapat 48 kolom bernomor, dengan Kolom 1 diberi label di paling kiri dan Kolom 48 diberi label di paling kanan. Ukuran piksel totalnya adalah 480 piksel lebar dan 240 piksel tinggi.

  • Perhatikan bahwa jumlah kolom bertambah dari kiri ke kanan. Jumlah kolomnya adalah 48 dan lebar layarnya adalah 480 piksel.
  • Tuliskan di buku catatan teknik Anda bahwa nilai x pada layar sama dengan jumlah piksel yang diukur dari kiri ke kanan.
  • Berapakah nilai x dari titik tengah layar? Untuk aktivitas ini, Anda dapat fokus pada sumbu x saja karena Anda hanya membutuhkan tombol kiri dan kanan.

Ikon Kotak Peralatan Guru Kotak Peralatan Guru - Jawaban

Nilai x di tengah layar sama dengan setengah dari lebar layar dalam piksel. Jadi nilai x dari titik pusatnya adalah 240. Siswa akan membutuhkan angka ini untuk memprogram kondisi yang menentukan apakah layar ditekan di sebelah kiri atau kanan. Jadi pastikan untuk memeriksa bahwa semuanya memiliki nilai yang benar.

Ke depannya, Tantangan Antarmuka Pengguna di bagian Rethink akan mengharuskan siswa untuk menerapkan apa yang telah mereka pelajari untuk membuat empat tombol di layar. Jadi untuk itu, mereka membutuhkan nilai x dan y.

Ikon Tips Guru Tips untuk Guru

Instruksi tersebut mengarahkan siswa ke Tutorial di dalam VEXcode V5 sesuai kebutuhan. Untuk bantuan lebih lanjut, lihat Perpustakaan VEXuntuk artikel bantuan tambahan.

Langkah 2: Pemrograman untuk dua tombol

  • SimpanStopOrDrivesebagai proyekLeftOrRight.
  • Ingat, jika Anda memerlukan bantuan dalam membuka, memberi nama, atau menyimpan proyek, tonton Tutorial di VEXcode V5.

Kotak dialog nama proyek di Toolbar VEXcode V5 bertuliskan Kiri atau Kanan. Slot 3 dipilih di sebelah kiri dan Toolbar menampilkan tulisan Tersimpan di sebelah kanan.

  • Bangun proyek di bawah ini. Robot Clawbot akan berbelok ke kiri atau ke kanan saat layar ditekan, tergantung pada sisi mana layar ditekan.

Sebuah proyek VEXcode V5 dimulai dengan blok `when started` yang terhubung dengan blok `forever`. Di dalam loop `forever` terdapat blok `if then else` yang bersarang. Cabang If dari blok if then else pertama berbunyi Jika layar ditekan. Blok if then else yang bersarang di dalam cabang If berbunyi: Jika posisi x layar kurang dari 240 maka belok kiri, dan tunggu sampai layar tidak ditekan; jika tidak, belok kanan dan tunggu sampai layar tidak ditekan. Cabang else terluar berisi blok penggerak maju.

Ikon Kotak Peralatan Guru Kotak Peralatan Guru - Mengapa Blok If Then Else Bersarang?

Kerangka proyek (hanya blok kontrol) mencakup blok bersarang: blok [Jika maka else] di dalam blok [Jika maka else] di dalam loop [Selamanya]. Ini mungkin tampak lebih rumit daripada yang seharusnya karena Anda bisa menggunakan blok [Jika maka] secara berurutan. Namun, menggunakan blok [Jika maka] secara berurutan bukanlah praktik pemrograman yang baik.

Tiga struktur pengkodean ditampilkan dari kiri ke kanan. Struktur di sebelah kiri memiliki tanda silang merah di atasnya, yang menunjukkan masalah dengan serangkaian blok if then yang bersarang. Di tengah terdapat struktur blok C kosong yang menunjukkan blok if then else bersarang. Di sebelah kanan, struktur tersebut diisi untuk menunjukkan bahwa perilaku yang sama dapat diselesaikan dalam bentuk yang lebih sederhana.

Proyek yang ditolak di sebelah kiri adalah versi kondisional berurutan dari proyek LeftOrRight kami. Jika layar ditekan dan nilai x kurang dari 240, Clawbot akan berbelok ke kiri. Jika layar ditekan dan nilai x lebih besar dari 240, Clawbot akan berbelok ke kanan. Masalah dengan proyek ini adalah adanya risiko kedua kondisi tersebut terjadi secara bersamaan. Setiap kali Anda menggunakan blok [Jika maka] berurutan, Anda berisiko membuat bug dalam sebuah proyek karena mungkin ada lebih dari satu pernyataan kondisional yang benar. Bug menyebabkan ketidakpastian.

Di tengah adalah kerangka proyek LeftOrRight, dan di sebelah kanan proyek tersebut ditampilkan dengan beberapa pernyataan kondisional dan blok Drivetrain yang telah disisipkan. Logika dalam versi proyek ini sedikit berbeda. Jika/ketika layar ditekan, nilai x kurang dari 240 (belok kiri) atau tidak kurang dari 240 (belok kanan). Kita tidak memerlukan pernyataan bersyarat lain di sana. Setelah layar ditekan, nilainya akan kurang dari 240 atau tidak sama sekali. Kita hanya perlu memperhatikan dua tombol saja. Perhatikan, proyek di sebelah kanan masih belum selesai.

Siswa perlu memahami perbedaan antara kedua pendekatan proyek ini. Memahami perbedaan dalam logika yang mendasarinya akan sangat bermanfaat bagi para programmer yang sedang berkembang.

Proyek Kiri atau Kanan diuraikan dengan fungsi blok-blok dalam proyek yang diberi label. Fungsi "forever" dan "outer if screen pressed" pada cabang luar diberi label "Terus memeriksa apakah layar ditekan". Cabang if bagian dalam diberi label ketika layar ditekan, memeriksa apakah di sebelah kiri atau kanan. Blok belok kiri berikutnya diberi label Jika tombol ditekan di sebelah kiri (kurang dari 240), belok kiri. Blok "tunggu hingga" diberi label, menunggu hingga layar tidak lagi ditekan sebelum melanjutkan. Blok belok kanan diberi label jika tombol tekan tidak berada di kiri (kurang dari 240), maka akan belok kanan. Langkah selanjutnya, yaitu menunggu hingga tombol layar tidak lagi ditekan, akan melanjutkan. Cabang else terluar dengan blok penggerak maju diberi label Jika layar tidak ditekan, penggerak maju.

  • Mari kita tinjau apa yang dilakukan proyek ini.

    Proyek ini terus memeriksa apakah layar ditekan. Jika layar tidak ditekan, mobil akan bergerak maju, tetapi jika ditekan, mobil akan memeriksa di mana layar ditekan.

    Jika tekanan berada di sisi kiri (kurang dari 240), mobil akan berbelok ke kiri. Jika tidak, belok ke kanan. Kita tidak memerlukan syarat lain untuk kondisi ketika nilai x lebih besar dari 240 karena jika nilainya tidak kurang dari 240 (belok kiri), maka nilainya pasti lebih besar (belok kanan). Kita hanya perlu memperhatikan dua tombol.

    tunggu sampaiBlok kontrol setelah setiap giliran membuat proyek menunggu sampai layar tidak lagi ditekan sebelum melanjutkan.

Toolbar di VEXcode V5 dengan kotak merah di sekitar tombol unduh. Ikon-ikon tersebut, dari kiri ke kanan, bertuliskan Controller, Brain, Download, Run, Stop, dan Share.

  • Setelah proyek selesai, unduh dan jalankan untuk menguji cara kerjanya.
  • Untuk bantuan, tonton video tutorial Mengunduh dan Menjalankan Proyek di VEXcode V5.
  • Catatlah di buku catatan teknik Anda tentang bagaimana tombol-tombol tersebut mengontrol pergerakan Clawbot.

Ikon Tips Guru Tips untuk Guru

Saat melakukan pengujian, siswa harus menyadari bahwa Antarmuka Pengguna, ketika digunakan dari belakang Clawbot, tampaknya bekerja secara terbalik. Dari sudut pandang pengguna, Clawbot akan berbalik menjauh dari sisi yang ditekan oleh pengguna. Itu bukanlah pengalaman pengguna yang optimal.

Saat menekan tombol di layar dari belakang Clawbot ketika ia bergerak maju, Anda menekan sisi kanan layar untuk berbelok ke kiri dan sisi kiri layar untuk berbelok ke kanan. Itu bukanlah pengalaman pengguna yang baik. Pengalaman Pengguna adalah seberapa baik pengguna dapat berinteraksi dengan Antarmuka Pengguna untuk mengendalikan sistem komputer. Informasi lebih lanjut tentang Antarmuka Pengguna terdapat di bagian Penerapan pada lab ini.

Dalam hal ini, kita perlu meningkatkan Antarmuka Pengguna untuk meningkatkan Pengalaman Pengguna.

Proyek VEXcode V5 Kiri atau Kanan. Sebuah proyek VEXcode V5 dimulai dengan blok `when started` yang terhubung dengan blok `forever`. Di dalam loop `forever` terdapat blok `if then else` yang bersarang. Cabang If dari blok if then else pertama berbunyi Jika layar ditekan. Blok if then else yang bersarang di dalam cabang If berbunyi: Jika posisi x layar kurang dari 240 maka belok kiri, dan tunggu sampai layar tidak ditekan; jika tidak, belok kanan dan tunggu sampai layar tidak ditekan. Cabang else terluar berisi blok penggerak maju.

  • Tinjau kembali proyek LeftOrRight dan revisi agar ketika pengguna menekan tombol dari belakang Clawbot, robot berbelok ke kanan saat pengguna menekan sisi kiri layar. Atau, Clawbot berbelok ke kiri.
  • Rencanakan, uji, dan ulangi proyek ini di buku catatan teknik Anda sehingga proyek tersebut membuat Clawbot berputar ke arah sisi layar yang ditekan pengguna dari belakang Clawbot.

Ikon Kotak Peralatan Guru Kotak Peralatan Guru

Mahasiswa harus merencanakan, menguji, dan menyempurnakan perubahan-perubahan pada proyek tersebut sambil mendokumentasikannya dalam buku catatan teknik mereka. Untuk rubrik buku catatan teknik individu, klik salah satu tautan berikut (Google Doc / .docx / .pdf), atau klik salah satu tautan berikut untuk buku catatan tim (Google Doc / .docx / .pdf). Ingatlah untuk menjelaskan sistem penilaian kepada siswa sebelum mereka mulai mengerjakan tugas.

Ikon Kotak Peralatan Guru Solusi Kotak Peralatan Guru -

Ada dua cara yang mungkin untuk menyelesaikan masalah yang diajukan di atas. Cara pertama adalah yang tertulis dalam instruksi: Tinjau proyek LeftOrRight dan revisi sehingga ketika pengguna menekan tombol dari belakang Clawbot, robot akan berbelok ke kanan ketika pengguna menekan sisi kiri layar. Atau, Clawbot berbelok ke kiri.

Solusi contoh VEXcode V5 dimulai dengan blok When started yang terhubung dengan blok forever. Di dalam blok "forever" terdapat blok "If then else" yang bersarang. Blok if then else terluar berbunyi: jika layar ditekan; jika tidak, maju terus. Pada cabang If, blok if then else berbunyi: jika posisi x layar kurang dari 240 maka belok kanan, jika tidak belok kiri.

Solusi lainnya adalah dengan mengubah blok Operator sehingga ketika nilai x lebih besar dari 240, Clawbot berbelok ke kiri.

Solusi contoh VEXcode V5 dimulai dengan blok When started yang terhubung dengan blok forever. Di dalam blok "forever" terdapat blok "If then else" yang bersarang. Blok if then else terluar berbunyi: jika layar ditekan; jika tidak, maju terus. Pada cabang If, blok if then else berbunyi: jika posisi x layar lebih besar dari 240 maka belok kiri, jika tidak belok kanan.

Ikon Motivasi Diskusi Mendorong Diskusi

Anda perlu menggunakan koordinat dari bidang koordinat saat memprogram pernyataan kondisional untuk kondisi ketika nilai x kurang dari 240 (sisi kiri layar). Agar layar otak robot dapat menampilkan tombol visual, Anda juga perlu menggunakan koordinat.
Kembali ke Langkah 2 di mana Anda telah diperlihatkan koordinat untuk layar Otak Robot V5.

Kisi piksel pada layar V5 Brain menunjukkan 12 baris bernomor di sepanjang sisi kiri, dengan baris teratas diberi label Baris 1 dan baris terbawah diberi label Baris 12. Di bagian atas terdapat 48 kolom bernomor, dengan Kolom 1 diberi label di paling kiri dan Kolom 48 diberi label di paling kanan. Ukuran piksel totalnya adalah 480 piksel lebar dan 240 piksel tinggi.

T:Berapakah nilai x di tepi kanan layar?
J:Nilai x meningkat dari 0 di tepi kiri hingga 480 di tepi kanan.

T:Jadi rentang nilai x adalah 480 (0 hingga 480). Berapakah rentang nilai y?
J:Rentang nilai y adalah 240 (0 hingga 240).

T:Di manakah titik asal (0, 0) dari bidang koordinat ini?
J:Titik asalnya berada di sisi kiri atas.

T:Anda berada di bagian atas layar ketika nilai y sama dengan 0. Mengapa ini tidak biasa?
A:Biasanya, nilai y meningkat saat Anda bergerak ke atas, tetapi pada layar V5, nilai y meningkat saat Anda bergerak ke bawah. Namun Anda dapat menganggapnya sebagai nilai y yang meningkat saat Anda menjauh dari titik asal (0, 0) di kiri atas layar.

Perluas Pembelajaran Anda Perluas Pembelajaran Anda

Dalam Tantangan Antarmuka Pengguna di bagian Rethink, siswa akan diminta untuk mengembangkan proyek yang membuat empat tombol di layar untuk mengontrol cakar dan lengan Clawbot. Untuk tantangan itu, mereka juga diminta untuk menampilkan keempat tombol tersebut di layar. Bagian "Perluas Pembelajaran Anda
ini, seperti halaman sebelumnya, akan membantu mempersiapkan mereka untuk tantangan tersebut karena tantangan tersebut memiliki empat tombol untuk diprogram, sedangkan ini hanya memiliki dua.
siswa untuk menambahkan sebuah event ke dalam program sehingga layar menampilkan dua tombol yang terlihat saat proyek dijalankan. Sarankan siswa untuk menggunakan fitur Bantuan di VEXcode V5 untuk informasi tentang blok Events dan Looks, khususnya informasi tentang blok [Gambar persegi panjang]. Arahkan siswa untuk meninjau bagaimana layar otak diatur ke dalam sistem koordinat berdasarkan jumlah piksel saat digunakan di blok [Gambar persegi panjang]. Mereka perlu memahami hal itu agar dapat mengatur parameter di dalam blok tersebut. Selain itu, mereka perlu memahami cara menyiarkan acara. Dalam kasus ini, kegiatannya adalah menggambar tombol.

Siswa harus merencanakan, menguji, dan menyempurnakan perubahan ini pada proyek sambil mendokumentasikannya dalam buku catatan teknik mereka. Untuk rubrik buku catatan teknik individu, klik salah satu tautan berikut (Google Doc / .docx / .pdf), atau klik salah satu tautan berikut untuk buku catatan tim (Google Doc / .docx / .pdf).

Berikut adalah contoh solusi:

Contoh solusi VEXcode V5 dengan dua tumpukan blok yang berdampingan. Tumpukan di sebelah kiri dimulai dengan blok "when started" dan menunjukkan blok tombol "Broadcast Draw" yang ditambahkan ke bagian atas proyek Kiri atau kanan, di antara blok "when started" dan perulangan "forever loop". Tumpukan di sebelah kanan dimulai dengan blok When I receive Draw Button event diikuti oleh empat blok Looks yang berbunyi Set fill color to green on Brain; draw rectangle 0, 0, 240, 240; set fill color to purple on Brain; and draw rectangle 240, 0, 480, 240 on Brain.

Untuk pengalaman yang lebih realistis secara profesional, mintalah siswa untuk meminta umpan balik dari teman sekelas mereka tentang dua pilihan warna mereka.
Apakah warna yang dipilih membuat Anda ingin menggunakan antarmuka, atau warna mana yang akan mereka sukai sebagai pengguna?
Bagian dari pengembangan Antarmuka Pengguna yang hebat adalah mengumpulkan data tentang Pengalaman Pengguna, bahkan preferensi estetika.