Prozkoumejte svou sexuální pohodu

<!doctype html>
<html lang="cs">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Prozkoumejte svou sexuální pohodu</title>
        <style>
            /* CSS Variables - Default Light Theme (Yang) */
            :root {
                --primary-color: #4a90e2;
                --primary-hover: #357abd;
                --background-color: transparent;
                --card-bg: transparent;
                --text-color: #333333;
                --text-muted: #555555;
                --border-color: #cccccc;
                --focus-ring: rgba(74, 144, 226, 0.5);
                --result-bg: #e8f5e9;
                --result-border: #81c784;
                --instruction-bg: rgba(74, 144, 226, 0.05);
                --legend-bg: #eeeeee;
                --error-color: #c9302c;
                /* Chart specific variables */
                --chart-bar-bg: #e0e0e0;
                --chart-avg-marker: #ff9800;
            }

/* CSS Variables - Dark Theme (Yin) */
            @media (prefers-color-scheme: dark) {
                :root {
                    --primary-color: #7abaff;
                    --primary-hover: #a1d1ff;
                    --text-color: #e0e0e0;
                    --text-muted: #aaaaaa;
                    --border-color: #555555;
                    --result-bg: #1e3a23;
                    --result-border: #2e7d32;
                    --instruction-bg: rgba(74, 144, 226, 0.15);
                    --legend-bg: #333333;
                    --error-color: #ff6b6b;
                    /* Chart specific variables */
                    --chart-bar-bg: #444444;
                    --chart-avg-marker: #ffb74d;
                }
            }

/* Basic Reset and Typography */
            * { box-sizing: border-box; margin: 0; padding: 0; }
            body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; padding: 5px; overflow-x: hidden; }
            a { color: var(--primary-color); transition: color 0.2s; }
            a:hover { color: var(--primary-hover); }
            *:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }

.container { max-width: 100%; margin: 0 auto; background-color: var(--card-bg); padding: 10px 0; border-radius: 0; box-shadow: none; }
            h1 { font-size: 2rem; color: var(--primary-color); margin-bottom: 10px; text-align: center; }
            p.intro { font-size: 1.1rem; margin-bottom: 20px; text-align: left; color: var(--text-muted); }

.instructions { background-color: var(--instruction-bg); padding: 20px; border-left: 4px solid var(--primary-color); border-radius: 4px; margin-bottom: 30px; }
            .instructions h2 { font-size: 1.2rem; margin-bottom: 10px; }
            .scale-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 15px; font-weight: bold; font-size: 0.9rem; }
            .scale-legend span { background: var(--legend-bg); padding: 4px 8px; border-radius: 4px; color: var(--text-color); }

fieldset { border: none; margin: 0; padding: 0; }
            .question-block { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
            .question-block:last-child { border-bottom: none; }
            .question-text { font-size: 1.1rem; font-weight: 500; margin-bottom: 15px; text-align: center; width: 100%; display: block; }
            .question-note { font-size: 0.9rem; color: var(--text-muted); margin-top: -10px; margin-bottom: 25px; font-style: italic; text-align: center; }

.slider-container { display: flex; flex-direction: column; gap: 10px; max-width: 600px; margin: 0 auto; }
            input[type="range"] { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: var(--border-color); outline: none; transition: background 0.2s; margin: 15px 0; }
            input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-color); cursor: pointer; transition: transform 0.1s; }
            input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
            input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-color); cursor: pointer; border: none; transition: transform 0.1s; }
            input[type="range"]::-moz-range-thumb:hover { transform: scale(1.1); }

.slider-scale { display: flex; justify-content: space-between; padding: 0 10px; margin-top: -5px; margin-bottom: 5px; color: var(--text-muted); font-size: 0.85rem; font-weight: bold; }
            .selection-display { font-size: 0.95rem; font-weight: 500; color: var(--primary-color); text-align: center; min-height: 24px; margin-top: 10px; }

