Lompat ke isi utama

Menambahkan Tombol Kedua ke Layar Otak - Berbasis Blok

Ikon Kotak Alat Guru Kotak Alat Guru - Tujuan Kegiatan Ini

Sekarang setelah siswa memiliki pengalaman dalam memperlakukan layar otak seperti satu tombol besar, mereka dapat mengubah layar menjadi dua tombol. Kegiatan ini akan memperkenalkan siswa pada penggunaan blok [If then else] bersarang untuk mengelola pernyataan kondisional dan logika yang mendasarinya dengan lebih baik. Siswa pertama-tama dipandu dalam membangun proyek untuk menekan layar guna memutar robot ke kiri atau kanan. Namun, mereka kemudian diminta untuk mengganti tombol sehingga tombol yang membelokkan robot ke kiri kini membelokkannya ke kanan, dan sebaliknya.

Untuk informasi lebih lanjut tentang blok [If then]dan[If then else] atau blok lain yang digunakan dalam aktivitas ini, kunjungi informasi bantuan dalam VEXcode V5. Untuk informasi lebih lanjut tentang alat bantuan bawaan ini, klikdi sini.

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

  • Meninjau proyekStopOrDrivedan tata letak layar otak dalam piksel.

  • Membangun proyekLeftOrRightbaru sambil dipandu melalui penalaran pemrograman.

  • Merevisi proyek sehingga tombol-tombol di layar berfungsi secara berlawanan.

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

Bahan yang dibutuhkan:
Kuantitas Bahan-bahan yang Dibutuhkan
1

Kit Pemula Kelas VEX V5 (dengan firmware terbaru)

1

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

1

Buku Catatan Teknik

1

Proyek StopOrDrive dari halaman Play sebelumnya

Ikon Kotak Alat Guru Kotak Peralatan Guru

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

Layar otak dapat memiliki lebih dari satu tombol.

Aktivitas ini akan memungkinkan Anda memprogram robot untuk melaju maju dan berbelok ke kiri atau kanan, tergantung sisi layar otak mana yang ditekan.

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

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

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

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

 

Langkah 1: Mari kita mulai dengan meninjau proyek StopOrDrive.

Proyek StopOrDrive membuat Clawbot berhenti jika layar ditekan, atau melaju maju.
Seluruh layar adalah satu tombol besar, tetapi dalam proyek berikutnya, kita ingin separuh layar menjadi satu tombol dan separuh lainnya menjadi tombol lainnya.

Hentikan atau Jalankan proyek dari pelajaran sebelumnya. Proyek diawali dengan blok ketika dimulai dengan blok Selamanya yang terlampir. Di dalam blok forever ada blok if then else yang berbunyi jika layar ditekan maka berhenti mengemudi; tunggu hingga layar tidak ditekan. Kalau tidak, terus maju.

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

Kisi piksel layar V5 Brain menunjukkan 12 baris bernomor di sepanjang sisi kiri, dengan baris atas diberi label Baris 1 dan baris bawah 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. Total ukuran pikselnya adalah lebar 480 piksel dan tinggi 240 piksel.

  • Perhatikan bahwa jumlah kolom bertambah dari kiri ke kanan. Jumlah kolomnya 48 dan lebar layarnya 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 bagian tengah layar? Untuk aktivitas ini, Anda dapat fokus pada sumbu x saja karena Anda hanya memerlukan tombol kiri dan kanan.

Ikon Kotak Alat Guru Kotak Alat Guru - Jawaban

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

Ke depannya, Tantangan Antarmuka Pengguna di bagian Pikirkan Ulang akan mengharuskan siswa 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 Guru

Instruksi mengarahkan siswa ke Tutorial dalam VEXcode V5 sesuai kebutuhan. Untuk bantuan lebih lanjut, lihatVEX Libraryuntuk artikel bantuan tambahan.

Langkah 2: Pemrograman untuk dua tombol

  • SimpanStopOrDrivesebagai proyekLeftOrRight.
  • Ingat, jika Anda memerlukan bantuan untuk 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 bertuliskan Tersimpan di sebelah kanan.

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

Proyek VEXcode V5 diawali dengan blok when started dengan blok forever yang terlampir. Di dalam loop forever bersarang blok if then else. Cabang If dari blok if then else pertama membaca Jika layar ditekan. Blok if then else yang bersarang di dalam cabang If berbunyi Jika layar x posisi kurang dari 240 maka belok kiri, dan tunggu hingga layar tidak ditekan; jika tidak belok kanan dan tunggu hingga layar tidak ditekan. Cabang else luar berisi blok penggerak maju.

