diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index 40a002b9..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Selesaikan kuis ini bersama dengan kiriman Anda dengan memeriksa satu jawaban per pertanyaan.* - -1. Bahasa apa yang kemungkinan besar akan Anda gunakan untuk membuat situs web? - -- [ ] Machine Code (Kode Mesin) -- [ ] JavaScript -- [ ] Bash - -2. Lingkungan pengembangan unik untuk setiap pengembang - -- [ ] Benar -- [ ] Salah - -3. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)? - -- [ ] Syntax highlighting (Penyorotan sintaks) -- [ ] Debugging -- [ ] Code formatting (Pemformatan kode) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index 6846d246..00000000 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Sebuah program dapat dibuat tanpa pembuatnya menulis kode apapun - -- [ ] Benar -- [ ] Salah - -2. Bahasa tingkat rendah adalah pilihan populer untuk: - -- [ ] Website -- [ ] Hardware -- [ ] Perangkat lunak permainan video - -3. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web? - -- [ ] Hardware, like a Raspberry Pi -- [ ] Browser DevTools -- [ ] Operating system documentation diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md index 36800646..6a3682f6 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md @@ -6,7 +6,8 @@ Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sin > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah -[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=id) ## Pengantar @@ -179,6 +180,10 @@ Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar Bandingkan beberapa bahasa pemrograman. Apa saja ciri-ciri unik JavaScript vs. Java? Bagaimana dengan COBOL vs. Go? +## Kuis Pasca-Kuliah + +[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=id) + ## Ulasan & Belajar Mandiri Pelajari sedikit tentang berbagai bahasa yang tersedia untuk programmer. Cobalah untuk menulis baris dalam satu bahasa, dan kemudian mengulanginya pada dua bahasa lainnya. Apa yang Anda pelajari? diff --git a/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index d76b1db5..00000000 --- a/1-getting-started-lessons/2-github-basics/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,19 +0,0 @@ -*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* - -1. Tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan review, komentar, tes terintegrasi, dan banyak lagi adalah: - -- [ ] GitHub -- [ ] Pull Request (Tarik Permintaan) -- [ ] Feature branch (Cabang fitur) - -2. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)? - -- [ ] `git fetch` -- [ ] `git pull` -- [ ] `git commits -r` - -3. Bagaimana Anda beralih ke sebuah cabang (branch)? - -- [ ] `git switch [branch-name]` -- [ ] `git checkout [branch-name]` -- [ ] `git load [branch-name]` diff --git a/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index 920d8332..00000000 --- a/1-getting-started-lessons/2-github-basics/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,13 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Bagaimana Anda membuat repo Git? - -- [ ] git create -- [ ] git start -- [ ] git init - -2. Apa fungsi `git add`? - -- [ ] Commit (menyerahkan) kode Anda -- [ ] Menambahkan file Anda ke area pementasan (staging area) untuk dilacak -- [ ] Menambahkan file Anda ke GitHub diff --git a/1-getting-started-lessons/2-github-basics/translations/README.id.md b/1-getting-started-lessons/2-github-basics/translations/README.id.md index bb7d570b..15e4b819 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.id.md @@ -6,7 +6,8 @@ Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengel > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah -[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=id) ## Pengantar @@ -272,7 +273,8 @@ Proyek mungkin juga memiliki diskusi di forum, milis, atau saluran obrolan seper Sandingkan dengan seorang teman untuk mengerjakan kode satu sama lain. Buat proyek secara kolaboratif, buat kode, buat cabang, dan gabungkan perubahan. ## Kuis Pasca Kuliah -[Kuis pasca kuliah](.github/post-lecture-quiz.id.md) + +[Kuis pasca kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=id) ## Review & Belajar Mandiri @@ -288,4 +290,4 @@ Anda juga akan menemukan lab yang lebih canggih. ## Tugas -Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github) \ No newline at end of file +Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index 07bd77ec..00000000 --- a/1-getting-started-lessons/3-accessibility/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,17 +0,0 @@ -*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* - -1. Lighthouse hanya memeriksa masalah aksesibilitas - -- [ ] benar -- [ ] salah - -2. Palet warna aman membantu orang dengan - -- [ ] buta warna -- [ ] gangguan penglihatan -- [ ] keduanya di atas - -3. Tautan deskriptif sangat penting untuk situs web yang dapat diakses - -- [ ] benar -- [ ] salah diff --git a/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md b/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index 4043378c..00000000 --- a/1-getting-started-lessons/3-accessibility/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,17 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Situs web yang dapat diakses dapat diperiksa di alat browser mana - -- [ ] Lighthouse -- [ ] Deckhouse -- [ ] Cleanhouse - -2. Anda memerlukan pembaca layar fisik untuk menguji aksesibilitas bagi pengguna dengan gangguan penglihatan - -- [ ] benar -- [ ] salah - -3. Aksesibilitas hanya penting di situs web pemerintah - -- [ ] benar -- [ ] salah diff --git a/1-getting-started-lessons/3-accessibility/translations/README.id.md b/1-getting-started-lessons/3-accessibility/translations/README.id.md index d9475ec7..2cd48518 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.id.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.id.md @@ -4,7 +4,8 @@ > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuis Pra-Kuliah -[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md) + +[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5?loc=id) > Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting. > @@ -112,7 +113,7 @@ Sebagai bonus tambahan untuk memastikan situs Anda dapat diakses oleh semua, And Bayangkan halaman berikut: | Produk | Deskripsi | Pesan | -|--------------|------------------|--------------| +| ------------ | ---------------- | ------------ | | Widget | [Deskripsi]('#') | [Pesan]('#') | | Widget super | [Deskripsi]('#') | [Pesan]('#') | @@ -208,7 +209,8 @@ Ambil HTML ini dan tulis ulang agar dapat diakses semaksimal mungkin, dengan str ``` ## Kuis Pasca Kuliah -[Kuis pasca kuliah](.github/post-lecture-quiz.id.md) + +[Kuis pasca kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6?loc=id) ## Review & Belajar Mandiri diff --git a/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md b/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index 0857af21..00000000 --- a/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Complete this quiz after the lesson by checking one answer per question.* - -1. Konstanta sama dengan `let` dan `var` untuk mendeklarasikan variabel kecuali - -- [ ] Konstanta harus diinisialisasi -- [ ] Konstanta dapat diubah -- [ ] Konstanta dapat ditetapkan kembali - -2. Numbers dan ____ adalah primitif JavaScript yang menangani data numerik - -- [ ] bigint -- [ ] boolean -- [ ] star - -3. String dapat berada di antara tanda kutip tunggal dan ganda - -- [ ] benar -- [ ] salah diff --git a/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md b/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index f29ae535..00000000 --- a/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,17 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Boolean adalah tipe data yang dapat Anda gunakan untuk menguji panjang string - -- [ ] benar -- [ ] salah - -2. Berikut ini adalah operasi yang dapat Anda lakukan pada string - -- [ ] concatenation -- [ ] appending -- [ ] splicing - -3. `==` dan `===` dapat dipertukarkan - -- [ ] benar -- [ ] salah diff --git a/2-js-basics/1-data-types/translations/README.id.md b/2-js-basics/1-data-types/translations/README.id.md index 9e483a5d..b78c8a22 100644 --- a/2-js-basics/1-data-types/translations/README.id.md +++ b/2-js-basics/1-data-types/translations/README.id.md @@ -6,7 +6,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](.github/pre-lecture-quiz.id.md) +[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7?loc=id) Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. @@ -188,7 +188,7 @@ JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](.github/post-lecture-quiz.id.md) +[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8?loc=id) ## Review & Belajar Mandiri diff --git a/2-js-basics/2-functions-methods/translations/.github/post-lecture-quiz.id.md b/2-js-basics/2-functions-methods/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index 74126c1f..00000000 --- a/2-js-basics/2-functions-methods/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,12 +0,0 @@ -*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* - -1. Argumen harus disediakan untuk semua parameter dalam suatu fungsi - -- [ ] benar -- [ ] salah - -2. Apa fungsi nilai default? - -- [ ] Menetapkan nilai yang benar -- [ ] Memberikan nilai awal untuk parameter sehingga kode Anda tetap berfungsi jika Anda menghilangkan argumen untuk itu -- [ ] Tidak memiliki utilitas diff --git a/2-js-basics/2-functions-methods/translations/.github/pre-lecture-quiz.id.md b/2-js-basics/2-functions-methods/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index c6ea25df..00000000 --- a/2-js-basics/2-functions-methods/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,12 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Apa itu argumen? - -- [ ] Itu adalah sesuatu yang Anda deklarasikan dalam definisi fungsi -- [ ] Itu adalah sesuatu yang Anda berikan ke suatu fungsi pada waktu pemanggilan -- [ ] Itu adalah sesuatu yang Anda miliki dengan orang yang Anda kenal - -2. Benar atau salah: suatu fungsi harus mengembalikan sesuatu - -- [ ] benar -- [ ] salah diff --git a/2-js-basics/2-functions-methods/translations/README.id.md b/2-js-basics/2-functions-methods/translations/README.id.md index c978e52c..ebb02be6 100644 --- a/2-js-basics/2-functions-methods/translations/README.id.md +++ b/2-js-basics/2-functions-methods/translations/README.id.md @@ -6,7 +6,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md) +[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=id) Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**. @@ -183,7 +183,7 @@ Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan me ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](./.github/post-lecture-quiz.id.md) +[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=id) ## Review & Belajar Mandiri diff --git a/2-js-basics/3-making-decisions/translations/.github/post-lecture-quiz.id.md b/2-js-basics/3-making-decisions/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index ad2a7449..00000000 --- a/2-js-basics/3-making-decisions/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,12 +0,0 @@ -*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* - -1. Apa yang akan dikembalikan kode berikut: `'1' == 1` - -- [ ] true -- [ ] false - -2. Pilih operator yang benar untuk mengekspresikan logika _or_ - -- [] `a | b` -- [] `a || b` -- [] `a atau b` diff --git a/2-js-basics/3-making-decisions/translations/.github/pre-lecture-quiz.id.md b/2-js-basics/3-making-decisions/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index 42873bf4..00000000 --- a/2-js-basics/3-making-decisions/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,13 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Operator berikut `==` dipanggil - -- [ ] Kesetaraan -- [ ] Kesetaraan yang ketat -- [ ] Penugasan - -2. Perbandingan dalam JavaScript mengembalikan tipe apa? - -- [ ] boolean -- [ ] null -- [ ] string diff --git a/2-js-basics/3-making-decisions/translations/README.id.md b/2-js-basics/3-making-decisions/translations/README.id.md index c6f98e46..07dba472 100644 --- a/2-js-basics/3-making-decisions/translations/README.id.md +++ b/2-js-basics/3-making-decisions/translations/README.id.md @@ -6,7 +6,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md) +[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11?loc=id) Membuat keputusan dan mengontrol urutan kode Anda berjalan membuat kode Anda dapat digunakan kembali dan kuat. Bagian ini membahas sintaks untuk mengontrol aliran data di JavaScript dan signifikansinya saat digunakan dengan tipe data Boolean. @@ -162,7 +162,7 @@ Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](.github/post-lecture-quiz.md) +[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=id) ## Review & Belajar Mandiri diff --git a/2-js-basics/4-arrays-loops/translations/.github/post-lecture-quiz.id.md b/2-js-basics/4-arrays-loops/translations/.github/post-lecture-quiz.id.md deleted file mode 100644 index 0834f76e..00000000 --- a/2-js-basics/4-arrays-loops/translations/.github/post-lecture-quiz.id.md +++ /dev/null @@ -1,18 +0,0 @@ -*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* - -1. Bagian for-loop manakah yang perlu Anda modifikasi untuk menambah iterasinya sebesar 5 - -- [ ] kondisi -- [ ] counter -- [ ] ekspresi-iterasi - -2. Apa perbedaan antara `while` dan `for-loop` - -- [ ] Sebuah `for-loop` memiliki penghitung dan ekspresi-iterasi, di mana `while` hanya memiliki kondisi -- [ ] A `while` memiliki penghitung dan ekspresi-iterasi di mana `for-loop` hanya memiliki kondisi -- [ ] Mereka sama, hanya alias untuk satu sama lain - -3. Diberikan kode `for (let i = 1; i <5; i ++)`, berapa banyak iterasi yang akan dilakukan? - -- [ ] 5 -- [ ] 4 diff --git a/2-js-basics/4-arrays-loops/translations/.github/pre-lecture-quiz.id.md b/2-js-basics/4-arrays-loops/translations/.github/pre-lecture-quiz.id.md deleted file mode 100644 index b04f6fc2..00000000 --- a/2-js-basics/4-arrays-loops/translations/.github/pre-lecture-quiz.id.md +++ /dev/null @@ -1,13 +0,0 @@ -*Selesaikan kuis ini di kelas* - -1. Untuk merujuk ke item tertentu dalam sebuah array, Anda akan menggunakan a - -- [ ] kurung siku `[]` -- [ ] indeks -- [ ] kurung kurawal `{}` - -2. Bagaimana Anda mendapatkan jumlah item dalam sebuah array - -- [ ] Metode `len(array)` -- [ ] Properti `size` pada array -- [ ] Properti `length` pada array diff --git a/2-js-basics/4-arrays-loops/translations/README.id.md b/2-js-basics/4-arrays-loops/translations/README.id.md index 0080b7c0..f2e02c32 100644 --- a/2-js-basics/4-arrays-loops/translations/README.id.md +++ b/2-js-basics/4-arrays-loops/translations/README.id.md @@ -6,7 +6,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md) +[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=id) Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data. @@ -130,7 +130,7 @@ Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan wh ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](./.github/post-lecture-quiz.id.md) +[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=id) ## Review & Belajar Mandiri diff --git a/4-typing-game/translations/README.ja.md b/4-typing-game/translations/README.ja.md new file mode 100644 index 00000000..89f4410a --- /dev/null +++ b/4-typing-game/translations/README.ja.md @@ -0,0 +1,30 @@ +# イベント駆動型プログラミング - タイピングゲームの構築 + +## イントロダクション + +タイピングは、開発者が最も過小評価されているスキルの一つです。頭の中からエディタに思考を素早く転送する能力は、創造性が自由に流れることを可能にします。最高の学習方法の一つは、ゲームをプレイすることです! + +> ということで、タイピングゲームを作ってみましょう! + +これまで培ってきた JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作っていただきます。このゲームでは、プレイヤーにランダムな引用文 ([シャーロック・ホームズ](https://en.wikipedia.org/wiki/Sherlock_Holmes)の名言を使用しています) を提示し、それを正確に入力するのにどれくらいの時間がかかるかを競います。これまでに培った JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作ってみましょう。 + +![demo](../images/demo.gif) + +## 前提条件 + +このレッスンでは、次のような概念に精通していることを前提としています: + +- テキスト入力とボタンコントロールの作成 +- CSS とクラスを使ったスタイルの設定 +- JavaScript の基礎 + - 配列の作成 + - 乱数の生成 + - 現在の時刻の取得 + +## レッスン + +[イベント駆動型プログラミングを用いたタイピングゲームの作成](./typing-game/translations/README.ja.md) + +## クレジット + +Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer) diff --git a/4-typing-game/typing-game/translations/README.ja.md b/4-typing-game/typing-game/translations/README.ja.md new file mode 100644 index 00000000..7047d875 --- /dev/null +++ b/4-typing-game/typing-game/translations/README.ja.md @@ -0,0 +1,337 @@ +# イベントを使ったゲームの作成 + +## レクチャー前クイズ + +[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21) + +## イベント駆動型プログラミング + +ブラウザベースのアプリケーションを作成するとき、私たちは、構築したものと対話するときに使用するグラフィカル・ユーザー・インターフェース (GUI) を提供します。ブラウザと対話する最も一般的な方法は、様々な要素をクリックしたり入力したりすることです。開発者として直面する課題は、ユーザーがこれらの操作をいつ実行するかわからないことです。 + +[イベント駆動型プログラミング](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E9%A7%86%E5%8B%95%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)は、GUIを作成するために必要なプログラミングの種類の名前です。このフレーズを少し分解すると、ここでの核となる単語は **イベント** です。[イベント](https://www.merriam-webster.com/dictionary/event)は、Merriam-Webster によると、「何かが起こる」と定義されています。これは私たちの状況を完璧に説明しています。何かが起こりそうで、それに対応してコードを実行したいのですが、それがいつ行われるかはわかりません。 + +実行したいコードの節をマークする方法は、関数を作成することです。[手続き型プログラミング](https://ja.wikipedia.org/wiki/%E6%89%8B%E7%B6%9A%E3%81%8D%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)を考えると、関数は決まった順番で呼び出されます。これはイベント駆動型プログラミングでも同じことが言えそうです。違いは、関数が**どのように**呼ばれるかということです。 + +イベント (ボタンクリックやタイピングなど) を処理するために、**イベントリスナー** を登録します。イベントリスナーとは、イベントが発生するのを待ち受けて、それに応じて実行する関数のことです。イベントリスナーは、UI を更新したり、サーバーへの呼び出しを行ったり、ユーザーのアクションに反応して実行することができます。[addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener) を使用してイベントリスナーを追加し、実行する関数を提供します。 + +> **注:** イベントリスナーを作成する方法は数多くあります。匿名の関数を使うこともできますし、名前付きの関数を作ることもできます。`click` プロパティを設定したり、`addEventListener` を使用したりと、様々なショートカットを使用することができます。今回の演習では `addEventLister` と匿名関数に焦点を当てます。また、`addEventListener` はすべてのイベントに対して動作し、イベント名をパラメータとして指定できるので、最も柔軟性があります。 + +### 共通イベント + +アプリケーションを作成するときに聞くことができる[多数のイベント](https://developer.mozilla.org/ja/docs/Web/Events)があります。基本的に、ユーザーがページ上で何かをするとイベントが発生しますが、これはプレイヤーがあなたの意図した経験を得られるようにするうえで大きな力となります。幸いなことに、通常はほんの一握りのイベントしか必要ありません。ここでは、(ゲームを作成する際に使用する 2 つのイベントを含む) いくつかの一般的なイベントを紹介します: + +- [click](https://developer.mozilla.org/ja/docs/Web/API/Element/click_event): ユーザーが何かをクリックした場合、通常はボタンやハイパーリンクをクリックします +- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): ユーザーがマウスの右ボタンをクリックした場合 +- [select](https://developer.mozilla.org/ja/docs/Web/API/Element/select_event): ユーザーがテキストをハイライトした場合 +- [input](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event): ユーザーが何かテキストを入力した場合 + +## ゲームの作成 + +私たちは、JavaScript でイベントがどのように機能するかを探求するゲームを作成する予定です。私たちのゲームはプレイヤーのタイピングスキルをテストしますが、これはすべての開発者が持つべき最も過小評価されているスキルの一つです。私たちは皆、タイピングの練習をするべきです! ゲームの一般的な流れは以下のようになります。 + +- プレイヤーがスタートボタンをクリックすると、入力する名言が表示されます +- プレイヤーは、テキストボックスにできるだけ早く名言を入力します + - 各単語が完成すると、次の単語が強調表示されます + - プレイヤーにタイプミスがあった場合、テキストボックスが赤に更新されます + - 名言が完了すると、経過時間とともに成功メッセージが表示されます + +ゲームを作ってイベントを覚えましょう! + +### ファイル構造 + +**index.html**、**script.js**、**style.css** の 3 つのファイルが必要です。まずはこれらを設定して、生活を少し楽にしていきましょう。 + +- コンソールまたはターミナルウィンドウを開き、以下のコマンドを実行して、作業用の新しいフォルダを作成します + +```bash +# Linux または macOS +mkdir typing-game && cd typing-game + +# Windows +md typing-game && cd typing game +``` + +- Visual Studio Code を開きます + +```bash +code . +``` + +- Visual Studio Code のフォルダに以下の名前で3つのファイルを追加します + - index.html + - script.js + - style.css + +## ユーザーインターフェースの作成 + +要件を探ってみると、HTML ページには一握りの要素が必要になることがわかります。これはレシピのようなもので、いくつかの材料が必要です。 + +- ユーザーが入力するための名言を表示する場所 +- 成功メッセージのようなメッセージを表示する場所 +- 入力用のテキストボックス +- スタートボタン + +これらのファイルにはそれぞれ ID が必要なので、JavaScript でそれらを扱うことができます。また、これから作成する CSS と JavaScript ファイルへの参照を追加します。 + +**index.html** という名前の新しいファイルを作成します。以下の HTML を追加します。 + +```html + + + + タイピングゲーム + + + +

