${opt.text} +${opt.xp} XP `; optEl.onclick = () => toggleOption(optEl, idx); optionsContainer.appendChild(optEl); }); startTimer(); } function toggleOption(element, optionIndex) { playSound('toggle'); const checkmarkIcon = element.querySelector('.opt-icon'); const pos = quizState.selectedOptionIndices.indexOf(optionIndex); if (pos === -1) { quizState.selectedOptionIndices.push(optionIndex); element.classList.add('selected'); if (checkmarkIcon) checkmarkIcon.classList.remove('opacity-0'); } else { quizState.selectedOptionIndices.splice(pos, 1); element.classList.remove('selected'); if (checkmarkIcon) checkmarkIcon.classList.add('opacity-0'); } const nextBtn = document.getElementById('nextBtn'); nextBtn.disabled = quizState.selectedOptionIndices.length === 0; } function nextQuestion() { if (quizState.selectedOptionIndices.length === 0) return; clearInterval(quizState.timerInterval); const q = QUESTIONS[quizState.currentQuestionIndex]; let gainedXP = 0; quizState.selectedOptionIndices.forEach(idx => { const opt = q.options[idx]; quizState.scores[opt.archetype]++; gainedXP += opt.xp; quizState.totalChoicesMade++; quizState.chosenOptionsDetail.push({ questionId: q.id, optionId: opt.id, text: opt.text, archetype: opt.archetype }); }); let bonusText = `+${gainedXP} XP Guadagnati`; if (quizState.timer >= 7) { const speedBonus = 20; gainedXP += speedBonus; quizState.fastStreakCount++; bonusText += ` | 🔥 Bonus Speed +${speedBonus} XP!`; playSound('bonus'); } else { quizState.fastStreakCount = 0; } const streakBadge = document.getElementById('streakBadge'); if (quizState.fastStreakCount >= 2) { streakBadge.classList.remove('hidden'); } else { streakBadge.classList.add('hidden'); } quizState.xp += gainedXP; document.getElementById('xpDisplay').innerText = `${quizState.xp} XP`; document.getElementById('bonusFeedback').innerText = bonusText; if (quizState.currentQuestionIndex + 1 { loadQuestion(quizState.currentQuestionIndex + 1); }, 400); } else { setTimeout(() => { showResults(); }, 400); } } function updateLevelUI() { const levelBadge = document.getElementById('levelBadge'); if (quizState.xp maxCount) { maxCount = val; dominant = key; } } return ARCHETYPES[dominant]; } async function showResults() { showScreen('resultScreen'); const archetype = calculateDominantArchetype(); try { confetti({ particleCount: 140, spread: 85, origin: { y: 0.6 } }); } catch(e) {} playSound('win'); document.getElementById('resultAvatar').innerText = currentUser.avatar; document.getElementById('archetypeTitle').innerText = archetype.name; document.getElementById('archetypeDescription').innerText = archetype.desc; document.getElementById('finalXP').innerText = `${quizState.xp} XP`; document.getElementById('finalCount').innerText = quizState.totalChoicesMade; const badgesContainer = document.getElementById('badgesContainer'); badgesContainer.innerHTML = ''; const unlockedBadges = [ archetype.badge, { icon: "fa-bolt text-amber-400", label: "Energy Saver" }, { icon: "fa-award text-lime-400", label: "Green Champion" } ]; unlockedBadges.forEach(b => { const bEl = document.createElement('div'); bEl.className = 'glass-panel p-2.5 rounded-xl border border-emerald-400/30 text-center flex flex-col items-center justify-center gap-1'; bEl.innerHTML = ` ${b.label} `; badgesContainer.appendChild(bEl); }); // Salvataggio su WordPress Database via REST API const saveBadge = document.getElementById('saveStatusBadge'); saveBadge.className = 'inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-amber-500/20 border border-amber-400/30 text-xs font-bold text-amber-300'; saveBadge.innerHTML = ` Salvataggio privato su WordPress...`; const payload = { userName: currentUser.name, avatar: currentUser.avatar, archetypeKey: archetype.key, archetypeName: archetype.name, totalXP: quizState.xp, choicesCount: quizState.totalChoicesMade, chosenOptionsDetail: quizState.chosenOptionsDetail }; const isSavedWP = await window.saveResponseToWordPress(payload); if (isSavedWP) { saveBadge.className = 'inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-emerald-500/20 border border-emerald-400/30 text-xs font-bold text-emerald-300'; saveBadge.innerHTML = ` Risultati salvati nel DB del tuo sito (GDPR Ok)!`; showToast("Risposta memorizzata in modo sicuro nel tuo database WordPress!"); } else { saveBadge.className = 'inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-cyan-500/20 border border-cyan-400/30 text-xs font-bold text-cyan-300'; saveBadge.innerHTML = ` Dati salvati in locale per la sessione`; } } window.renderDashboardData = function() { const allData = (window.cloudResponsesData && window.cloudResponsesData.length > 0) ? window.cloudResponsesData : window.localResponsesData; const totalStudents = allData.length; document.getElementById('statTotalStudents').innerText = totalStudents; if (totalStudents === 0) { document.getElementById('statAvgXP').innerText = "0 XP"; document.getElementById('statTotalChoices').innerText = "0"; document.getElementById('statTopArchetype').innerText = "Nessun Dato"; document.getElementById('archetypeDistributionBars').innerHTML = `

Nessuna compilazione ancora salvata.

`; document.getElementById('studentTableBody').innerHTML = `In attesa dei primi test inviati...`; document.getElementById('questionsBreakdownContainer').innerHTML = `

I dati delle risposte appariranno dopo la prima compilazione.

