09 November 2025

Pembuatan Soal Otomatis


```javascript ## Frontend (HTML, CSS, JavaScript) ### HTML (index.html) ```html AI Question Generator

AI Question Generator









``` ### CSS (style.css) ```css body { font-family: sans-serif; margin: 20px; } label { display: inline-block; width: 150px; text-align: right; margin-right: 10px; } input[type="text"], input[type="number"], select { width: 200px; padding: 5px; margin-bottom: 10px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } #hasil { margin-top: 20px; border: 1px solid #ccc; padding: 10px; } ``` ### JavaScript (script.js) ```javascript document.getElementById('generate').addEventListener('click', function() { const tingkat = document.getElementById('tingkat').value; const topik = document.getElementById('topik').value; const jumlah = parseInt(document.getElementById('jumlah').value); const tipe = document.getElementById('tipe').value; const hasilDiv = document.getElementById('hasil'); // Basic validation if (!topik) { hasilDiv.innerHTML = '

Topik harus diisi.

'; return; } // Call the backend (replace with actual API endpoint) generateSoal(tingkat, topik, jumlah, tipe) .then(soal => { hasilDiv.innerHTML = '

Soal:

' + soal.map((s, index) => `

${index + 1}. ${s}

`).join(''); }) .catch(error => { console.error("Error:", error); hasilDiv.innerHTML = '

Terjadi kesalahan saat menghasilkan soal.

'; }); }); // Dummy function to simulate backend API call async function generateSoal(tingkat, topik, jumlah, tipe) { // Replace this with actual AI-powered question generation logic return new Promise(resolve => { setTimeout(() => { const soal = []; for (let i = 0; i < jumlah; i++) { soal.push(`Contoh Soal ${tipe} tentang ${topik} (Tingkat ${tingkat}) ${i + 1}`); } resolve(soal); }, 500); // Simulate a delay }); } ``` ## Backend (Node.js dengan Express - contoh sederhana) ### package.json ```json { "name": "ai-question-generator-backend", "version": "1.0.0", "description": "Backend for AI Question Generator", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.17.1", "cors": "^2.8.5" } } ``` ### server.js ```javascript const express = require('express'); const cors = require('cors'); // Required for cross-origin requests const app = express(); const port = 3000; app.use(cors()); // Enable CORS app.use(express.json()); // Parse JSON request bodies app.post('/generateSoal', async (req, res) => { const { tingkat, topik, jumlah, tipe } = req.body; // Simulate AI question generation try { const soal = await generateQuestions(tingkat, topik, jumlah, tipe); res.json(soal); } catch (error) { console.error("Error generating questions:", error); res.status(500).json({ error: "Failed to generate questions" }); } }); // Dummy function to simulate AI-powered question generation async function generateQuestions(tingkat, topik, jumlah, tipe) { return new Promise(resolve => { setTimeout(() => { const questions = []; for (let i = 0; i < jumlah; i++) { questions.push(`Contoh Soal ${tipe} tentang ${topik} (Tingkat ${tingkat}) ${i + 1}`); } resolve(questions); }, 500); // Simulate a delay }); } app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); }); ``` **Cara menjalankan:** 1. **Frontend:** Simpan `index.html`, `style.css`, dan `script.js` dalam satu folder. Buka `index.html` di browser Anda. 2. **Backend:** * Pastikan Node.js terinstal. * Buat folder terpisah untuk backend. * Simpan `package.json` dan `server.js` di folder backend. * Buka terminal di folder backend dan jalankan `npm install`. * Jalankan `node server.js` untuk memulai server backend. 3. **Update Frontend:** Ubah `generateSoal` function di `script.js` untuk menghubungi backend Anda: ```javascript async function generateSoal(tingkat, topik, jumlah, tipe) { const response = await fetch('http://localhost:3000/generateSoal', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ tingkat, topik, jumlah, tipe }) }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data; } ``` **Penjelasan:** * **Frontend:** * HTML: Struktur dasar aplikasi web dengan input untuk tingkat, topik, jumlah soal, dan tipe soal. * CSS: Styling dasar untuk tampilan yang lebih baik. * JavaScript: * Menangkap event klik pada tombol "Generate Soal". * Mengambil nilai dari input. * Memvalidasi input (contoh sederhana: topik tidak boleh kosong). * Memanggil fungsi `generateSoal` untuk mendapatkan soal dari backend. * Menampilkan soal di div `hasil`. * **Backend (Node.js dengan Express):** * Menggunakan Express untuk membuat server web. * Menggunakan `cors` middleware untuk mengizinkan permintaan lintas origin (dari frontend ke backend). * Membuat endpoint `/generateSoal` yang menerima data dari frontend (tingkat, topik, jumlah, tipe). * Memanggil fungsi `generateQuestions` untuk menghasilkan soal (saat ini hanya simulasi). * Mengirimkan soal kembali ke frontend dalam format JSON. * **Fungsi `generateQuestions`:** * Saat ini hanya mengembalikan contoh soal. **INI HARUS DIGANTI** dengan logika AI yang sebenarnya untuk menghasilkan soal berdasarkan tingkat, topik, jumlah, dan tipe yang diberikan. Anda dapat menggunakan library seperti OpenAI API atau model machine learning yang dilatih sendiri. **Langkah Selanjutnya (Penting):** 1. **Implementasi AI:** Ganti fungsi `generateQuestions` dengan logika AI yang sebenarnya. Ini adalah bagian terpenting dari aplikasi ini. Anda dapat menggunakan OpenAI API, model machine learning yang dilatih sendiri, atau kombinasi keduanya. 2. **Penyimpanan Data:** Pertimbangkan untuk menyimpan soal yang dihasilkan dalam database (misalnya, MongoDB, PostgreSQL) agar dapat digunakan kembali atau dianalisis. 3. **Autentikasi dan Otorisasi:** Jika Anda ingin aplikasi ini hanya dapat diakses oleh pengguna tertentu, implementasikan autentikasi dan otorisasi. 4. **Validasi Input yang Lebih Ketat:** Tambahkan validasi input yang lebih ketat di frontend dan backend untuk mencegah kesalahan dan potensi masalah keamanan. 5. **Error Handling yang Lebih Baik:** Tingkatkan error handling di frontend dan backend untuk memberikan pesan kesalahan yang lebih informatif kepada pengguna. 6. **UI/UX:** Tingkatkan UI/UX aplikasi agar lebih mudah digunakan dan menarik. 7. **Deploy:** Deploy aplikasi ke server web agar dapat diakses oleh orang lain.





























