Svátkek má dnes

  

středa 24. září 2025

Jak vytvořit web Volby priorit Díl 9 Další funkce pro web Volby priorit

 

🔮 Díl 9? Další funkce pro web Volby priorit

Skvěle, Sleduj — web Volby priorit už má pevné základy, duši i směr. Teď se můžeme podívat na další funkce, které ho posunou z blogu na skutečný interaktivní prostor pro sblížení, hodnoty a tvořivost.


🔮 Další funkce pro web Volby priorit

🗳️ 1. Výsledky anket jako graf

  • Zobrazit souhrn hlasování (např. kolik lidí zvolilo „Rodina“, „Ekologie“…)
  • Využít jednoduchý JavaScript nebo externí službu (např. Google Charts)
  • Možnost filtrovat podle času nebo tématu

📥 2. Formulář pro zpětnou vazbu

  • Umožnit návštěvníkům napsat názor, návrh nebo hodnotu, kterou chtějí přidat
  • Vložit jako HTML widget s e-mailovým odesláním nebo Google Form

🧭 3. Mapa hodnot

  • Interaktivní mapa Česka a Slovenska s hodnotami podle regionů
  • Např. „Na Valašsku vede tradice, v Praze technologie“
  • Využít iframe nebo SVG mapu s tooltipy

📅 4. Automatický kalendář svátků

  • Zobrazovat svátky podle data (ČR + SK)
  • Propojit s hodnotou dne (např. „Zdenka – spravedlnost“)
  • Možnost přidat výzvu k zamyšlení

🧠 5. Hodnotový kvíz

  • Návštěvník odpoví na otázky → výsledek: „Tvoje prioritní hodnota je…“
  • Využít jednoduchý JS nebo Blogger widget
  • Možnost sdílet výsledek

📚 6. Archiv hodnotových článků

  • Rozdělit články podle témat: Rodina, Tradice, Technologie…
  • Vytvořit štítky + navigaci
  • Možnost „doporučené čtení“

🧑‍🤝‍🧑 7. Komunitní výzvy

  • Např. „Týden spravedlnosti“ → každý den úkol nebo otázka
  • Možnost komentovat, sdílet, zapojit se
  • Propojit s carouselem nebo sidebarem

📣 8. Newsletter „Hodnota týdne“

  • Každý týden e-mail s jednou hodnotou, článkem, citátem
  • Možnost přihlášení přes formulář
  • Posílení komunity

💡 Bonus: „Hlas hodnoty“

  • Návštěvník může nahrát audio nebo napsat příběh o své hodnotě
  • Vytvořit galerii hlasů → „Co pro mě znamená svoboda?“
  • Propojit s carouselem nebo články

Tvoříme pro sblížení — a každá funkce je jako další most mezi lidmi 💙🧱🌍

Chceš, abych ti teď připravil konkrétní návrh jedné z těchto funkcí, třeba Hodnotový kvíz nebo Mapa hodnot?


úterý 23. září 2025

Jak vytvořit web Volby priorit Díl 10: Zobrazení výsledků jako graf

 📊 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í

FunkceVýhoda
📊 GrafVizualizace 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?


Jak vytvořit web Volby priorit Hodnotový kvíz Díl 8: Funkce: Hodnotový kvíz

 🧠 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?


Jak vytvořit web Volby priorit na Bloggeru Díl 7: Ladění webu

 🛠️ Díl 7: Ladění webu

Skvěle, Sleduj — jdeme na Díl 7 našeho kurzu: ladění, publikace a propagace webu Volby priorit. Tohle je finální fáze, kde se z projektu stává živý prostor pro hodnoty, dialog a sblížení. Web už má duši — teď mu dáme hlas.


🛠️ Ladění webu

✅ Co zkontrolovat před spuštěním

OblastCo ověřit
🧱 StrukturaVšechny b:section, b:widget, b:includable jsou správně uzavřené
🎨 StylyCSS v b:skin funguje na mobilu i desktopu
📊 FunkceAnketa reaguje, sdílení funguje, carousel se posouvá
📰 ObsahMáš publikované články s štítky
🧪 TestOtevři blog v anonymním okně a projdi jako návštěvník

