update: change views for literacy questions
This commit is contained in:
parent
c8689ea167
commit
e613c0da96
|
|
@ -1,24 +1,33 @@
|
|||
<!-- Modal Tambah Pertanyaan -->
|
||||
<div class="modal fade" id="modalTambahPertanyaan" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Tambah Pertanyaan</h5>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<form action="{{ route('literacy_questions_store') }}" method="POST" id="questionForm">
|
||||
<form action="{{ route('literacy_questions_store') }}" method="POST" id="createQuestionForm">
|
||||
@csrf
|
||||
<div class="modal-body">
|
||||
{{-- <!-- Pilihan Materi -->
|
||||
<!-- Pilihan Materi -->
|
||||
<div class="mb-3">
|
||||
<label for="material_id" class="form-label">Materi</label>
|
||||
<select name="material_id" class="form-control" required>
|
||||
<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> --}}
|
||||
</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 -->
|
||||
<div class="mb-3">
|
||||
|
|
@ -35,25 +44,22 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Opsi Jawaban (Untuk Pilihan Ganda) -->
|
||||
<!-- Opsi Jawaban -->
|
||||
<div id="multipleChoiceOptions" class="mb-3">
|
||||
<label class="form-label">Opsi Jawaban</label>
|
||||
<div id="answerOptions"></div>
|
||||
<button type="button" class="btn btn-success btn-sm" id="addOption">+ Tambah Opsi</button>
|
||||
</div>
|
||||
|
||||
<!-- Skor untuk pertanyaan Isian -->
|
||||
<!-- Skor & Jawaban Isian -->
|
||||
<div id="essayScoreField" class="mb-3">
|
||||
<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"
|
||||
placeholder="Masukkan skor">
|
||||
<input type="number" name="essay_score" id="essay_score" class="form-control" min="0" max="100">
|
||||
</div>
|
||||
|
||||
<!-- Jawaban untuk Isian -->
|
||||
<div id="essayReferenceAnswerField" class="mb-3">
|
||||
<label for="essay_answer" class="form-label">Jawaban Isian</label>
|
||||
<textarea name="essay_answer" id="essay_answer" class="form-control"
|
||||
placeholder="Masukkan jawaban referensi"></textarea>
|
||||
<label for="essay_answer" class="form-label">Jawaban Referensi</label>
|
||||
<textarea name="essay_answer" id="essay_answer" class="form-control"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,45 +71,111 @@
|
|||
</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 -->
|
||||
<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 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");
|
||||
const saveButton = document.getElementById("saveButton");
|
||||
|
||||
function toggleFields() {
|
||||
if (questionType.value === "multiple_choice") {
|
||||
multipleChoiceOptions.style.display = "block";
|
||||
essayScoreField.style.display = "none";
|
||||
essayReferenceAnswerField.style.display = "none";
|
||||
btnPilihTeks.addEventListener("click", function () {
|
||||
const materialId = materialSelect.value;
|
||||
if (!materialId) {
|
||||
alert("Pilih materi terlebih dahulu.");
|
||||
return;
|
||||
}
|
||||
|
||||
essayScore.removeAttribute("required");
|
||||
essayAnswer.removeAttribute("required");
|
||||
listTeksBacaan.innerHTML = "<p>Memuat teks bacaan...</p>";
|
||||
$('#modalPilihTeks').modal('show');
|
||||
|
||||
document.querySelectorAll(".option-text, .option-score").forEach(input => {
|
||||
input.setAttribute("required", "required");
|
||||
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);
|
||||
});
|
||||
|
||||
// Tambahkan minimal 1 opsi jika belum ada
|
||||
if (answerOptions.children.length === 0) {
|
||||
addNewOption();
|
||||
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";
|
||||
|
||||
const multipleChoiceDiv = document.getElementById("multipleChoiceOptions");
|
||||
const essayScoreField = document.getElementById("essayScoreField");
|
||||
const essayAnswerField = document.getElementById("essayReferenceAnswerField");
|
||||
|
||||
if (isMultipleChoice) {
|
||||
multipleChoiceDiv.style.display = "block";
|
||||
essayScoreField.style.display = "none";
|
||||
essayAnswerField.style.display = "none";
|
||||
|
||||
// Aktifkan kembali input pilihan ganda dan tambahkan required
|
||||
document.querySelectorAll("#answerOptions input").forEach(input => {
|
||||
input.removeAttribute("disabled");
|
||||
if (input.classList.contains("option-text") || input.classList.contains("option-score")) {
|
||||
input.setAttribute("required", "required");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
multipleChoiceOptions.style.display = "none";
|
||||
multipleChoiceDiv.style.display = "none";
|
||||
essayScoreField.style.display = "block";
|
||||
essayReferenceAnswerField.style.display = "block";
|
||||
essayAnswerField.style.display = "block";
|
||||
|
||||
essayScore.setAttribute("required", "required");
|
||||
essayAnswer.setAttribute("required", "required");
|
||||
|
||||
document.querySelectorAll(".option-text, .option-score").forEach(input => {
|
||||
// Nonaktifkan semua input pilihan ganda agar tidak divalidasi
|
||||
document.querySelectorAll("#answerOptions input").forEach(input => {
|
||||
input.setAttribute("disabled", "disabled");
|
||||
input.removeAttribute("required");
|
||||
});
|
||||
}
|
||||
|
|
@ -111,70 +183,59 @@ function toggleFields() {
|
|||
validateForm();
|
||||
}
|
||||
|
||||
function addNewOption() {
|
||||
let optionsCount = document.querySelectorAll(".option-group").length; // Hitung ulang indeks
|
||||
let div = document.createElement("div");
|
||||
div.classList.add("option-group", "mb-2", "d-flex", "align-items-center", "gap-2"); // Tambahkan gap agar lebih rapi
|
||||
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: 20%;" placeholder="Skor" min="0" max="100" required>
|
||||
function addNewOptionIfEmpty() {
|
||||
if (answerOptions.children.length === 0) addNewOption();
|
||||
}
|
||||
|
||||
<!-- Tambahkan margin kiri pada label -->
|
||||
function addNewOption() {
|
||||
const index = answerOptions.children.length;
|
||||
const 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[${index}][text]" class="form-control option-text" style="width: 40%;" placeholder="Opsi ${index + 1}" required>
|
||||
<input type="number" name="options[${index}][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">
|
||||
<input type="checkbox" name="options[${index}][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);
|
||||
|
||||
// Tambahkan event listener untuk tombol hapus opsi
|
||||
div.querySelector(".remove-option").addEventListener("click", function () {
|
||||
div.remove();
|
||||
updateOptionIndexes(); // Perbarui indeks setelah opsi dihapus
|
||||
updateOptionIndexes();
|
||||
validateForm();
|
||||
});
|
||||
|
||||
updateOptionIndexes(); // Pastikan indeks tetap berurutan
|
||||
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}`;
|
||||
document.querySelectorAll(".option-group").forEach((el, index) => {
|
||||
el.querySelector(".option-text").name = `options[${index}][text]`;
|
||||
el.querySelector(".option-score").name = `options[${index}][score]`;
|
||||
el.querySelector(".correct-answer").name = `options[${index}][is_correct]`;
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
const hasText = document.querySelector(".option-text");
|
||||
const hasCorrect = document.querySelector(".correct-answer:checked");
|
||||
isValid = hasText && hasCorrect;
|
||||
} else {
|
||||
isValid = essayScore.value.trim() !== "" && essayAnswer.value.trim() !== "";
|
||||
// Skor opsional, jawaban wajib
|
||||
isValid = essayAnswer.value.trim() !== "";
|
||||
}
|
||||
|
||||
saveButton.disabled = !isValid;
|
||||
|
||||
questionForm.reportValidity();
|
||||
}
|
||||
|
||||
// Event Listeners
|
||||
questionType.addEventListener("change", toggleFields);
|
||||
addOptionBtn.addEventListener("click", addNewOption);
|
||||
essayScore.addEventListener("input", validateForm);
|
||||
essayAnswer.addEventListener("input", validateForm);
|
||||
answerOptions.addEventListener("input", validateForm);
|
||||
|
||||
// Inisialisasi awal
|
||||
toggleFields();
|
||||
toggleFields(); // Inisialisasi awal
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,25 +1,44 @@
|
|||
<!-- Modal Detail Pertanyaan -->
|
||||
<div class="modal fade" id="detailPertanyaanModal{{ $question->id }}" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Detail Pertanyaan</h5>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Materi -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Materi:</label>
|
||||
<div class="form-control bg-light">
|
||||
{{ $question->material->title ?? '-' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Story Text -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Teks Bacaan:</label>
|
||||
<textarea class="form-control bg-light" readonly rows="5" style="resize: none">
|
||||
{{ $question->first_story_text->story_text ?? '-' }}
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Teks Pertanyaan -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Pertanyaan:</label>
|
||||
<textarea class="form-control bg-light" readonly
|
||||
style="height: 150px !important; overflow-y: auto !important; resize: none !important;">{{ $question->question_text }}</textarea>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Tipe Pertanyaan -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tipe Pertanyaan:</label>
|
||||
<div class="form-control bg-light">
|
||||
{{ $question->type == 'multiple_choice' ? 'Pilihan Ganda' : 'Isian' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menampilkan Opsi Jawaban jika tipe pertanyaan Pilihan Ganda -->
|
||||
|
||||
<!-- Opsi atau Jawaban -->
|
||||
@if($question->type == 'multiple_choice')
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Opsi Jawaban:</label>
|
||||
|
|
@ -40,8 +59,7 @@
|
|||
@else
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Jawaban Isian:</label>
|
||||
<textarea class="form-control bg-light" rows="5"
|
||||
readonly>{{ $question->essay_answer ?? '-' }}</textarea>
|
||||
<textarea class="form-control bg-light" rows="5" readonly>{{ $question->essay_answer ?? '-' }}</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Skor:</label>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- Modal Edit Pertanyaan -->
|
||||
<div class="modal fade" id="modalEditPertanyaan{{ $question->id }}" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Edit Pertanyaan</h5>
|
||||
|
|
@ -9,27 +9,44 @@
|
|||
<form action="{{ route('literacy_questions_update', $question->id) }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<input type="hidden" name="question_id" value="{{ $question->id }}">
|
||||
|
||||
<div class="modal-body">
|
||||
<!-- Teks Pertanyaan -->
|
||||
<div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
|
||||
<!-- Materi -->
|
||||
<div class="mb-3">
|
||||
<label for="edit_question_text" class="form-label">Pertanyaan</label>
|
||||
<textarea name="question_text" class="form-control"
|
||||
required>{{ $question->question_text }}</textarea>
|
||||
<label class="form-label">Materi:</label>
|
||||
<div class="form-control bg-light">
|
||||
{{ $question->material->title ?? '-' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Story Text -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Teks Bacaan:</label>
|
||||
<textarea class="form-control bg-light" readonly rows="5" style="resize: none">
|
||||
{{ $question->first_story_text->story_text ?? '-' }}
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Pertanyaan -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Pertanyaan</label>
|
||||
<textarea name="question_text" class="form-control" required>{{ $question->question_text }}</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Tipe Pertanyaan -->
|
||||
<div class="mb-3">
|
||||
<label for="edit_questionType" class="form-label">Tipe Pertanyaan</label>
|
||||
<label class="form-label">Tipe Pertanyaan</label>
|
||||
<select name="type" class="form-control edit_questionType" required>
|
||||
<option value="multiple_choice" {{ $question->type == 'multiple_choice' ? 'selected' : '' }}>
|
||||
Pilihan Ganda</option>
|
||||
<option value="essay" {{ $question->type == 'essay' ? 'selected' : '' }}>Isian</option>
|
||||
Pilihan Ganda
|
||||
</option>
|
||||
<option value="essay" {{ $question->type == 'essay' ? 'selected' : '' }}>
|
||||
Isian
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Opsi Jawaban -->
|
||||
<!-- Opsi Pilihan Ganda -->
|
||||
<div class="mb-3 edit_multipleChoiceOptions"
|
||||
style="display: {{ $question->type == 'multiple_choice' ? 'block' : 'none' }};">
|
||||
<label class="form-label">Opsi Jawaban</label>
|
||||
|
|
@ -44,7 +61,6 @@
|
|||
<input type="number" name="options[{{ $index }}][score]" class="form-control"
|
||||
style="width: 15%;" value="{{ $option->score }}" min="0" max="100" required>
|
||||
|
||||
<!-- Tambahkan margin kiri agar checkbox lebih rata -->
|
||||
<label class="d-flex align-items-center ms-3">
|
||||
<input type="checkbox" name="options[{{ $index }}][is_correct]" value="1"
|
||||
class="me-2" {{ $option->is_correct ? 'checked' : '' }}>
|
||||
|
|
@ -58,19 +74,18 @@ class="me-2" {{ $option->is_correct ? 'checked' : '' }}>
|
|||
<button type="button" class="btn btn-success btn-sm addOption">+ Tambah Opsi</button>
|
||||
</div>
|
||||
|
||||
<!-- Skor untuk pertanyaan Isian -->
|
||||
<!-- Isian -->
|
||||
<div id="edit_essayScoreField" class="mb-3"
|
||||
style="display: {{ $question->type == 'essay' ? 'block' : 'none' }};">
|
||||
<label for="edit_essay_score" class="form-label">Skor untuk Isian</label>
|
||||
<input type="number" name="essay_score" id="edit_essay_score" class="form-control" min="0"
|
||||
max="100" value="{{ $question->essay_score ?? '' }}" placeholder="Masukkan skor">
|
||||
<label class="form-label">Skor untuk Isian</label>
|
||||
<input type="number" name="essay_score" class="form-control" min="0" max="100"
|
||||
value="{{ $question->essay_score ?? '' }}" placeholder="Masukkan skor">
|
||||
</div>
|
||||
|
||||
<!-- Jawaban untuk Isian -->
|
||||
<div id="edit_essayReferenceAnswerField" class="mb-3"
|
||||
style="display: {{ $question->type == 'essay' ? 'block' : 'none' }};">
|
||||
<label for="edit_essay_answer" class="form-label">Jawaban Isian</label>
|
||||
<textarea name="essay_answer" id="edit_essay_answer" class="form-control"
|
||||
<label class="form-label">Jawaban Referensi</label>
|
||||
<textarea name="essay_answer" class="form-control"
|
||||
placeholder="Masukkan jawaban referensi">{{ $question->essay_answer ?? '' }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -94,6 +94,8 @@
|
|||
|
||||
Route::get('/questions', [LiteracyQuestionController::class, 'questions'])->name('literacy_teacher_questions');
|
||||
|
||||
Route::get('/materials/{id}/story-texts', [LiteracyMaterialController::class, 'getStoryTexts']);
|
||||
|
||||
Route::get('/questions/{id}/detail', [LiteracyQuestionController::class, 'show'])->name('literacy_users_detail');
|
||||
|
||||
Route::get('/questions/create', [LiteracyQuestionController::class, 'create'])
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user