https://gemini.google.com/share/f7fe6c696e6f

Konsep Bicara Sebagai Aspek Pangadereng dalam Budaya Bugis

Sebuah Tinjauan Interaktif dalam Perspektif Pendidikan Agama Islam

Makalah oleh:

Jasri (NIM: 860322025005)

Program Pascasarjana, Institut Agama Islam Negeri (IAIN) Bone, 2025

Abstrak

Kajian ini mengubah makalah akademis tradisional menjadi sebuah eksplorasi interaktif. Fokusnya adalah pada konsep 'Bicara', salah satu dari lima pilar 'Pangadereng' (sistem adat Bugis). Aplikasi ini tidak hanya menyajikan definisi dan sumber 'Bicara', tetapi juga menganalisis relevansinya dalam kehidupan modern dan keterkaitannya dengan etika komunikasi dalam Pendidikan Agama Islam (PAI).

Selamat datang untuk menjelajahi bagaimana 'Bicara'—yang bermakna keadilan, musyawarah, dan tatanan hukum—berfungsi sebagai fondasi moral dan sosial dalam masyarakat Bugis, dan bagaimana nilai-nilainya bersintesis dengan prinsip-prinsip Islam.

Aplikasi Web Interaktif ini dibuat berdasarkan makalah oleh Jasri (IAIN Bone, 2025).











Putra Luwu
JASRI RIDWAN Official

Media Sosial yang digunakan:
di

Tidak ada komentar:

Posting Komentar