`).join(''); }); } // ============================================ // NAVIGATION // ============================================ function startAssessment() { showSection('context'); } function showSection(sectionId) { document.querySelectorAll('.section').forEach(s => s.classList.remove('active')); const target = document.getElementById(`section-${sectionId}`); if (target) { target.classList.add('active'); updateProgressNav(); window.scrollTo({ top: 0, behavior: 'smooth' }); } } function updateProgressNav() { const sections = ['context', 'security', 'data', 'infrastructure', 'cloud', 'governance', 'results']; const activeSection = document.querySelector('.section.active'); const activeId = activeSection ? activeSection.id.replace('section-', '') : 'intro'; document.querySelectorAll('.progress-item').forEach(item => { const section = item.dataset.section; item.classList.remove('active', 'completed'); if (section === activeId) { item.classList.add('active'); } else if (assessmentData[section]) { const questions = assessmentData[section].questions; const answered = questions.filter(q => answers[q.id]).length; if (answered === questions.length) { item.classList.add('completed'); } } }); } document.querySelectorAll('.progress-item').forEach(item => { item.addEventListener('click', () => { const section = item.dataset.section; if (section) showSection(section); }); }); // ============================================ // ANSWERS // ============================================ function selectAnswer(questionId, value, element) { answers[questionId] = value; saveState(); const options = element.parentElement.querySelectorAll('.option'); options.forEach(opt => { opt.classList.remove('selected', 'selected-partial', 'selected-no'); }); if (value === 'yes') element.classList.add('selected'); else if (value === 'partial') element.classList.add('selected-partial'); else element.classList.add('selected-no'); updateProgressNav(); } // ============================================ // RESULTS CALCULATION // ============================================ function calculateResults() { const scores = {}; const actions = []; Object.keys(assessmentData).forEach(category => { const categoryData = assessmentData[category]; const questions = categoryData.questions; let totalScore = 0; let maxScore = questions.length * 100; questions.forEach(q => { const answer = answers[q.id] || 'no'; let questionScore = 0; if (answer === 'yes') questionScore = 100; else if (answer === 'partial') questionScore = 50; else questionScore = 0; totalScore += questionScore; // Calculate priority score for action items // Higher is better priority (should be done first) // Formula: Impact * 3 + (10 - Cost) + (10 - Difficulty) const priorityScore = (q.impact * 3) + (10 - q.cost) + (10 - q.difficulty); const isQuickWin = q.impact >= 7 && q.cost { if (a.completed !== b.completed) { return a.completed ? 1 : -1; } return b.priorityScore - a.priorityScore; }); renderResults(scores, actions); showSection('results'); } function renderResults(scores, actions) { // Overall score const overallScore = Math.round( Object.values(scores).reduce((a, b) => a + b, 0) / Object.keys(scores).length ); document.querySelector('.overall-score-value').textContent = overallScore; let desc = ''; if (overallScore >= 80) desc = 'Fremragende it-modenhed'; else if (overallScore >= 60) desc = 'God it-modenhed med forbedringsmuligheder'; else if (overallScore >= 40) desc = 'Middel it-modenhed – flere områder kan styrkes'; else desc = 'Tidlig fase – betydelige forbedringsmuligheder'; document.getElementById('overallDesc').textContent = desc; // Scores list const scoresList = document.getElementById('scoresList'); const colors = { security: '#dc2626', data: '#2563eb', infrastructure: '#7c3aed', cloud: '#0891b2', governance: '#059669' }; scoresList.innerHTML = Object.keys(scores).map(key => { const score = scores[key]; const color = colors[key] || '#6b7280'; return ` `; }).join(''); // Radar chart drawRadarChart(scores); // Action items renderActionPlan(actions); } function drawRadarChart(scores) { const canvas = document.getElementById('radarChart'); const ctx = canvas.getContext('2d'); const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = Math.min(centerX, centerY) - 40; ctx.clearRect(0, 0, canvas.width, canvas.height); const categories = Object.keys(scores); const numCategories = categories.length; const angleStep = (2 * Math.PI) / numCategories; const startAngle = -Math.PI / 2; // Draw grid circles ctx.strokeStyle = '#e5e7eb'; ctx.lineWidth = 1; for (let i = 1; i { const angle = startAngle + idx * angleStep; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo( centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle) ); ctx.stroke(); }); // Draw data polygon ctx.beginPath(); categories.forEach((key, idx) => { const angle = startAngle + idx * angleStep; const value = scores[key] / 100; const x = centerX + radius * value * Math.cos(angle); const y = centerY + radius * value * Math.sin(angle); if (idx === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); }); ctx.closePath(); ctx.fillStyle = 'rgba(13, 148, 136, 0.25)'; ctx.fill(); ctx.strokeStyle = '#0d9488'; ctx.lineWidth = 2; ctx.stroke(); // Draw data points categories.forEach((key, idx) => { const angle = startAngle + idx * angleStep; const value = scores[key] / 100; const x = centerX + radius * value * Math.cos(angle); const y = centerY + radius * value * Math.sin(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = '#0d9488'; ctx.fill(); }); // Draw labels ctx.fillStyle = '#374151'; ctx.font = '12px Poppins , Poppins'; ctx.textAlign = 'center'; categories.forEach((key, idx) => { const angle = startAngle + idx * angleStep; const labelRadius = radius + 25; const x = centerX + labelRadius * Math.cos(angle); const y = centerY + labelRadius * Math.sin(angle); ctx.fillText(assessmentData[key].shortName, x, y + 4); }); } function renderActionPlan(actions) { const improvements = actions.filter(a => !a.completed); const completed = actions.filter(a => a.completed); document.getElementById('countImprovements').textContent = improvements.length; document.getElementById('countCompleted').textContent = completed.length; renderActionList(currentTab === 'improvements' ? improvements : completed); } function renderActionList(items) { const container = document.getElementById('actionList'); if (items.length === 0) { container.innerHTML = ` `; return; } const isCompleted = currentTab === 'completed'; container.innerHTML = items.map((action, idx) => { const priorityClass = getPriorityClass(action); return ` `; }).join(''); } function renderDots(value, max, isHigh) { const filled = Math.ceil(value / 2); const total = Math.ceil(max / 2); let dots = ''; for (let i = 0; i