Perbaikan modul data karyawan dan staff + modul SOP import
This commit is contained in:
Iwit
@@ -11,7 +11,7 @@
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; }
|
||||
</style>
|
||||
|
||||
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('type', '') }}' }">
|
||||
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('question_type', '') }}' }" @update-type.window="questionType = $event.detail">
|
||||
<div class="mb-6 flex items-center space-x-3">
|
||||
<a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
|
||||
@@ -20,106 +20,114 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<form action="{{ url('admin/exams/questions') }}" method="POST" enctype="multipart/form-data" class="p-6 sm:p-8 space-y-6">
|
||||
<form action="{{ url('admin/exams/questions') }}" method="POST" class="p-6 sm:p-8 space-y-6">
|
||||
@csrf
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Departemen</label>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Subject / Materi Pembelajaran <span class="text-red-500">*</span></label>
|
||||
<select name="subject_id" class="select2 w-full text-sm" required>
|
||||
<option value="">-- Pilih Judul Materi --</option>
|
||||
@foreach($subjects as $subj)
|
||||
<option value="{{ $subj->id }}" {{ old('subject_id') == $subj->id ? 'selected' : '' }}>{{ $subj->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Departemen Khusus</label>
|
||||
<select name="department_id" class="select2 w-full text-sm">
|
||||
<option value="">-- Berlaku untuk Semua Departemen --</option>
|
||||
<option value="">-- Berlaku Semua Departemen --</option>
|
||||
@foreach($departments as $dept)
|
||||
<option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Posisi / Jabatan</label>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Posisi / Jabatan Khusus</label>
|
||||
<select name="position_id" class="select2 w-full text-sm">
|
||||
<option value="">-- Berlaku untuk Semua Jabatan --</option>
|
||||
<option value="">-- Berlaku Semua Jabatan --</option>
|
||||
@foreach($positions as $pos)
|
||||
<option value="{{ $pos->id }}" {{ old('position_id') == $pos->id ? 'selected' : '' }}>{{ $pos->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Materi SOP / Modul <span class="text-red-500">*</span></label>
|
||||
<select name="training_matrix_id" class="select2 w-full text-sm" required>
|
||||
<option value="">-- Pilih Materi Pembelajaran --</option>
|
||||
@foreach($matrices as $matrix)
|
||||
<option value="{{ $matrix->id }}" {{ old('training_matrix_id') == $matrix->id ? 'selected' : '' }}>{{ $matrix->title }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2">
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Tipe Soal <span class="text-red-500">*</span></label>
|
||||
<select name="type" x-model="questionType" class="select2 w-full text-sm" required>
|
||||
<option value="">-- Pilih Tipe Pertanyaan --</option>
|
||||
<option value="single">Single Choice (Satu Jawaban Benar)</option>
|
||||
<option value="multiple">Multiple Choice (Banyak Jawaban Benar)</option>
|
||||
<option value="true_false">True / False (Benar / Salah)</option>
|
||||
<option value="descriptive">Descriptive (Esai / Uraian)</option>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Tipe Bentuk Soal <span class="text-red-500">*</span></label>
|
||||
<select name="question_type" class="select2 w-full text-sm" required id="question_type_select">
|
||||
<option value="">-- Pilih Tipe --</option>
|
||||
<option value="single" {{ old('question_type') == 'single' ? 'selected' : '' }}>Single Choice (1 Kunci Jawaban)</option>
|
||||
<option value="multiple" {{ old('question_type') == 'multiple' ? 'selected' : '' }}>Multiple Choice (Multi Jawaban)</option>
|
||||
<option value="true_false" {{ old('question_type') == 'true_false' ? 'selected' : '' }}>True / False (Benar / Salah)</option>
|
||||
<option value="descriptive" {{ old('question_type') == 'descriptive' ? 'selected' : '' }}>Descriptive (Esai / Uraian)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Tingkat Kesulitan <span class="text-red-500">*</span></label>
|
||||
<select name="level" class="select2 w-full text-sm" required>
|
||||
<option value="mudah" {{ old('level') == 'mudah' ? 'selected' : '' }}>Mudah (Easy)</option>
|
||||
<option value="sedang" {{ old('level') == 'sedang' ? 'selected' : '' }}>Sedang (Medium)</option>
|
||||
<option value="sulit" {{ old('level') == 'sulit' ? 'selected' : '' }}>Sulit (Hard)</option>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Tingkat Kesulitan Soal <span class="text-red-500">*</span></label>
|
||||
<select name="question_level" class="select2 w-full text-sm" required>
|
||||
<option value="mudah" {{ old('question_level') == 'mudah' ? 'selected' : '' }}>Mudah</option>
|
||||
<option value="sedang" {{ old('question_level') == 'sedang' ? 'selected' : '' }}>Sedang</option>
|
||||
<option value="sulit" {{ old('question_level') == 'sulit' ? 'selected' : '' }}>Sulit</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Passing Grade</label>
|
||||
<input type="number" name="passing_grade" value="{{ old('passing_grade', 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Durasi (Detik)</label>
|
||||
<input type="number" name="duration" value="{{ old('duration', 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-slate-100 pt-6">
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Pertanyaan <span class="text-red-500">*</span></label>
|
||||
<textarea name="question_text" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm" placeholder="Tuliskan pertanyaan di sini...">{{ old('question_text') }}</textarea>
|
||||
<label class="block text-sm font-bold text-slate-700 mb-2">Isi Teks Pertanyaan <span class="text-red-500">*</span></label>
|
||||
<textarea name="question_text" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 text-sm" placeholder="Masukkan konten pertanyaan...">{{ old('question_text') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-slate-100 pt-6" x-show="questionType !== ''" x-transition>
|
||||
<h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-l-4 border-blue-500 pl-3">Pengaturan Jawaban</h3>
|
||||
<h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-l-4 border-blue-500 pl-3">Kerangka Pilihan & Kunci Jawaban</h3>
|
||||
|
||||
<div x-show="questionType === 'single'" style="display: none;" class="space-y-3">
|
||||
<p class="text-xs text-slate-500 mb-3">Pilih satu radio button sebagai jawaban yang benar.</p>
|
||||
@foreach(['A', 'B', 'C', 'D'] as $opt)
|
||||
<div x-show="questionType === 'single'" class="space-y-3">
|
||||
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_b', 'D' => 'option_d', 'E' => 'option_e'] as $key => $column)
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="radio" name="correct_answer" value="{{ $opt }}" class="w-5 h-5 text-blue-600 border-slate-300 focus:ring-blue-500 cursor-pointer">
|
||||
<input type="text" name="options[{{ $opt }}]" placeholder="Opsi Jawaban {{ $opt }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:border-blue-500">
|
||||
<input type="radio" name="correct_answer" value="{{ $key }}" class="w-5 h-5 text-blue-600 border-slate-300">
|
||||
<input type="text" name="{{ $column }}" placeholder="Isi Pilihan {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm">
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div x-show="questionType === 'multiple'" style="display: none;" class="space-y-3">
|
||||
<p class="text-xs text-slate-500 mb-3">Centang lebih dari satu checkbox untuk jawaban yang benar.</p>
|
||||
@foreach(['A', 'B', 'C', 'D', 'E'] as $opt)
|
||||
<div x-show="questionType === 'multiple'" class="space-y-3">
|
||||
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $column)
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" name="correct_answers[]" value="{{ $opt }}" class="w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500 cursor-pointer">
|
||||
<input type="text" name="options[{{ $opt }}]" placeholder="Opsi Jawaban {{ $opt }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:border-blue-500">
|
||||
<input type="checkbox" name="correct_answer[]" value="{{ $key }}" class="w-5 h-5 text-blue-600 border-slate-300 rounded">
|
||||
<input type="text" name="{{ $column }}" placeholder="Isi Pilihan {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm">
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div x-show="questionType === 'true_false'" style="display: none;" class="flex gap-6">
|
||||
<div x-show="questionType === 'true_false'" class="flex gap-6">
|
||||
<label class="flex items-center gap-2 p-4 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 w-48">
|
||||
<input type="radio" name="correct_answer" value="true" class="w-5 h-5 text-emerald-600 border-slate-300 focus:ring-emerald-500">
|
||||
<input type="radio" name="correct_answer" value="True" class="w-5 h-5 text-emerald-600 border-slate-300">
|
||||
<span class="font-bold text-slate-700">True (Benar)</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 p-4 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 w-48">
|
||||
<input type="radio" name="correct_answer" value="false" class="w-5 h-5 text-red-600 border-slate-300 focus:ring-red-500">
|
||||
<input type="radio" name="correct_answer" value="False" class="w-5 h-5 text-red-600 border-slate-300">
|
||||
<span class="font-bold text-slate-700">False (Salah)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div x-show="questionType === 'descriptive'" style="display: none;">
|
||||
<p class="text-xs text-slate-500 mb-3">Tuliskan kata kunci / panduan jawaban benar untuk penilai (Opsional).</p>
|
||||
<textarea name="expected_answer" rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500" placeholder="Kata kunci jawaban..."></textarea>
|
||||
<div x-show="questionType === 'descriptive'">
|
||||
<p class="text-xs text-slate-400 mb-2">Tuliskan panduan atau esensi jawaban yang dinilai benar:</p>
|
||||
<textarea name="option_a" rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500" placeholder="Catatan/Kunci Esai untuk Korektor..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 flex justify-end space-x-3 border-t border-slate-100 mt-8">
|
||||
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</a>
|
||||
<button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md transition-all">Simpan Soal</button>
|
||||
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl">Batal</a>
|
||||
<button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md">Simpan Soal</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -128,17 +136,8 @@
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2({ width: '100%' });
|
||||
|
||||
// Menjembatani Select2 dengan Alpine.js agar x-model ter-update saat Select2 berubah
|
||||
$('select[name="type"]').on('change', function() {
|
||||
// Ambil elemen div pembungkus Alpine (x-data) dan ubah nilainya
|
||||
let el = document.querySelector('[x-data]');
|
||||
if(el && el.__x) {
|
||||
el.__x.$data.questionType = $(this).val();
|
||||
} else {
|
||||
// Alternatif dispatch event custom jika pakai versi Alpine V3 terbaru
|
||||
el.dispatchEvent(new CustomEvent('update-type', { detail: $(this).val() }));
|
||||
}
|
||||
$('#question_type_select').on('change', function() {
|
||||
window.dispatchEvent(new CustomEvent('update-type', { detail: $(this).val() }));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user