Interactive Edinburgh Postnatal Depression Scale (EPDS)/* --- Fonts (Optional - Use your theme's font or add Google Fonts) --- */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); *//* --- Root Variables for Easy Theming --- */ :root { --epds-font-family: 'Poppins', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; --epds-primary-color: #6a1b9a; /* Deep Purple */ --epds-secondary-color: #ab47bc; /* Lighter Purple */ --epds-accent-color: #f48fb1; /* Soft Pink */ --epds-bg-color: #f3e5f5; /* Very Light Purple BG */ --epds-card-bg: #ffffff; --epds-text-color: #333; --epds-light-text-color: #555; --epds-highlight-color: #e1bee7; /* Light Purple Highlight */ --epds-warning-color: #d32f2f; /* Warning Red */ --epds-success-color: #4caf50; /* Green for low score */ --epds-neutral-color: #ffb74d; /* Orange for mid score */ --epds-border-radius: 12px; --epds-box-shadow: 0 4px 15px rgba(106, 27, 154, 0.1); --epds-transition: all 0.3s ease-in-out; }/* --- Base Styles --- */ .epds-container { font-family: var(--epds-font-family); background: linear-gradient(135deg, var(--epds-bg-color), #e1f5fe); /* Light purple to light blue gradient */ color: var(--epds-text-color); padding: 25px 15px; margin: 20px auto; max-width: 800px; border-radius: var(--epds-border-radius); box-shadow: var(--epds-box-shadow); overflow: hidden; /* Contain elements */ }.epds-container h2, .epds-container h3 { color: var(--epds-primary-color); text-align: center; margin-bottom: 1em; }.epds-container h2 { font-size: 1.8em; font-weight: 600; } .epds-container h3 { font-size: 1.3em; font-weight: 500; margin-top: 1.5em; }.epds-container p { line-height: 1.6; margin-bottom: 1em; color: var(--epds-light-text-color); }/* --- Introduction Section --- */ .epds-intro { background: rgba(255, 255, 255, 0.5); padding: 20px; border-radius: var(--epds-border-radius); margin-bottom: 30px; border-left: 5px solid var(--epds-secondary-color); }.epds-intro strong { color: var(--epds-primary-color); }.epds-instructions { font-style: italic; background: var(--epds-highlight-color); padding: 10px 15px; border-radius: 8px; text-align: center; color: var(--epds-primary-color); font-weight: 500; margin-bottom: 25px; }/* --- Form Styling --- */ #epds-form { background: var(--epds-card-bg); padding: 30px; border-radius: var(--epds-border-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }/* --- Question Styling --- */ .epds-question { margin-bottom: 35px; padding: 20px; border: 1px solid #eee; border-radius: var(--epds-border-radius); background-color: #fdfdfd; /* Slightly off-white */ transition: var(--epds-transition); position: relative; /* For numbering */ }.epds-question:focus-within { /* Highlight when interacting */ border-color: var(--epds-secondary-color); box-shadow: 0 0 0 3px rgba(171, 71, 188, 0.2); }.epds-question .q-number { position: absolute; top: -15px; left: -10px; background: var(--epds-secondary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; box-shadow: 0 2px 5px rgba(106, 27, 154, 0.3); }.epds-question .question-text { font-weight: 500; color: var(--epds-primary-color); margin-bottom: 15px; padding-top: 10px; /* Space below number */ }.epds-question .options-group { display: flex; flex-direction: column; gap: 10px; }/* --- Custom Radio Button Styling --- */ .epds-question .options-group label { display: block; /* Make label take full width */ background: #f9f9f9; padding: 12px 15px 12px 45px; /* Space for custom radio */ border-radius: 8px; cursor: pointer; position: relative; transition: var(--epds-transition); border: 1px solid #eee; }.epds-question .options-group label:hover { background: var(--epds-highlight-color); border-color: var(--epds-secondary-color); }/* Hide default radio button */ .epds-question .options-group input[type="radio"] { opacity: 0; position: absolute; width: 0; height: 0; }/* Custom radio button appearance */ .epds-question .options-group label::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid var(--epds-secondary-color); border-radius: 50%; background: #fff; transition: var(--epds-transition); }/* Checked state for custom radio */ .epds-question .options-group input[type="radio"]:checked + label::before { background-color: var(--epds-secondary-color); border-color: var(--epds-primary-color); }/* Dot inside checked radio */ .epds-question .options-group input[type="radio"]:checked + label::after { content: ''; position: absolute; left: 21px; /* Center dot */ top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: white; transition: var(--epds-transition); }/* Style for the selected label */ .epds-question .options-group input[type="radio"]:checked + label { background-color: var(--epds-highlight-color); border-color: var(--epds-primary-color); color: var(--epds-primary-color); font-weight: 500; }/* --- Item 10 Specific Styling --- */ .epds-question[data-question-id="10"] { border-left: 5px solid var(--epds-warning-color); background-color: #fff3f3; /* Subtle warning background */ } .epds-question[data-question-id="10"] .q-number { background: var(--epds-warning-color); } .epds-question[data-question-id="10"] .question-text { color: var(--epds-warning-color); font-weight: 600; } /* Highlight risky answers for Q10 when selected */ .epds-question[data-question-id="10"] input[type="radio"][value="1"]:checked + label, .epds-question[data-question-id="10"] input[type="radio"][value="2"]:checked + label, .epds-question[data-question-id="10"] input[type="radio"][value="3"]:checked + label { background-color: #fddede; /* Light red highlight */ border-color: var(--epds-warning-color); color: var(--epds-warning-color); font-weight: 600; } .epds-question[data-question-id="10"] input[type="radio"][value="1"]:checked + label::before, .epds-question[data-question-id="10"] input[type="radio"][value="2"]:checked + label::before, .epds-question[data-question-id="10"] input[type="radio"][value="3"]:checked + label::before { background-color: var(--epds-warning-color); border-color: #b71c1c; }/* --- Comments Section --- */ .epds-comments { margin-top: 20px; } .epds-comments label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--epds-primary-color); } .epds-comments textarea { width: 100%; min-height: 80px; padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-family: var(--epds-font-family); font-size: 1rem; transition: border-color 0.3s ease; } .epds-comments textarea:focus { border-color: var(--epds-secondary-color); outline: none; box-shadow: 0 0 0 2px rgba(171, 71, 188, 0.2); }/* --- Controls Section --- */ .epds-controls { margin-top: 30px; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; /* Allow buttons to wrap on small screens */ }.epds-controls button { padding: 12px 25px; font-size: 1.1em; font-weight: 500; border: none; border-radius: 8px; cursor: pointer; transition: var(--epds-transition); min-width: 150px; /* Ensure buttons have decent size */ }#calculate-score { background: linear-gradient(45deg, var(--epds-primary-color), var(--epds-secondary-color)); color: white; box-shadow: 0 2px 5px rgba(106, 27, 154, 0.4); } #calculate-score:hover { opacity: 0.9; box-shadow: 0 4px 10px rgba(106, 27, 154, 0.5); }#reset-form { background: #eee; color: var(--epds-light-text-color); border: 1px solid #ccc; } #reset-form:hover { background: #ddd; color: var(--epds-text-color); }/* --- Results Section --- */ .epds-results { margin-top: 35px; padding: 25px; background: var(--epds-card-bg); border-radius: var(--epds-border-radius); box-shadow: var(--epds-box-shadow); text-align: center; border-top: 5px solid; /* Color set by JS */ border-color: var(--epds-highlight-color); /* Default border color */ display: none; /* Initially hidden */ animation: fadeIn 0.5s ease-in-out; }@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }.epds-results h3 { margin-top: 0; margin-bottom: 15px; color: var(--epds-primary-color); }.epds-results .score-display { font-size: 2.5em; font-weight: 600; color: var(--epds-primary-color); margin-bottom: 15px; display: inline-block; /* Allows background */ padding: 5px 15px; border-radius: 8px; background-color: var(--epds-highlight-color); }/* Style score display based on range */ .epds-results.score-low .score-display { background-color: #e8f5e9; color: #2e7d32; } .epds-results.score-low { border-top-color: var(--epds-success-color); } .epds-results.score-medium .score-display { background-color: #fff3e0; color: #ef6c00; } .epds-results.score-medium { border-top-color: var(--epds-neutral-color); } .epds-results.score-high .score-display { background-color: #ffebee; color: #c62828; } .epds-results.score-high { border-top-color: var(--epds-warning-color); }.epds-results #score-interpretation { font-size: 1.1em; color: var(--epds-text-color); margin-bottom: 20px; }/* --- Item 10 Warning --- */ #item10-warning { margin-top: 20px; padding: 15px; background: #ffebee; /* Light red */ border: 2px solid var(--epds-warning-color); border-radius: 8px; color: var(--epds-warning-color); font-weight: 600; display: none; /* Initially hidden */ animation: pulse 1.5s infinite; } #item10-warning p { color: var(--epds-warning-color); /* Ensure p inherits color */ margin: 0; } #item10-warning strong { font-size: 1.1em; }@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); } }/* --- Error Message Styling --- */ #epds-error-message { color: var(--epds-warning-color); font-weight: bold; text-align: center; margin-top: 15px; display: none; /* Initially hidden */ background-color: #ffebee; padding: 10px; border-radius: 8px; }/* --- Responsiveness --- */ @media (max-width: 600px) { .epds-container { padding: 15px 10px; } #epds-form { padding: 20px 15px; } .epds-question { padding: 15px 15px 15px 20px; /* Adjust padding */ margin-bottom: 25px; } .epds-question .q-number { left: -5px; /* Adjust number position */ width: 25px; height: 25px; font-size: 0.9em; } .epds-question .options-group label { padding: 10px 15px 10px 40px; /* Adjust padding */ font-size: 0.95em; } .epds-question .options-group label::before { width: 16px; height: 16px; left: 12px; } .epds-question .options-group input[type="radio"]:checked + label::after { width: 7px; height: 7px; left: 16.5px; }.epds-controls button { font-size: 1em; padding: 10px 20px; width: 100%; /* Stack buttons */ } .epds-results { padding: 20px; } .epds-results .score-display { font-size: 2em; } .epds-results #score-interpretation { font-size: 1em; } }

