/* --- Base Styles & Variables --- */ :root { --bdi-bg: #f4f7fc; /* Slightly lighter blue-ish gray */ --bdi-card-bg: #ffffff; --bdi-text-primary: #2c3e50; /* Darker blue-gray */ --bdi-text-secondary: #5a6a7a; --bdi-accent: #6a11cb; /* Deep purple */ --bdi-accent-light: #a77fdc; --bdi-highlight: #e8eaf6; /* Lighter indigo for selection */ --bdi-border: #dfe7f1; --bdi-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); --bdi-shadow-inset: inset 2px 2px 5px rgba(223, 231, 241, 0.6), inset -2px -2px 5px #ffffff; --bdi-shadow-hover: 0 10px 25px rgba(106, 17, 203, 0.12); --bdi-radius: 15px; /* Slightly more rounded */ --bdi-transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); --bdi-progress-bar-bg: #e0e7ff;/* Severity Colors */ --bdi-normal: #2ecc71; /* Emerald Green */ --bdi-mild: #f1c40f; /* Sunflower Yellow */ --bdi-borderline: #e67e22; /* Carrot Orange */ --bdi-moderate: #e74c3c; /* Alizarin Red */ --bdi-severe: #9b59b6; /* Amethyst Purple */ --bdi-extreme: #8e44ad; /* Wisteria Purple */ --bdi-gauge-track: #ecf0f1; /* Clouds White */ }/* Apply a modern font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');.bdi-container * { box-sizing: border-box; font-family: 'Poppins', sans-serif; /* Updated Font */ }.bdi-container { background: linear-gradient(135deg, var(--bdi-bg) 0%, #e9eef7 100%); /* Subtle gradient */ padding: 35px 25px; max-width: 850px; margin: 30px auto; border-radius: var(--bdi-radius); box-shadow: var(--bdi-shadow); color: var(--bdi-text-primary); overflow: hidden; position: relative; /* For potential absolute elements */ }.bdi-header h2 { text-align: center; color: var(--bdi-accent); margin-bottom: 10px; font-weight: 700; font-size: 1.8em; /* Slightly larger */ }.bdi-header p { text-align: center; color: var(--bdi-text-secondary); margin-bottom: 25px; font-size: 1em; max-width: 600px; margin-left: auto; margin-right: auto; }/* --- Progress Bar --- */ .bdi-progress-container { margin-bottom: 30px; padding: 0 10px; }.bdi-progress-label { font-size: 0.9em; color: var(--bdi-text-secondary); margin-bottom: 8px; display: flex; justify-content: space-between; }.bdi-progress-bar { width: 100%; height: 10px; /* Thicker bar */ background-color: var(--bdi-progress-bar-bg); border-radius: 5px; overflow: hidden; box-shadow: var(--bdi-shadow-inset); }.bdi-progress-fill { width: 0%; /* Starts empty */ height: 100%; background: linear-gradient(90deg, var(--bdi-accent-light), var(--bdi-accent)); border-radius: 5px; transition: width 0.5s ease-out; }/* --- Question Styling --- */ .bdi-questions { list-style: none; padding: 0; margin: 0; }.bdi-question { background-color: var(--bdi-card-bg); margin-bottom: 25px; padding: 25px; border-radius: var(--bdi-radius); border: 1px solid var(--bdi-border); transition: var(--bdi-transition); box-shadow: 0 3px 8px rgba(0,0,0,0.04); }.bdi-question:focus-within, .bdi-question.focused { /* Add class on focus/interaction */ border-color: var(--bdi-accent-light); box-shadow: var(--bdi-shadow-hover); transform: translateY(-2px); /* Subtle lift */ }.bdi-question-header { display: flex; align-items: center; margin-bottom: 15px; cursor: default; /* Indicate non-clickable header */ }.bdi-question-number { display: inline-block; background-color: var(--bdi-accent); color: white; font-weight: 600; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; margin-right: 15px; font-size: 0.95em; flex-shrink: 0; /* Prevent shrinking */ }.bdi-question-title { /* For ARIA */ font-size: 1.1em; font-weight: 500; color: var(--bdi-text-primary); }.bdi-options { display: grid; grid-template-columns: 1fr; gap: 12px; padding-left: 47px; /* Align with text */ }.bdi-option label { display: flex; align-items: center; padding: 14px 18px; background-color: #f9fafc; /* Slightly lighter option background */ border: 1px solid var(--bdi-border); border-radius: 10px; /* Match card rounding */ cursor: pointer; transition: var(--bdi-transition); position: relative; overflow: hidden; }.bdi-option input[type="radio"] { opacity: 0; position: absolute; width: 0; height: 0; }/* Improved focus visibility */ .bdi-option input[type="radio"]:focus-visible + label { outline: 2px solid var(--bdi-accent-light); outline-offset: 2px; border-color: var(--bdi-accent-light); }.bdi-option .option-score { font-weight: 600; color: var(--bdi-accent); background-color: rgba(106, 17, 203, 0.08); /* Slightly less opaque */ border-radius: 6px; padding: 4px 8px; margin-right: 15px; font-size: 0.9em; min-width: 22px; text-align: center; transition: var(--bdi-transition); }.bdi-option .option-text { flex-grow: 1; font-size: 1em; color: var(--bdi-text-secondary); line-height: 1.55; transition: var(--bdi-transition); }/* --- Hover and Checked States --- */ .bdi-option label:hover { background-color: var(--bdi-highlight); border-color: var(--bdi-accent-light); box-shadow: 0 4px 10px rgba(106, 17, 203, 0.08); transform: scale(1.01); /* Slight scale on hover */ }.bdi-option input[type="radio"]:checked + label { background: linear-gradient(135deg, var(--bdi-accent), var(--bdi-accent-light)); border-color: transparent; /* Remove border when gradient is active */ color: white; box-shadow: 0 5px 15px rgba(106, 17, 203, 0.2); /* Stronger shadow when selected */ transform: scale(1.01); }.bdi-option input[type="radio"]:checked + label .option-score { background-color: white; color: var(--bdi-accent); transform: rotate(-10deg) scale(1.1); /* Tilted effect */ }.bdi-option input[type="radio"]:checked + label .option-text { color: white; font-weight: 500; }/* Smoother checkmark animation */ .bdi-option input[type="radio"]:checked + label::after { content: '✔'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%) scale(0.5); /* Start smaller */ font-size: 1.4em; color: white; opacity: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out; transition-delay: 0.1s; /* Slight delay */ } .bdi-option input[type="radio"]:checked + label:hover::after { transform: translateY(-50%) scale(1); /* Full size on check */ opacity: 1; }/* --- Reset Button Styling --- */ .bdi-reset-container { text-align: center; margin: 30px 0 20px 0; /* Position before results appear */ }#bdi-reset-button { background: linear-gradient(135deg, #ff758c, #ff7eb3); /* Coral/Pink gradient */ color: white; border: none; padding: 12px 30px; font-size: 1em; font-weight: 600; border-radius: 25px; /* Pill shape */ cursor: pointer; transition: var(--bdi-transition); box-shadow: 0 4px 15px rgba(255, 117, 140, 0.3); opacity: 0.5; /* Dim initially */ pointer-events: none; /* Disable initially */ }#bdi-reset-button.active { opacity: 1; pointer-events: auto; }#bdi-reset-button:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(255, 117, 140, 0.5); transform: translateY(-2px); } #bdi-reset-button:active:not(:disabled) { transform: translateY(0px); box-shadow: 0 3px 10px rgba(255, 117, 140, 0.4); }/* --- Results Section --- */ .bdi-results { margin-top: 30px; background-color: var(--bdi-card-bg); padding: 35px 30px; border-radius: var(--bdi-radius); border: 1px solid var(--bdi-border); text-align: center; box-shadow: var(--bdi-shadow); position: relative; display: none; /* Hidden initially, shown via JS */ opacity: 0; /* For fade-in */ transform: translateY(20px); /* For slide-in */ transition: opacity 0.5s ease-out, transform 0.5s ease-out; }.bdi-results.visible { display: block; opacity: 1; transform: translateY(0); }.bdi-results h3 { margin: 0 0 20px 0; color: var(--bdi-accent); font-size: 1.6em; }.bdi-results-content { display: flex; width: 100%; align-items: center; gap: 35px; flex-wrap: wrap; justify-content: center; }/* --- SVG Arc Gauge Styling --- */ .bdi-gauge-container { width: 170px; /* Slightly larger gauge */ height: 170px; position: relative; }.bdi-gauge-svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); /* Start arc from top */ }.gauge-bg, .gauge-fill { cx: 50%; cy: 50%; r: 40%; /* Radius relative to viewbox */ fill: none; stroke-width: 18; /* Thicker stroke */ stroke-linecap: round; /* Rounded ends */ }.gauge-bg { stroke: var(--bdi-gauge-track); filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.05)); }.gauge-fill { stroke: var(--bdi-normal); /* Default color */ stroke-dasharray: 251.327; /* 2 * PI * R (approx for 40% radius) */ stroke-dashoffset: 251.327; /* Start empty */ transition: stroke-dashoffset 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55), stroke 0.5s ease; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); }/* Text needs to be outside the rotated SVG or counter-rotated */ .gauge-text-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; /* Allow clicks through to elements behind if needed */ }.gauge-score-text { font-size: 42px; /* Larger score */ font-weight: 700; color: var(--bdi-text-primary); line-height: 1; transition: color 0.5s ease; }.gauge-max-score-text { font-size: 13px; color: var(--bdi-text-secondary); line-height: 1; }.bdi-interpretation-text { flex: 1; min-width: 280px; text-align: left; }#bdi-interpretation { font-size: 1.35em; /* Larger interpretation level */ font-weight: 600; margin-bottom: 8px; transition: color 0.5s ease; }#bdi-interpretation-detail { font-size: 1.05em; color: var(--bdi-text-secondary); line-height: 1.65; }/* --- Responsive Adjustments --- */ @media (max-width: 700px) { .bdi-container { padding: 25px 15px; } .bdi-header h2 { font-size: 1.6em; } .bdi-header p { font-size: 0.95em; } .bdi-question { padding: 20px 15px; } .bdi-options { padding-left: 10px; } .bdi-question-header { margin-bottom: 10px;} .bdi-question-number { width: 28px; height: 28px; line-height: 28px; font-size: 0.9em; margin-right: 12px; } .bdi-question-title { font-size: 1em; } .bdi-option label { padding: 12px 15px; } .bdi-option .option-text { font-size: 0.95em; } .bdi-results { padding: 25px 20px; } .bdi-results-content { flex-direction: column; gap: 25px; } .bdi-interpretation-text { text-align: center; } .bdi-gauge-container { width: 150px; height: 150px; } .gauge-score-text { font-size: 36px; } #bdi-interpretation { font-size: 1.2em; } #bdi-interpretation-detail { font-size: 1em; } }@media (max-width: 480px) { .bdi-header h2 { font-size: 1.4em; } .bdi-option label { flex-direction: column; align-items: flex-start; } /* Stack score and text */ .bdi-option .option-score { margin-bottom: 5px; } .bdi-option input[type="radio"]:checked + label::after { right: 10px; top: 15px; transform: translateY(0) scale(0.5); } /* Adjust checkmark pos */ .bdi-option input[type="radio"]:checked + label:hover::after { transform: translateY(0) scale(1); } }

document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('bdi-form'); const resultsSection = document.getElementById('bdi-results-section'); const scoreDisplay = document.getElementById('gauge-score'); const gaugeFill = document.getElementById('gauge-fill-circle'); // Using Circle for Arc Gauge const interpretationDisplay = document.getElementById('bdi-interpretation'); const interpretationDetailDisplay = document.getElementById('bdi-interpretation-detail'); const progressFill = document.getElementById('bdi-progress-fill'); const progressText = document.getElementById('bdi-progress-text'); const resetButton = document.getElementById('bdi-reset-button'); const bdiContainer = document.getElementById('bdiContainer'); const questions = form.querySelectorAll('.bdi-question');const totalQuestions = 21; const maxScore = totalQuestions * 3; // 63 const gaugeRadius = parseFloat(gaugeFill.getAttribute('r')); // Get radius dynamically (ensure it's set in %) // Calculate circumference based on the assumed radius of the viewBox (50) and percentage radius const gaugeCircumference = 2 * Math.PI * (gaugeRadius / 100 * 50); // Adjust 50 if viewbox center changes// Add focus class for interaction visual feedback questions.forEach(q => { q.addEventListener('focusin', () => q.classList.add('focused')); q.addEventListener('focusout', () => q.classList.remove('focused')); });function calculateScore() { let score = 0; let answeredQuestions = 0; const checkedRadios = form.querySelectorAll('input[type="radio"]:checked');checkedRadios.forEach(radio => { score += parseInt(radio.value, 10); answeredQuestions++; });return { score, answeredQuestions }; }function getInterpretation(score) { let level = ''; let detail = ''; let colorVar = '--bdi-normal'; // CSS variable nameif (score >= 0 && score = 11 && score = 17 && score = 21 && score = 31 && score 40) { level = 'Extreme Depression'; detail = 'Indicates extreme depression. Seeking professional help is strongly recommended.'; colorVar = '--bdi-extreme'; } else { // Should only happen if score is negative, which is impossible here level = 'Error'; detail = 'An error occurred calculating the score.'; colorVar = '--bdi-gauge-track'; } return { level, detail, colorVar }; }function updateGaugeVisuals(score, colorVar) { const scorePercentage = (score / maxScore); const severityColor = getComputedStyle(document.documentElement).getPropertyValue(colorVar).trim();// Arc Gauge Logic (Circle) // stroke-dashoffset goes from circumference (empty) down to 0 (full) const dashOffset = gaugeCircumference * (1 - scorePercentage); gaugeFill.style.strokeDashoffset = Math.max(0, Math.min(gaugeCircumference, dashOffset)); gaugeFill.style.stroke = severityColor;scoreDisplay.textContent = score; scoreDisplay.style.color = severityColor; // Match text color to gauge fill }function updateUI() { const { score, answeredQuestions } = calculateScore(); const { level, detail, colorVar } = getInterpretation(score); const severityColor = getComputedStyle(document.documentElement).getPropertyValue(colorVar).trim();// Update Progress Bar const progressPercentage = (answeredQuestions / totalQuestions) * 100; progressFill.style.width = `${progressPercentage}%`; progressText.textContent = `${answeredQuestions} / ${totalQuestions} Answered`;// Update Interpretation Text interpretationDisplay.textContent = level; interpretationDisplay.style.color = severityColor; interpretationDetailDisplay.textContent = detail;// Update Gauge updateGaugeVisuals(score, colorVar);// Toggle Reset Button Activation if (answeredQuestions > 0) { resetButton.classList.add('active'); } else { resetButton.classList.remove('active'); }// Show/Hide Results Section if (answeredQuestions === totalQuestions) { if (!resultsSection.classList.contains('visible')) { resultsSection.classList.add('visible'); // Smooth scroll to results only when first completed setTimeout(() => { // Timeout allows display:block to apply before scroll resultsSection.scrollIntoView({ behavior: 'smooth', block: 'end' }); }, 100); // Small delay } } else { resultsSection.classList.remove('visible'); } }function resetForm() { form.reset(); // Resets the form elements (unchecks radios) updateUI(); // Update UI to reflect the reset state (score 0, progress 0 etc.) resultsSection.classList.remove('visible'); // Ensure results are hidden resetButton.classList.remove('active'); // Deactivate reset button// Scroll back to the top of the BDI container bdiContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); }// --- Event Listeners --- form.addEventListener('change', updateUI); resetButton.addEventListener('click', resetForm);// Initial call to set defaults updateUI();});