.btn-submit { display: block; width: 100%; max-width: 400px; margin: 30px auto 0 auto; padding: 15px; font-size: 1.2rem; color: white; background-color: var(--primary-color); border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; }
            .btn-submit:hover:not(:disabled) { background-color: var(--primary-hover); }
            .btn-submit:active:not(:disabled) { transform: translateY(2px); }
            .btn-submit:disabled { background-color: #a0c4eb; cursor: not-allowed; transform: none; opacity: 0.7; }

#result-container { display: none; margin-top: 40px; padding: 35px 25px; background-color: var(--result-bg); border: 1px solid var(--result-border); border-radius: 8px; text-align: center; animation: fadeIn 0.5s ease-in-out; }
            @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
            .result-score { font-size: 3.5rem; font-weight: bold; color: var(--primary-color); margin: 10px 0; line-height: 1; }
            .result-text { font-size: 1.1rem; margin-bottom: 10px; color: var(--text-color); text-align: left; max-width: 700px; margin-left: auto; margin-right: auto; }

/* Chart CSS Additions */
            .chart-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--result-border); }
            .chart-legend-box { display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; font-size: 0.9rem; flex-wrap: wrap; }
            .legend-item { display: flex; align-items: center; gap: 8px; }
            .legend-box-user { width: 16px; height: 16px; background-color: var(--primary-color); border-radius: 3px; }
            .legend-box-avg { width: 4px; height: 16px; background-color: var(--chart-avg-marker); }

.chart-row { display: flex; align-items: center; margin-bottom: 12px; gap: 15px; cursor: help; } /* Added cursor hint for tooltips */
            .chart-label { width: 20px; font-weight: bold; color: var(--text-muted); text-align: right; font-size: 0.9rem; }
            .chart-bar-wrapper { flex-grow: 1; height: 20px; background-color: var(--chart-bar-bg); border-radius: 4px; position: relative; }
            .chart-bar-user { height: 100%; background-color: var(--primary-color); border-radius: 4px; width: 0%; transition: width 1s cubic-bezier(0.1, 0.7, 0.1, 1); }
            .chart-marker-avg { position: absolute; top: -3px; bottom: -3px; width: 4px; background-color: var(--chart-avg-marker); border-radius: 2px; z-index: 2; box-shadow: 0 0 2px rgba(0,0,0,0.2); }

.footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-muted); text-align: center; }
            .footer a { color: var(--primary-color); text-decoration: none; }
            .footer a:hover { text-decoration: underline; }

.socio-group { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); max-width: 600px; margin-left: auto; margin-right: auto; }
            .socio-note { font-size: 0.85rem; color: var(--text-muted); margin-top: -10px; margin-bottom: 15px; font-style: italic; }
            .radio-options { display: flex; flex-direction: column; gap: 6px; }
            .radio-label { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; cursor: pointer; padding: 6px 0; }
            input[type="number"], input[type="text"] { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 0.95rem; width: 100%; max-width: 300px; background: transparent; color: inherit; }
            .inline-input { margin-left: 10px; flex-grow: 1; max-width: 250px !important; }
            input[type="radio"] { accent-color: var(--primary-color); width: 22px; height: 22px; cursor: pointer; }

.validation-warning { color: var(--error-color); font-size: 0.95rem; text-align: center; margin-top: 15px; font-weight: 500; }
            .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

@media (max-width: 600px) { h1 { font-size: 1.5rem; } }
        </style>
    </head>
    <body>
        <div class="container">
            <header>
                <p class="intro">
                    Odpovědět někomu blízkému na otázku „Jak se máš?“ většinou zvládneme bez většího přemýšlení. Ale co otázka „Jak se má tvoje sexualita?“
                    Mnoho z nás by zmateně hledalo slova – a přitom by o tom, ruku na srdce, vlastně mluvit chtělo.
                    Příležitost i jasná slova a témata nabízí tento jednoduchý dotazník – Průzkum sexuální pohody.
                    Termín „sexuální pohoda“ není zvolený náhodou: jde o mezinárodně uznávaný pojem sexual wellbeing,
                    který se v oblasti veřejného zdraví probírá souběžně se sexuálním zdravím, protože shrnuje to,
                    jak se v sexualitě cítíme – a to má velký vliv na naši duševní pohodu i celkové zdraví.
                    U nás se ale o sexuální pohodě zatím téměř nemluví. Více o něm se můžete dozvědět
                    v článku <a href="https://sxinteligence.cz/sexualni-pohoda-v-cesku/">Sexuální pohoda: Co je to?</a>
                </p>
                <p class="intro">
                    Průzkum sexuální pohody pro vás může být zábavné zastavení, ale stejně tak i start k lepšímu sexuálnímu životu.
                    Otázky také nejsou zvolené náhodně: vycházejí z výzkumu britské psycholožky Kirstin R. Mitchell
                    a jejího dotazníku Natsal Sexual Wellbeing Measure a jsou upravené ve spolupráci s českým Centrem pro sexuální výzkum
                    a intervence Národního ústavu duševního zdraví.
                </p>
                <p class="intro">
                    Odpovědi jsou anonymní – v úvodu zadáváte jen základní údaje, ale žádný z nich nevede k vaší identifikaci.
                    Na konci se dozvíte své skóre sexuální pohody: 70 je maximum, čím menší číslo vám vyjde, tím nižší sexuální pohodu aktuálně máte.
                    Neznamená to, že je s vámi něco „špatně“ – spíš to ukazuje, že existuje prostor pro zlepšení.
                    Dobrou zprávou je, že na všem, na co se dotazník ptá, se dá pracovat a posouvat to směrem k větší pohodě.
                </p>
                <p class="intro" style="padding-bottom: 30px">
                    Průzkum je určen pro sebereflexi a inspiraci a nenahrazuje odbornou diagnostiku.
                </p>
            </header>

