575 lines
18 KiB
PHP
575 lines
18 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Perhitungan SAW - Pemilihan Mata Pelajaran</title>
|
|
|
|
<!-- favicon -->
|
|
<link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- custom css link -->
|
|
<link rel="stylesheet" href="{{ asset('user/css/userstyle.css') }}">
|
|
|
|
|
|
<!-- google font link -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- preload images-->
|
|
<link rel="preload" as="image" href="{{ asset('user/images/hero-banner.png') }}">
|
|
<style>
|
|
.locked-section {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.locked-card {
|
|
background: #f8f9fa;
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 15px;
|
|
padding: 40px 20px;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.lock-icon {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.locked-card h3 {
|
|
color: #6c757d;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.locked-card p {
|
|
color: #6c757d;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.alert {
|
|
background-color: #d1ecf1;
|
|
border: 1px solid #bee5eb;
|
|
color: #0c5460;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.alert strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.alert i {
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body id="top">
|
|
@include('header')
|
|
<main>
|
|
<article>
|
|
<!-- HERO -->
|
|
@include('hero')
|
|
|
|
<!-- SERVICE (KRITERIA) -->
|
|
@include('kriteria')
|
|
|
|
<!-- FEATURE (TENTANG) -->
|
|
@include('tentang')
|
|
|
|
<!-- PERHITUNGAN -->
|
|
@include('perhitungan')
|
|
|
|
<!-- QUIZ SECTION -->
|
|
@include('quiz')
|
|
|
|
@if($showHistory ?? false)
|
|
@include('riwayat')
|
|
@endif
|
|
|
|
<!-- HASIL SECTION -->
|
|
@if(request()->has('sesi_id'))
|
|
@include('hasil')
|
|
@endif
|
|
|
|
|
|
</article>
|
|
</main>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-bottom">
|
|
<p class="copyright">© 2025 Sistem Pemilihan Mata Pelajaran. All Rights Reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- #BACK TO TOP -->
|
|
<a href="#top" class="back-top-btn has-after active" aria-label="back to top" data-back-top-btn>
|
|
<ion-icon name="arrow-up" aria-hidden="true"></ion-icon>
|
|
</a>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="{{ asset('user/js/userscript.js') }}" defer></script>
|
|
|
|
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
|
|
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Profile dropdown functionality
|
|
const profileBtn = document.querySelector('.profile-btn');
|
|
const dropdownMenu = document.querySelector('.dropdown-menu');
|
|
|
|
if (profileBtn && dropdownMenu) {
|
|
profileBtn.addEventListener('click', function() {
|
|
dropdownMenu.classList.toggle('active');
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
if (!profileBtn.contains(event.target) && !dropdownMenu.contains(event.target)) {
|
|
dropdownMenu.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
// Replace your existing quiz JavaScript with this improved version
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let currentSection = 1;
|
|
let currentKurikulum = null;
|
|
let questionsLoaded = false;
|
|
let allowAutoScroll = false; // Flag to control auto-scroll behavior
|
|
|
|
// Function to show section with optional scroll control
|
|
function showSection(sectionNumber, enableScroll = false) {
|
|
document.querySelectorAll('.quiz-section').forEach(section => {
|
|
section.classList.remove('active');
|
|
});
|
|
const targetSection = document.querySelector(`.quiz-section[data-section="${sectionNumber}"]`);
|
|
if (targetSection) {
|
|
targetSection.classList.add('active');
|
|
currentSection = sectionNumber;
|
|
|
|
// Only scroll if explicitly enabled or if auto-scroll flag is true
|
|
if (enableScroll || allowAutoScroll) {
|
|
setTimeout(() => {
|
|
const sectionTop = targetSection.offsetTop;
|
|
const quizHeader = document.querySelector('.quiz-header');
|
|
const headerOffset = quizHeader ? quizHeader.offsetHeight + 20 : 80;
|
|
|
|
window.scrollTo({
|
|
top: sectionTop - headerOffset,
|
|
behavior: 'smooth'
|
|
});
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Function to validate current section
|
|
function validateCurrentSection() {
|
|
const activeSection = document.querySelector('.quiz-section.active');
|
|
if (!activeSection) return true;
|
|
|
|
const sectionNum = activeSection.getAttribute('data-section');
|
|
|
|
// Special validation for section 2 (curriculum)
|
|
if (sectionNum === '2') {
|
|
const selectedKurikulum = document.querySelector('.kurikulum-radio:checked');
|
|
if (!selectedKurikulum) {
|
|
alert('Harap pilih salah satu kurikulum terlebih dahulu');
|
|
return false;
|
|
}
|
|
document.getElementById('selectedKurikulum').value = selectedKurikulum.value;
|
|
return true;
|
|
}
|
|
|
|
// Validate radio buttons in other sections
|
|
const radioGroups = {};
|
|
const radios = activeSection.querySelectorAll('input[type="radio"]');
|
|
radios.forEach(radio => {
|
|
if (!radioGroups[radio.name]) radioGroups[radio.name] = [];
|
|
radioGroups[radio.name].push(radio);
|
|
});
|
|
|
|
for (const groupName in radioGroups) {
|
|
const checked = radioGroups[groupName].some(radio => radio.checked);
|
|
if (!checked) {
|
|
alert('Harap pilih salah satu opsi untuk setiap pertanyaan');
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// Function to load curriculum questions
|
|
async function loadKurikulumQuestions(kurikulumId) {
|
|
try {
|
|
console.log('Loading questions for curriculum ID:', kurikulumId);
|
|
|
|
// Show loading
|
|
showLoadingSection();
|
|
|
|
const response = await fetch(`/kriteria-by-kurikulum?kurikulum_id=${kurikulumId}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
console.log('Response status:', response.status);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('Received data:', data);
|
|
|
|
// Check if data is valid
|
|
if (!data || !Array.isArray(data) || data.length === 0) {
|
|
throw new Error('No criteria data received for this curriculum');
|
|
}
|
|
|
|
// Generate question sections
|
|
generateQuestionSections(data);
|
|
|
|
// Hide loading
|
|
hideLoadingSection();
|
|
|
|
questionsLoaded = true;
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error loading questions:', error);
|
|
|
|
// Hide loading
|
|
hideLoadingSection();
|
|
|
|
// Show error message
|
|
showErrorSection(error.message);
|
|
|
|
// Reset curriculum selection
|
|
resetKurikulumSelection();
|
|
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Function to generate question sections
|
|
function generateQuestionSections(kriterias) {
|
|
const form = document.getElementById('quizForm');
|
|
|
|
// Remove existing question sections (section 3 and beyond)
|
|
const existingSections = form.querySelectorAll('.quiz-section[data-section]:not([data-section="1"]):not([data-section="2"]):not([data-section="loading"]):not([data-section="error"])');
|
|
existingSections.forEach(section => section.remove());
|
|
|
|
let sectionNumber = 3;
|
|
|
|
kriterias.forEach((kriteria, kriteriaIndex) => {
|
|
// Create section container for this criteria
|
|
const sectionDiv = document.createElement('div');
|
|
sectionDiv.className = 'quiz-section';
|
|
sectionDiv.setAttribute('data-section', sectionNumber.toString());
|
|
|
|
// Criteria header
|
|
const headerHTML = `
|
|
<h3 class="quiz-subtitle">${kriteria.nama}</h3>
|
|
${kriteria.deskripsi ? `<p class="section-description">${kriteria.deskripsi}</p>` : ''}
|
|
`;
|
|
|
|
let questionsHTML = '';
|
|
|
|
// Generate questions for each subcriteria
|
|
if (kriteria.subkriterias && kriteria.subkriterias.length > 0) {
|
|
kriteria.subkriterias.forEach((subkriteria, subIndex) => {
|
|
questionsHTML += `
|
|
<div class="form-group question-group">
|
|
<label class="question-label">${subkriteria.pertanyaan}</label>
|
|
<div class="options-container">
|
|
`;
|
|
|
|
// Generate options for this subcriteria
|
|
if (subkriteria.opsisubkriterias && subkriteria.opsisubkriterias.length > 0) {
|
|
// Get unique options
|
|
const uniqueOptions = [];
|
|
const seenOptions = new Set();
|
|
|
|
subkriteria.opsisubkriterias.forEach(opsi => {
|
|
if (!seenOptions.has(opsi.opsi)) {
|
|
seenOptions.add(opsi.opsi);
|
|
uniqueOptions.push(opsi);
|
|
}
|
|
});
|
|
|
|
uniqueOptions.forEach(opsi => {
|
|
questionsHTML += `
|
|
<div class="option-item">
|
|
<input type="radio"
|
|
id="subkriteria_${subkriteria.id}_${opsi.opsi}"
|
|
name="jawaban[${subkriteria.id}]"
|
|
value="${opsi.opsi}"
|
|
class="option-radio">
|
|
<label for="subkriteria_${subkriteria.id}_${opsi.opsi}" class="option-label">
|
|
<span class="option-marker">${opsi.opsi}</span>
|
|
</label>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
questionsHTML += `
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
// Navigation buttons
|
|
const isLast = (kriteriaIndex === kriterias.length - 1);
|
|
const navigationHTML = `
|
|
<div class="quiz-navigation">
|
|
<button type="button" class="btn btn-secondary btn-prev" data-prev="${sectionNumber - 1}">Sebelumnya</button>
|
|
${isLast ?
|
|
'<button type="submit" class="btn btn-success btn-submit">Selesai & Lihat Hasil</button>' :
|
|
`<button type="button" class="btn btn-primary btn-next" data-next="${sectionNumber + 1}">Selanjutnya</button>`
|
|
}
|
|
</div>
|
|
`;
|
|
|
|
sectionDiv.innerHTML = headerHTML + questionsHTML + navigationHTML;
|
|
form.appendChild(sectionDiv);
|
|
|
|
sectionNumber++;
|
|
});
|
|
|
|
console.log(`Generated ${kriterias.length} question sections`);
|
|
}
|
|
|
|
// Function to show loading section
|
|
function showLoadingSection() {
|
|
// Remove existing loading section
|
|
const existingLoading = document.querySelector('.loading-section');
|
|
if (existingLoading) {
|
|
existingLoading.remove();
|
|
}
|
|
|
|
const form = document.getElementById('quizForm');
|
|
const loadingDiv = document.createElement('div');
|
|
loadingDiv.className = 'quiz-section loading-section';
|
|
loadingDiv.setAttribute('data-section', 'loading');
|
|
loadingDiv.innerHTML = `
|
|
<div class="loading-container text-center">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
|
|
</div>
|
|
<h3 class="mt-3">Memuat Pertanyaan...</h3>
|
|
<p class="text-muted">Mohon tunggu sebentar</p>
|
|
</div>
|
|
`;
|
|
|
|
form.appendChild(loadingDiv);
|
|
}
|
|
|
|
// Function to hide loading section
|
|
function hideLoadingSection() {
|
|
const loadingSection = document.querySelector('.loading-section');
|
|
if (loadingSection) {
|
|
loadingSection.remove();
|
|
}
|
|
}
|
|
|
|
// Function to show error section
|
|
function showErrorSection(errorMessage) {
|
|
// Remove existing error section
|
|
const existingError = document.querySelector('.error-section');
|
|
if (existingError) {
|
|
existingError.remove();
|
|
}
|
|
|
|
const form = document.getElementById('quizForm');
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'quiz-section error-section';
|
|
errorDiv.setAttribute('data-section', 'error');
|
|
errorDiv.innerHTML = `
|
|
<div class="error-container text-center">
|
|
<div class="error-icon">
|
|
<i class="fas fa-exclamation-triangle fa-3x text-danger"></i>
|
|
</div>
|
|
<h3 class="mt-3 text-danger">Gagal Memuat Pertanyaan</h3>
|
|
<p class="text-muted">${errorMessage}</p>
|
|
<button type="button" class="btn btn-primary" onclick="location.reload()">Muat Ulang Halaman</button>
|
|
</div>
|
|
`;
|
|
|
|
form.appendChild(errorDiv);
|
|
}
|
|
|
|
// Function to reset curriculum selection
|
|
function resetKurikulumSelection() {
|
|
document.querySelectorAll('.kurikulum-card').forEach(card => {
|
|
card.classList.remove('selected');
|
|
});
|
|
document.querySelectorAll('.kurikulum-radio').forEach(radio => {
|
|
radio.checked = false;
|
|
});
|
|
document.getElementById('selectedKurikulum').value = '';
|
|
document.getElementById('nextAfterKurikulum').disabled = true;
|
|
currentKurikulum = null;
|
|
questionsLoaded = false;
|
|
}
|
|
|
|
// Event handler for curriculum card clicks
|
|
document.querySelectorAll('.kurikulum-card').forEach(card => {
|
|
card.addEventListener('click', async function() {
|
|
// Skip if card is disabled
|
|
if (this.classList.contains('disabled')) {
|
|
console.log('Card is disabled');
|
|
return;
|
|
}
|
|
|
|
// Remove selected class from all cards
|
|
document.querySelectorAll('.kurikulum-card').forEach(c => c.classList.remove('selected'));
|
|
|
|
// Add selected class to clicked card
|
|
this.classList.add('selected');
|
|
|
|
// Check radio button in card
|
|
const radio = this.querySelector('input[type="radio"]');
|
|
if (radio) {
|
|
radio.checked = true;
|
|
const kurikulumId = radio.value;
|
|
document.getElementById('selectedKurikulum').value = kurikulumId;
|
|
|
|
console.log('Selected curriculum ID:', kurikulumId);
|
|
|
|
// Load questions for this curriculum
|
|
currentKurikulum = kurikulumId;
|
|
const success = await loadKurikulumQuestions(kurikulumId);
|
|
|
|
if (success) {
|
|
// Enable next button
|
|
document.getElementById('nextAfterKurikulum').disabled = false;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Event handler for curriculum radio buttons
|
|
document.querySelectorAll('.kurikulum-radio').forEach(radio => {
|
|
radio.addEventListener('change', async function() {
|
|
console.log('Radio changed:', this.value);
|
|
|
|
// Remove selected from all cards
|
|
document.querySelectorAll('.kurikulum-card').forEach(card => card.classList.remove('selected'));
|
|
|
|
// Add selected to parent card
|
|
const parentCard = this.closest('.kurikulum-card');
|
|
if (parentCard) parentCard.classList.add('selected');
|
|
|
|
// Update hidden input
|
|
const kurikulumId = this.value;
|
|
document.getElementById('selectedKurikulum').value = kurikulumId;
|
|
|
|
// Load questions for this curriculum
|
|
currentKurikulum = kurikulumId;
|
|
const success = await loadKurikulumQuestions(kurikulumId);
|
|
|
|
if (success) {
|
|
// Enable next button
|
|
document.getElementById('nextAfterKurikulum').disabled = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Event listeners for next/prev buttons
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('btn-next')) {
|
|
const next = parseInt(e.target.getAttribute('data-next'));
|
|
|
|
// Special check when moving from section 2 to section 3
|
|
if (currentSection === 2 && next === 3) {
|
|
if (!currentKurikulum || !questionsLoaded) {
|
|
alert('Harap pilih kurikulum dan pastikan pertanyaan telah dimuat');
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (validateCurrentSection()) {
|
|
// Enable auto-scroll for manual navigation
|
|
allowAutoScroll = true;
|
|
showSection(next, true);
|
|
allowAutoScroll = false;
|
|
}
|
|
}
|
|
|
|
if (e.target.classList.contains('btn-prev')) {
|
|
const prev = parseInt(e.target.getAttribute('data-prev'));
|
|
// Enable auto-scroll for manual navigation
|
|
allowAutoScroll = true;
|
|
showSection(prev, true);
|
|
allowAutoScroll = false;
|
|
}
|
|
});
|
|
|
|
// Form submission handler
|
|
const quizForm = document.getElementById('quizForm');
|
|
if (quizForm) {
|
|
quizForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Validate all questions are answered
|
|
const allRadioGroups = {};
|
|
document.querySelectorAll('.quiz-section:not(.loading-section):not(.error-section) input[type="radio"]').forEach(radio => {
|
|
if (!allRadioGroups[radio.name]) allRadioGroups[radio.name] = [];
|
|
allRadioGroups[radio.name].push(radio);
|
|
});
|
|
|
|
for (const groupName in allRadioGroups) {
|
|
const checked = allRadioGroups[groupName].some(radio => radio.checked);
|
|
if (!checked) {
|
|
alert('Harap pastikan semua pertanyaan telah dijawab');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Validate curriculum
|
|
const kurikulumVal = document.getElementById('selectedKurikulum').value;
|
|
if (!kurikulumVal) {
|
|
alert('Harap pilih kurikulum terlebih dahulu');
|
|
return;
|
|
}
|
|
|
|
// Submit form
|
|
console.log('Submitting form...');
|
|
this.submit();
|
|
});
|
|
}
|
|
|
|
// Initialize - show first section WITHOUT auto-scroll
|
|
showSection(1, false);
|
|
|
|
// Expose functions for debugging
|
|
window.showSection = showSection;
|
|
window.loadKurikulumQuestions = loadKurikulumQuestions;
|
|
window.resetKurikulumSelection = resetKurikulumSelection;
|
|
});
|
|
</script>
|
|
|
|
|
|
@stack('scripts')
|
|
</body>
|
|
|
|
</html> |