gitea/Abiyasa_Putra_Prasetya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: change views for literacy questions

Browse Source
This commit is contained in:
abiyasa05 2025-06-21 11:23:41 +07:00
parent 5de96db598
commit ca3f0431ef
4 changed files with 195 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/create.blade.php
View File

@ -1,24 +1,33 @@
<!-- Modal Tambah Pertanyaan --> <!-- Modal Tambah Pertanyaan -->
<div class="modal fade" id="modalTambahPertanyaan" tabindex="-1" role="dialog"> <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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Tambah Pertanyaan</h5> <h5 class="modal-title">Tambah Pertanyaan</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
</div> </div>
<form action="{{ route('literacy_questions_store') }}" method="POST" id="questionForm"> <form action="{{ route('literacy_questions_store') }}" method="POST" id="createQuestionForm">
@csrf @csrf
<div class="modal-body"> <div class="modal-body">
{{-- <!-- Pilihan Materi --> <!-- Pilihan Materi -->
<div class="mb-3"> <div class="mb-3">
<label for="material_id" class="form-label">Materi</label> <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> <option value="">Pilih Materi</option>
@foreach ($materials as $material) @foreach ($materials as $material)
<option value="{{ $material->id }}">{{ $material->title }}</option> <option value="{{ $material->id }}">{{ $material->title }}</option>
@endforeach @endforeach
</select> </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 --> <!-- Teks Pertanyaan -->
<div class="mb-3"> <div class="mb-3">
@ -35,25 +44,22 @@
</select> </select>
</div> </div>
<!-- Opsi Jawaban (Untuk Pilihan Ganda) --> <!-- Opsi Jawaban -->
<div id="multipleChoiceOptions" class="mb-3"> <div id="multipleChoiceOptions" class="mb-3">
<label class="form-label">Opsi Jawaban</label> <label class="form-label">Opsi Jawaban</label>
<div id="answerOptions"></div> <div id="answerOptions"></div>
<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>
</div> </div>
<!-- Skor untuk pertanyaan Isian --> <!-- Skor & Jawaban 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" max="100">
placeholder="Masukkan skor">
</div> </div>
<!-- Jawaban untuk Isian -->
<div id="essayReferenceAnswerField" class="mb-3"> <div id="essayReferenceAnswerField" class="mb-3">
<label for="essay_answer" class="form-label">Jawaban Isian</label> <label for="essay_answer" class="form-label">Jawaban Referensi</label>
<textarea name="essay_answer" id="essay_answer" class="form-control" <textarea name="essay_answer" id="essay_answer" class="form-control"></textarea>
placeholder="Masukkan jawaban referensi"></textarea>
</div> </div>
</div> </div>
@ -65,45 +71,111 @@
</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">&times;</button>
</div>
<div class="modal-body" id="listTeksBacaan">
<p>Memuat teks bacaan...</p>
</div>
</div>
</div>
</div>
<!-- Script -->
<script> <script>
document.addEventListener("DOMContentLoaded", function () { 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 questionType = document.getElementById("questionType");
const multipleChoiceOptions = document.getElementById("multipleChoiceOptions");
const answerOptions = document.getElementById("answerOptions"); const answerOptions = document.getElementById("answerOptions");
const addOptionBtn = document.getElementById("addOption"); 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 essayScore = document.getElementById("essay_score");
const essayAnswer = document.getElementById("essay_answer"); const essayAnswer = document.getElementById("essay_answer");
const questionForm = document.getElementById("questionForm"); const saveButton = document.getElementById("saveButton");
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, '&quot;')}">
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() { function toggleFields() {
if (questionType.value === "multiple_choice") { const isMultipleChoice = questionType.value === "multiple_choice";
multipleChoiceOptions.style.display = "block";
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"; essayScoreField.style.display = "none";
essayReferenceAnswerField.style.display = "none"; essayAnswerField.style.display = "none";
essayScore.removeAttribute("required"); // Aktifkan kembali input pilihan ganda dan tambahkan required
essayAnswer.removeAttribute("required"); document.querySelectorAll("#answerOptions input").forEach(input => {
input.removeAttribute("disabled");
document.querySelectorAll(".option-text, .option-score").forEach(input => { if (input.classList.contains("option-text") || input.classList.contains("option-score")) {
input.setAttribute("required", "required"); input.setAttribute("required", "required");
}
}); });
// Tambahkan minimal 1 opsi jika belum ada
if (answerOptions.children.length === 0) {
addNewOption();
}
} else { } else {
multipleChoiceOptions.style.display = "none"; multipleChoiceDiv.style.display = "none";
essayScoreField.style.display = "block"; essayScoreField.style.display = "block";
essayReferenceAnswerField.style.display = "block"; essayAnswerField.style.display = "block";
essayScore.setAttribute("required", "required"); // Nonaktifkan semua input pilihan ganda agar tidak divalidasi
essayAnswer.setAttribute("required", "required"); document.querySelectorAll("#answerOptions input").forEach(input => {
input.setAttribute("disabled", "disabled");
document.querySelectorAll(".option-text, .option-score").forEach(input => {
input.removeAttribute("required"); input.removeAttribute("required");
}); });
} }
@ -111,70 +183,59 @@ function toggleFields() {
validateForm(); validateForm();
} }
function addNewOptionIfEmpty() {
if (answerOptions.children.length === 0) addNewOption();
}
function addNewOption() { function addNewOption() {
let optionsCount = document.querySelectorAll(".option-group").length; // Hitung ulang indeks const index = answerOptions.children.length;
let div = document.createElement("div"); const div = document.createElement("div");
div.classList.add("option-group", "mb-2", "d-flex", "align-items-center", "gap-2"); // Tambahkan gap agar lebih rapi div.classList.add("option-group", "mb-2", "d-flex", "align-items-center", "gap-2");
div.innerHTML = ` 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="text" name="options[${index}][text]" class="form-control option-text" style="width: 40%;" placeholder="Opsi ${index + 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> <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">
<!-- Tambahkan margin kiri pada label --> <input type="checkbox" name="options[${index}][is_correct]" value="1" class="correct-answer me-1">
<label class="d-flex align-items-center ms-2"> <span>Benar</span>
<input type="checkbox" name="options[${optionsCount}][is_correct]" value="1" class="correct-answer me-1"> </label>
<span>Benar</span> <button type="button" class="btn btn-danger btn-sm ms-2 remove-option">X</button>
</label> `;
<button type="button" class="btn btn-danger btn-sm ms-2 remove-option">X</button>
`;
answerOptions.appendChild(div); answerOptions.appendChild(div);
// Tambahkan event listener untuk tombol hapus opsi
div.querySelector(".remove-option").addEventListener("click", function () { div.querySelector(".remove-option").addEventListener("click", function () {
div.remove(); div.remove();
updateOptionIndexes(); // Perbarui indeks setelah opsi dihapus updateOptionIndexes();
validateForm(); validateForm();
}); });
updateOptionIndexes(); // Pastikan indeks tetap berurutan
validateForm();
} }
function updateOptionIndexes() { function updateOptionIndexes() {
document.querySelectorAll(".option-group").forEach((option, index) => { document.querySelectorAll(".option-group").forEach((el, index) => {
option.querySelector(".option-text").name = `options[${index}][text]`; el.querySelector(".option-text").name = `options[${index}][text]`;
option.querySelector(".option-score").name = `options[${index}][score]`; el.querySelector(".option-score").name = `options[${index}][score]`;
option.querySelector(".correct-answer").name = `options[${index}][is_correct]`; el.querySelector(".correct-answer").name = `options[${index}][is_correct]`;
option.querySelector(".option-text").placeholder = `Opsi ${index + 1}`;
}); });
} }
function validateForm() { function validateForm() {
let isValid = false; let isValid = false;
if (questionType.value === "multiple_choice") { if (questionType.value === "multiple_choice") {
let options = document.querySelectorAll(".option-text"); const hasText = document.querySelector(".option-text");
let scores = document.querySelectorAll(".option-score"); const hasCorrect = document.querySelector(".correct-answer:checked");
let checkedCorrect = document.querySelector(".correct-answer:checked"); isValid = hasText && hasCorrect;
isValid = options.length > 0 && scores.length > 0 && checkedCorrect;
} else { } else {
isValid = essayScore.value.trim() !== "" && essayAnswer.value.trim() !== ""; // Skor opsional, jawaban wajib
isValid = essayAnswer.value.trim() !== "";
} }
saveButton.disabled = !isValid; saveButton.disabled = !isValid;
questionForm.reportValidity();
} }
// Event Listeners
questionType.addEventListener("change", toggleFields); questionType.addEventListener("change", toggleFields);
addOptionBtn.addEventListener("click", addNewOption); addOptionBtn.addEventListener("click", addNewOption);
essayScore.addEventListener("input", validateForm); essayScore.addEventListener("input", validateForm);
essayAnswer.addEventListener("input", validateForm); essayAnswer.addEventListener("input", validateForm);
answerOptions.addEventListener("input", validateForm); answerOptions.addEventListener("input", validateForm);
// Inisialisasi awal toggleFields(); // Inisialisasi awal
toggleFields();
}); });
</script> </script>

28
Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/detail.blade.php
View File

@ -1,25 +1,44 @@
<!-- Modal Detail Pertanyaan --> <!-- Modal Detail Pertanyaan -->
<div class="modal fade" id="detailPertanyaanModal{{ $question->id }}" tabindex="-1" role="dialog"> <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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Detail Pertanyaan</h5> <h5 class="modal-title">Detail Pertanyaan</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
</div> </div>
<div class="modal-body"> <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"> <div class="mb-3">
<label class="form-label">Pertanyaan:</label> <label class="form-label">Pertanyaan:</label>
<textarea class="form-control bg-light" readonly <textarea class="form-control bg-light" readonly
style="height: 150px !important; overflow-y: auto !important; resize: none !important;">{{ $question->question_text }}</textarea> style="height: 150px !important; overflow-y: auto !important; resize: none !important;">{{ $question->question_text }}</textarea>
</textarea>
</div> </div>
<!-- Tipe Pertanyaan -->
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Tipe Pertanyaan:</label> <label class="form-label">Tipe Pertanyaan:</label>
<div class="form-control bg-light"> <div class="form-control bg-light">
{{ $question->type == 'multiple_choice' ? 'Pilihan Ganda' : 'Isian' }} {{ $question->type == 'multiple_choice' ? 'Pilihan Ganda' : 'Isian' }}
</div> </div>
</div> </div>
<!-- Menampilkan Opsi Jawaban jika tipe pertanyaan Pilihan Ganda -->
<!-- Opsi atau Jawaban -->
@if($question->type == 'multiple_choice') @if($question->type == 'multiple_choice')
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Opsi Jawaban:</label> <label class="form-label">Opsi Jawaban:</label>
@ -40,8 +59,7 @@
@else @else
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Jawaban Isian:</label> <label class="form-label">Jawaban Isian:</label>
<textarea class="form-control bg-light" rows="5" <textarea class="form-control bg-light" rows="5" readonly>{{ $question->essay_answer ?? '-' }}</textarea>
readonly>{{ $question->essay_answer ?? '-' }}</textarea>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Skor:</label> <label class="form-label">Skor:</label>

53
Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/edit.blade.php
View File

@ -1,6 +1,6 @@
<!-- Modal Edit Pertanyaan --> <!-- Modal Edit Pertanyaan -->
<div class="modal fade" id="modalEditPertanyaan{{ $question->id }}" tabindex="-1" role="dialog"> <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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Edit Pertanyaan</h5> <h5 class="modal-title">Edit Pertanyaan</h5>
@ -9,27 +9,44 @@
<form action="{{ route('literacy_questions_update', $question->id) }}" method="POST"> <form action="{{ route('literacy_questions_update', $question->id) }}" method="POST">
@csrf @csrf
@method('PUT') @method('PUT')
<input type="hidden" name="question_id" value="{{ $question->id }}">
<div class="modal-body"> <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
<!-- Teks Pertanyaan --> <!-- Materi -->
<div class="mb-3"> <div class="mb-3">
<label for="edit_question_text" class="form-label">Pertanyaan</label> <label class="form-label">Materi:</label>
<textarea name="question_text" class="form-control" <div class="form-control bg-light">
required>{{ $question->question_text }}</textarea> {{ $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> </div>
<!-- Tipe Pertanyaan --> <!-- Tipe Pertanyaan -->
<div class="mb-3"> <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> <select name="type" class="form-control edit_questionType" required>
<option value="multiple_choice" {{ $question->type == 'multiple_choice' ? 'selected' : '' }}> <option value="multiple_choice" {{ $question->type == 'multiple_choice' ? 'selected' : '' }}>
Pilihan Ganda</option> Pilihan Ganda
<option value="essay" {{ $question->type == 'essay' ? 'selected' : '' }}>Isian</option> </option>
<option value="essay" {{ $question->type == 'essay' ? 'selected' : '' }}>
Isian
</option>
</select> </select>
</div> </div>
<!-- Opsi Jawaban --> <!-- Opsi Pilihan Ganda -->
<div class="mb-3 edit_multipleChoiceOptions" <div class="mb-3 edit_multipleChoiceOptions"
style="display: {{ $question->type == 'multiple_choice' ? 'block' : 'none' }};"> style="display: {{ $question->type == 'multiple_choice' ? 'block' : 'none' }};">
<label class="form-label">Opsi Jawaban</label> <label class="form-label">Opsi Jawaban</label>
@ -44,7 +61,6 @@
<input type="number" name="options[{{ $index }}][score]" class="form-control" <input type="number" name="options[{{ $index }}][score]" class="form-control"
style="width: 15%;" value="{{ $option->score }}" min="0" max="100" required> 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"> <label class="d-flex align-items-center ms-3">
<input type="checkbox" name="options[{{ $index }}][is_correct]" value="1" <input type="checkbox" name="options[{{ $index }}][is_correct]" value="1"
class="me-2" {{ $option->is_correct ? 'checked' : '' }}> 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> <button type="button" class="btn btn-success btn-sm addOption">+ Tambah Opsi</button>
</div> </div>
<!-- Skor untuk pertanyaan Isian --> <!-- Isian -->
<div id="edit_essayScoreField" class="mb-3" <div id="edit_essayScoreField" class="mb-3"
style="display: {{ $question->type == 'essay' ? 'block' : 'none' }};"> style="display: {{ $question->type == 'essay' ? 'block' : 'none' }};">
<label for="edit_essay_score" class="form-label">Skor untuk Isian</label> <label class="form-label">Skor untuk Isian</label>
<input type="number" name="essay_score" id="edit_essay_score" class="form-control" min="0" <input type="number" name="essay_score" class="form-control" min="0" max="100"
max="100" value="{{ $question->essay_score ?? '' }}" placeholder="Masukkan skor"> value="{{ $question->essay_score ?? '' }}" placeholder="Masukkan skor">
</div> </div>
<!-- Jawaban untuk Isian -->
<div id="edit_essayReferenceAnswerField" class="mb-3" <div id="edit_essayReferenceAnswerField" class="mb-3"
style="display: {{ $question->type == 'essay' ? 'block' : 'none' }};"> style="display: {{ $question->type == 'essay' ? 'block' : 'none' }};">
<label for="edit_essay_answer" class="form-label">Jawaban Isian</label> <label class="form-label">Jawaban Referensi</label>
<textarea name="essay_answer" id="edit_essay_answer" class="form-control" <textarea name="essay_answer" class="form-control"
placeholder="Masukkan jawaban referensi">{{ $question->essay_answer ?? '' }}</textarea> placeholder="Masukkan jawaban referensi">{{ $question->essay_answer ?? '' }}</textarea>
</div> </div>
</div> </div>

2
Penilaian Literasi/iClOP-V2/routes/literacy_routes.php
View File

@ -94,6 +94,8 @@
Route::get('/questions', [LiteracyQuestionController::class, 'questions'])->name('literacy_teacher_questions'); 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/{id}/detail', [LiteracyQuestionController::class, 'show'])->name('literacy_users_detail');
Route::get('/questions/create', [LiteracyQuestionController::class, 'create']) Route::get('/questions/create', [LiteracyQuestionController::class, 'create'])