a2nr
/
elemes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update README and documentation with quiz features, add example quiz and flowchart lessons

This commit is contained in:
a2nr 2026-05-10 09:39:17 +07:00
parent 459ceff2d8
commit 60469925ea
6 changed files with 190 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
README.md
View File

@ -277,6 +277,39 @@ Untuk materi logika pemrograman menggunakan flowchart:
| `---INITIAL_FLOWCHART---` | Struktur flowchart awal untuk latihan |
| `---EXPECTED_FLOWCHART---` | Validasi struktur flowchart (JSON) |
#### Blok Khusus Quiz (Opsional)
LMS mendukung pembuatan kuis interaktif (Flashcard dan Pilihan Ganda) dalam dua format:
| Blok | Fungsi |
|------|--------|
| `---QUIZ_FLASHCARD---` | Kuis format Markdown (Flashcard & Pilihan Ganda) |
| `---INITIAL_QUIZ---` | Kuis format JSON |
##### Format Markdown (`QUIZ_FLASHCARD`)
Format ini sangat mudah digunakan untuk membuat kuis cepat.
```markdown
---QUIZ_FLASHCARD---
### Pertanyaan Flashcard
Ini adalah jawaban yang akan muncul di balik kartu.
> Penjelasan: Muncul setelah kartu dibalik.
### Apa output dari printf("%d", 10 + 5)?
- [] 105
- [x] 15
- [] 10
> Penjelasan: Operasi aritmatika dikerjakan dulu sebelum dicetak.
---END_QUIZ_FLASHCARD---
```
**Aturan Penulisan:**
1. Pertanyaan harus diawali dengan `###`.
2. Untuk **Pilihan Ganda**, gunakan `- []` untuk pilihan salah dan `- [x]` untuk pilihan benar.
3. Untuk **Flashcard**, cukup tulis jawaban langsung di bawah pertanyaan (tanpa `- []`).
4. Penjelasan opsional bisa ditambahkan di akhir pertanyaan dengan awalan `>`.
### 5. Keamanan & Akses Anonim
Sistem dilengkapi fitur keamanan untuk menjaga stabilitas:

32
documentation.md
View File

@ -1,7 +1,7 @@
# Elemes LMS — Dokumentasi Teknis
**Project:** LMS-C (Learning Management System untuk Pemrograman C & Arduino)
**Terakhir diupdate:** 22 April 2026
**Terakhir diupdate:** 10 Mei 2026
---
@ -286,6 +286,7 @@ Elemes mendukung beberapa mode lesson melalui **marker** di file markdown. Mode
| **Circuit** | `---INITIAL_CIRCUIT---` | Circuit + Output | node voltage + key_text |
| **Arduino/Velxio** | `---INITIAL_CODE_ARDUINO---` | Velxio (iframe) + Output | serial + wiring + key_text |
| **Velxio circuit-only** | `---VELXIO_CIRCUIT---` (tanpa code) | Velxio (no editor) + Output | wiring + key_text |
| **Quiz** | `---QUIZ_FLASHCARD---` atau `---INITIAL_QUIZ---` | Quiz | Completion status |
| **Hybrid** | C/Python + Circuit | Editor + Circuit + Output | AND-logic: kedua harus pass |
### Markdown Sections yang Dikenali
@ -297,7 +298,8 @@ Elemes mendukung beberapa mode lesson melalui **marker** di file markdown. Mode
| `---INITIAL_CODE---` / `---END_INITIAL_CODE---` | Kode awal C |
| `---INITIAL_PYTHON---` / `---END_INITIAL_PYTHON---` | Kode awal Python |
| `---INITIAL_CIRCUIT---` / `---END_INITIAL_CIRCUIT---` | Circuit text awal (CircuitJS format) |
| `---INITIAL_QUIZ---` / `---END_INITIAL_QUIZ---` | Quiz data |
| `---INITIAL_QUIZ---` / `---END_INITIAL_QUIZ---` | Quiz data (JSON) |
| `---QUIZ_FLASHCARD---` / `---END_QUIZ_FLASHCARD---` | Quiz data (Markdown/Flashcard format) |
| `---INITIAL_CODE_ARDUINO---` / `---END_INITIAL_CODE_ARDUINO---` | Kode awal Arduino |
| `---VELXIO_CIRCUIT---` / `---END_VELXIO_CIRCUIT---` | Circuit JSON untuk Velxio (komponen + wires) |
| `---EXPECTED_OUTPUT---` / `---END_EXPECTED_OUTPUT---` | Expected stdout (C/Python) atau node voltage JSON (Circuit) |
@ -457,6 +459,32 @@ Saat siswa klik "Cek Rangkaian", fungsi `evaluateCircuit()` menjalankan:
---
## Quiz Integration
Elemes mendukung kuis interaktif yang terintegrasi langsung dengan sistem progres. Kuis dapat berupa Flashcard (Tanya-Jawab) atau Pilihan Ganda (MCQ).
### Arsitektur Parsing (`QUIZ_FLASHCARD`)
Untuk memudahkan pengajar, Elemes menyediakan parser Markdown khusus di `lesson_service.py` (`_parse_flashcards`):
1. **Detection**: Mencari blok `---QUIZ_FLASHCARD---`.
2. **Splitting**: Membagi konten berdasarkan heading `###`.
3. **MCQ vs Flashcard**:
- Jika ditemukan pola `- []` atau `- [x]`, elemen diparse sebagai `type: 'mcq'`.
- Jika tidak, diparse sebagai `type: 'flashcard'`.
4. **Explanation**: Menangkap blok kutipan `>` sebagai penjelasan yang muncul setelah kuis dijawab.
5. **Rendering**: Pertanyaan dan jawaban di-render menggunakan filter Markdown standar (mendukung formatting, code snippets, dll).
### Quiz State Management
**File:** `frontend/src/lib/components/QuizTab.svelte`
1. **Shuffle**: Pertanyaan diacak setiap kali kuis dimulai (opsional).
2. **Tracking**: Menggunakan state lokal untuk melacak jawaban benar/salah.
3. **Completion**: Setelah semua pertanyaan dijawab, memicu `completeLesson('completed')` yang mengirimkan progres ke backend.
---
## Anti Copy-Paste System
Sistem berlapis untuk mencegah siswa meng-copy konten pelajaran dan mem-paste kode dari sumber eksternal.

