update: on index ai generate question add reset

This commit is contained in:
abiyasa05 2025-04-27 08:41:48 +07:00
parent 2e5b98c951
commit 91297e5908

View File

@ -304,7 +304,8 @@
style="margin-top: 12px; margin-left: 15px; color: #676767;"></i> style="margin-top: 12px; margin-left: 15px; color: #676767;"></i>
</div> </div>
<div class="col"> <div class="col">
<a class="nav-link" href="{{ route('literacy_teacher_assessment_results') }}" style="color: #34364A;">Assessment Results</a> <a class="nav-link" href="{{ route('literacy_teacher_assessment_results') }}"
style="color: #34364A;">Assessment Results</a>
</div> </div>
</div> </div>
</li> </li>
@ -339,10 +340,18 @@
<form id="aiForm" class="mt-4"> <form id="aiForm" class="mt-4">
<div class="card mt-2"> <div class="card mt-2">
<div class="card-body"> <div class="card-body">
<div style="border: 1px solid #ccc; border-radius: 8px; padding: 1rem; background: #f8f9fa; max-height: 300px; overflow-y: auto;"> <div
<pre style="margin: 0;"><code id="content" contenteditable="true" style="white-space: pre-wrap; outline: none;"></code></pre> style="border: 1px solid #ccc; border-radius: 8px; padding: 1rem; background: #f8f9fa; max-height: 300px; overflow-y: auto;">
<pre style="margin: 0;">
<code id="content" contenteditable="true" style="white-space: pre-wrap; outline: none;">
{{ $latestGeneratedText->generate_text ?? '' }}
</code>
</pre>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-primary">Generate</button>
<button type="button" class="btn btn-secondary" id="resetButton">Reset</button>
</div> </div>
<button type="submit" class="btn btn-primary mt-3">Generate</button>
</div> </div>
</div> </div>
</form> </form>
@ -350,13 +359,15 @@
<hr> <hr>
<!-- Form untuk menyimpan pertanyaan --> <!-- Form untuk menyimpan pertanyaan -->
<form action="{{ route('literacy_questions_store') }}" method="POST" id="questionForm" class="mt-4"> <form action="{{ route('literacy_questions_store') }}" method="POST" id="questionForm"
class="mt-4">
@csrf @csrf
<!-- Teks Pertanyaan --> <!-- Teks Pertanyaan -->
<div class="mb-3"> <div class="mb-3">
<label for="question_text" class="form-label">Teks Pertanyaan</label> <label for="question_text" class="form-label">Teks Pertanyaan</label>
<textarea name="question_text" id="question_text" class="form-control" required></textarea> <textarea name="question_text" id="question_text" class="form-control"
required></textarea>
</div> </div>
<!-- Tipe Pertanyaan --> <!-- Tipe Pertanyaan -->
@ -377,8 +388,8 @@
<!-- Skor untuk pertanyaan Isian --> <!-- Skor untuk pertanyaan Isian -->
<div id="essayScoreField" class="mb-3"> <div id="essayScoreField" class="mb-3">
<label for="essay_score" class="form-label">Skor untuk Isian</label> <label for="essay_score" class="form-label">Skor untuk Isian</label>
<input type="number" name="essay_score" id="essay_score" class="form-control" min="0" max="100" <input type="number" name="essay_score" id="essay_score" class="form-control" min="0"
placeholder="Masukkan skor"> max="100" placeholder="Masukkan skor">
</div> </div>
<!-- Jawaban untuk Isian --> <!-- Jawaban untuk Isian -->
@ -389,7 +400,8 @@
</div> </div>
<div class="d-flex justify-content-between align-items-center gap-2 mt-3"> <div class="d-flex justify-content-between align-items-center gap-2 mt-3">
<button type="button" class="btn btn-success btn-sm" id="addOption">+ Tambah Opsi</button> <button type="button" class="btn btn-success btn-sm" id="addOption">+ Tambah
Opsi</button>
<button type="submit" class="btn btn-primary" id="saveButton" disabled>Simpan</button> <button type="submit" class="btn btn-primary" id="saveButton" disabled>Simpan</button>
</div> </div>
</form> </form>
@ -399,63 +411,55 @@
</div> </div>
</div> </div>
<!-- The Modal --> <script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" document.addEventListener('DOMContentLoaded', function () {
aria-hidden="true"> const aiForm = document.getElementById('aiForm');
<div class="modal-dialog" role="document" style="max-width: 80%;" role="document"> const contentElement = document.getElementById('content');
<div class="modal-content"> const resetButton = document.getElementById('resetButton');
<div class="modal-header"> const generateButton = aiForm.querySelector('button[type="submit"]'); // Get the Generate button
<h5 class="modal-title" id="exampleModalLabel"><span id="span_title"></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" style="margin-left: 10px; width: 160px;"
onclick="materialDetailPage()">
<i class="fas fa-key" style="margin-right: 5px;"></i>Enroll Material
</button>
</div>
</div>
</div>
</div>
{{-- <script> // Function to send the content to the server and get generated questions
document.addEventListener("DOMContentLoaded", function () { aiForm.addEventListener('submit', async function (event) {
const aiForm = document.getElementById("aiForm"); event.preventDefault(); // Prevent the form from submitting normally
const questionText = document.getElementById("question_text");
const saveButton = document.getElementById("saveButton");
aiForm.addEventListener("submit", function (event) { let content = contentElement.innerText.trim(); // Get the content entered by the user
event.preventDefault();
const content = document.getElementById("content").value;
if (content === "") {
content = "Buatlah soal literasi berdasarkan teks anak-anak tentang lingkungan.";
}
fetch("http://127.0.0.1:8001/generate/", { contentElement.innerText = "Menghasilkan pertanyaan..."; // Display "Menghasilkan pertanyaan..."
method: "POST",
headers: { try {
"Content-Type": "application/json" let response = await fetch("{{ route('literacy_teacher_generate_from_ai') }}", {
}, method: "POST",
body: JSON.stringify({ content: content }) headers: {
}) "Content-Type": "application/json",
.then(response => response.json()) "X-CSRF-TOKEN": '{{ csrf_token() }}',
.then(data => { },
if (data.generated_questions) { body: JSON.stringify({ content: content })
questionText.value = data.generated_questions; });
saveButton.disabled = false;
let data = await response.json();
if (response.ok) {
contentElement.innerText = data.generated_questions || "Soal berhasil dibuat, tapi tidak ada data.";
} else { } else {
alert("Gagal menghasilkan pertanyaan."); contentElement.innerText = "Error: " + (data.message || "Terjadi kesalahan.");
} }
})
.catch(error => console.error("Error:", error)); } catch (error) {
contentElement.innerText = "Gagal menghubungi server!";
console.error("Error:", error);
}
}); });
// Aktifkan tombol simpan jika ada teks pertanyaan // Reset the content editable area when reset button is clicked
questionText.addEventListener("input", function () { resetButton.addEventListener('click', function () {
saveButton.disabled = questionText.value.trim() === ""; contentElement.innerText = ''; // Clear the content
}); });
}); });
</script> --}} </script>
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
@ -562,77 +566,6 @@ function validateForm() {
}); });
</script> </script>
{{-- <script>
document.getElementById("aiForm").addEventListener("submit", async function (event) {
event.preventDefault(); // Mencegah refresh halaman
let contentTextarea = document.getElementById("content");
let content = contentTextarea.value.trim();
if (content === "") {
content = "Buatlah soal literasi berdasarkan teks anak-anak tentang lingkungan.";
}
contentTextarea.value = "Menghasilkan pertanyaan...";
try {
let response = await fetch("http://127.0.0.1:8000/literacy/teacher/generate_questions/ai", { // Sesuaikan URL Laravel
method: "POST",
headers: {
"Content-Type": "application/json"
}
});
let data = await response.json();
if (response.ok) {
contentTextarea.value = data.generated_questions || "Soal berhasil dibuat, tapi tidak ada data.";
} else {
contentTextarea.value = "Error: " + (data.message || "Terjadi kesalahan.");
}
} catch (error) {
contentTextarea.value = "Gagal menghubungi server!";
console.error("Error:", error);
}
});
</script> --}}
<script>
document.getElementById("aiForm").addEventListener("submit", async function (event) {
event.preventDefault(); // Mencegah refresh halaman
let contentDiv = document.getElementById("content");
let content = contentDiv.innerText.trim();
if (content === "") {
content = "Buatlah soal literasi berdasarkan teks anak-anak tentang lingkungan.";
}
contentDiv.innerText = "Menghasilkan pertanyaan...";
try {
let response = await fetch("http://127.0.0.1:8000/literacy/teacher/generate_questions/ai", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ content }) // << INI PENTING BANGET!
});
let data = await response.json();
if (response.ok) {
contentDiv.innerText = data.generated_questions || "Soal berhasil dibuat, tapi tidak ada data.";
} else {
contentDiv.innerText = "Error: " + (data.message || "Terjadi kesalahan.");
}
} catch (error) {
contentDiv.innerText = "Gagal menghubungi server!";
console.error("Error:", error);
}
});
</script>
<!-- JavaScript untuk mengubah konten tab --> <!-- JavaScript untuk mengubah konten tab -->
<script> <script>
function materialModal(id, title, controller) { function materialModal(id, title, controller) {