<form id="questionnaire-form" onsubmit="event.preventDefault(); showResults();">
                <div class="socio-wrapper">
                    <fieldset class="socio-group">
                        <label for="socio-age" class="question-text">Kolik je vám let?</label>
                        <input type="number" id="socio-age" name="age" min="15" max="120" placeholder="Zadejte svůj věk" />
                    </fieldset>

<fieldset class="socio-group">
                        <legend class="question-text">Jaký je váš gender?</legend>
                        <p class="socio-note">Nezáleží na tom, co máte v občanském průkazu, ale čím se cítíte být. Zvolte možnost, která je vám nejbližší.</p>
                        <div class="radio-options">
                            <label class="radio-label"><input type="radio" name="gender" value="zena" /> žena</label>
                            <label class="radio-label"><input type="radio" name="gender" value="muz" /> muž</label>
                            <label class="radio-label"><input type="radio" name="gender" value="nebinarni" /> nebinární osoba</label>
                            <label class="radio-label">
                                <input type="radio" name="gender" id="gender-jiny" value="jiny" onchange="document.getElementById('gender-text').focus()" />
                                chci svůj gender popsat vlastními slovy:
                                <input type="text" id="gender-text" name="gender_text" class="inline-input" aria-label="Popište svůj gender vlastními slovy" onclick="document.getElementById('gender-jiny').checked = true" />
                            </label>
                            <label class="radio-label"><input type="radio" name="gender" value="nechci_sdelovat" /> nechci sdělovat</label>
                        </div>
                    </fieldset>

<fieldset class="socio-group">
                        <legend class="question-text">Jaký je váš rodinný stav?</legend>
                        <p class="socio-note">Jaká z následujících možností nejlépe popisuje vaši současnou rodinnou situaci?</p>
                        <div class="radio-options">
                            <label class="radio-label"><input type="radio" name="status" value="nikdy_nezenaty" /> Nikdy jsem nebyl*a ženatý/vdaná ani v registrovaném partnerství</label>
                            <label class="radio-label"><input type="radio" name="status" value="zenaty_spolu" /> Jsem v současnosti ženatý/vdaná nebo v registrovaném partnerství (a žijeme spolu)</label>
                            <label class="radio-label"><input type="radio" name="status" value="zenaty_oddelene" /> Jsem v současnosti ženatý/vdaná nebo v registrovaném partnerství, ale žijeme odděleně</label>
                            <label class="radio-label"><input type="radio" name="status" value="rozvedeny" /> Jsem rozvedený/á nebo jsem oficiálně ukončil*a registrované partnerství</label>
                            <label class="radio-label"><input type="radio" name="status" value="ovdovely" /> Jsem ovdovělý/á nebo pozůstalý/á partner/ka v registrovaném partnerství</label>
                        </div>
                    </fieldset>

