update: change form on generate question for insert question
This commit is contained in:
parent
3fd262c8c1
commit
60de96b038
|
|
@ -431,6 +431,26 @@
|
||||||
class="mt-4">
|
class="mt-4">
|
||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
|
<!-- Pilihan Materi -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="material_id" class="form-label">Materi</label>
|
||||||
|
<select name="material_id" class="form-control" id="materialSelect" required>
|
||||||
|
<option value="">Pilih Materi</option>
|
||||||
|
@foreach ($materials as $material)
|
||||||
|
<option value="{{ $material->id }}">{{ $material->title }}</option>
|
||||||
|
@endforeach
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pilihan Teks Bacaan -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="story_text_display" class="form-label">Teks Bacaan</label>
|
||||||
|
<textarea id="story_text_display" class="form-control" rows="6" readonly></textarea>
|
||||||
|
<input type="hidden" name="story_text_id" id="story_text_id">
|
||||||
|
<button type="button" class="btn btn-secondary mt-2" id="btnPilihTeks">Pilih Teks
|
||||||
|
Bacaan</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 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>
|
||||||
|
|
@ -479,6 +499,175 @@ class="mt-4">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Pilih Teks Bacaan -->
|
||||||
|
<div class="modal fade" id="modalPilihTeks" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog modal-lg" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Pilih Teks Bacaan</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body" id="listTeksBacaan">
|
||||||
|
<p>Memuat teks bacaan...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const materialSelect = document.getElementById("materialSelect");
|
||||||
|
const storyTextDisplay = document.getElementById("story_text_display");
|
||||||
|
const storyTextIdInput = document.getElementById("story_text_id");
|
||||||
|
const btnPilihTeks = document.getElementById("btnPilihTeks");
|
||||||
|
const listTeksBacaan = document.getElementById("listTeksBacaan");
|
||||||
|
|
||||||
|
const questionType = document.getElementById("questionType");
|
||||||
|
const answerOptions = document.getElementById("answerOptions");
|
||||||
|
const addOptionBtn = document.getElementById("addOption");
|
||||||
|
const essayScore = document.getElementById("essay_score");
|
||||||
|
const essayAnswer = document.getElementById("essay_answer");
|
||||||
|
const saveButton = document.getElementById("saveButton");
|
||||||
|
const multipleChoiceOptions = document.getElementById("multipleChoiceOptions");
|
||||||
|
const essayScoreField = document.getElementById("essayScoreField");
|
||||||
|
const essayReferenceAnswerField = document.getElementById("essayReferenceAnswerField");
|
||||||
|
|
||||||
|
btnPilihTeks.addEventListener("click", function () {
|
||||||
|
const materialId = materialSelect.value;
|
||||||
|
if (!materialId) {
|
||||||
|
alert("Pilih materi terlebih dahulu.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
listTeksBacaan.innerHTML = "<p>Memuat teks bacaan...</p>";
|
||||||
|
$('#modalPilihTeks').modal('show');
|
||||||
|
|
||||||
|
fetch(`/literacy/teacher/materials/${materialId}/story-texts`)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.length === 0) {
|
||||||
|
listTeksBacaan.innerHTML = "<p>Tidak ada teks bacaan.</p>";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
listTeksBacaan.innerHTML = "";
|
||||||
|
data.forEach(text => {
|
||||||
|
const div = document.createElement("div");
|
||||||
|
div.classList.add("mb-3", "p-2", "border", "rounded");
|
||||||
|
div.innerHTML = `
|
||||||
|
<div style="max-height: 150px; overflow-y: auto; white-space: pre-wrap;">${text.story_text}</div>
|
||||||
|
<button type="button" class="btn btn-sm btn-primary mt-2 pilih-teks"
|
||||||
|
data-id="${text.id}"
|
||||||
|
data-teks="${text.story_text.replace(/"/g, '"')}">
|
||||||
|
Pilih Teks Ini
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
listTeksBacaan.appendChild(div);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll(".pilih-teks").forEach(btn => {
|
||||||
|
btn.addEventListener("click", function () {
|
||||||
|
const id = this.getAttribute("data-id");
|
||||||
|
const teks = this.getAttribute("data-teks");
|
||||||
|
|
||||||
|
storyTextDisplay.textContent = teks;
|
||||||
|
storyTextIdInput.value = id;
|
||||||
|
|
||||||
|
$('#modalPilihTeks').modal('hide');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleFields() {
|
||||||
|
const isMultipleChoice = questionType.value === "multiple_choice";
|
||||||
|
|
||||||
|
if (isMultipleChoice) {
|
||||||
|
multipleChoiceOptions.style.display = "block";
|
||||||
|
essayScoreField.style.display = "none";
|
||||||
|
essayReferenceAnswerField.style.display = "none";
|
||||||
|
|
||||||
|
essayScore.removeAttribute("required");
|
||||||
|
essayAnswer.removeAttribute("required");
|
||||||
|
|
||||||
|
document.querySelectorAll(".option-text, .option-score").forEach(input => {
|
||||||
|
input.setAttribute("required", "required");
|
||||||
|
});
|
||||||
|
|
||||||
|
if (answerOptions.children.length === 0) addNewOption();
|
||||||
|
} else {
|
||||||
|
multipleChoiceOptions.style.display = "none";
|
||||||
|
essayScoreField.style.display = "block";
|
||||||
|
essayReferenceAnswerField.style.display = "block";
|
||||||
|
|
||||||
|
essayScore.setAttribute("required", "required");
|
||||||
|
essayAnswer.setAttribute("required", "required");
|
||||||
|
|
||||||
|
document.querySelectorAll(".option-text, .option-score").forEach(input => {
|
||||||
|
input.removeAttribute("required");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
validateForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addNewOption() {
|
||||||
|
let optionsCount = document.querySelectorAll(".option-group").length;
|
||||||
|
let div = document.createElement("div");
|
||||||
|
div.classList.add("option-group", "mb-2", "d-flex", "align-items-center", "gap-2");
|
||||||
|
div.innerHTML = `
|
||||||
|
<input type="text" name="options[${optionsCount}][text]" class="form-control option-text" style="width: 40%;" placeholder="Opsi ${optionsCount + 1}" required>
|
||||||
|
<input type="number" name="options[${optionsCount}][score]" class="form-control option-score" style="width: 20%;" placeholder="Skor" min="0" max="100" required>
|
||||||
|
<label class="d-flex align-items-center ms-2">
|
||||||
|
<input type="checkbox" name="options[${optionsCount}][is_correct]" value="1" class="correct-answer me-1">
|
||||||
|
<span>Benar</span>
|
||||||
|
</label>
|
||||||
|
<button type="button" class="btn btn-danger btn-sm ms-2 remove-option">X</button>
|
||||||
|
`;
|
||||||
|
answerOptions.appendChild(div);
|
||||||
|
|
||||||
|
div.querySelector(".remove-option").addEventListener("click", function () {
|
||||||
|
div.remove();
|
||||||
|
updateOptionIndexes();
|
||||||
|
validateForm();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOptionIndexes() {
|
||||||
|
document.querySelectorAll(".option-group").forEach((option, index) => {
|
||||||
|
option.querySelector(".option-text").name = `options[${index}][text]`;
|
||||||
|
option.querySelector(".option-score").name = `options[${index}][score]`;
|
||||||
|
option.querySelector(".correct-answer").name = `options[${index}][is_correct]`;
|
||||||
|
option.querySelector(".option-text").placeholder = `Opsi ${index + 1}`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateForm() {
|
||||||
|
let isValid = false;
|
||||||
|
|
||||||
|
if (questionType.value === "multiple_choice") {
|
||||||
|
let options = document.querySelectorAll(".option-text");
|
||||||
|
let scores = document.querySelectorAll(".option-score");
|
||||||
|
let checkedCorrect = document.querySelector(".correct-answer:checked");
|
||||||
|
|
||||||
|
isValid = options.length > 0 && scores.length > 0 && checkedCorrect;
|
||||||
|
} else {
|
||||||
|
isValid = essayScore.value.trim() !== "" && essayAnswer.value.trim() !== "";
|
||||||
|
}
|
||||||
|
|
||||||
|
saveButton.disabled = !isValid;
|
||||||
|
}
|
||||||
|
|
||||||
|
questionType.addEventListener("change", toggleFields);
|
||||||
|
addOptionBtn.addEventListener("click", addNewOption);
|
||||||
|
essayScore.addEventListener("input", validateForm);
|
||||||
|
essayAnswer.addEventListener("input", validateForm);
|
||||||
|
answerOptions.addEventListener("input", validateForm);
|
||||||
|
|
||||||
|
toggleFields();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById('toggleSidebar').addEventListener('click', function () {
|
document.getElementById('toggleSidebar').addEventListener('click', function () {
|
||||||
var sidebar = document.getElementById('sidebarMenu');
|
var sidebar = document.getElementById('sidebarMenu');
|
||||||
|
|
@ -540,162 +729,6 @@ class="mt-4">
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{{--
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const aiForm = document.getElementById('aiForm');
|
|
||||||
const contentElement = document.getElementById('content');
|
|
||||||
const resetButton = document.getElementById('resetButton');
|
|
||||||
const generateButton = aiForm.querySelector('button[type="submit"]'); // Get the Generate button
|
|
||||||
|
|
||||||
// Function to send the content to the server and get generated questions
|
|
||||||
aiForm.addEventListener('submit', async function (event) {
|
|
||||||
event.preventDefault(); // Prevent the form from submitting normally
|
|
||||||
|
|
||||||
let content = contentElement.innerText.trim(); // Get the content entered by the user
|
|
||||||
|
|
||||||
if (content === "") {
|
|
||||||
content = "Buatlah soal literasi berdasarkan teks anak-anak tentang lingkungan.";
|
|
||||||
}
|
|
||||||
|
|
||||||
contentElement.innerText = "Menghasilkan pertanyaan..."; // Display "Menghasilkan pertanyaan..."
|
|
||||||
|
|
||||||
try {
|
|
||||||
let response = await fetch("{{ route('literacy_teacher_generate_from_ai') }}", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
"X-CSRF-TOKEN": '{{ csrf_token() }}',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ content: content })
|
|
||||||
});
|
|
||||||
|
|
||||||
let data = await response.json();
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
contentElement.innerText = data.generated_questions || "Soal berhasil dibuat, tapi tidak ada data.";
|
|
||||||
} else {
|
|
||||||
contentElement.innerText = "Error: " + (data.message || "Terjadi kesalahan.");
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
contentElement.innerText = "Gagal menghubungi server!";
|
|
||||||
console.error("Error:", error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reset the content editable area when reset button is clicked
|
|
||||||
resetButton.addEventListener('click', function () {
|
|
||||||
contentElement.innerText = ''; // Clear the content
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script> --}}
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
const questionType = document.getElementById("questionType");
|
|
||||||
const multipleChoiceOptions = document.getElementById("multipleChoiceOptions");
|
|
||||||
const answerOptions = document.getElementById("answerOptions");
|
|
||||||
const addOptionBtn = document.getElementById("addOption");
|
|
||||||
const essayScoreField = document.getElementById("essayScoreField");
|
|
||||||
const essayReferenceAnswerField = document.getElementById("essayReferenceAnswerField");
|
|
||||||
const saveButton = document.getElementById("saveButton");
|
|
||||||
const essayScore = document.getElementById("essay_score");
|
|
||||||
const essayAnswer = document.getElementById("essay_answer");
|
|
||||||
const questionForm = document.getElementById("questionForm");
|
|
||||||
|
|
||||||
function toggleFields() {
|
|
||||||
if (questionType.value === "multiple_choice") {
|
|
||||||
multipleChoiceOptions.style.display = "block";
|
|
||||||
essayScoreField.style.display = "none";
|
|
||||||
essayReferenceAnswerField.style.display = "none";
|
|
||||||
|
|
||||||
essayScore.removeAttribute("required");
|
|
||||||
essayAnswer.removeAttribute("required");
|
|
||||||
|
|
||||||
document.querySelectorAll(".option-text, .option-score").forEach(input => {
|
|
||||||
input.setAttribute("required", "required");
|
|
||||||
});
|
|
||||||
|
|
||||||
// Tambahkan minimal 1 opsi jika belum ada
|
|
||||||
if (answerOptions.children.length === 0) {
|
|
||||||
addNewOption();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
multipleChoiceOptions.style.display = "none";
|
|
||||||
essayScoreField.style.display = "block";
|
|
||||||
essayReferenceAnswerField.style.display = "block";
|
|
||||||
|
|
||||||
essayScore.setAttribute("required", "required");
|
|
||||||
essayAnswer.setAttribute("required", "required");
|
|
||||||
|
|
||||||
document.querySelectorAll(".option-text, .option-score").forEach(input => {
|
|
||||||
input.removeAttribute("required");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
validateForm();
|
|
||||||
}
|
|
||||||
|
|
||||||
function addNewOption() {
|
|
||||||
let optionsCount = document.querySelectorAll(".option-group").length;
|
|
||||||
let div = document.createElement("div");
|
|
||||||
div.classList.add("option-group", "mb-2", "d-flex", "align-items-center");
|
|
||||||
div.innerHTML = `
|
|
||||||
<input type="text" name="options[${optionsCount}][text]" class="form-control me-2 option-text" style="width: 40%;" placeholder="Opsi ${optionsCount + 1}" required>
|
|
||||||
<input type="number" name="options[${optionsCount}][score]" class="form-control me-2 option-score" style="width: 40%;" placeholder="Skor" min="0" max="100" required>
|
|
||||||
<input type="checkbox" name="options[${optionsCount}][is_correct]" value="1" class="ms-2 correct-answer">
|
|
||||||
<span class="ms-1">Jawaban Benar</span>
|
|
||||||
<button type="button" class="btn btn-danger btn-sm ms-2 remove-option">X</button>
|
|
||||||
`;
|
|
||||||
answerOptions.appendChild(div);
|
|
||||||
|
|
||||||
div.querySelector(".remove-option").addEventListener("click", function () {
|
|
||||||
div.remove();
|
|
||||||
updateOptionIndexes();
|
|
||||||
validateForm();
|
|
||||||
});
|
|
||||||
|
|
||||||
updateOptionIndexes();
|
|
||||||
validateForm();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateOptionIndexes() {
|
|
||||||
document.querySelectorAll(".option-group").forEach((option, index) => {
|
|
||||||
option.querySelector(".option-text").name = `options[${index}][text]`;
|
|
||||||
option.querySelector(".option-score").name = `options[${index}][score]`;
|
|
||||||
option.querySelector(".correct-answer").name = `options[${index}][is_correct]`;
|
|
||||||
option.querySelector(".option-text").placeholder = `Opsi ${index + 1}`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function validateForm() {
|
|
||||||
let isValid = false;
|
|
||||||
|
|
||||||
if (questionType.value === "multiple_choice") {
|
|
||||||
let options = document.querySelectorAll(".option-text");
|
|
||||||
let scores = document.querySelectorAll(".option-score");
|
|
||||||
let checkedCorrect = document.querySelector(".correct-answer:checked");
|
|
||||||
|
|
||||||
isValid = options.length > 0 && scores.length > 0 && checkedCorrect;
|
|
||||||
} else {
|
|
||||||
isValid = essayScore.value.trim() !== "" && essayAnswer.value.trim() !== "";
|
|
||||||
}
|
|
||||||
|
|
||||||
saveButton.disabled = !isValid;
|
|
||||||
// questionForm.reportValidity();
|
|
||||||
}
|
|
||||||
|
|
||||||
questionType.addEventListener("change", toggleFields);
|
|
||||||
addOptionBtn.addEventListener("click", addNewOption);
|
|
||||||
essayScore.addEventListener("input", validateForm);
|
|
||||||
essayAnswer.addEventListener("input", validateForm);
|
|
||||||
answerOptions.addEventListener("input", validateForm);
|
|
||||||
|
|
||||||
toggleFields();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- JavaScript untuk mengubah konten tab -->
|
<!-- JavaScript untuk mengubah konten tab -->
|
||||||
<script>
|
<script>
|
||||||
function materialModal(id, title, controller) {
|
function materialModal(id, title, controller) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user