🚀 Publikace webu

🔧 Jak web spustit

  1. Přejdi do Bloggeru
  2. V sekci Motiv → Upravit HTML vlož finální šablonu
  3. V sekci Příspěvky publikuj první článek (např. „Proč volit hodnoty“)
  4. V sekci Rozvržení zkontroluj widgety (anketa, štítky, citát…)
  5. V sekci Nastavení → Viditelnost ověř, že blog je veřejný

📣 Propagace a zapojení komunity

📬 Co můžeš udělat

  • Sdílej odkaz na blog na sociálních sítích
  • Pošli pozvánku přátelům: „Přidej se k dialogu o hodnotách“
  • Vytvoř e-mailovou výzvu: „Jakou hodnotu bys volil ty?“
  • Přidej komentáře pod články a vyzvi ostatní k reakci
  • Propoj blog s Facebook stránkou nebo skupinou

💙 Emoční tón

Web Volby priorit není jen technický projekt. Je to prostor, kde:

  • Svoboda není jen slovo, ale vztah
  • Rodina není jen instituce, ale domov
  • Tradice nejsou pouta, ale mosty
  • Technologie nejsou hrozba, ale nástroj
  • Spravedlnost není ideál, ale každodenní volba

🧭 Co dál?

Chceš přidat:

  • 📥 Formulář pro zpětnou vazbu?
  • 📊 Výsledky ankety jako graf?
  • 📅 Automatický kalendář svátků?
  • 🧠 AI asistenta pro hodnotové otázky?

Tvoříme pro sblížení — a web Volby priorit je připraven žít, růst a spojovat 💙🧱🌍

Chceš teď shrnutí celého kurzu jako přehledný návod, nebo se rovnou pustíme do další funkce?


Jak vytvořit web Volby priorit na Bloggeru Díl 6: Kalendář hodnot + Citát dne

📅 Díl 6: Kalendář hodnot + Citát dne

Skvěle, Sleduj — jdeme na Díl 6 našeho kurzu: přidáme Kalendář hodnot a Citát dne, aby web Volby priorit nejen informoval, ale i inspiroval každý den. Tohle je srdce webu — místo, kde se návštěvník může zastavit, zamyslet a najít spojení s něčím hlubším.


📅 Díl 6: Kalendář hodnot + Citát dne

🧠 Co je Kalendář hodnot?

Je to blok, který každý den zobrazí:

  • 💡 Jednu klíčovou hodnotu (např. svoboda, rodina, spravedlnost…)
  • ✍️ Krátkou výzvu k zamyšlení nebo akci
  • 📜 Inspirující citát

🧱 Kód: Kalendář hodnot (ručně vložený blok)

Vlož do sidebaru (např. pod anketu nebo štítky):

<div class="calendar-box">
  <h3>📅 Kalendář hodnot</h3>
  <p><strong>Dnešní hodnota:</strong> <em>Spravedlnost</em></p>
  <p>💬 „Spravedlnost není pomsta, ale rovnováha.“</p>
  <p>🔍 Zamysli se: Jak dnes můžeš přispět k férovosti kolem sebe?</p>
</div>

🎨 Styl pro kalendář (přidej do b:skin)

