From e613c0da9668909d5e5fd2dd517fe0d0b3f16709 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Sat, 21 Jun 2025 11:23:41 +0700
Subject: [PATCH] update: change views for literacy questions

---
 .../teacher/questions/modals/create.blade.php | 211 +++++++++++-------
 .../teacher/questions/modals/detail.blade.php |  28 ++-
 .../teacher/questions/modals/edit.blade.php   |  53 +++--
 .../iClOP-V2/routes/literacy_routes.php       |   2 +
 4 files changed, 195 insertions(+), 99 deletions(-)

diff --git a/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/create.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/create.blade.php
index 29bb59c..d64b3ce 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/create.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/create.blade.php	
@@ -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">&times;</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>
+                                <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">&times;</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");
+
+        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() {
-            if (questionType.value === "multiple_choice") {
-                multipleChoiceOptions.style.display = "block";
+            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";
-                essayReferenceAnswerField.style.display = "none";
+                essayAnswerField.style.display = "none";
 
-                essayScore.removeAttribute("required");
-                essayAnswer.removeAttribute("required");
-
-                document.querySelectorAll(".option-text, .option-score").forEach(input => {
-                    input.setAttribute("required", "required");
+                // 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");
+                    }
                 });
-
-                // Tambahkan minimal 1 opsi jika belum ada
-                if (answerOptions.children.length === 0) {
-                    addNewOption();
-                }
             } 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 addNewOptionIfEmpty() {
+            if (answerOptions.children.length === 0) addNewOption();
+        }
+
         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
+            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[${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>
-
-        <!-- Tambahkan margin kiri pada label -->
-        <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>
-    `;
+            <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[${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>
\ No newline at end of file
diff --git a/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/detail.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/detail.blade.php
index 894ac29..b4d375b 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/detail.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/detail.blade.php	
@@ -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">&times;</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>
diff --git a/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/edit.blade.php b/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/edit.blade.php
index 25b99e4..15084e1 100644
--- a/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/edit.blade.php	
+++ b/Penilaian Literasi/iClOP-V2/resources/views/literacy/teacher/questions/modals/edit.blade.php	
@@ -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>
diff --git a/Penilaian Literasi/iClOP-V2/routes/literacy_routes.php b/Penilaian Literasi/iClOP-V2/routes/literacy_routes.php
index a358ed3..9644052 100644
--- a/Penilaian Literasi/iClOP-V2/routes/literacy_routes.php	
+++ b/Penilaian Literasi/iClOP-V2/routes/literacy_routes.php	
@@ -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'])