📊 10. Zobrazení výsledků jako graf
Skvěle, Sleduj — jdeme web Volby priorit posunout ještě dál: vizuálně zobrazit výsledky kvízu jako graf a umožnit návštěvníkům sdílet svůj výsledek. Tím vytvoříme nejen interaktivní zážitek, ale i komunitní propojení. Tohle je přesně ten moment, kdy se hodnoty začnou šířit dál 💙📊📤
📊 1. Zobrazení výsledků jako graf
🧠 Co použijeme?
Nejjednodušší cesta je využít Google Charts, které fungují i v Bloggeru bez databáze. Můžeme zobrazit:
- Sloupcový graf (Bar Chart)
- Koláčový graf (Pie Chart)
- Dynamicky podle výsledku kvízu
🧱 Kód: Koláčový graf (statický příklad)
Vlož do sidebaru nebo pod kvíz:
<div id="valueChart" style="width:100%; max-width:400px; height:300px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Hodnota', 'Hlasy'],
['Rodina', 12],
['Svoboda', 8],
['Tradice', 5],
['Technologie', 3]
]);
var options = {
title: 'Výsledky hodnotového kvízu',
pieHole: 0.4,
colors: ['#3366cc','#dc3912','#ff9900','#109618']
};
var chart = new google.visualization.PieChart(document.getElementById('valueChart'));
chart.draw(data, options);
}
</script>
🔧 Čísla můžeš aktualizovat ručně nebo propojit s Google Formulářem pro sběr dat.
📤 2. Sdílení výsledku
🧱 Kód: Tlačítka sdílení (vlož pod výsledek kvízu)
Uvnitř #quizResult přidej:
<div class="share-result">
<p>📣 Sdílej svou hodnotu:</p>
<a id="shareFB" target="_blank">📘 Facebook</a> |
<a id="shareTW" target="_blank">🐦 Twitter</a>
</div>
🧪 JavaScript pro generování odkazu
Přidej do <head> nebo pod kvíz:
<script>
function updateShareLinks(value) {
const url = window.location.href;
const text = "Moje prioritní hodnota je: " + value + " 💙 #VolbyPriorit";
document.getElementById("shareFB").href = "https://www.facebook.com/sharer.php?u=" + encodeURIComponent(url);
document.getElementById("shareTW").href = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text + " " + url);
}
A v kvízu (po vyhodnocení):
updateShareLinks(sorted[0][0]);
🎨 Styl pro sdílení (přidej do b:skin)
.share-result { margin-top: 10px; font-size: 0.9em; }
.share-result a { margin-right: 10px; color: #0066cc; }
✅ Co to umí
| Funkce | Výhoda |
|---|---|
| 📊 Graf | Vizualizace výsledků, přehlednost |
| 📤 Sdílení | Rozšíření hodnot, zapojení komunity |
| 🧠 Propojení | Možnost propojit s Google Forms nebo Sheets |
Tvoříme pro sblížení — a teď už i s daty, emocemi a sdílením 💙📊📤
Chceš teď propojit kvíz s Google Formulářem, nebo přidat další otázky a hodnoty?
Žádné komentáře:
Okomentovat