+
+
diff --git a/frontend/src/routes/help/+page.ts b/frontend/src/routes/help/+page.ts
new file mode 100644
index 0000000..024f022
--- /dev/null
+++ b/frontend/src/routes/help/+page.ts
@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+
+export async function load({ fetch }) {
+ const res = await fetch('/api/help');
+ if (!res.ok) {
+ throw error(res.status, 'Gagal memuat panduan');
+ }
+ const data = await res.json();
+ return {
+ help: data
+ };
+}
diff --git a/help/TUTORIAL_SISWA.md b/help/TUTORIAL_SISWA.md
new file mode 100644
index 0000000..11e3681
--- /dev/null
+++ b/help/TUTORIAL_SISWA.md
@@ -0,0 +1,87 @@
+# Panduan Penggunaan LMS Elemes (Sinau-C)
+
+Selamat datang di LMS Elemes! Panduan ini akan membantu kamu memahami cara menggunakan platform ini untuk belajar pemrograman C, elektronika, dan Arduino secara interaktif.
+
+---
+
+## 1. Memasukkan Token
+Untuk mulai belajar, kamu perlu masuk menggunakan token yang diberikan oleh gurumu.
+- Buka halaman utama LMS
+- Klik tombol **"Masuk"** di pojok kanan atas.
+- Masukkan token kamu (contoh: `dummy_token_12345`) dan klik **"Masuk"**.
+
+
+
+---
+
+## 2. Navigasi ke Kursus
+Setelah berhasil masuk, nama kamu akan muncul di pojok kanan atas. Kamu bisa melihat daftar materi yang tersedia di halaman Home.
+- Klik pada **Kartu Materi** (misalnya: "Hello, World!") untuk masuk ke halaman pelajaran.
+
+
+
+---
+
+## 3. Pengoperasian Halaman Lesson (Mode Desktop)
+Halaman pelajaran terbagi menjadi dua bagian utama: **Materi** di sisi kiri dan **Workspace** di sisi kanan.
+
+### Tab Workspace
+Workspace memiliki beberapa tab sesuai dengan materi yang sedang dipelajari:
+- **Info**: Menampilkan tujuan pembelajaran dan prasyarat.
+- **Exercise**: Instruksi tugas yang harus diselesaikan.
+- **C / Python**: Editor kode untuk menulis program.
+- **Circuit / Arduino**: Simulator rangkaian atau mikrokontroler.
+- **Output**: Hasil eksekusi program kamu.
+
+
+
+### Floating & Docked Mode
+Kamu bisa merubah tampilan Workspace agar lebih fleksibel:
+- **Floating Mode**: Klik ikon kotak bertumpuk (**⊞**) di pojok kanan atas Workspace untuk menjadikannya jendela melayang.
+- **Docker Workspace**: Klik ikon panah bawah (**▽**) untuk meminimalkan Workspace, atau klik ikon kotak (**⊡**) untuk mengembalikannya ke posisi semula (docked).
+- **Resize**: Tarik ikon di pojok kiri atas jendela melayang (**◳**) untuk mengubah ukuran Workspace.
+
+
+
+---
+
+## 4. Pemrograman C dan Python
+Di tab **C** atau **Python**, kamu bisa langsung menulis kode.
+- Klik tombol **"▶ Run"** untuk menjalankan kodemu.
+- Hasilnya akan muncul di tab **Output**.
+- Gunakan tombol **"Reset"** jika ingin mengulang kode ke kondisi awal.
+
+
+
+---
+
+## 5. Simulasi CircuitJS
+Untuk materi elektronika, kamu bisa menggunakan simulator **CircuitJS**.
+- Pilih tab **"Circuit"**.
+- Kamu bisa melihat simulasi aliran arus secara *real-time*.
+- Kamu bisa berinteraksi dengan komponen (seperti saklar) langsung di dalam simulator.
+
+
+
+---
+
+## 6. 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.
+
+
+
+---
+
+## 7. 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.
+
+
+
+---
+*Selamat belajar dan selamat bereksperimen!*
diff --git a/help/asset/tutorial_1_home.png b/help/asset/tutorial_1_home.png
new file mode 100644
index 0000000..f304daf
Binary files /dev/null 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
new file mode 100644
index 0000000..cfb0233
Binary files /dev/null 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
new file mode 100644
index 0000000..32e07ba
Binary files /dev/null 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
new file mode 100644
index 0000000..f1ec0eb
Binary files /dev/null and b/help/asset/tutorial_4_lesson_desktop.png differ
diff --git a/help/asset/tutorial_5_floating_workspace.png b/help/asset/tutorial_5_floating_workspace.png
new file mode 100644
index 0000000..052d67b
Binary files /dev/null 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
new file mode 100644
index 0000000..9fcf37e
Binary files /dev/null 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
new file mode 100644
index 0000000..84d11ea
Binary files /dev/null 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
new file mode 100644
index 0000000..b16f9f5
Binary files /dev/null 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
new file mode 100644
index 0000000..d4f2933
Binary files /dev/null and b/help/asset/tutorial_9_progress.png differ
diff --git a/help/asset/tutorial_video.mp4 b/help/asset/tutorial_video.mp4
new file mode 100644
index 0000000..0f1ec06
Binary files /dev/null and b/help/asset/tutorial_video.mp4 differ
diff --git a/podman-compose.yml b/podman-compose.yml
index 5855446..d8817cc 100644
--- a/podman-compose.yml
+++ b/podman-compose.yml
@@ -20,8 +20,8 @@ services:
elemes-frontend:
build: ./frontend
image: lms-c-frontend:latest
- ports:
- - 3000:3000
+ # ports:
+ # - 3000:3000
environment:
- ORIGIN=http://localhost:3000
- API_BACKEND=http://elemes:5000
@@ -77,3 +77,4 @@ volumes:
networks:
main_network:
driver: bridge
+ network_mode: service:elemes-ts
diff --git a/routes/help.py b/routes/help.py
new file mode 100644
index 0000000..d9bf57c
--- /dev/null
+++ b/routes/help.py
@@ -0,0 +1,29 @@
+import os
+import markdown as md
+from flask import Blueprint, jsonify, send_from_directory
+from services.lesson_service import MD_EXTENSIONS
+
+help_bp = Blueprint('help_api', __name__)
+
+HELP_DIR = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), 'help')
+
+@help_bp.route('/help')
+def get_help_content():
+ file_path = os.path.join(HELP_DIR, 'TUTORIAL_SISWA.md')
+ if not os.path.exists(file_path):
+ return jsonify({'error': 'Help content not found'}), 404
+
+ with open(file_path, 'r', encoding='utf-8') as f:
+ content = f.read()
+
+ # Render markdown to HTML
+ html_content = md.markdown(content, extensions=MD_EXTENSIONS)
+
+ return jsonify({
+ 'title': 'Panduan Penggunaan',
+ 'content': html_content
+ })
+
+@help_bp.route('/help/asset/')
+def serve_help_asset(filename):
+ return send_from_directory(os.path.join(HELP_DIR, 'asset'), filename)