`; return; } let sumXP = 0; let sumChoices = 0; const archetypeCounts = { TECH_OPTIMIZER: 0, PIONEER_SOLAR: 0, ECO_WARRIOR: 0, COMMUNITY_LEADER: 0 }; const optionSelectionCounts = {}; allData.forEach(item => { sumXP += (item.totalXP || 0); sumChoices += (item.choicesCount || 0); if (item.archetypeKey && archetypeCounts[item.archetypeKey] !== undefined) { archetypeCounts[item.archetypeKey]++; } if (item.chosenOptionsDetail && Array.isArray(item.chosenOptionsDetail)) { item.chosenOptionsDetail.forEach(opt => { if (opt.optionId) { optionSelectionCounts[opt.optionId] = (optionSelectionCounts[opt.optionId] || 0) + 1; } }); } }); document.getElementById('statAvgXP').innerText = `${Math.round(sumXP / totalStudents)} XP`; document.getElementById('statTotalChoices').innerText = sumChoices; let maxArchCount = -1; let topArchKey = 'TECH_OPTIMIZER'; for (const [k, v] of Object.entries(archetypeCounts)) { if (v > maxArchCount) { maxArchCount = v; topArchKey = k; } } document.getElementById('statTopArchetype').innerText = ARCHETYPES[topArchKey].name; const barsContainer = document.getElementById('archetypeDistributionBars'); barsContainer.innerHTML = ''; Object.keys(ARCHETYPES).forEach(k => { const count = archetypeCounts[k] || 0; const pct = Math.round((count / totalStudents) * 100); const arch = ARCHETYPES[k]; const barEl = document.createElement('div'); barEl.className = 'space-y-1'; barEl.innerHTML = ` `; barsContainer.appendChild(barEl); }); const qContainer = document.getElementById('questionsBreakdownContainer'); qContainer.innerHTML = ''; QUESTIONS.forEach(q => { const qBox = document.createElement('div'); qBox.className = 'bg-slate-950/60 p-3.5 rounded-xl border border-white/5 space-y-2'; let optionsHtml = ''; q.options.forEach(opt => { const timesPicked = optionSelectionCounts[opt.id] || 0; const optPct = Math.round((timesPicked / totalStudents) * 100); optionsHtml += ` `; }); qBox.innerHTML = `

${q.title}

`; qContainer.appendChild(qBox); }); const tbody = document.getElementById('studentTableBody'); tbody.innerHTML = ''; const sortedData = [...allData].sort((a,b) => (b.timestamp || 0) - (a.timestamp || 0)); sortedData.forEach(row => { const tr = document.createElement('tr'); tr.className = 'hover:bg-white/5 transition'; const dateStr = new Date(row.timestamp || Date.now()).toLocaleString('it-IT', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit' }); tr.innerHTML = ` ${row.avatar || '🎮'} ${row.userName || 'Anonimo'} ${row.archetypeName || 'N/D'} ${row.totalXP || 0} XP ${row.choicesCount || 0} ${dateStr} `; tbody.appendChild(tr); }); }; function exportToCSV() { const allData = (window.cloudResponsesData && window.cloudResponsesData.length > 0) ? window.cloudResponsesData : window.localResponsesData; if (!allData || allData.length === 0) { showToast("Nessun dato disponibile da esportare!"); return; } let csvContent = "ID,Gamertag,Avatar,Archetipo,XP_Totali,Azioni_Scelte,Data_Ora\n"; allData.forEach((row, index) => { const dateStr = new Date(row.timestamp || Date.now()).toLocaleString('it-IT'); const cleanName = (row.userName || '').replace(/"/g, '""'); const cleanArchetype = (row.archetypeName || '').replace(/"/g, '""'); csvContent += `"${index + 1}","${cleanName}","${row.avatar || '🎮'}","${cleanArchetype}",${row.totalXP || 0},${row.choicesCount || 0},"${dateStr}"\n`; }); const blob = new Blob(["\ufeff" + csvContent], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.setAttribute("href", url); a.setAttribute("download", `ecoquest_wordpress_dati_${new Date().toISOString().slice(0, 10)}.csv`); document.body.appendChild(a); a.click(); document.body.removeChild(a); playSound('click'); showToast("Dataset esportato in CSV con successo!"); } function shareResults() { const archetype = calculateDominantArchetype(); const shareText = `⚡ Ho completato EcoQuest Challenge! Il mio profilo energetico è "${archetype.name}" con ${quizState.xp} XP e ${quizState.totalChoicesMade} azioni green scelte! Metti alla prova le tue Eco-Skill!`; const dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.value = shareText; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); playSound('click'); showToast("Risultato EcoQuest copiato negli appunti!"); } function showToast(message) { const toast = document.getElementById('toast'); const toastMessage = document.getElementById('toastMessage'); if (!toast || !toastMessage) return; toastMessage.innerText = message; toast.classList.remove('opacity-0', 'translate-y-10', 'pointer-events-none'); toast.classList.add('opacity-100', 'translate-y-0'); setTimeout(() => { toast.classList.remove('opacity-100', 'translate-y-0'); toast.classList.add('opacity-0', 'translate-y-10', 'pointer-events-none'); }, 3000); } function restartQuiz() { playSound('click'); quizState = { currentQuestionIndex: 0, xp: 0, selectedOptionIndices: [], scores: { TECH_OPTIMIZER: 0, PIONEER_SOLAR: 0, ECO_WARRIOR: 0, COMMUNITY_LEADER: 0 }, totalChoicesMade: 0, chosenOptionsDetail: [], timer: 15, timerInterval: null, fastStreakCount: 0 }; document.getElementById('xpDisplay').innerText = '0 XP'; showScreen('introScreen'); }