boc/academy-quiz-fix.js

// Academy Quiz & Certification System
// Lägg till i varje lektion

const lessonId = document.body.dataset.lessonId || window.location.pathname.split('/').slice(-3,-1).join('');

function checkAnswer(element, isCorrect) {
  const options = document.querySelectorAll('.quiz-option');
  const feedback = document.getElementById('quizFeedback');
  
  if (!feedback) {
    console.error('quizFeedback element saknas!');
    return;
  }
  
  options.forEach(opt => {
    opt.classList.add('disabled');
    opt.onclick = null; // Ta bort klick-händelse
  });
  
  if (isCorrect) {
    element.classList.add('correct');
    feedback.innerHTML = '<strong>✅ Rätt!</strong> Bra jobbat! Du kan gå vidare till nästa lektion.';
    feedback.style.background = '#d4edda';
    feedback.style.color = '#155724';
    feedback.style.border = '1px solid #c3e6cb';
    
    // Visa "Nästa lektion"-knapp
    const nextBtn = document.getElementById('nextLessonBtn');
    if (nextBtn) nextBtn.style.display = 'inline-flex';
  } else {
    element.classList.add('wrong');
    feedback.innerHTML = '<strong>❌ Inte riktigt.</strong> Tänk igenom svaret en gång till. Läs igenom materialet och försök igen.';
    feedback.style.background = '#f8d7da';
    feedback.style.color = '#721c24';
    feedback.style.border = '1px solid #f5c6cb';
    
    // Lägg till "Försök igen"-knapp
    const retryBtn = document.createElement('button');
    retryBtn.className = 'retry-btn';
    retryBtn.textContent = '🔄 Försök igen';
    retryBtn.onclick = () => location.reload();
    feedback.appendChild(document.createElement('br'));
    feedback.appendChild(retryBtn);
  }
  
  feedback.classList.add('show');
  feedback.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function completeLesson() {
  let completedLessons = JSON.parse(localStorage.getItem('academyProgress') || '[]');
  
  if (!completedLessons.includes(lessonId)) {
    completedLessons.push(lessonId);
    localStorage.setItem('academyProgress', JSON.stringify(completedLessons));
    
    // Uppdatera UI
    const btn = document.getElementById('completeBtn');
    if (btn) {
      btn.textContent = '✅ Lektion klar!';
      btn.classList.add('completed');
      btn.disabled = true;
    }
    
    // Visa certifierings-framsteg
    updateProgressDisplay();
    
    // Konfetti-effekt
    showConfetti();
  }
}

function updateProgressDisplay() {
  const completedLessons = JSON.parse(localStorage.getItem('academyProgress') || '[]');
  const totalLessons = 22; // Totalt antal lektioner
  const progress = Math.round((completedLessons.length / totalLessons) * 100);
  
  // Uppdatera progress bar om den finns
  const progressBar = document.getElementById('academyProgress');
  if (progressBar) {
    progressBar.style.width = progress + '%';
    progressBar.textContent = progress + '%';
  }
  
  // Uppdatera certifierings-status
  const certStatus = document.getElementById('certStatus');
  if (certStatus) {
    if (progress >= 100) {
      certStatus.innerHTML = '🎓 <strong>Certifierad Zoomer!</strong> Du har slutfört alla lektioner.';
      certStatus.style.background = '#d4edda';
    } else {
      certStatus.innerHTML = `📚 <strong>${completedLessons.length} av ${totalLessons}</strong> lektioner slutförda (${progress}%)`;
    }
  }
}

function showConfetti() {
  // Enkel konfetti-effekt
  const colors = ['#0066FF', '#00C853', '#FF3B30', '#FF9500', '#AF52DE'];
  for (let i = 0; i < 50; i++) {
    const confetti = document.createElement('div');
    confetti.style.position = 'fixed';
    confetti.style.left = Math.random() * 100 + 'vw';
    confetti.style.top = '-10px';
    confetti.style.width = '10px';
    confetti.style.height = '10px';
    confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
    confetti.style.borderRadius = '50%';
    confetti.style.zIndex = '9999';
    confetti.style.pointerEvents = 'none';
    document.body.appendChild(confetti);
    
    const duration = 2000 + Math.random() * 2000;
    confetti.animate([
      { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
      { transform: `translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
    ], {
      duration: duration,
      easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
    }).onfinish = () => confetti.remove();
  }
}

// Initiera
updateProgressDisplay();

// Exportera funktioner för global användning
window.checkAnswer = checkAnswer;
window.completeLesson = completeLesson;