🐾
Hunde-Persönlichkeitstest
10 Fragen — finde heraus welcher der 4 Persönlichkeitstypen deinen Hund am besten beschreibt!
${Object.values(TYPEN).map(t => `
`).join('')}
`;
document.getElementById('quiz-start-btn').addEventListener('click', _startQuiz);
}
// ----------------------------------------------------------
// QUIZ STARTEN
// ----------------------------------------------------------
function _startQuiz() {
_current = 0;
_scores = { A:0, B:0, C:0, D:0 };
_answers = [];
_renderQuestion();
}
// ----------------------------------------------------------
// FRAGE RENDERN
// ----------------------------------------------------------
function _renderQuestion() {
const q = FRAGEN[_current];
const pct = Math.round((_current / FRAGEN.length) * 100);
_container.innerHTML = `
Frage ${_current + 1} von ${FRAGEN.length}
${pct}%
${q.frage}
${q.antworten.map((a, i) => `
`).join('')}
`;
_container.querySelectorAll('.quiz-answer-btn').forEach(btn => {
btn.addEventListener('click', () => _answerQuestion(btn.dataset.typ));
btn.addEventListener('mouseenter', () => {
btn.style.borderColor = 'var(--c-primary)';
btn.style.background = 'var(--c-primary-subtle, rgba(var(--c-primary-rgb,59,130,246),.08))';
});
btn.addEventListener('mouseleave', () => {
if (!btn.classList.contains('selected')) {
btn.style.borderColor = 'var(--c-border)';
btn.style.background = 'var(--c-surface)';
}
});
});
}
// ----------------------------------------------------------
// ANTWORT VERARBEITEN
// ----------------------------------------------------------
function _answerQuestion(typ) {
_scores[typ]++;
_answers.push(typ);
_current++;
if (_current < FRAGEN.length) {
// Kurze Animation — zeige Auswahl kurz grün
_renderQuestion();
} else {
_calcAndShowResult();
}
}
// ----------------------------------------------------------
// AUSWERTUNG
// ----------------------------------------------------------
function _calcAndShowResult() {
// Mehrheits-Typ finden; bei Gleichstand letzter bestimmender Typ
let maxScore = 0;
let winner = _answers[_answers.length - 1]; // Fallback: letzte Antwort
for (const [typ, score] of Object.entries(_scores)) {
if (score > maxScore) {
maxScore = score;
winner = typ;
}
}
// Bei Gleichstand: letzter in _answers der einen der Max-Score-Typen hat
const maxTypes = Object.entries(_scores)
.filter(([, s]) => s === maxScore)
.map(([t]) => t);
if (maxTypes.length > 1) {
for (let i = _answers.length - 1; i >= 0; i--) {
if (maxTypes.includes(_answers[i])) { winner = _answers[i]; break; }
}
}
_saveResult(winner, _scores);
_renderResult(TYPEN[winner], _scores, false);
}
// ----------------------------------------------------------
// ERGEBNIS RENDERN
// ----------------------------------------------------------
function _renderResult(typ, scores, fromStorage) {
const dogName = _appState?.activeDog?.name || 'dein Hund';
const shareText = `${dogName} ist ${typ.name} ${typ.emoji} — macht den Test auf ban.yaro.de!`;
const scoreBars = Object.entries(scores)
.sort(([,a],[,b]) => b - a)
.map(([t, s]) => {
const tp = TYPEN[t];
const pct = Math.round((s / FRAGEN.length) * 100);
return `
${typ.emoji}
Persönlichkeitstyp
${typ.name}
${typ.desc}
Stärken
${typ.staerken.map(s => `
${s}`).join('')}
Empfohlene Aktivitäten
${typ.aktivitaetLabels.map(a => `
${a}`).join('')}
${typ.aktivitaeten.map(a => `
`).join('')}
Typische Rassen
${typ.rassen.map(r => `
${r}`).join('')}
`;
// Share
document.getElementById('quiz-share-btn')?.addEventListener('click', async () => {
if (navigator.share) {
try {
await navigator.share({ text: shareText, url: 'https://ban.yaro.de' });
} catch {}
} else {
await navigator.clipboard.writeText(shareText);
UI.toast.success('In die Zwischenablage kopiert!');
}
});
// Neustart
document.getElementById('quiz-restart-btn')?.addEventListener('click', () => {
localStorage.removeItem(LS_KEY);
_startQuiz();
});
}
// ----------------------------------------------------------
// LOCALSTORAGE
// ----------------------------------------------------------
function _saveResult(typ, scores) {
try {
localStorage.setItem(LS_KEY, JSON.stringify({ typ, scores, ts: Date.now() }));
} catch {}
}
function _loadResult() {
try {
const raw = localStorage.getItem(LS_KEY);
if (!raw) return null;
return JSON.parse(raw);
} catch { return null; }
}
// ----------------------------------------------------------
// PUBLIC
// ----------------------------------------------------------
return { init, refresh, onDogChange };
})();