72
examples/content/flowchart_test.md Normal file
View File

@ -0,0 +1,72 @@
---LESSON_INFO---
**Learning Objectives:**
- Memahami alur logika sistem otomatis berbasis sensor.
- Mengimplementasikan percabangan (IF-ELSE) dalam flowchart.
- Membuat siklus perulangan (LOOP) untuk pemantauan berkelanjutan.
**Prerequisites:**
- Variabel
**Challenge:**
Buatlah flowchart untuk **Sistem Penyiraman Tanaman Otomatis**.
1. Mulai sistem.
2. Inisialisasi sensor kelembapan tanah.
3. Baca nilai kelembapan secara terus-menerus.
4. JIKA tanah **Kering**, maka **Nyalakan Pompa Air**.
5. JIKA tanah **Basah**, maka **Matikan Pompa Air**.
6. Setelah tindakan (nyala/mati), kembali baca sensor.
---END_LESSON_INFO---
# Tantangan: Penyiram Tanaman Otomatis
Gunakan elemen di sebelah kiri untuk menyusun logika sistem penyiraman otomatis Anda.
Berikut adalah contoh visualisasi alur logika dasar:
```flowchart,100%,300px
start[roundrect] "Mulai"
setup[rect] "Setup LED"
loop[circle] "Loop"
on[parallelogram] "LED ON"
off[parallelogram] "LED OFF"
start --> setup
setup --> loop
loop --> on
on --> off
off --> loop
```
---INITIAL_FLOWCHART---
start[roundrect] "Mulai Sistem"
init[rect] "Inisialisasi Sensor"
read[rect] "Baca Kelembapan Tanah"
check[diamond] "Apakah Tanah Kering?"
on[parallelogram] "Nyalakan Pompa Air"
off[parallelogram] "Matikan Pompa Air"
start --> init
init --> read
read --> check
check --> on "Ya"
check --> off "Tidak"
on --> read
off --> read
---END_INITIAL_FLOWCHART---
---EXPECTED_FLOWCHART---
start[roundrect] "mulai"
init[rect] "inisialisasi"
read[rect] "baca"
check[diamond] "kering"
on[parallelogram] "nyalakan"
off[parallelogram] "matikan"
start --> init
init --> read
read --> check
check --> on
check --> off
on --> read
off --> read
---END_EXPECTED_FLOWCHART---

27
examples/content/home.md
View File

