diff --git a/README.md b/README.md index cf9cb1a..408d6a8 100644 --- a/README.md +++ b/README.md @@ -159,19 +159,30 @@ printf |------|--------| | `---LESSON_INFO---` | Info pelajaran: tujuan & prasyarat | | `---EXERCISE---` | Deskripsi latihan soal | -| `---INITIAL_CODE---` | Kode awal yang muncul di editor siswa | -| `---EXPECTED_OUTPUT---` | Output yang diharapkan untuk validasi jawaban | +| `---INITIAL_CODE---` | Kode awal C yang muncul di editor siswa | +| `---INITIAL_PYTHON---` | Kode awal Python yang muncul di editor siswa | +| `---INITIAL_CIRCUIT---` | Rangkaian awal Falstad CircuitJS | +| `---INITIAL_QUIZ---` | Data quiz (format JSON) | +| `---EXPECTED_OUTPUT---` | Output yang diharapkan untuk C (stdout) | +| `---EXPECTED_OUTPUT_PYTHON---` | Output yang diharapkan untuk Python (stdout) | | `---KEY_TEXT---` | Kata kunci yang harus ada di kode siswa | +#### Fitur Tombol "Coba" (Code Try-out) + +LMS menyediakan fitur tombol **"Coba ▶"** pada blok kode di dalam materi pelajaran. + +- Tombol **hanya muncul** jika instruktur memberikan label bahasa pada *code fence* (contoh: ` ```c `, ` ```python `, ` ```arduino `). +- Klik tombol akan menyalin kode ke editor dan beralih ke tab yang relevan. + #### Blok Khusus Circuit (Opsional) -Untuk materi yang melibatkan simulator rangkaian elektronika: +Untuk materi yang melibatkan simulator rangkaian elektronika Falstad: | Blok | Fungsi | |------|--------| -| `` ```circuit `` | Rangkaian yang ditampilkan di materi | +| `` ```circuit `` | Rangkaian yang ditampilkan di materi (embed) | | `---INITIAL_CIRCUIT---` | Rangkaian awal untuk latihan | -| `---EXPECTED_CIRCUIT_OUTPUT---` | Validasi rangkaian (format JSON) | +| `---EXPECTED_CIRCUIT_OUTPUT---` | Validasi rangkaian (format JSON: node voltage) | | `---KEY_TEXT_CIRCUIT---` | Kata kunci rangkaian | #### Blok Khusus Arduino/Velxio @@ -256,7 +267,26 @@ Sistem mengevaluasi 3 aspek (semua harus lulus): 2. **Serial Output** — baris yang diharapkan harus muncul dalam urutan (subsequence match) 3. **Wiring** — koneksi yang diharapkan harus ada (lenient: extra wires OK, GND.1/GND.2 dinormalisasi) -### 5. Generate Token Siswa +#### Blok Khusus Flowchart (Opsional) + +Untuk materi logika pemrograman menggunakan flowchart: + +| Blok | Fungsi | +|------|--------| +| `` ```flowchart `` | Flowchart yang ditampilkan di materi (embed) | +| `---INITIAL_FLOWCHART---` | Struktur flowchart awal untuk latihan | +| `---EXPECTED_FLOWCHART---` | Validasi struktur flowchart (JSON) | + +### 5. Keamanan & Akses Anonim + +Sistem dilengkapi fitur keamanan untuk menjaga stabilitas: + +- **Akses Anonim**: Siswa tanpa token tetap bisa mencoba materi, namun dibatasi **1 kali kompilasi setiap 2 menit**. +- **Login Token**: Siswa yang login dengan token **bebas** dari batasan rate limit kompilasi. +- **Proteksi Login**: Percobaan login salah akan ditahan (**tarpitting**) selama 1.5 detik untuk mencegah brute-force. +- **Anti Copy-Paste**: Mencegah siswa menyalin konten materi atau menempel kode dari luar (bisa dikonfigurasi). + +### 6. Generate Token Siswa Setelah materi siap, generate file `tokens_siswa.csv`: @@ -282,7 +312,7 @@ TOKEN_SISWA_002;Siti Aminah;not_started;not_started;not_started > - File ini bisa diedit menggunakan spreadsheet (LibreOffice Calc, Excel). > Saat membuka di Excel/Calc, pilih delimiter **titik koma**. -### 6. (Opsional) Tambahkan Gambar +### 7. (Opsional) Tambahkan Gambar Letakkan gambar di folder `assets/` di parent folder. Referensi di materi menggunakan: @@ -291,7 +321,7 @@ Referensi di materi menggunakan: ![deskripsi](assets/nama_gambar.png) ``` -### 7. Jalankan LMS +### 8. Jalankan LMS ```bash cd elemes diff --git a/documentation.md b/documentation.md index 54bbcb7..5dc3da5 100644 --- a/documentation.md +++ b/documentation.md @@ -620,7 +620,9 @@ Redo (Ctrl+Shift+Z / toolbar button) - [x] Mobile wiring UX (pinch-zoom preserve wire, crosshair alignment) - [x] Wire undo/redo (snapshot-based, Ctrl+Z/Ctrl+Shift+Z, toolbar button, mobile-friendly) - [x] Security Review & Hardening (Cookie security, Rate limiting, Tarpitting) -- [x] Contoh lesson Arduino (LED Blink) +- [x] Examples of Arduino lessons (LED Blink) +- [x] Flowchart integration (parsing & embedding) +- [x] Quiz support (parsing INITIAL_QUIZ) - [ ] PWA (service worker, offline caching) -- [ ] Contoh lesson Arduino tambahan (2-3 lagi) -- [ ] Velxio enhancements (lock komponen, solution overlay, multi-board) +- [ ] More Arduino lesson examples (2-3 more) +- [ ] Velxio enhancements (lock components, solution overlay, multi-board) diff --git a/help/TUTORIAL_SISWA.md b/help/TUTORIAL_SISWA.md index 11e3681..665489f 100644 --- a/help/TUTORIAL_SISWA.md +++ b/help/TUTORIAL_SISWA.md @@ -55,7 +55,16 @@ Di tab **C** atau **Python**, kamu bisa langsung menulis kode. --- -## 5. Simulasi CircuitJS +## 5. Fitur "Coba ▶" (Code Try-out) +Di dalam materi pelajaran, kamu mungkin melihat blok kode dengan tombol **"Coba ▶"** di pojok kanan atasnya. +- Klik tombol tersebut untuk menyalin kode contoh langsung ke editor Workspace. +- Kamu bisa langsung meninjau kode tersebut dan menekan **"Run"** untuk melihat hasilnya tanpa harus mengetik ulang. + +![Fitur Coba Kode](/api/help/asset/tutorial_5_coba.png) + +--- + +## 6. Simulasi CircuitJS Untuk materi elektronika, kamu bisa menggunakan simulator **CircuitJS**. - Pilih tab **"Circuit"**. - Kamu bisa melihat simulasi aliran arus secara *real-time*. @@ -65,23 +74,36 @@ Untuk materi elektronika, kamu bisa menggunakan simulator **CircuitJS**. --- -## 6. Simulasi Velxio (Arduino) +## 7. Simulasi Velxio (Arduino) Untuk materi Arduino, platform ini menyediakan simulator **Velxio**. - Pilih tab **"Arduino"**. - Tulis kode `.ino` kamu di sisi kiri editor. - Klik tombol **"Run"** (ikon petir/play) untuk mengunggah kode ke Arduino virtual. - Perhatikan komponen di sisi kanan (seperti LED) yang akan bereaksi sesuai kodemu. +### Undo & Redo Wiring +Jika kamu melakukan kesalahan saat memasang kabel (wiring): +- Gunakan tombol **Panah Melengkung Ke Kiri** (Undo) untuk membatalkan langkah terakhir. +- Gunakan tombol **Panah Melengkung Ke Kanan** (Redo) untuk mengembalikan langkah yang dibatalkan. +- Kamu juga bisa menggunakan shortcut keyboard `Ctrl+Z` (Undo) dan `Ctrl+Shift+Z` (Redo). + ![Simulator Velxio](/api/help/asset/tutorial_8_velxio_workspace.png) --- -## 7. Memantau Keberhasilan Exercise +## 8. Memantau Keberhasilan Exercise Platform ini akan otomatis mendeteksi jika kamu telah berhasil menyelesaikan tugas. - Jika tugas selesai, akan muncul tanda centang hijau (**✓ Selesai**) di samping judul materi. - Kamu juga bisa melihat status penyelesaian di halaman Home (Dashboard) pada setiap kartu materi. ![Status Selesai](/api/help/asset/tutorial_9_progress.png) +--- + +## 9. Penting: Gunakan Token Kamu +Jika kamu belum masuk menggunakan token (akses anonim): +- Kamu hanya bisa menjalankan kode (**Run**) sekali setiap **2 menit**. +- Jika kamu masuk menggunakan token, kamu bisa menjalankan kode sepuasnya tanpa batasan waktu. + --- *Selamat belajar dan selamat bereksperimen!* diff --git a/help/asset/tutorial_1_home.png b/help/asset/tutorial_1_home.png index f304daf..dade985 100644 Binary files a/help/asset/tutorial_1_home.png and b/help/asset/tutorial_1_home.png differ diff --git a/help/asset/tutorial_2_token.png b/help/asset/tutorial_2_token.png index cfb0233..b90de2f 100644 Binary files a/help/asset/tutorial_2_token.png and b/help/asset/tutorial_2_token.png differ diff --git a/help/asset/tutorial_3_dashboard.png b/help/asset/tutorial_3_dashboard.png index 32e07ba..5032677 100644 Binary files a/help/asset/tutorial_3_dashboard.png and b/help/asset/tutorial_3_dashboard.png differ diff --git a/help/asset/tutorial_4_lesson_desktop.png b/help/asset/tutorial_4_lesson_desktop.png index f1ec0eb..44fd3a8 100644 Binary files a/help/asset/tutorial_4_lesson_desktop.png and b/help/asset/tutorial_4_lesson_desktop.png differ diff --git a/help/asset/tutorial_5_coba.png b/help/asset/tutorial_5_coba.png new file mode 100644 index 0000000..0c81efc Binary files /dev/null and b/help/asset/tutorial_5_coba.png differ diff --git a/help/asset/tutorial_5_floating_workspace.png b/help/asset/tutorial_5_floating_workspace.png index 052d67b..3961726 100644 Binary files a/help/asset/tutorial_5_floating_workspace.png and b/help/asset/tutorial_5_floating_workspace.png differ diff --git a/help/asset/tutorial_6_c_workspace.png b/help/asset/tutorial_6_c_workspace.png index 9fcf37e..88d9f4b 100644 Binary files a/help/asset/tutorial_6_c_workspace.png and b/help/asset/tutorial_6_c_workspace.png differ diff --git a/help/asset/tutorial_7_circuitjs_workspace.png b/help/asset/tutorial_7_circuitjs_workspace.png index 84d11ea..687db28 100644 Binary files a/help/asset/tutorial_7_circuitjs_workspace.png and b/help/asset/tutorial_7_circuitjs_workspace.png differ diff --git a/help/asset/tutorial_8_velxio_workspace.png b/help/asset/tutorial_8_velxio_workspace.png index b16f9f5..67d295d 100644 Binary files a/help/asset/tutorial_8_velxio_workspace.png and b/help/asset/tutorial_8_velxio_workspace.png differ diff --git a/help/asset/tutorial_9_progress.png b/help/asset/tutorial_9_progress.png index d4f2933..bc04116 100644 Binary files a/help/asset/tutorial_9_progress.png and b/help/asset/tutorial_9_progress.png differ