Ikon Kotak Alat Guru Kotak Peralatan Guru - Mengapa Blok Bersarang Jika Maka Atau Lainnya?

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

Tiga struktur pengkodean ditunjukkan dari kiri ke kanan. Struktur di sebelah kiri memiliki tanda x merah di atasnya, yang menunjukkan masalah dengan serangkaian blok if then yang bersarang. Di bagian tengah terdapat struktur blok C kosong yang menunjukkan blok if then else bersarang. Di sebelah kanan, struktur 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 kita. Jika layar ditekan dan nilai x kurang dari 240, Clawbot berbelok ke kiri. Jika layar ditekan dan nilai x lebih besar dari 240, Clawbot berbelok ke kanan. Masalah dengan proyek ini adalah adanya risiko terjadinya kedua kondisi tersebut. Kapan pun Anda menggunakan blok [Jika maka] berurutan, Anda berisiko membuat bug dalam suatu 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 ditampilkan dengan beberapa pernyataan kondisional dan blok Drivetrain yang 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 kondisional lain di sana. Setelah layar ditekan, angkanya kurang dari 240 atau tidak. Kita hanya punya dua tombol yang perlu kita perhatikan. 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 pengembang program.

Proyek Kiri atau Kanan dipecah berdasarkan fungsionalitas blok dalam proyek yang diberi label. Cabang selamanya dan luar jika layar ditekan diberi label Terus memeriksa apakah layar ditekan. Cabang if bagian dalam diberi label saat layar ditekan, memeriksa apakah di sebelah kiri atau kanan. Blok belok kiri berikutnya diberi label Jika penekanan ada 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 penekanan tidak di kiri (kurang dari 240), belok kanan. Penantian berikutnya hingga blok diberi label menunggu hingga layar tidak lagi ditekan sebelum melanjutkan. Cabang else luar dengan blok penggerak maju diberi label Jika layar tidak ditekan, penggerak maju.

  • Mari kita ulas apa yang dilakukan proyek ini.

    Terus memeriksa apakah layar ditekan. Jika layar tidak ditekan, ia bergerak maju, tetapi jika ditekan, ia memeriksa di mana layar ditekan.

    Jika penekanan berada di sisi kiri (kurang dari 240), ia berbelok ke kiri. Jika tidak, belok kanan. Kita tidak memerlukan kondisi lain ketika nilai x lebih besar dari 240 karena jika tidak kurang dari 240 (belok kiri), maka pasti lebih besar (belok kanan). Kita hanya perlu mengkhawatirkan dua tombol.

    Tunggu hinggaBlok kontrol setelah setiap giliran membuat proyek menunggu hingga layar tidak lagi ditekan sebelum melanjutkan.

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

  • Sekarang proyek telah selesai, unduh dan jalankan untuk menguji cara kerjanya.
  • Untuk bantuan, tonton video tutorial Unduh dan Jalankan Proyek di VEXcode V5.
  • Catatlah di buku catatan teknik Anda tentang bagaimana tombol-tombol mengendalikan pergerakan Clawbot.

Ikon Tips Guru Tips Guru

Saat pengujian, siswa harus menyadari bahwa Antarmuka Pengguna ketika digunakan dari belakang Clawbot, tampaknya bekerja secara terbalik. Dari sudut pandang pengguna, Clawbot berpaling dari sisi yang ditekan oleh pengguna. Itu bukan Pengalaman Pengguna yang optimal.

Saat menekan tombol layar dari belakang Clawbot saat melaju ke depan, Anda menekan sisi kanan layar untuk berbelok ke kiri dan sisi kiri layar untuk berbelok ke kanan. Itu bukan Pengalaman Pengguna yang baik. Pengalaman Pengguna adalah seberapa baik pengguna dapat berinteraksi dengan Antarmuka Pengguna untuk mengendalikan sistem komputer. Ada informasi lebih lanjut tentang Antarmuka Pengguna di bagian Terapkan di lab ini.

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

Proyek VEXcode V5 Kiri atau Kanan. Proyek VEXcode V5 diawali dengan blok when started dengan blok forever yang terlampir. Di dalam loop forever bersarang blok if then else. Cabang If dari blok if then else pertama membaca Jika layar ditekan. Blok if then else yang bersarang di dalam cabang If berbunyi Jika layar x posisi kurang dari 240 maka belok kiri, dan tunggu hingga layar tidak ditekan; jika tidak belok kanan dan tunggu hingga layar tidak ditekan. Cabang else luar berisi blok penggerak maju.

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

