🧠 Díl 8: Funkce Hodnotový kvíz
Skvěle, Sleduj — jdeme tvořit další funkci pro web Volby priorit, a to Hodnotový kvíz, který návštěvníkům pomůže objevit, která hodnota je pro ně nejdůležitější. Je to zábavné, interaktivní a zároveň hluboké — ideální pro zapojení i zamyšlení.
🧠 Funkce: Hodnotový kvíz
🎯 Co to je?
- Návštěvník odpoví na několik otázek
- Na základě odpovědí se zobrazí výsledek: „Tvoje prioritní hodnota je…“
- Může být jednoduchý (HTML + JS) nebo propojený s Google Forms
🧱 Verze 1: Jednoduchý HTML kvíz (statický)
Vlož do sidebaru nebo hlavního obsahu:
<div class="quiz-box">
<h3>🧠 Hodnotový kvíz</h3>
<form id="valueQuiz">
<p>1. Co je pro tebe nejdůležitější?</p>
<label><input type="radio" name="q1" value="Rodina"> 👨👩👧👦 Rodina</label><br>
<label><input type="radio" name="q1" value="Svoboda"> 🕊️ Svoboda</label><br>
<label><input type="radio" name="q1" value="Tradice"> 🏡 Tradice</label><br>
<label><input type="radio" name="q1" value="Technologie"> 💻 Technologie</label><br>
<p>2. Co tě nejvíc motivuje?</p>
<label><input type="radio" name="q2" value="Rodina"> 👨👩👧👦 Blízkost</label><br>
<label><input type="radio" name="q2" value="Svoboda"> 🕊️ Nezávislost</label><br>
<label><input type="radio" name="q2" value="Tradice"> 🏡 Kořeny</label><br>
<label><input type="radio" name="q2" value="Technologie"> 💻 Pokrok</label><br>
<button type="submit">Zjistit moji hodnotu</button>
</form>
<div id="quizResult" style="margin-top:10px;"></div>
</div>
🧪 JavaScript pro vyhodnocení (vložit do <head>)
<script>
document.addEventListener("DOMContentLoaded", function() {
const quizForm = document.getElementById("valueQuiz");
if (quizForm) {
quizForm.addEventListener("submit", function(e) {
e.preventDefault();
const q1 = document.querySelector('input[name="q1"]:checked');
const q2 = document.querySelector('input[name="q2"]:checked');
const result = document.getElementById("quizResult");
if (q1 && q2) {
const values = [q1.value, q2.value];
const counts = {};
values.forEach(v => counts[v] = (counts[v] || 0) + 1);
const sorted = Object.entries(counts).sort((a,b) => b[1]-a[1]);
result.innerHTML = "✅ Tvoje prioritní hodnota je: <strong>" + sorted[0][0] + "</strong>";
} else {
result.innerHTML = "⚠️ Prosím, odpověz na obě otázky.";
}
});
}
});
</script>
🎨 Styl pro kvíz (přidej do b:skin)
.quiz-box { background: #f0f8ff; padding: 15px; border-radius: 8px; margin-top: 20px; }
.quiz-box h3 { margin-bottom: 10px; }
.quiz-box p { margin: 10px 0 5px; }
.quiz-box label { display: block; margin: 4px 0; }
.quiz-box button { margin-top: 10px; padding: 6px 12px; background-color: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer; }
.quiz-box button:hover { background-color: #004999; }
✅ Co to umí
- Funguje bez databáze
- Vyhodnotí odpovědi a zobrazí výsledek
- Můžeš přidat další otázky nebo hodnoty
- Funguje i na mobilu
🔜 Co dál
Chceš:
- 📊 Zobrazit výsledky jako graf?
- 📥 Umožnit návštěvníkům sdílet výsledek?
- 🧠 Přidat hlubší otázky nebo osobnostní profil?
Tvoříme pro sblížení — a tenhle kvíz je jako zrcadlo hodnot 💙🧱🌍
Chceš teď přidat grafické zobrazení výsledků nebo další otázky do kvízu?
Žádné komentáře:
Okomentovat