177 lines
8.6 KiB
PHP
177 lines
8.6 KiB
PHP
@extends('student.layouts.app')
|
|
@section('title', 'Mulai Tes Potensi Karier | Career Development and Consultation (CDC)')
|
|
@section('content')
|
|
<div class="mt-5 mb-5 card mb-xl-10">
|
|
<div class="border-0 cursor-pointer card-header">
|
|
<div class="m-0 card-title">
|
|
<h3 class="m-0 fw-bolder">Tes Potensi Karier</h3>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="card-body border-top p-9">
|
|
<div class="flex-wrap d-flex align-items-center">
|
|
<div class="flex-row-fluid">
|
|
<div class="row">
|
|
<div class="mb-2 col-lg-12 mb-lg-0">
|
|
<form action="{{ route('student.quisionnare.quest.store') }}" method="POST" class="form"
|
|
enctype="multipart/form-data">
|
|
@csrf
|
|
@if ($hasStatement == 0)
|
|
<div class="text-center">
|
|
<p class="text-gray-700 fs-4 fw-bold py-7">
|
|
Tes potensi karier sedang disiapkan, harap hubungi admin.
|
|
</p>
|
|
</div>
|
|
@endif
|
|
@foreach ($quests as $index => $quest)
|
|
<div class="mb-8 fv-row question" data-index="{{ $index }}"
|
|
style="{{ $index >= 9 ? 'display: none;' : '' }}">
|
|
<label class="mb-3 form-label fs-4 fw-bolder">
|
|
{{ $quest->statement }}</label>
|
|
<div class="d-flex align-items-center">
|
|
<label class="form-check form-check-custom form-check-solid me-10">
|
|
<input class="form-check-input h-20px w-20px" type="radio"
|
|
value="{{ $quest->id }}" name="{{ $quest->statement_code }}"
|
|
required />
|
|
<span class="form-check-label fw-bold">Ya</span>
|
|
</label>
|
|
<label class="form-check form-check-custom form-check-solid">
|
|
<input class="form-check-input h-20px w-20px" type="radio"
|
|
name="{{ $quest->statement_code }}" required />
|
|
<span class="form-check-label fw-bold">Tidak</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@if ($hasStatement > 0)
|
|
<div class="mt-4 d-flex justify-content-between">
|
|
<button type="button" class="btn btn-primary" id="prev"
|
|
style="display: none;" onclick="showPrevious()">Kembali</button>
|
|
<div class="ms-auto">
|
|
<button type="button" class="btn btn-primary" id="next"
|
|
onclick="showNext()">Selanjutnya</button>
|
|
<button type="submit" class="btn btn-primary me-2" id="submit"
|
|
style="display: none;">Selesai</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@push('scripts')
|
|
{{-- <script>
|
|
// Lakukan reset radio button saat halaman dimuat
|
|
window.addEventListener('load', function() {
|
|
const radioButtons = document.querySelectorAll('input[type="radio"]');
|
|
radioButtons.forEach(radioButton => {
|
|
radioButton.checked = false;
|
|
});
|
|
});
|
|
</script> --}}
|
|
|
|
<script>
|
|
// Variabel untuk melacak kelompok soal yang sedang ditampilkan
|
|
let currentStart = 0;
|
|
const questionsPerPage = 9;
|
|
const totalQuestions = {{ $quests->count() }};
|
|
|
|
// Fungsi untuk menyimpan pilihan ke localStorage
|
|
function saveSelection(id, value) {
|
|
localStorage.setItem(id, value);
|
|
}
|
|
|
|
// Fungsi untuk memuat pilihan yang disimpan saat halaman dimuat
|
|
function loadSelections() {
|
|
document.querySelectorAll('input[type="radio"]').forEach(radio => {
|
|
const id = radio.dataset.id;
|
|
const savedValue = localStorage.getItem(id);
|
|
|
|
if (savedValue && radio.value === savedValue) {
|
|
radio.checked = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Fungsi untuk menampilkan soal berikutnya
|
|
function showNext() {
|
|
// Validasi apakah semua radio button dalam kelompok soal saat ini sudah terisi
|
|
if (!validateCurrentGroup()) {
|
|
return;
|
|
}
|
|
|
|
const questions = document.querySelectorAll('.question');
|
|
const nextStart = currentStart + questionsPerPage;
|
|
if (nextStart < totalQuestions) {
|
|
for (let i = currentStart; i < currentStart + questionsPerPage; i++) {
|
|
if (questions[i]) {
|
|
questions[i].style.display = 'none';
|
|
}
|
|
}
|
|
for (let i = nextStart; i < nextStart + questionsPerPage; i++) {
|
|
if (questions[i]) {
|
|
questions[i].style.display = 'block';
|
|
}
|
|
}
|
|
currentStart = nextStart;
|
|
document.getElementById('prev').style.display = 'block';
|
|
if (currentStart + questionsPerPage >= totalQuestions) {
|
|
document.getElementById('next').style.display = 'none';
|
|
document.getElementById('submit').style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fungsi untuk menampilkan soal sebelumnya
|
|
function showPrevious() {
|
|
const questions = document.querySelectorAll('.question');
|
|
const prevStart = currentStart - questionsPerPage;
|
|
if (prevStart >= 0) {
|
|
for (let i = currentStart; i < currentStart + questionsPerPage; i++) {
|
|
if (questions[i]) {
|
|
questions[i].style.display = 'none';
|
|
}
|
|
}
|
|
for (let i = prevStart; i < prevStart + questionsPerPage; i++) {
|
|
if (questions[i]) {
|
|
questions[i].style.display = 'block';
|
|
}
|
|
}
|
|
currentStart = prevStart;
|
|
document.getElementById('next').style.display = 'block';
|
|
document.getElementById('submit').style.display = 'none';
|
|
if (currentStart === 0) {
|
|
document.getElementById('prev').style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fungsi untuk memvalidasi apakah semua pertanyaan dalam kelompok saat ini sudah dijawab
|
|
function validateCurrentGroup() {
|
|
const questions = document.querySelectorAll('.question');
|
|
for (let i = currentStart; i < currentStart + questionsPerPage; i++) {
|
|
if (questions[i]) {
|
|
const radios = questions[i].querySelectorAll('input[type="radio"]');
|
|
const isAnswered = Array.from(radios).some(radio => radio.checked);
|
|
if (!isAnswered) {
|
|
questions[i].scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'center'
|
|
});
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// Panggil fungsi loadSelections saat halaman dimuat
|
|
document.addEventListener('DOMContentLoaded', loadSelections);
|
|
</script>
|
|
@endpush
|