Ikon Kotak Alat Guru Kotak Peralatan Guru

Siswa harus merencanakan, menguji, dan menyempurnakan perubahan 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). Ingatlah untuk menjelaskan penilaian kepada siswa sebelum mereka mulai mengerjakan.

Ikon Kotak Alat Guru Kotak Alat Guru - Solusi

Ada dua cara yang mungkin untuk memecahkan 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 berbelok ke kanan ketika pengguna menekan sisi kiri layar. Kalau tidak, Clawbot berbelok ke kiri.

Solusi contoh VEXcode V5 diawali dengan blok Saat dimulai dengan blok selamanya yang terlampir. Di dalam blok forever bersarang blok If then else. Blok if then else terluar membaca jika layar ditekan; jika tidak, maju terus. Pada cabang If, blok if then else membaca jika posisi x layar kurang dari 240 maka belok kanan, jika tidak belok kiri.

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

Solusi contoh VEXcode V5 diawali dengan blok Saat dimulai dengan blok selamanya yang terlampir. Di dalam blok forever bersarang blok If then else. Blok if then else terluar membaca jika layar ditekan; jika tidak, maju terus. Pada cabang If, blok if then else membaca jika posisi x layar lebih besar dari 240 maka belok kiri, jika tidak belok kanan.

Ikon Motivasi Diskusi Memotivasi Diskusi

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

Kisi piksel layar V5 Brain menunjukkan 12 baris bernomor di sepanjang sisi kiri, dengan baris atas diberi label Baris 1 dan baris bawah 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. Total ukuran pikselnya adalah lebar 480 piksel dan tinggi 240 piksel.

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). Berapa rentang nilai y?
J:Rentang nilai y adalah 240 (0 hingga 240).

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

T:Anda berada di bagian atas layar ketika nilai y sama dengan 0. Mengapa hal 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.

Ikon Perluas Pembelajaran Anda Perluas Pembelajaran Anda

Pada Tantangan Antarmuka Pengguna bagian Pikirkan Ulang, siswa akan diminta untuk mengembangkan proyek yang membuat empat tombol pada layar untuk mengendalikan cakar dan lengan Clawbot. Untuk tantangan itu, mereka juga diminta menampilkan keempat tombol tersebut di layar. Perluas Pembelajaran Anda ini, seperti halaman sebelumnya, akan membantu mempersiapkan mereka untuk tantangan itu karena tantangan tersebut memiliki empat tombol untuk diprogram dan ini hanya memiliki dua.

Mintalah siswa menambahkan suatu kejadian ke program sehingga layar menggambar dua tombol yang terlihat saat proyek berjalan. Sarankan agar siswa menggunakan fitur Bantuan di VEXcode V5 untuk informasi tentang blok Peristiwa dan Tampilan, khususnya informasi blok [Gambar persegi panjang]. Arahkan siswa untuk meninjau bagaimana layar otak diatur dalam sistem koordinat berdasarkan jumlah piksel saat digunakan dalam blok [Gambar persegi panjang]. Mereka perlu memahami hal itu untuk menetapkan parameter dalam blok itu. Selain itu, mereka perlu memahami cara menyiarkan acara. Dalam kasus ini, kejadiannya adalah menggambar tombol.

Siswa harus merencanakan, menguji, dan menyempurnakan perubahan pada proyek sambil mendokumentasikannya dalam buku catatan teknik mereka. Untuk rubrik buku catatan teknik individual, 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 solusinya:

Contoh solusi VEXcode V5 dengan dua tumpukan blok berdampingan. Tumpukan di sebelah kiri dimulai dengan blok ketika dimulai dan memperlihatkan blok tombol Gambar Siaran yang ditambahkan ke bagian atas proyek Kiri atau kanan, di antara blok ketika dimulai dan perulangan selamanya. Tumpukan di sebelah kanan dimulai dengan blok peristiwa Saat saya menerima Tombol Gambar diikuti oleh empat blok Tampilan yang bertuliskan Atur warna isian menjadi hijau pada Otak; gambar persegi panjang 0, 0, 240, 240; atur warna isian menjadi ungu pada Otak; dan gambar persegi panjang 240, 0, 480, 240 pada Otak.

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