タイピングゲーム!

+

シャーロック・ホームズの名言を使ってタイピングの練習をしましょう。**スタート** をクリックしてください。

+

+

+
+ + +
+ + + +``` + +### アプリケーションの起動 + +物事がどのように見えるかを確認するためには、常に反復的に開発するのがベストです。アプリケーションを起動してみましょう。Visual Studio Code には [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) と呼ばれる素晴らしい拡張機能があり、アプリケーションをローカルにホストし、保存するたびにブラウザを更新します。 + +- リンクを辿り、**Install** をクリックして、[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) をインストールします + - ブラウザで Visual Studio Code を開き、Visual Studioコードでインストールを実行するように促されます + - プロンプトが表示されたら Visual Studio Code を再起動します +- インストールしたら、Visual Studio Code で Ctl-Shift-P (または Cmd-Shift-P) をクリックして、コマンドパレットを開きます +- **Live Server: Open with Live Server** と入力します + - Live Server がアプリケーションのホスティングを開始します +- ブラウザを開き、**https://localhost:5500** に移動します +- これで作成したページが表示されるはずです! + +機能を追加してみましょう。 + +## CSS の追加 + +HTML を作成したので、コアスタイリング用の CSS を追加してみましょう。プレイヤーが入力すべき単語をハイライトし、入力した内容が間違っている場合はテキストボックスに色をつけます。これには 2 つのクラスを使用します。 + +**style.css** という名前のファイルを新規作成し、以下の構文を追加します。 + +```css +/* style.css の中身 */ +.highlight { + background-color: yellow; +} + +.error { + background-color: lightcoral; + border: red; +} +``` + +✅ CSS に関しては、あなたが好きなようにページをレイアウトすることができます。少し時間をかけて、より魅力的なページにしてみましょう。 + +- 別のフォントを選択します +- ヘッダーに色をつけます +- アイテムのサイズを変更します + +## JavaScript + +UI を作成したので、ロジックを提供する JavaScript に注目してみましょう。これをいくつかのステップに分けて説明します。 + +- [定数の作成](#定数の追加) +- [ゲームを開始するイベントリスナー](#開始ロジックの追加) +- [タイピングへのイベントリスナー](#タイピングロジックの追加) + +しかし、まず、**script.js** という名前のファイルを新規作成します。 + +### 定数の追加 + +プログラミングの生活を少しでも楽にするために、いくつかのアイテムが必要になります。繰り返しになりますが、レシピに似ていますが、必要なものは以下の通りです。 + +- すべての名言のリストを含む配列 +- 現在の名言のすべての単語を格納する空の配列 +- プレイヤーが現在入力している単語のインデックスを格納するスペース +- プレイヤーがスタートをクリックした時間 + +UI 要素への参照も欲しいところです。 + +- テキストボックス (**typed-value**) +- 名言の表示 (**quote**) +- メッセージ (**message**) + +```javascript +// script.js の中身 +// すべての名言 +const quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; +// 単語のリストと、プレイヤーが現在入力している単語のインデックスを格納します。 +let words = []; +let wordIndex = 0; +// 開始時刻 +let startTime = Date.now(); +// ページ構成要素 +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); +``` + +✅ 先に行き、あなたのゲームに多くの名言を追加します。 + +> **注:** `document.getElementById`を使用することで、コード内で必要なときにいつでも要素を取得することができます。これらの要素を定期的に参照することになるので、定数を使用して文字列リテラルのタイプミスを回避します。[Vue.js](https://jp.vuejs.org/) や [React](https://ja.reactjs.org/) などのフレームワークは、コードを集中管理するのに役立ちます。 + +1分ほどかけて、`const`, `let`, `var` の使い方のビデオを見てみましょう。 + +[![Types of variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables") + +### 開始ロジックの追加 + +ゲームを始めるには、プレイヤーはスタートをクリックします。もちろん、プレイヤーがいつスタートボタンをクリックするかはわかりません。ここで[イベントリスナー](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)の出番です。イベントリスナーを使うと、何か (イベント) が発生するのを待ち受けて、それに応じてコードを実行することができます。この例では、ユーザーがスタートをクリックしたときにコードを実行したいと思います。 + +ユーザーが **スタート** をクリックしたときに、名言を選択し、ユーザーインターフェースを設定し、現在の単語とタイミングのトラッキングを設定する必要があります。以下は追加する必要のある JavaScript です。スクリプトブロックの後で説明します。 + +```javascript +// script.js の最後の方に +document.getElementById('start').addEventListener('click', () => { + // 名言の取得 + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + // 名言を言葉の配列に入れる + words = quote.split(' '); + // トラッキング用の単語インデックスをリセットする + wordIndex = 0; + + // UI の更新 + // span 要素の配列を作成し、クラスを設定できるようにします。 + const spanWords = words.map(function(word) { return `${word} `}); + // 文字列に変換して、名言を表示する innerHTML として設定します。 + quoteElement.innerHTML = spanWords.join(''); + // 最初の単語を強調表示します。 + quoteElement.childNodes[0].className = 'highlight'; + // 前のメッセージをクリアします。 + messageElement.innerText = ''; + + // テキストボックスの設定 + // テキストボックスをクリアします。 + typedValueElement.value = ''; + // フォーカスを合わせます。 + typedValueElement.focus(); + // イベントハンドラを設定します。 + + // タイマーを開始します。 + startTime = new Date().getTime(); +}); +``` + +コードを分解してみましょう! + +- 単語のトラッキングを設定します + - [Math.floor](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) と [Math.random](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) を使うと、`quotes` 配列から名言をランダムに選択することができます + - `quote` を `words` の配列に変換することで、プレイヤーが現在入力している単語を追跡することができます + - `wordIndex` は 0 に設定されます。プレイヤーは最初の単語から始めます +- UI を設定します + - `spanWords` の配列を作成し、その中に `span` 要素内の各単語を格納します + - これにより、ディスプレイ上の単語を強調表示することができます + - 配列を `join` して文字列を作成し、これを用いて `quoteElement` の `innerHTML` を更新することができます + - これにより、プレイヤーに名言が表示されます + - 最初の `span` 要素の `className` を `highlight` に設定し、黄色で強調表示します + - `innerText` を `''` に設定することで `messageElement` をクリーンにします +- テキストボックスを設定します + - 現在の `typedValueElement` の `value` をクリアします + - `focus` を `typedValueElement` に設定します +- `getTime` を呼び出してタイマーを起動します + +### タイピングロジックの追加 + +プレイヤーが入力すると `input` イベントが発生します。このイベントリスナーは、プレイヤーが単語を正しく入力しているかどうかをチェックし、ゲームの現在の状態を処理します。**script.js** に戻り、最後に以下のコードを追加します。この後に分解していきます。 + +```javascript +// script.js の最後の方に +typedValueElement.addEventListener('input', () => { + // 現在の単語を取得します + const currentWord = words[wordIndex]; + // 現在の値を取得します + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + // 文の終了 + // 成功を表示します + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + // 単語の終了 + // 新しい単語用に 'typedValueElement' をクリアします + typedValueElement.value = ''; + // 次の単語に移ります + wordIndex++; + // 名言内のすべての要素のクラス名をリセットします + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + // 新しい単語を強調表示します + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + // 現在正しく入力されている状態 + // 次の単語を強調表示します + typedValueElement.className = ''; + } else { + // エラー状態 + typedValueElement.className = 'error'; + } +}); +``` + +コードを分解してみましょう! まず、現在の単語とプレイヤーがこれまでに入力した値を取得します。次にウォーターフォールロジックがあり、ここでは引用が完全であるかどうか、単語が完全であるかどうか、単語が正しいかどうか、(最後に) エラーがあるかどうかをチェックします。 + +- 名言が完成しており、`typepedValue` が `currentWord` と等しく、`wordIndex` が `words` の `length` よりも 1 つ小さい値であることを示している場合 + - 現在の時刻から `startTime` を引くことで `elapsedTime` を計算します + - `elapsedTime` を 1,000 で割り、ミリ秒から秒に変換します + - 成功メッセージを表示します +- 単語は完成しており、`typedValue` がスペース (単語の終わり) で終わり、`typedValue` が `currentWord` と同じであることを示している場合 + - 次の単語が入力されるように `typedElement` の `value` を `''` に設定します + - 次の単語に移動するために `wordIndex` をインクリメントします + - `quoteElement` のすべての `childNodes` をループして `className` を `''` に設定し、デフォルトの表示に戻します + - 現在の単語の `className` を `highlight` に設定して、それを次のタイプの単語としてフラグを立てます +- 単語は現在 (完全ではないが) 正しく入力されており、`typedValue` で始まる `currentWord` で示される場合 + - `className` をクリアすることで `typedValueElement` がデフォルトで表示されるようにします +- ここまで来たら、エラーが発生しています + - `typedValueElement` の `className` を `error` に設定します + +## アプリケーションのテスト + +最後までやりましたね! 最後のステップは、私たちのアプリケーションが動作することを確認することです。試してみてください。エラーがあっても心配しないでください。**すべての開発者** がエラーに遭遇します。メッセージを調べて、必要に応じてデバッグしていきましょう。 + +**スタート** をクリックして、入力を開始してください。前に見たアニメーションに少し似ているはずです。 + +![Animation of the game in action](../../../4-typing-game/images/demo.gif) + +--- + +## 🚀 チャレンジ + +より多くの機能を追加しましょう。 + +- 完了時に `input` イベントリスナーを無効にし、ボタンがクリックされたときに再度有効にします +- プレイヤーが名言を完了したときにテキストボックスを無効にします +- 成功メッセージを含むモーダルダイアログボックスを表示します +- [localStorage](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) を使ってハイスコアを保存します + +## レクチャー後クイズ + +[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22) + +## 復習と自己学習 + +Web ブラウザを介して開発者が[利用できるすべてのイベント](https://developer.mozilla.org/ja/docs/Web/Events)を読んで、それぞれを使用するシナリオを検討してください。 + +## 課題 + +[新しいキーボードゲームを作成する](assignment.ja.md) diff --git a/4-typing-game/typing-game/translations/assignment.ja.md b/4-typing-game/typing-game/translations/assignment.ja.md new file mode 100644 index 00000000..9605e0ac --- /dev/null +++ b/4-typing-game/typing-game/translations/assignment.ja.md @@ -0,0 +1,12 @@ +# 新しいキーボードゲームを作成する + +## 説明書 + +キーボードのイベントを使ってタスクを行う小さなゲームを作りましょう。異なる種類のタイピングゲームや、キー入力で画面にピクセルをペイントするアートタイプのゲームにすることもできます。創造力を発揮してください。 + +## ルーブリック + +| 基準 | 模範的な例 | 適切な | 改善が必要 | +| -------- | ------------------------ | ------------------------ | ----------------- | +| | フルゲームが発表される。 | ゲームは非常にミニマム。 | ゲームにはバグがある。 | +| | \ No newline at end of file diff --git a/quiz-app/src/App.vue b/quiz-app/src/App.vue index 25c26d0d..7832fd55 100644 --- a/quiz-app/src/App.vue +++ b/quiz-app/src/App.vue @@ -7,6 +7,7 @@ +
@@ -29,13 +30,18 @@ export default { Quiz, }, data() { - return { locale: "en" }; + return { + locale: "en", + }; }, watch: { locale(val) { this.$root.$i18n.locale = val; }, }, + created() { + this.locale = this.$route.query.loc; + }, }; diff --git a/quiz-app/src/assets/translations/id.json b/quiz-app/src/assets/translations/id.json new file mode 100644 index 00000000..bbf1c5ae --- /dev/null +++ b/quiz-app/src/assets/translations/id.json @@ -0,0 +1,2509 @@ +[ + { + "title": "Pengembangan Web untuk Pemula: Kuis", + "complete": "Selamat, Anda telah menyelesaikan kuisnya!", + "error": "Maaf coba lagi", + "quizzes": [ + { + "id": 1, + "title": "Pelajaran 1 - Pengantar Bahasa Pemrograman: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Sebuah program dapat dibuat tanpa pembuatnya menulis kode apapun", + "answerOptions": [ + { + "answerText": "Benar", + "isCorrect": "true" + }, + { + "answerText": "Salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Bahasa tingkat rendah adalah pilihan populer untuk", + "answerOptions": [ + { + "answerText": "Website", + "isCorrect": "false" + }, + { + "answerText": "Hardware", + "isCorrect": "true" + }, + { + "answerText": "Perangkat lunak permainan video", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web?", + "answerOptions": [ + { + "answerText": "Hardware, like a Raspberry Pi", + "isCorrect": "false" + }, + { + "answerText": "Browser DevTools", + "isCorrect": "true" + }, + { + "answerText": "Operating system documentation", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 2, + "title": "Pelajaran 1 - Pengantar Bahasa Pemrograman: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Bahasa apa yang kemungkinan besar akan Anda gunakan untuk membuat situs web?", + "answerOptions": [ + { + "answerText": "Machine Code (Kode Mesin)", + "isCorrect": "false" + }, + { + "answerText": "JavaScript", + "isCorrect": "true" + }, + { + "answerText": "Bash", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Lingkungan pengembangan unik untuk setiap pengembang", + "answerOptions": [ + { + "answerText": "Benar", + "isCorrect": "true" + }, + { + "answerText": "Salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)?", + "answerOptions": [ + { + "answerText": "Syntax highlighting (Penyorotan sintaks)", + "isCorrect": "false" + }, + { + "answerText": "Debugging", + "isCorrect": "true" + }, + { + "answerText": "Code formatting (Pemformatan kode)", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 3, + "title": "Pelajaran 2 - Pengantar GitHub: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Bagaimana Anda membuat repo Git?", + "answerOptions": [ + { + "answerText": "git create", + "isCorrect": "false" + }, + { + "answerText": "git start", + "isCorrect": "false" + }, + { + "answerText": "git init", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Apa fungsi git add?", + "answerOptions": [ + { + "answerText": "Commit (menyerahkan) kode Anda", + "isCorrect": "false" + }, + { + "answerText": "Menambahkan file Anda ke area pementasan (staging area) untuk dilacak", + "isCorrect": "true" + }, + { + "answerText": "Menambahkan file Anda ke GitHub", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Bagaimana Anda memeriksa apakah git terinstal di komputer Anda?", + "answerOptions": [ + { + "answerText": "ketik git --version", + "isCorrect": "true" + }, + { + "answerText": "ketik git --installed", + "isCorrect": "false" + }, + { + "answerText": "ketik git --init", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 4, + "title": "Pelajaran 2 - Pengantar GitHub: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan review, komentar, tes terintegrasi, dan banyak ", + "answerOptions": [ + { + "answerText": "GitHub", + "isCorrect": "false" + }, + { + "answerText": "Pull Request (Permintaan Tarik)", + "isCorrect": "true" + }, + { + "answerText": "Feature branch (Cabang fitur)", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)?", + "answerOptions": [ + { + "answerText": "git fetch", + "isCorrect": "false" + }, + { + "answerText": "git pull", + "isCorrect": "true" + }, + { + "answerText": "git commits -r", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Bagaimana Anda beralih ke sebuah cabang (branch)?", + "answerOptions": [ + { + "answerText": "git switch [branch-name]", + "isCorrect": "false" + }, + { + "answerText": "git checkout [branch-name]", + "isCorrect": "true" + }, + { + "answerText": "git load [branch-name]", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 5, + "title": "Pelajaran 3 - Membuat Halaman Web yang Dapat Diakses: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Situs web yang dapat diakses dapat diperiksa di alat browser mana", + "answerOptions": [ + { + "answerText": "Lighthouse", + "isCorrect": "true" + }, + { + "answerText": "Deckhouse", + "isCorrect": "false" + }, + { + "answerText": "Cleanhouse", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anda memerlukan pembaca layar fisik untuk menguji aksesibilitas bagi pengguna dengan gangguan penglihatan", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Aksesibilitas hanya penting di situs web pemerintah", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 6, + "title": "Pelajaran 3 - Membuat Halaman Web yang Dapat Diakses: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Lighthouse hanya memeriksa masalah aksesibilitas", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Palet warna aman membantu orang dengan", + "answerOptions": [ + { + "answerText": "buta warna", + "isCorrect": "false" + }, + { + "answerText": "gangguan penglihatan", + "isCorrect": "false" + }, + { + "answerText": "keduanya di atas", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Tautan deskriptif sangat penting untuk situs web yang dapat diakses", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 7, + "title": "Pelajaran 4 - Dasar-dasar JavaScript - Tipe Data: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Boolean adalah tipe data yang dapat Anda gunakan untuk menguji panjang string", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Berikut ini adalah operasi yang dapat Anda lakukan pada string", + "answerOptions": [ + { + "answerText": "concatenation", + "isCorrect": "true" + }, + { + "answerText": "appending", + "isCorrect": "false" + }, + { + "answerText": "splicing", + "isCorrect": "false" + } + ] + }, + { + "questionText": "== dan === dapat dipertukarkan", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 8, + "title": "Pelajaran 4 - Dasar-dasar JavaScript - Tipe Data: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Konstanta sama dengan let dan var untuk mendeklarasikan variabel kecuali", + "answerOptions": [ + { + "answerText": "Konstanta harus diinisialisasi", + "isCorrect": "true" + }, + { + "answerText": "Konstanta dapat diubah", + "isCorrect": "false" + }, + { + "answerText": "Konstanta dapat ditetapkan kembali", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Numbers dan ____ adalah primitif JavaScript yang menangani data numerik", + "answerOptions": [ + { + "answerText": "bigint", + "isCorrect": "true" + }, + { + "answerText": "boolean", + "isCorrect": "false" + }, + { + "answerText": "star", + "isCorrect": "false" + } + ] + }, + { + "questionText": "String dapat berada di antara tanda kutip tunggal dan ganda", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 9, + "title": "Pelajaran 5 - Dasar-Dasar JavaScript - Metode dan Fungsi: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Apa itu argumen?", + "answerOptions": [ + { + "answerText": "Itu adalah sesuatu yang Anda deklarasikan dalam definisi fungsi", + "isCorrect": "false" + }, + { + "answerText": "Itu adalah sesuatu yang Anda berikan ke suatu fungsi pada waktu pemanggilan", + "isCorrect": "true" + }, + { + "answerText": "Itu adalah sesuatu yang Anda miliki dengan orang yang Anda kenal", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Suatu fungsi harus mengembalikan sesuatu", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anda dapat memberi nama fungsi apa saja", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "false" + }, + { + "answerText": "benar, tetapi harus merupakan nama deskriptif", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 10, + "title": "Pelajaran 5 - Dasar-Dasar JavaScript - Metode dan Fungsi: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Argumen harus disediakan untuk semua parameter dalam suatu fungsi", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Apa fungsi nilai default?", + "answerOptions": [ + { + "answerText": "Menetapkan nilai yang benar", + "isCorrect": "false" + }, + { + "answerText": "Memberikan nilai awal untuk parameter sehingga kode Anda tetap berfungsi jika Anda menghilangkan argumen untuk itu", + "isCorrect": "true" + }, + { + "answerText": "Tidak memiliki utilitas", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Fungsi panah gemuk memungkinkan Anda melakukan", + "answerOptions": [ + { + "answerText": "Ciptakan fungsi yang berat", + "isCorrect": "false" + }, + { + "answerText": "Hilangkan kata kunci function", + "isCorrect": "true" + }, + { + "answerText": "Membuat fungsi anonim", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 11, + "title": "Pelajaran 6 - Dasar-dasar JavaScript - Membuat Keputusan: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Operator berikut == dipanggil", + "answerOptions": [ + { + "answerText": "Kesetaraan", + "isCorrect": "true" + }, + { + "answerText": "Kesetaraan yang ketat", + "isCorrect": "false" + }, + { + "answerText": "Penugasan", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Perbandingan dalam JavaScript mengembalikan tipe apa?", + "answerOptions": [ + { + "answerText": "boolean", + "isCorrect": "true" + }, + { + "answerText": "null", + "isCorrect": "false" + }, + { + "answerText": "string", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Simbol ! dalam JavaScript artinya:", + "answerOptions": [ + { + "answerText": "Logika Not", + "isCorrect": "true" + }, + { + "answerText": "Penting", + "isCorrect": "false" + }, + { + "answerText": "Sama", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 12, + "title": "Pelajaran 6 - Dasar-dasar JavaScript - Membuat Keputusan: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Apa yang akan dikembalikan kode berikut: '1' == 1", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "true" + }, + { + "answerText": "false", + "isCorrect": "false" + }, + { + "answerText": "null", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Apa yang akan dikembalikan kode berikut: '1' === 1", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": "false" + }, + { + "answerText": "false", + "isCorrect": "true" + }, + { + "answerText": "null", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Pilih operator yang benar untuk mengekspresikan logika _or_", + "answerOptions": [ + { + "answerText": "a | b", + "isCorrect": "false" + }, + { + "answerText": "a || b", + "isCorrect": "true" + }, + { + "answerText": "a or b", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 13, + "title": "Pelajaran 7 - Dasar-dasar JavaScript - Array dan Loop: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Untuk merujuk ke item tertentu dalam sebuah array, Anda akan menggunakan a", + "answerOptions": [ + { + "answerText": "kurung siku []", + "isCorrect": "false" + }, + { + "answerText": "indeks", + "isCorrect": "true" + }, + { + "answerText": "kurung kurawal {}", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Bagaimana Anda mendapatkan jumlah item dalam sebuah array", + "answerOptions": [ + { + "answerText": "Metode `len(array)`", + "isCorrect": "false" + }, + { + "answerText": "Properti `size` pada array", + "isCorrect": "false" + }, + { + "answerText": "Properti `length` pada array", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Di JavaScript, indeks dimulai dari", + "answerOptions": [ + { + "answerText": "0", + "isCorrect": "true" + }, + { + "answerText": "1", + "isCorrect": "false" + }, + { + "answerText": "2", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 14, + "title": "Pelajaran 7 - Dasar-dasar JavaScript - Array dan Loop: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Bagian for-loop manakah yang perlu Anda modifikasi untuk menambah iterasinya sebesar 5", + "answerOptions": [ + { + "answerText": "kondisi", + "isCorrect": "true" + }, + { + "answerText": "counter", + "isCorrect": "false" + }, + { + "answerText": "ekspresi-iterasi", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Apa perbedaan antara while dan for-loop", + "answerOptions": [ + { + "answerText": "Sebuah for-loop memiliki penghitung dan ekspresi-iterasi, di mana while hanya memiliki kondisi", + "isCorrect": "true" + }, + { + "answerText": "Sebuah while memiliki penghitung dan ekspresi-iterasi di mana for-loop hanya memiliki kondisi", + "isCorrect": "false" + }, + { + "answerText": "Mereka sama, hanya alias untuk satu sama lain", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Diberikan kode for (let i = 1; i <5; i ++), berapa banyak iterasi yang akan dilakukan?", + "answerOptions": [ + { + "answerText": "5", + "isCorrect": "false" + }, + { + "answerText": "4", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 15, + "title": "Pelajaran 8 - Proyek Terarium - Pengantar HTML: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "HTML singkatan dari 'HyperText Mockup Language'", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Semua tag HTML membutuhkan tag pembuka dan penutup", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Penggunaan markup semantik adalah yang paling penting untuk", + "answerOptions": [ + { + "answerText": "keterbacaan kode (code readability)", + "isCorrect": "false" + }, + { + "answerText": "pembaca layar", + "isCorrect": "true" + }, + { + "answerText": "pemeliharaan", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 16, + "title": "Pelajaran 8 - Proyek Terarium - Pengantar HTML: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Span dan Div dapat dipertukarkan", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Kepala (head) dokumen HTML dapat berisi:", + "answerOptions": [ + { + "answerText": "tag title", + "isCorrect": "false" + }, + { + "answerText": "metadata", + "isCorrect": "false" + }, + { + "answerText": "semua di atas", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anda tidak dapat menggunakan tag yang tidak berlaku lagi di markup Anda", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "false" + }, + { + "answerText": "salah, tapi mereka sudah tidak digunakan lagi karena alasan yang baik", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 17, + "title": "Pelajaran 9 - Proyek Terarium - Pengantar CSS: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Elemen HTML harus memiliki class atau id untuk mendapatkan gaya", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "CSS adalah singkatan dari 'Complete Style Sheets'", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "CSS dapat digunakan untuk membuat animasi", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 18, + "title": "Pelajaran 9 - Proyek Terarium - Pengantar CSS: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Anda dapat menulis CSS langsung di bagian kepala file HTML Anda", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Itu selalu perlu untuk menyertakan CSS di aplikasi Anda", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "false" + }, + { + "answerText": "false, but if you want it to look good you probably need CSS", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Alat browser mana yang dapat digunakan untuk memeriksa CSS?", + "answerOptions": [ + { + "answerText": "Elements", + "isCorrect": "false" + }, + { + "answerText": "Styles", + "isCorrect": "true" + }, + { + "answerText": "Network", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 19, + "title": "Pelajaran 10 - Proyek Terarium - Manipulasi DOM dan Penutupan: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "DOM adalah singkatan dari 'Document Object Management'", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "DOM dapat dianggap sebagai pohon", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Menggunakan API Web, Anda dapat memanipulasi DOM", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 20, + "title": "Pelajaran 10 - Proyek Terarium - Manipulasi DOM dan Penutupan: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "DOM adalah model untuk merepresentasikan dokumen di web", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Penutupan JavaScript (JavaScript closures) untuk melakukan hal berikut:", + "answerOptions": [ + { + "answerText": "tulis fungsi di dalam fungsi", + "isCorrect": "true" + }, + { + "answerText": "menyertakan DOM", + "isCorrect": "false" + }, + { + "answerText": "tutup blok script", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Isi yang kosong: Closures berguna ketika satu atau lebih fungsi perlu mengakses fungsi luar ...", + "answerOptions": [ + { + "answerText": "array", + "isCorrect": "false" + }, + { + "answerText": "scope", + "isCorrect": "true" + }, + { + "answerText": "fungsi", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 21, + "title": "Pelajaran 11 - Game Mengetik: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Pemrograman berbasis peristiwa (Event-driven programming) adalah saat pengguna", + "answerOptions": [ + { + "answerText": "mengklik tombol", + "isCorrect": "false" + }, + { + "answerText": "mengubah nilai", + "isCorrect": "false" + }, + { + "answerText": "berinteraksi dengan halaman", + "isCorrect": "false" + }, + { + "answerText": "salah satu di atas", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Dalam pemrograman prosedural, fungsi dipanggil", + "answerOptions": [ + { + "answerText": "kapan saja", + "isCorrect": "false" + }, + { + "answerText": "dalam urutan tertentu", + "isCorrect": "true" + }, + { + "answerText": "kiri ke kanan", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Metode universal yang diekspos di DOM untuk mendaftarkan penangan kejadian (event handlers) dipanggil", + "answerOptions": [ + { + "answerText": "addEventListener", + "isCorrect": "true" + }, + { + "answerText": "addListener", + "isCorrect": "false" + }, + { + "answerText": "addEvent", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 22, + "title": "Pelajaran 11 - Game Mengetik: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Hampir semua hal yang dilakukan pengguna di halaman akan menimbulkan peristiwa", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Event umum termasuk", + "answerOptions": [ + { + "answerText": "click_event", + "isCorrect": "false" + }, + { + "answerText": "select_event", + "isCorrect": "false" + }, + { + "answerText": "input_event", + "isCorrect": "false" + }, + { + "answerText": "all of these", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anda bisa menggunakan fungsi anonim untuk membuat penangan kejadian", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 23, + "title": "Pelajaran 12 - Proyek Ekstensi Browser - Semua tentang Browser: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Anda bisa mendapatkan ekstensi browser dari", + "answerOptions": [ + { + "answerText": "WalMart", + "isCorrect": "false" + }, + { + "answerText": "Toko ekstensi browser", + "isCorrect": "true" + }, + { + "answerText": "Toko Aplikasi", + "isCorrect": "false" + } + ] + }, + { + "questionText": "NPM adalah singkatan dari", + "answerOptions": [ + { + "answerText": "Node Package Manager", + "isCorrect": "true" + }, + { + "answerText": "Netscape Primary Mix", + "isCorrect": "false" + }, + { + "answerText": "Natural Processing Manager", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Browser Anda dapat menyajikan halaman web dengan aman dan tidak aman", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 24, + "title": "Pelajaran 12 - Proyek Ekstensi Browser - Semua tentang Browser: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "World Wide Web ditemukan oleh", + "answerOptions": [ + { + "answerText": "Tom Barnard-Loft", + "isCorrect": "false" + }, + { + "answerText": "Tim Berners-Lee", + "isCorrect": "true" + }, + { + "answerText": "Trish Berth-Pool", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Browser pertama dipanggil", + "answerOptions": [ + { + "answerText": "WorldWideWeb", + "isCorrect": "true" + }, + { + "answerText": "Mozilla", + "isCorrect": "false" + }, + { + "answerText": "Netscape", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Browser dapat menyimpan riwayat penjelajahan pengguna", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 25, + "title": "Pelajaran 13 - Proyek Ekstensi Browser - Panggil API, gunakan Penyimpanan Lokal: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "API singkatan dari", + "answerOptions": [ + { + "answerText": "Application Programming Interfaces", + "isCorrect": "true" + }, + { + "answerText": "A Programming Inference", + "isCorrect": "false" + }, + { + "answerText": "Anti Proven Intentions", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Menggunakan API untuk berinteraksi dengan", + "answerOptions": [ + { + "answerText": "Aset lain yang terhubung ke web", + "isCorrect": "false" + }, + { + "answerText": "Sebuah database", + "isCorrect": "false" + }, + { + "answerText": "Salah satu dari yang di atas", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Siapapun dapat membuat API", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 26, + "title": "Pelajaran 13 - Proyek Ekstensi Browser - Panggil API, gunakan Penyimpanan Lokal: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "LocalStorage dihapus setiap kali Anda menutup jendela browser", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Jendela browser utama mengontrol Penyimpanan Lokal ekstensi browser", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "REST dalam konteks API adalah singkatan dari", + "answerOptions": [ + { + "answerText": "Representational State Transfer", + "isCorrect": "true" + }, + { + "answerText": "Returning State Tasks", + "isCorrect": "false" + }, + { + "answerText": "Rendering State To Browser", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 27, + "title": "Pelajaran 14 - Proyek Ekstensi Browser - Pelajari tentang Tugas Latar Belakang dan Kinerja: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Uji performa aplikasi Anda", + "answerOptions": [ + { + "answerText": "Menggunakan alat dari peramban", + "isCorrect": "true" + }, + { + "answerText": "Menggunakan paket perangkat lunak terpisah", + "isCorrect": "false" + }, + { + "answerText": "Secara manual", + "isCorrect": "false" + } + ] + }, + { + "questionText": "'Kinerja' situs web adalah analisis dari", + "answerOptions": [ + { + "answerText": "Seberapa cepat itu dimuat", + "isCorrect": "false" + }, + { + "answerText": "Seberapa cepat kodenya berjalan", + "isCorrect": "false" + }, + { + "answerText": "Kedua di atas", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Secara keseluruhan, 'bobot' halaman web selama beberapa tahun terakhir telah", + "answerOptions": [ + { + "answerText": "gotten lighter", + "isCorrect": "false" + }, + { + "answerText": "gotten heavier", + "isCorrect": "true" + }, + { + "answerText": "stayed the same", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 28, + "title": "Pelajaran 14 - Proyek Ekstensi Browser - Pelajari tentang Tugas Latar Belakang dan Kinerja: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Untuk mendapatkan gambaran yang lebih baik tentang kinerja situs Anda, kosongkan cache-nya dan muat ulang di profiler", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Ekstensi browser pada dasarnya memiliki performa yang baik", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Analisis hal-hal berikut untuk kemacetan kinerja", + "answerOptions": [ + { + "answerText": "DOM traversals", + "isCorrect": "false" + }, + { + "answerText": "Pengoptimalan JavaScript", + "isCorrect": "false" + }, + { + "answerText": "Manajemen aset", + "isCorrect": "false" + }, + { + "answerText": "Semua yang di atas", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 29, + "title": "Pelajaran 15 - Game Luar Angkasa - Pendahuluan: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "JavaScript adalah bahasa yang tidak populer untuk membuat game", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Pub / Sub adalah pola yang disukai untuk mengelola aset dan aliran game", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Pewarisan objek (object inheritance) dapat ditangani baik dengan menggunakan class atau komposisi", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 30, + "title": "Pelajaran 15 - Game Luar Angkasa - Pendahuluan: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Class bergantung pada warisan untuk dianggap berasal dari perilaku", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Komposisi adalah pola desain yang disukai untuk objek game", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Pub / Sub adalah singkatan dari:", + "answerOptions": [ + { + "answerText": "Publish/Subscribe", + "isCorrect": "true" + }, + { + "answerText": "Print/Staple", + "isCorrect": "false" + }, + { + "answerText": "Publish/Sanitize", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 31, + "title": "Pelajaran 16 - Game Luar Angkasa - Menggambar Pahlawan dan Monster ke Kanvas: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Elemen Canvas adalah apa yang Anda gunakan untuk menggambar di layar", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Anda hanya dapat menggambar bentuk geometris sederhana menggunakan Canvas API", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Titik 0,0 berada di kiri bawah", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 32, + "title": "Pelajaran 16 - Game Luar Angkasa - Menggambar Pahlawan dan Monster ke Kanvas: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Anda dapat melakukan operasi menggambar langsung di Kanvas", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anda mendengarkan acara onload untuk mengetahui kapan gambar dimuat secara asinkron", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Anda menggambar gambar ke layar dengan operasi yang disebut:", + "answerOptions": [ + { + "answerText": "paintImage()", + "isCorrect": "false" + }, + { + "answerText": "drawImage()", + "isCorrect": "true" + }, + { + "answerText": "draw()", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 33, + "title": "Pelajaran 17 - Game Luar Angkasa - Menambahkan Gerakan: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Objek apa pun di layar dapat menerima acara keyboard", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Anda dapat menggunakan metode yang sama untuk mendengarkan peristiwa utama dan peristiwa mouse", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Untuk membuat sesuatu terjadi secara berkala, Anda menggunakan fungsi apa?", + "answerOptions": [ + { + "answerText": "setInterval()", + "isCorrect": "true" + }, + { + "answerText": "setTimeout()", + "isCorrect": "false" + }, + { + "answerText": "sleep()", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 34, + "title": "Pelajaran 17 - Game Luar Angkasa - Menambahkan Gerakan: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Anda selalu perlu menggambar ulang layar", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Apa itu game loop?", + "answerOptions": [ + { + "answerText": "Sebuah fungsi yang memastikan game dapat dimulai ulang", + "isCorrect": "false" + }, + { + "answerText": "Fungsi yang memutuskan seberapa cepat game harus dijalankan", + "isCorrect": "false" + }, + { + "answerText": "Fungsi yang dipanggil secara berkala dan menggambarkan apa yang seharusnya dilihat pengguna", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Kasus yang bagus untuk menggambar ulang layar adalah", + "answerOptions": [ + { + "answerText": "Interaksi pengguna terjadi", + "isCorrect": "false" + }, + { + "answerText": "Sesuatu telah berpindah", + "isCorrect": "true" + }, + { + "answerText": "Waktu telah berlalu", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 35, + "title": "Pelajaran 18 - Game Luar Angkasa - Menambahkan Laser dan Mendeteksi Tabrakan: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Deteksi tabrakan adalah cara kami mendeteksi jika dua benda bertabrakan", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Bagaimana cara menghapus item dari layar?", + "answerOptions": [ + { + "answerText": "Panggil pengumpul sampah", + "isCorrect": "false" + }, + { + "answerText": "Tandai sebagai mati, hanya tampilkan bukan benda mati saat kita menggambar layar", + "isCorrect": "true" + }, + { + "answerText": "Tempatkan item di koordinat negatif", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Cara yang baik untuk mensimulasikan penembakan laser di JavaScript adalah:", + "answerOptions": [ + { + "answerText": "membuat elemen visual merespons peristiwa utama", + "isCorrect": "true" + }, + { + "answerText": "membuat gif animasi", + "isCorrect": "false" + }, + { + "answerText": "membuat musuh meledak secara berkala", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 36, + "title": "Pelajaran 18 - Game Luar Angkasa - Menambahkan Laser dan Mendeteksi Tabrakan: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Dalam deteksi tabrakan Anda membandingkan dua", + "answerOptions": [ + { + "answerText": "lingkaran dan apakah mereka berpotongan", + "isCorrect": "false" + }, + { + "answerText": "persegi panjang dan apakah mereka berpotongan", + "isCorrect": "true" + }, + { + "answerText": "jarak antara dua titik", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Alasan penerapan efek cooldown adalah karena", + "answerOptions": [ + { + "answerText": "Membuat permainan lebih sulit karena Anda tidak dapat menembakkan laser berulang kali untuk menghancurkan musuh", + "isCorrect": "false" + }, + { + "answerText": "JavaScript hanya dapat menghasilkan sejumlah kejadian per unit waktu, jadi Anda perlu membatasinya", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Konstanta dapat diidentifikasi dalam kode karena", + "answerOptions": [ + { + "answerText": "mereka ditulis dengan huruf kapital", + "isCorrect": "true" + }, + { + "answerText": "mereka memiliki nama yang spesifik", + "isCorrect": "false" + }, + { + "answerText": "mereka ditulis dalam kebab-case seperti-ini", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 37, + "title": "Pelajaran 19 - Game Luar Angkasa - Penilaian dan Kehidupan: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Bagaimana Anda menggambar teks di layar menggunakan elemen Canvas?", + "answerOptions": [ + { + "answerText": "Tempatkan teks di dalam div atau elemen span", + "isCorrect": "false" + }, + { + "answerText": "Panggil drawText() pada elemen Canvas", + "isCorrect": "false" + }, + { + "answerText": "Panggil fillText() pada konteks objek", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Mengapa Anda memiliki konsep 'nyawa' dalam sebuah game?", + "answerOptions": [ + { + "answerText": "Untuk menunjukkan seberapa banyak kerusakan yang bisa Anda terima", + "isCorrect": "false" + }, + { + "answerText": "Agar permainan tidak langsung berakhir, tetapi Anda memiliki sejumlah peluang sebelum permainan berakhir", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Tambahkan warna ke teks di kanvas menggunakan", + "answerOptions": [ + { + "answerText": "fillColor", + "isCorrect": "false" + }, + { + "answerText": "fillStyle", + "isCorrect": "true" + }, + { + "answerText": "textAlign", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 38, + "title": "Pelajaran 19 - Game Luar Angkasa - Penilaian dan Kehidupan: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Apa cara yang menyenangkan untuk menunjukkan berapa banyak nyawa yang tersisa?", + "answerOptions": [ + { + "answerText": "jumlah kapal", + "isCorrect": "false" + }, + { + "answerText": "sistem poin", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Bagaimana Anda memusatkan teks di tengah layar menggunakan elemen Canvas?", + "answerOptions": [ + { + "answerText": "Anda menggunakan Flexbox", + "isCorrect": "false" + }, + { + "answerText": "Anda menginstruksikan teks yang akan digambar pada koordinat x dari lebar jendela klien/2", + "isCorrect": "true" + }, + { + "answerText": "Anda menyetel properti textAlign ke pusat nilai pada konteks objek", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Dalam kode, kurangi nyawa seperti ini:", + "answerOptions": [ + { + "answerText": "this.nyawa-", + "isCorrect": "false" + }, + { + "answerText": "this.nyawa--", + "isCorrect": "true" + }, + { + "answerText": "this.nyawa++", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 39, + "title": "Pelajaran 20 - Game Luar Angkasa - Akhiri dan Mulai Ulang: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Kapan waktu yang tepat untuk memulai kembali permainan", + "answerOptions": [ + { + "answerText": "ketika seorang pemain menang atau kalah", + "isCorrect": "true" + }, + { + "answerText": "kapanpun", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Kapan pertandingan harus berakhir", + "answerOptions": [ + { + "answerText": "ketika kapal musuh dihancurkan", + "isCorrect": "false" + }, + { + "answerText": "saat kapal pahlawan dihancurkan", + "isCorrect": "true" + }, + { + "answerText": "saat poin dikumpulkan", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Cara yang baik untuk menambahkan level ke game Anda adalah:", + "answerOptions": [ + { + "answerText": "Meningkatkan jumlah poin yang diperlukan untuk menyelesaikan level tertentu", + "isCorrect": "true" + }, + { + "answerText": "Tambahkan lebih banyak pemain ke dalam game", + "isCorrect": "false" + }, + { + "answerText": "Tambahkan lebih banyak grafik ke dalam game", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 40, + "title": "Pelajaran 20 - Game Luar Angkasa - Akhiri dan Mulai Ulang: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Apa pola yang baik untuk digunakan ketika kondisi akhir permainan telah terpenuhi?", + "answerOptions": [ + { + "answerText": "Tampilkan pesan yang sesuai", + "isCorrect": "false" + }, + { + "answerText": "Keluar dari permainan", + "isCorrect": "false" + }, + { + "answerText": "Tampilkan pesan yang sesuai, tawarkan pemain untuk memulai kembali, dan tampilkan tombol apa yang harus ditekan untuk tindakan itu", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anda harus menawarkan restart hanya ketika permainan telah berakhir", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Cara yang baik untuk membersihkan EventEmitter saat mengakhiri permainan adalah:", + "answerOptions": [ + { + "answerText": "membersihkan listeners", + "isCorrect": "true" + }, + { + "answerText": "membersihkan layar", + "isCorrect": "false" + }, + { + "answerText": "menutup jendela permainan", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 41, + "title": "Pelajaran 21 - Proyek Bank - Template HTML dan Rute di Aplikasi Web: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Anda perlu membuat beberapa file HTML untuk menampilkan layar yang berbeda di web app", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Anda dapat menyimpan dan menyimpan data secara lokal di web app", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Apa penyedia data terbaik untuk web app?", + "answerOptions": [ + { + "answerText": "Database lokal", + "isCorrect": "false" + }, + { + "answerText": "Objek JavaScript", + "isCorrect": "false" + }, + { + "answerText": "Server dengan JSON API", + "isCorrect": "true" + } + ] + } + ] + }, + { + "id": 42, + "title": "Pelajaran 21 - Template dan Rute HTML Proyek Bank di Aplikasi Web: Kuis Pasca-Kuliah", + "quiz": [ + { + "questionText": "Template HTML adalah bagian dari DOM secara default", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "false" + }, + { + "answerText": "salah", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Bagian mana dari URL yang diperlukan untuk perutean (routing)?", + "answerOptions": [ + { + "answerText": "window.location.pathname", + "isCorrect": "false" + }, + { + "answerText": "window.location.origin", + "isCorrect": "false" + }, + { + "answerText": "both", + "isCorrect": "true" + } + ] + }, + { + "questionText": "Apa nama peristiwa yang dipicu saat memanggil fungsi history.pushState()?", + "answerOptions": [ + { + "answerText": "pushstate", + "isCorrect": "false" + }, + { + "answerText": "popstate", + "isCorrect": "true" + }, + { + "answerText": "navigate", + "isCorrect": "false" + } + ] + } + ] + }, + { + "id": 43, + "title": "Pelajaran 22 - Proyek Bank - Buat Formulir Login dan Pendaftaran: Kuis Pra-Kuliah", + "quiz": [ + { + "questionText": "Formulir HTML memungkinkan untuk mengirim input pengguna ke server tanpa menggunakan JavaScript", + "answerOptions": [ + { + "answerText": "benar", + "isCorrect": "true" + }, + { + "answerText": "salah", + "isCorrect": "false" + } + ] + }, + { + "questionText": "Elemen