The Edinburgh Postnatal Depression Scale (EPDS)

(J L Cox, J M. Holden, R Sagovsky – 1987)

This 10-item self-report measure is designed to screen for symptoms of emotional distress during pregnancy and the postnatal period.

Important: The EPDS is a screening tool, not a diagnostic tool. It must always be used in conjunction with clinical assessment.

This scale asks about feelings over the past 7 days. It may need to be repeated later as clinically warranted.

Item 10: This question asks about thoughts of self-harm. If you score 1, 2, or 3 on this item (meaning you have had these thoughts), it is crucial to discuss this immediately with your GP, midwife, or healthcare provider to ensure your safety and the safety of your baby.

Please select the option that comes closest to how you have felt in the PAST SEVEN DAYS.

1

I have been able to laugh and see the funny side of things:

2

I have looked forward with enjoyment to things:

3

*I have blamed myself unnecessarily when things went wrong:

4

I have been anxious or worried for no good reason:

5

*I have felt scared or panicky for no very good reason:

6

*Things have been getting on top of me:

7

*I have been so unhappy that I have had difficulty sleeping:

8

*I have felt sad or miserable:

9

*I have been so unhappy that I have been crying:

10

*The thought of harming myself has occurred to me:

Your EPDS Score

IMPORTANT: Because you indicated having thoughts of harming yourself (Item 10), further evaluation is required immediately. Please tell your GP, midwife, or healthcare provider about these thoughts today to ensure your safety and the safety of your baby.