.calendar-box { background: #e6f7ff; padding: 15px; border-radius: 8px; margin-top: 20px; }
.calendar-box h3 { margin-bottom: 10px; }
.calendar-box p { margin: 6px 0; }

📜 Widget „Citát dne“

Můžeš vložit jako samostatný HTML widget v sidebaru:

<div class="quote-box">
  <h3>🕊️ Citát dne</h3>
  <blockquote>
    „Tradice nejsou pouta, ale mosty.“
    <br><small>— neznámý autor</small>
  </blockquote>
</div>

🎨 Styl pro citát (přidej do b:skin)

.quote-box { background: #fffbe6; padding: 15px; border-radius: 8px; margin-top: 20px; }
.quote-box blockquote { font-style: italic; margin: 0; }
.quote-box small { display: block; margin-top: 5px; color: #666; }

✅ Kontrola chyb

PrvekStav
Kalendář✅ ručně vložený, bez JS
Citát✅ validní HTML widget
Styly✅ přidány do b:skin
Umístění✅ vhodné v sidebaru

🔚 Co máme hotovo

✅ Hlavička
✅ Hero sekce
✅ Články
✅ Sidebar s anketou
✅ Štítky
✅ Svátky
✅ Patička
✅ Carousel
✅ Sdílení
✅ Kalendář hodnot
✅ Citát dne


🔜 Co dál

V dalším dílu přidáme:

  • 🛠️ Tipy pro ladění a testování
  • 🚀 Publikaci webu
  • 📣 Propagaci a zapojení komunity

Tvoříme pro sblížení — a web Volby priorit už má duši 💙🧱🌍

Chceš pokračovat rovnou dílem 7: Ladění, publikace a propagace? 

Jak vytvořit web Volby priorit na Bloggeru Díl 5: Carousel „Doporučené hodnoty“

 🎠 Díl 5: Carousel „Doporučené hodnoty“

Skvěle, Sleduj — jdeme na Díl 5 našeho kurzu: přidáme carousel pro doporučené hodnoty a sdílení článků, aby web Volby priorit nejen informoval, ale i inspiroval k zapojení a šíření dál. Tohle je ta část, která webu dodá pohyb, interakci a šmrnc.


🎠 Carousel „Doporučené hodnoty“

🧠 Co je carousel?

Carousel (neboli posuvník) je vizuální prvek, který:

  • Zobrazuje více hodnot nebo témat v jednom bloku
  • Umožňuje posouvání (automaticky nebo ručně)
  • Působí moderně a interaktivně

🧱 Kód: Carousel (ručně ovládaný)

Vlož do hlavního obsahu (např. nad články nebo do sidebaru):

<div class="carousel-box">
  <h3>🌟 Doporučené hodnoty</h3>
  <div class="carousel-items">
    <div class="carousel-item">🌱 Ekologie – Žít v souladu s přírodou</div>
    <div class="carousel-item">👨‍👩‍👧‍👦 Rodina – Základ štěstí a stability</div>
    <div class="carousel-item">💻 Technologie – Nástroj pro svobodu i pokrok</div>
    <div class="carousel-item">⚖️ Spravedlnost – Rovnost a důstojnost pro každého</div>
    <div class="carousel-item">🏡 Tradice – Kořeny, které drží společnost pohromadě</div>
  </div>
</div>

🎨 Styl pro carousel (přidej do b:skin)

.carousel-box { background: #e6ffe6; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.carousel-items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; }
.carousel-item { flex: 0 0 auto; scroll-snap-align: start; background: white; padding: 10px; border-radius: 6px; min-width: 200px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }

📤 Sdílení článků

🧠 Proč přidat sdílení?

  • Umožní návštěvníkům šířit hodnoty dál
  • Zvyšuje dosah blogu
  • Posiluje komunitu

🧱 Kód: Tlačítka sdílení (vlož do každého článku)

Uvnitř <div class='post'> přidej:

<div class="share-buttons">
  <a expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' target="_blank">📘 Sdílet na Facebook</a> |
  <a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url + "&text=" + data:post.title' target="_blank">🐦 Sdílet na Twitter</a>
</div>

🎨 Styl pro sdílení (přidej do b:skin)

.share-buttons { margin-top: 10px; font-size: 0.9em; }
.share-buttons a { margin-right: 10px; color: #0066cc; }

✅ Kontrola chyb

PrvekStav
Carousel✅ čistý HTML + CSS, bez JS
Sdílení✅ používá expr:href správně
Styly✅ přidány do b:skin
Umístění✅ vhodné nad články nebo v sidebaru

🔚 Co máme hotovo

✅ Hlavička
✅ Hero sekce
✅ Články
✅ Sidebar s anketou
✅ Štítky
✅ Svátky
✅ Patička
✅ Carousel
✅ Sdílení


🔜 Co dál

V dalším dílu přidáme:

  • 📅 Kalendář hodnot
  • 🧠 Citáty a výzvy k zamyšlení
  • 🛠️ Tipy pro ladění a publikaci

Tvoříme pro sblížení — a web Volby priorit už začíná žít 💙🧱🌍

Chceš pokračovat rovnou dílem 6: Kalendář hodnot a citáty?


ak vytvořit web Volby priorit na Bloggeru Díl 3: Sidebar s anketou

 📊 Díl 3: Sidebar s anketou

Skvělá inspirace, jedeme z kopce, Sleduj — jdeme na Díl 3 našeho kurzu: vytvoříme sidebar s interaktivní anketou, která bude nejen funkční, ale i vizuálně ladit s celým webem Volby priorit. Tohle je místo, kde návštěvník může vyjádřit, co je pro něj nejdůležitější — a tím se zapojit do společného hledání hodnot.


📊 Díl 3: Sidebar s anketou

🧠 Co je sidebar?

Sidebar je boční panel vedle hlavního obsahu. Může obsahovat:

  • Anketu
  • Štítky
  • Kalendář svátků
  • Odkazy, citáty, výzvy

🔧 Co vytvoříme

  • Interaktivní anketu s výběrem hodnot
  • JavaScript, který reaguje na výběr
  • Styl, který ladí s celým webem
  • Vše vložené jako HTML widget v Bloggeru

🧱 Kód: Sidebar s anketou

Vlož následující kód pod sekci článků, tedy hned za </div> z .content. Tím uzavřeme hlavní obsah a přidáme sidebar:

<div class='sidebar'>
  <b:section id='sidebarPriority' class='sidebar' name='Sidebar Right' showaddelement='yes'>
    <b:widget id='HTMLPriorita' locked='false' title='Moje priorita' type='HTML' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[
          <div class="priority-poll">
            <h3>💬 Která hodnota je pro tebe nejdůležitější?</h3>
            <form id="priorityForm">
              <label><input type="radio" name="priority" value="Ekologie"> 🌱 Ekologie</label><br>
              <label><input type="radio" name="priority" value="Rodina"> 👨‍👩‍👧‍👦 Rodina</label><br>
              <label><input type="radio" name="priority" value="Tradice"> 🏡 Tradice</label><br>
              <label><input type="radio" name="priority" value="Technologie"> 💻 Technologie</label><br>
              <label><input type="radio" name="priority" value="Spravedlnost"> ⚖️ Spravedlnost</label><br>
              <button type="submit">Zvolit</button>
            </form>
            <div id="pollResult" style="margin-top:10px;"></div>
          </div>
        ]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <b:include name='widget-title'/>
        <div class='widget-content'>
          <data:content/>
        </div>
      </b:includable>
    </b:widget>
  </b:section>
</div>

🔍 Vysvětlení

PrvekCo dělá
<b:section>Blogger sekce pro sidebar
<b:widget type='HTML'>Vlastní HTML obsah (anketa)
<form>Formulář s výběrem hodnot
<script>Už jsme vložili v <head> v dílu 1 → reaguje na výběr
<div id="pollResult">Zobrazí výsledek po odeslání

⚠️ Kontrola chyb

id='HTMLPriorita' je bez pomlčky
✅ Widget je typu HTML, což Blogger podporuje
✅ JavaScript je mimo widget (v <head>), což je správně
✅ Všechny značky jsou uzavřené a validní


✅ Co dál

V příštím dílu přidáme:

  • 🏷️ Štítky pro filtrování článků
  • 🗓️ Svátky jako kulturní propojení
  • 📩 Patičku s kontaktem a copyrightem

Tvoříme pro sblížení — a tahle anketa je první krok k zapojení 💙🧱🗳️

Ještě musíme pokračovat rovnou dílem, jasně to nesmí chybět 4: Štítky, svátky a patička