Znip Academy

Znip Academy Logo

Henry Schneider

document.addEventListener("DOMContentLoaded", function() { // Konfiguration der Rollennamen const roleNames = { 'A': 'Der Analytiker / Beobachter (A)', 'B': 'Der Umsetzer (B)', 'C': 'Der Spezialist (C)', 'D': 'Der Teamarbeiter (D)', 'E': 'Der Macher (E)', 'F': 'Der Wegbereiter (F)', 'G': 'Der Koordinator (G)', 'H': 'Der Perfektionist (H)', 'I': 'Der Erfinder / Neuerer (I)' }; const sections = document.querySelectorAll('.section-step'); if(sections.length === 0) return; // Abbruch, falls wir auf der falschen Seite sind sections.forEach(function(section) { const inputs = section.querySelectorAll('.score-input'); const sumDisplay = section.querySelector('.current-sum'); const validBox = section.querySelector('.znip-validation-box'); const nextBtn = section.querySelector('.next-step-btn, .calc-result-btn'); inputs.forEach(function(input) { input.addEventListener('input', function() { updateSection(section, inputs, sumDisplay, validBox, nextBtn); }); }); // Initialer Check updateSection(section, inputs, sumDisplay, validBox, nextBtn); }); function updateSection(section, inputs, sumDisplay, validBox, btn) { let sum = 0; inputs.forEach(function(inp) { const val = parseInt(inp.value); sum += isNaN(val) ? 0 : val; }); if(sumDisplay) sumDisplay.textContent = sum; if(validBox) { if (sum === 10) { validBox.classList.remove('sum-error'); validBox.classList.add('sum-ok'); validBox.innerHTML = 'Perfekt! Summe ist 10.'; if(btn) btn.disabled = false; } else { validBox.classList.remove('sum-ok'); validBox.classList.add('sum-error'); let diff = 10 - sum; if(diff > 0) validBox.innerHTML = 'Noch ' + diff + ' Punkte verteilen (Summe: ' + sum + '/10)'; else validBox.innerHTML = 'Zu viele Punkte! Bitte ' + Math.abs(diff) + ' entfernen.'; if(btn) btn.disabled = true; } } } // Navigation Buttons const nextBtns = document.querySelectorAll('.next-step-btn'); nextBtns.forEach(function(btn) { btn.addEventListener('click', function(e) { e.preventDefault(); const currentSection = this.closest('.section-step'); const nextSection = currentSection.nextElementSibling; if(nextSection && nextSection.classList.contains('section-step')) { currentSection.classList.add('hidden'); nextSection.classList.remove('hidden'); // Scroll nach oben für bessere UX const wrapper = document.getElementById('znip-test-wrapper'); if(wrapper) wrapper.scrollIntoView({behavior: "smooth"}); } }); }); // Ergebnis Button const resultBtn = document.querySelector('.calc-result-btn'); if(resultBtn) { resultBtn.addEventListener('click', function(e) { e.preventDefault(); calculateResults(); }); } function calculateResults() { let scores = { A:0, B:0, C:0, D:0, E:0, F:0, G:0, H:0, I:0 }; document.querySelectorAll('.score-input').forEach(function(input) { const role = input.getAttribute('data-role'); const val = parseInt(input.value); const cleanVal = isNaN(val) ? 0 : val; if(scores.hasOwnProperty(role)) { scores[role] += cleanVal; } }); // Sortieren const sortedRoles = Object.keys(scores).sort(function(a, b) { return scores[b] - scores[a]; }); const top1 = sortedRoles[0]; const top2 = sortedRoles[1]; const display1 = document.getElementById('role-1-display'); const display2 = document.getElementById('role-2-display'); if(display1) display1.textContent = roleNames[top1] + " (" + scores[top1] + " Pkt)"; if(display2) display2.textContent = roleNames[top2] + " (" + scores[top2] + " Pkt)"; // Ansicht wechseln document.querySelectorAll('.section-step').forEach(function(el) { el.classList.add('hidden'); }); const resScreen = document.getElementById('result-screen'); if(resScreen) { resScreen.classList.remove('hidden'); resScreen.scrollIntoView({behavior: "smooth"}); } } });