document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('epds-form'); const calculateBtn = document.getElementById('calculate-score'); const resetBtn = document.getElementById('reset-form'); const resultsDiv = document.getElementById('epds-results'); const scoreSpan = document.getElementById('total-score'); const interpretationP = document.getElementById('score-interpretation'); const item10WarningDiv = document.getElementById('item10-warning'); const errorMessageDiv = document.getElementById('epds-error-message'); const totalQuestions = 10;calculateBtn.addEventListener('click', calculateAndShowScore); resetBtn.addEventListener('click', resetScale);function calculateAndShowScore() { let totalScore = 0; let item10Score = -1; // Use -1 to indicate not answered yet let allAnswered = true;errorMessageDiv.style.display = 'none'; // Hide previous errorsfor (let i = 1; i { const radioChecked = qDiv.querySelector('input[type="radio"]:checked'); if(radioChecked || !allAnswered) { // Remove highlight if answered or if we haven't calculated yet // qDiv.style.borderColor = '#eee'; // Reset border - maybe remove this line if :focus-within handles it better } });if (!allAnswered) { errorMessageDiv.textContent = 'Please answer all 10 questions before calculating the score.'; errorMessageDiv.style.display = 'block'; resultsDiv.style.display = 'none'; // Hide results if shown previously // Scroll to first unanswered? Optional. const firstUnanswered = form.querySelector('input[type="radio"]:not(:checked)').closest('.epds-question'); if(firstUnanswered){ firstUnanswered.scrollIntoView({ behavior: 'smooth', block: 'center' }); } return; }// Display score and interpretation scoreSpan.textContent = totalScore; resultsDiv.classList.remove('score-low', 'score-medium', 'score-high'); // Clear previous classesif (totalScore <= 9) { interpretationP.innerHTML = `Score Range 0-9: Your score suggests you may be experiencing some symptoms of distress. These might be short-lived and are less likely to significantly interfere with your daily life. However, if these feelings persist for more than a week or two, further discussion with your healthcare provider is warranted.`; resultsDiv.classList.add('score-low'); } else if (totalScore >= 10 && totalScore <= 12) { interpretationP.innerHTML = `Score Range 10-12: Your score indicates the presence of symptoms of distress that may be causing discomfort. It's recommended to monitor your progress and consider repeating the scale in about 2 weeks. If your score increases or remains in this range, further assessment and potential referral should be considered. Discuss these feelings with your healthcare provider.`; resultsDiv.classList.add('score-medium'); } else { // Score 13+ interpretationP.innerHTML = `Score Range 13+: Your score suggests a high likelihood of depression, requiring further assessment and appropriate management. It is important to seek help. Referral to a psychiatrist, psychologist, or mental health professional may be necessary. Please discuss this score and your feelings with your healthcare provider urgently.`; resultsDiv.classList.add('score-high'); }// Handle Item 10 Warning - THIS OVERRIDES OTHER INTERPRETATIONS IN IMPORTANCE if (item10Score >= 1 && item10Score <= 3) { item10WarningDiv.style.display = 'block'; resultsDiv.classList.remove('score-low', 'score-medium'); // Remove styling conflict resultsDiv.classList.add('score-high'); // Always treat as high concern // Optional: Prepend a note to the main interpretation interpretationP.innerHTML = `Note: Presence of self-harm thoughts requires immediate attention regardless of total score.

` + interpretationP.innerHTML;} else { item10WarningDiv.style.display = 'none'; }resultsDiv.style.display = 'block'; // Scroll to results resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'start' }); }function resetScale() { form.reset(); // Resets form inputs resultsDiv.style.display = 'none'; // Hide results item10WarningDiv.style.display = 'none'; // Hide warning errorMessageDiv.style.display = 'none'; // Hide error scoreSpan.textContent = ''; interpretationP.textContent = ''; resultsDiv.classList.remove('score-low', 'score-medium', 'score-high'); // Remove any leftover highlights from missing answers form.querySelectorAll('.epds-question').forEach(qDiv => { qDiv.style.borderColor = '#eee'; });// Scroll to top of the container const container = document.querySelector('.epds-container'); if (container) { container.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }// Add visual feedback on selection (optional but nice) form.querySelectorAll('.options-group input[type="radio"]').forEach(radio => { radio.addEventListener('change', function() { // Remove highlight from siblings in the same question const questionDiv = this.closest('.epds-question'); if(questionDiv){ questionDiv.querySelectorAll('label').forEach(lbl => lbl.classList.remove('option-selected-visual')); // Add highlight to the selected one's label // This part is handled by the :checked + label CSS now, which is cleaner. // Keeping the border reset logic in calculateAndShowScore is useful for missed questions. // Reset border if previously marked as missing if (questionDiv.style.borderColor === 'var(--epds-warning-color)') { questionDiv.style.borderColor = '#eee'; } } }); });});/* --- EduLab 'All Scales' Button Styles (Refined Pathway) --- */ .edulab-button-container { /* Centers the button horizontally */ text-align: center; padding: 25px 0; /* Adds space above/below the button */ }.edulab-button.refined-pathway { /* --- Fallback colors if CSS variables aren't available --- */ --accent-teal-bright-fb: #00f2ea; --accent-lavender-soft-fb: #c8bfff; --bg-deep-space-fb: #0a0f2e; /* Darkest background */ --bg-nebula-start-fb: #1a1f4b; /* Slightly lighter dark */ --text-primary-fb: #f0f0f5; --font-main-fb: 'Poppins', sans-serif; /* Ensure this font is loaded on your site *//* --- Base Button Styling --- */ display: inline-block; /* Needed for centering via text-align */ position: relative; padding: 15px 35px; /* Generous padding for visual presence */ margin: 10px 5px; text-decoration: none; font-family: var(--font-main, var(--font-main-fb)); font-weight: 600; font-size: 1.1rem; /* Slightly larger font */ letter-spacing: 0.5px; color: var(--accent-teal-bright, var(--accent-teal-bright-fb)); /* Bright teal text */ background-color: var(--bg-nebula-start, var(--bg-nebula-start-fb)); /* Dark base for contrast */ border: 2px solid var(--accent-teal-bright, var(--accent-teal-bright-fb)); border-radius: 10px; /* Softened corners */ overflow: hidden; /* Contains pseudo-elements */ cursor: pointer; z-index: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), /* Base shadow */ inset 0 0 8px rgba(0, 242, 234, 0.15); /* Subtle inner teal glow *//* --- Transitions --- */ transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; -webkit-backface-visibility: hidden; /* Smoother animations */ backface-visibility: hidden; }/* --- Text Span --- */ .edulab-button.refined-pathway span { position: relative; z-index: 3; /* Always on top */ display: inline-block; }/* --- Streaking Lines (Pseudo-elements) --- */ .edulab-button.refined-pathway::before, .edulab-button.refined-pathway::after { content: ''; position: absolute; top: 0; left: 0; /* Start from left edge */ width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--accent-teal-bright, var(--accent-teal-bright-fb)), transparent); opacity: 0; /* Start hidden */ z-index: 2; /* Below text, above base background */ transform: skewX(-25deg) translateX(-150%); /* Start way off-screen */ transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease; }.edulab-button.refined-pathway::after { background: linear-gradient(90deg, transparent, var(--accent-lavender-soft, var(--accent-lavender-soft-fb)), transparent); transition-delay: 0.08s; /* Slightly adjusted stagger */ }/* --- Hover Effects --- */ .edulab-button.refined-pathway:hover { color: var(--bg-deep-space, var(--bg-deep-space-fb)); /* Switch to dark text for HIGH CONTRAST */ background-color: var(--accent-teal-bright, var(--accent-teal-bright-fb)); /* Fill background with teal */ border-color: var(--accent-teal-bright, var(--accent-teal-bright-fb)); /* Border merges */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), /* Lifted shadow */ 0 0 30px rgba(0, 242, 234, 0.75); /* Stronger teal glow */ transform: translateY(-3px); /* Slight lift */ }.edulab-button.refined-pathway:hover::before, .edulab-button.refined-pathway:hover::after { transform: skewX(-25deg) translateX(150%); /* Sweep across */ opacity: 0.6; /* Make streaks visible */ } .edulab-button.refined-pathway:hover::after { opacity: 0.4; /* Lavender streak slightly fainter */ }/* --- Active (Click) Effects --- */ .edulab-button.refined-pathway:active { transform: translateY(-1px) scale(0.98); /* Push down effect */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), /* Reduced shadow */ 0 0 20px rgba(0, 242, 234, 0.6); /* Slightly reduced glow */ }