<fieldset class="socio-group">
                        <legend class="question-text">Současná vztahová situace</legend>
                        <p class="socio-note">Jaká z následujících možností nejlépe popisuje vaši současnou vztahovou situaci?</p>
                        <div class="radio-options">
                            <label class="radio-label"><input type="radio" name="relationship" value="single" /> Jsem single (nemám romantického partnera ani partnerku)</label>
                            <label class="radio-label"><input type="radio" name="relationship" value="partner_oddelene" /> Mám partnera/partnerku, nežijeme spolu ve společné domácnosti</label>
                            <label class="radio-label"><input type="radio" name="relationship" value="partner_spolu" /> Žiji s partnerem/partnerkou ve společné domácnosti</label>
                            <label class="radio-label"><input type="radio" name="relationship" value="vice_partneru" /> Mám více partnerů/partnerek (dohodnutě otevřený vztah / polyamorie)</label>
                            <label class="radio-label">
                                <input type="radio" name="relationship" id="relationship-jina" value="jina" onchange="document.getElementById('relationship-text').focus()" />
                                Jiná situace, chci popsat vlastními slovy:
                                <input type="text" id="relationship-text" name="relationship_text" class="inline-input" aria-label="Popište svou vztahovou situaci vlastními slovy" onclick="document.getElementById('relationship-jina').checked = true" />
                            </label>
                            <label class="radio-label"><input type="radio" name="relationship" value="nechci_sdelovat" /> Nechci sdělovat</label>
                        </div>
                    </fieldset>
                </div>

<div class="instructions">
                    <p style="text-align: center; color: var(--text-color);">Odpovězte, prosím, na každou následující otázku podle toho, jak nejlépe vystihuje vaši situaci <strong>v posledních 12 měsících</strong>. Je určen pro sebereflexi a inspiraci a nenahrazuje odbornou diagnostiku.</p>
                    <div class="scale-legend">
                        <span>1 = Rozhodně nesouhlasím</span><span>2 = Spíše nesouhlasím</span><span>3 = Ani souhlasím, ani nesouhlasím</span><span>4 = Spíše souhlasím</span><span>5 = Rozhodně souhlasím</span>
                    </div>
                </div>

<div id="validation-message" class="validation-warning" style="display: none" aria-live="polite">Pro zobrazení výsledku prosím zodpovězte všechny úvodní otázky.</div>

<button type="submit" class="btn-submit" id="submit-btn" disabled>Zobrazit výsledek</button>
            </form>

<div id="result-container" aria-live="assertive">
                <h2>Vaše skóre sexuální pohody</h2>
                <div class="result-score" id="score-display">0</div>
                <div class="result-text">
                    <p style="text-align: center; font-size: 1.2rem; color: var(--primary-color); margin-bottom: 10px;"><strong>Díky za vyplnění! Je dobře, že se zajímáte o svou sexuální pohodu.</strong></p>
                    <p style="text-align: center; margin-bottom: 20px">Nejvyšší možné skóre tohoto dotazníku je <strong id="max-score-display">70</strong>, nejnižší <strong id="min-score-display">14</strong>.</p>
                    <p style="margin-bottom: 15px"><strong>Co vám vaše skóre říká?</strong> Vyšší součet bodů značí vyšší stabilitu a spokojenost v sexuálním životě. Pokud jste u některých otázek zvolili nižší hodnotu než 5, neberte to jako svou chybu nebo nedokonalost. Je to spíš podnět k zamyšlení – narazili jste na místo, kde se skrývá váš potenciál pro zlepšení. Když mu věnujete pozornost a péči, je to cesta k větší spokojenosti a uvolnění. Možná vám v tom pomůže sdílení se svým partnerem či partnerkou, možná jen potřebujete něco dostudovat, ale možná je vaše cesta psychoterapie.</p>

<div class="chart-section">
                        <h3 style="text-align: center; margin-bottom: 15px; color: var(--primary-color);">Váš profil v porovnání s průměrem</h3>
                        <p style="font-size: 0.95rem; margin-bottom: 20px; text-align: center;">Podívejte se, jak si stojíte v jednotlivých oblastech vůči průměrným hodnotám mezi respondenty. Pro zobrazení otázky najeďte kurzorem na příslušný řádek grafu.</p>

<div class="chart-legend-box">
                            <div class="legend-item"><div class="legend-box-user"></div><span>Vaše skóre</span></div>
                            <div class="legend-item"><div class="legend-box-avg"></div><span>Průměr respondentů</span></div>
                        </div>

<p style="margin-top: 25px;"><strong>Pamatujte:</strong> Sexualita je živý proces. Mění se nám celý život a nikdy není pozdě začít s ní pracovat nebo ji léčit. To, jak se cítíte dnes, je výchozí bod, nikoliv stav, který musí trvat do konce života. Naopak.</p>
                    <p>Chcete si udělat větší přehled o oblastech, které potřebujeme znát pro sexuální pohodu? Mrkněte sem: <a href="https://sxinteligence.cz/sexinteligence-6-piliru-pro-celozivotni-sexualni-pohodu-2/" target="_blank" rel="noopener noreferrer">Sexinteligence: 6 pilířů pro celoživotní sexuální pohodu</a>.</p>
                </div>
            </div>