@ -15,24 +15,27 @@ Semua materi bisa dikerjakan langsung di browser!
### Dasar-Dasar
1. [Hello, World!](lesson/hello_world.md)
2. [Variabel](lesson/variabel.md)
3. [Uji Coba Flowchart](/lesson/flowchart_test)
4. [Uji Coba LaTeX](/lesson/latex_test)
3. [Uji Coba Flowchart](lesson/flowchart_test.md)
4. [Uji Coba Kuis](lesson/quiz_test.md)
5. [Uji Coba LaTeX](lesson/latex_test.md)
### Elektronika (Hybrid)
3. [Rangkaian Dasar](lesson/rangkaian_dasar.md)
6. [Rangkaian Dasar](lesson/rangkaian_dasar.md)
### Arduino (Velxio)
4. [LED Blink](lesson/led_blink_arduino.md)
5. [Hello Serial](lesson/hello_serial_arduino.md)
6. [Button Input](lesson/button_input_arduino.md)
7. [Traffic Light](lesson/traffic_light_arduino.md)
7. [LED Blink](lesson/led_blink_arduino.md)
8. [Hello Serial](lesson/hello_serial_arduino.md)
9. [Button Input](lesson/button_input_arduino.md)
10. [Traffic Light](lesson/traffic_light_arduino.md)
----Available_Lessons----
1. [Hello, World!](lesson/hello_world.md)
2. [Variabel](lesson/variabel.md)
3. [Rangkaian Dasar](lesson/rangkaian_dasar.md)
4. [LED Blink](lesson/led_blink_arduino.md)
5. [Hello Serial](lesson/hello_serial_arduino.md)
6. [Button Input](lesson/button_input_arduino.md)
7. [Traffic Light](lesson/traffic_light_arduino.md)
3. [Uji Coba Flowchart](lesson/flowchart_test.md)
4. [Uji Coba Kuis](lesson/quiz_test.md)
5. [Rangkaian Dasar](lesson/rangkaian_dasar.md)
6. [LED Blink](lesson/led_blink_arduino.md)
7. [Hello Serial](lesson/hello_serial_arduino.md)
8. [Button Input](lesson/button_input_arduino.md)
9. [Traffic Light](lesson/traffic_light_arduino.md)

37
examples/content/quiz_test.md Normal file
View File

@ -0,0 +1,37 @@
# Uji Coba Kuis Komprehensif
Pelajaran ini berisi berbagai tipe kuis untuk menguji fitur Pilihan Ganda, Flashcard, dan sistem penguncian pembatalan.
---QUIZ_FLASHCARD---
### Bahasa C adalah bahasa pemrograman tingkat rendah.
- [] Benar
- [x] Salah
> Penjelasan: Bahasa C sebenarnya dikategorikan sebagai bahasa tingkat menengah (*middle-level language*) karena memiliki fitur bahasa tingkat rendah (seperti manipulasi memori) sekaligus fitur bahasa tingkat tinggi (seperti struktur kontrol yang manusiawi).
### Apa output dari `printf("%d", 5 + 5);`?
- [] 55
- [x] 10
- [] 5 + 5
- [] Error
> Penjelasan: Operasi `5 + 5` dihitung terlebih dahulu menjadi `10`, lalu dicetak sebagai integer menggunakan format specifier `%d`.
### Bagaimana cara menulis komentar satu baris di bahasa C?
Cukup gunakan dua garis miring di awal baris, contoh: `// ini komentar`.
> Penjelasan: Komentar berguna untuk mendokumentasikan kode agar mudah dibaca oleh manusia, dan akan diabaikan oleh compiler.
### Apa fungsi dari `return 0;` di dalam fungsi `main()`?
Menandakan bahwa program telah selesai berjalan dengan sukses tanpa ada error.
---END_QUIZ_FLASHCARD---
---EXERCISE---
Cobalah untuk menyelesaikan kuis di tab sebelah kanan. Ingat, kamu tidak bisa melihat materi ini jika kuis sedang berjalan!
---
---INITIAL_CODE---
#include <stdio.h>
int main() {
printf("Selesaikan kuisnya dulu ya!\n");
return 0;
}
---END_INITIAL_CODE---

6
examples/tokens_siswa.csv
View File

@ -1,3 +1,3 @@
token;nama_siswa;button_input_arduino;flowchart_test;hello_serial_arduino;hello_world;latex_test;led_blink_arduino;rangkaian_dasar;traffic_light_arduino;variabel
121312;Anggoro Dwi;not_started;completed;not_started;completed;not_started;completed;completed;not_started;completed
dummy_token_12345;Example Student;not_started;not_started;not_started;completed;not_started;not_started;not_started;not_started;not_started
token;nama_siswa;button_input_arduino;flowchart_test;hello_serial_arduino;hello_world;latex_test;led_blink_arduino;quiz_test;rangkaian_dasar;traffic_light_arduino;variabel
121312;Anggoro Dwi;not_started;completed;not_started;completed;not_started;completed;not_started;completed;not_started;completed
dummy_token_12345;Example Student;not_started;not_started;not_started;completed;not_started;not_started;not_started;not_started;not_started;not_started

1 token nama_siswa button_input_arduino flowchart_test hello_serial_arduino hello_world latex_test led_blink_arduino quiz_test rangkaian_dasar traffic_light_arduino variabel
2 121312 Anggoro Dwi not_started completed not_started completed not_started completed not_started completed not_started completed
3 dummy_token_12345 Example Student not_started not_started not_started completed not_started not_started not_started not_started not_started not_started