</div>

// URL for Google Apps Script - leave empty if you do not want to send data
            const GOOGLE_APPS_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbzCxM7rblAXqvol1zKwcRnhn083IL-jiHloPVm2mY2Acks2qswz9jIW440fRNBs5-XZ/exec";

// Toggle: Should the initial sociodemographic questions be mandatory?
            const REQUIRE_SOCIODEMO = true;

// Generate or retrieve a persistent session/device ID using localStorage
            function getOrCreateSessionId() {
                let sessionId = localStorage.getItem("sx_wellbeing_session_id");
                if (!sessionId) {
                    sessionId = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : "sess-" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
                    localStorage.setItem("sx_wellbeing_session_id", sessionId);
                }
                return sessionId;
            }

// Client environment data storage
            let clientEnvironment = { sessionId: getOrCreateSessionId(), userAgent: navigator.userAgent };

// Data definition for questions
            const questionsData = [
                { id: "q01", text: "Cítím se v bezpečí při svých sexuálních aktivitách. *" },
                { id: "q02", text: "Mohu svobodně rozhodovat o tom, s kým a jak budu mít sex." },
                { id: "q03", text: "Mám možnost říci „ne“ sexu, když nechci." },
                { id: "q04", text: "Jsem spokojený/á s tím, jak často mám sex." },
                { id: "q05", text: "Cítím se dobře ve svém těle během sexuálních aktivit." },
                { id: "q06", text: "Mohu otevřeně komunikovat o svých sexuálních potřebách s partnerem/partnerkou." },
                { id: "q07", text: "Mám někoho, s kým si mohu otevřeně promluvit o svém sexuálním životě." },
                { id: "q08", text: "Mám radost ze své sexuality." },
                { id: "q09", text: "Mám dostatek informací k tomu, abych mohl/a činit informovaná rozhodnutí o svém sexuálním životě." },
                { id: "q10", text: "Cítím, že jsem respektován/a svým partnerem/partnerkou při sexu." },
                { id: "q11", text: "Dokážu se vyrovnat s negativními sexuálními zážitky z minulosti." },
                { id: "q12", text: "Mám důvěru ve své schopnosti uspokojit partnera/partnerku." },
                { id: "q13", text: "Můj sexuální život je uspokojující." },
                { id: "q14", text: "Moji blízcí přijímají mou sexuální identitu a preference." }
            ];

// Add note to question 1 separately to keep text clean for tooltips
            const notesData = {
                "q01": "(Bezpečí znamená absenci strachu, nátlaku, donucení nebo obav o vlastní zdraví, pohodu a důstojnost. Sex v bezpečí probíhá na základě vzájemné dohody a důvěry a každý ze zúčastněných může svobodně vyjádřit své potřeby, přání i hranice a hranice jsou vzájemně respektovány – pozn. HV.)"
            };

// Population averages mapped to questions 1-14
            const populationAverages = [4.6, 4.0, 4.6, 2.7, 4.2, 3.6, 3.4, 3.8, 4.6, 4.2, 4.0, 4.0, 3.2, 4.5];

// Scale mappings for display and screen readers
            const scaleDescriptions = {
                1: "1 - Rozhodně nesouhlasím", 2: "2 - Spíše nesouhlasím", 3: "3 - Ani souhlasím, ani nesouhlasím", 4: "4 - Spíše souhlasím", 5: "5 - Rozhodně souhlasím"
            };

// Initialize the questionnaire on DOM load
            document.addEventListener("DOMContentLoaded", () => {
                const wrapper = document.getElementById("questions-wrapper");
                const form = document.getElementById("questionnaire-form");
                const submitBtn = document.getElementById("submit-btn");

// Generate HTML for each question dynamically with A11y attributes
                questionsData.forEach((q, index) => {
                    const questionBlock = document.createElement("fieldset");
                    questionBlock.className = "question-block";
                    const noteText = notesData[q.id];

htmlContent += `
                        <div class="slider-container">
                            <input type="range" id="${q.id}" name="${q.id}" min="1" max="5" value="3" step="1"
                                   aria-label="${q.text}" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="${scaleDescriptions[3]}" ${describedBy}
                                   oninput="window.updateDisplay('${q.id}', this.value);">
                            <div class="slider-scale" aria-hidden="true"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
                            <div class="selection-display" id="${q.id}-display" aria-live="polite">${scaleDescriptions[3]}</div>
                        </div>`;

questionBlock.innerHTML = htmlContent;
                    wrapper.appendChild(questionBlock);
                });

const validationMsg = document.getElementById("validation-message");
                if (REQUIRE_SOCIODEMO) { validationMsg.style.display = "block"; }

form.addEventListener("input", () => {
                    let isValid = true;
                    if (REQUIRE_SOCIODEMO) {
                        const age = document.getElementById("socio-age").value.trim();
                        const gender = document.querySelector('input[name="gender"]:checked');
                        const status = document.querySelector('input[name="status"]:checked');
                        const relationship = document.querySelector('input[name="relationship"]:checked');
                        isValid = age !== "" && gender !== null && status !== null && relationship !== null;
                        validationMsg.style.display = isValid ? "none" : "block";
                    }
                    submitBtn.disabled = !isValid;
                    hideResults();
                });
            });

function hideResults() {
                const resultContainer = document.getElementById("result-container");
                if (resultContainer.style.display === "block") resultContainer.style.display = "none";
            }

window.showResults = function() {
                const submitBtn = document.getElementById("submit-btn");
                submitBtn.disabled = true;

let totalScore = 0;
                const answersData = {};

questionsData.forEach((q) => {
                    const inputElement = document.getElementById(q.id);
                    if (inputElement) {
                        const val = parseInt(inputElement.value, 10);
                        totalScore += val;
                        answersData[q.id] = val;
                    }
                });

const payload = {
                    timestamp: new Date().toISOString(), sessionId: clientEnvironment.sessionId, userAgent: clientEnvironment.userAgent, totalScore: totalScore,
                    age: document.getElementById("socio-age").value,
                    gender: document.querySelector('input[name="gender"]:checked')?.value || "",
                    genderText: document.getElementById("gender-text").value,
                    status: document.querySelector('input[name="status"]:checked')?.value || "",
                    relationship: document.querySelector('input[name="relationship"]:checked')?.value || "",
                    relationshipText: document.getElementById("relationship-text").value,
                    answers: answersData,
                };

if (GOOGLE_APPS_SCRIPT_URL.trim() !== "") {
                    fetch(GOOGLE_APPS_SCRIPT_URL, {
                        method: "POST",
                        mode: "no-cors",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(payload)
                    })
                        .then(() => console.log("Background data successfully sent."))
                        .catch(err => console.error("Error during data transmission:", err));
                }

document.getElementById("score-display").textContent = totalScore;
                document.getElementById("max-score-display").textContent = questionsData.length * 5;
                document.getElementById("min-score-display").textContent = questionsData.length;

// Render dynamic bar chart with tooltips and clean labels
                const chartArea = document.getElementById("chart-render-area");
                let chartHTML = "";

questionsData.forEach((q, index) => {
                    const userVal = answersData[q.id];
                    const avgVal = populationAverages[index];

// Map 1-5 scale to 0-100% width for rendering
                    const userWidthPercent = (userVal / 5) * 100;
                    const avgPositionPercent = (avgVal / 5) * 100;

// Create tooltip text
                    const tooltipText = `${q.text} (Vaše skóre: ${userVal}, Průměr: ${avgVal})`;

chartHTML += `
                        <div class="chart-row" title="${tooltipText}">
                            <div class="chart-label">${index + 1}</div>
                            <div class="chart-bar-wrapper">
                                <div class="chart-bar-user" style="width: ${userWidthPercent}%" aria-label="Score for question ${index + 1}: ${userVal}"></div>
                                <div class="chart-marker-avg" style="left: ${avgPositionPercent}%"></div>
                            </div>
                        </div>
                    `;
                });

chartArea.innerHTML = chartHTML;

const resultContainer = document.getElementById("result-container");
                resultContainer.style.display = "block";
                resultContainer.scrollIntoView({ behavior: "smooth", block: "nearest" });
            };

const observer = new ResizeObserver(() => {
                if (window.frameElement) {
                    window.frameElement.style.height = document.documentElement.scrollHeight + 20 + 'px';
                }
            });
            observer.observe(document.body);
        </script>
    </body>
</html>