Interactive Young Mania Rating Scale (YMRS)/* --- Base Styles & Variables --- */ :root { --ymrs-bg: #f8f7fc; /* Lighter, slightly warm purple */ --ymrs-card-bg: #ffffff; --ymrs-text-primary: #3d3a50; /* Dark grayish purple */ --ymrs-text-secondary: #6a677e; /* Lighter grayish purple */ --ymrs-accent1: #7b2cbf; /* Vibrant Purple */ --ymrs-accent2: #5a189a; /* Deeper Purple */ --ymrs-accent3: #f7b801; /* Gold/Yellow Accent */ --ymrs-accent4: #00a896; /* Teal Accent */ --ymrs-highlight: #e0cffc; /* Light purple highlight */ --ymrs-border: #e8e4f3; --ymrs-shadow: 0 8px 25px rgba(90, 24, 154, 0.08); /* Soft purple shadow */ --ymrs-shadow-inset: inset 2px 2px 5px rgba(224, 207, 252, 0.5), inset -2px -2px 5px #ffffff; --ymrs-shadow-hover: 0 12px 30px rgba(123, 44, 191, 0.15); --ymrs-radius: 16px; --ymrs-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --ymrs-progress-bar-bg: #ede7f6; /* Lighter than highlight *//* Severity Colors */ --ymrs-remission: #00a896; /* Teal */ --ymrs-mild: #f7b801; /* Gold */ --ymrs-moderate: #e76f51; /* Orangey-Red */ --ymrs-severe: #d90429; /* Strong Red */ --ymrs-gauge-track: #efefef; }/* Apply a suitable Font */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');.ymrs-container * { box-sizing: border-box; font-family: 'Inter', sans-serif; /* Clean sans-serif */ }.ymrs-container { background: linear-gradient(140deg, var(--ymrs-bg) 0%, #f3f1fa 100%); padding: 40px 30px; max-width: 900px; margin: 30px auto; border-radius: var(--ymrs-radius); box-shadow: var(--ymrs-shadow); color: var(--ymrs-text-primary); overflow: hidden; position: relative; /* For potential absolute elements */ }.ymrs-header h2 { text-align: center; color: var(--ymrs-accent2); margin-bottom: 12px; font-weight: 700; font-size: 2em; /* Bolder title */ letter-spacing: -0.5px; }.ymrs-header p { text-align: center; color: var(--ymrs-text-secondary); margin-bottom: 30px; font-size: 1.05em; line-height: 1.6; max-width: 700px; margin-left: auto; margin-right: auto; }/* --- Progress Bar --- */ .ymrs-progress-container { margin-bottom: 35px; padding: 0 10px; }.ymrs-progress-label { font-size: 0.95em; color: var(--ymrs-text-secondary); margin-bottom: 10px; display: flex; justify-content: space-between; font-weight: 500; }.ymrs-progress-bar { width: 100%; height: 12px; /* Slightly thicker */ background-color: var(--ymrs-progress-bar-bg); border-radius: 6px; overflow: hidden; box-shadow: var(--ymrs-shadow-inset); }.ymrs-progress-fill { width: 0%; /* Starts empty */ height: 100%; background: linear-gradient(90deg, var(--ymrs-accent3), var(--ymrs-accent1)); /* Gold to Purple */ border-radius: 6px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }/* --- Question Styling --- */ .ymrs-questions { list-style: none; padding: 0; margin: 0; }.ymrs-question { background-color: var(--ymrs-card-bg); margin-bottom: 30px; padding: 28px; /* More padding */ border-radius: var(--ymrs-radius); border: 1px solid var(--ymrs-border); transition: var(--ymrs-transition); box-shadow: 0 4px 10px rgba(0,0,0,0.03); }.ymrs-question:focus-within, .ymrs-question.focused { border-color: var(--ymrs-accent1); box-shadow: var(--ymrs-shadow-hover); transform: translateY(-3px) scale(1.01); /* Enhanced lift */ }.ymrs-question-header { display: flex; align-items: center; margin-bottom: 18px; cursor: default; }.ymrs-question-number { display: inline-block; background: linear-gradient(135deg, var(--ymrs-accent1), var(--ymrs-accent2)); /* Purple gradient */ color: white; font-weight: 600; width: 36px; /* Larger number circle */ height: 36px; line-height: 36px; text-align: center; border-radius: 50%; margin-right: 18px; font-size: 1em; flex-shrink: 0; box-shadow: 0 3px 8px rgba(123, 44, 191, 0.3); }.ymrs-question-title { /* For ARIA */ font-size: 1.2em; /* Larger title */ font-weight: 600; /* Bolder title */ color: var(--ymrs-text-primary); }/* Differentiate double-weighted items subtly */ .ymrs-question.double-weighted .ymrs-question-number { background: linear-gradient(135deg, var(--ymrs-accent3), #fca311); /* Gold gradient */ box-shadow: 0 3px 8px rgba(247, 184, 1, 0.4); }.ymrs-options { display: grid; grid-template-columns: 1fr; gap: 14px; padding-left: 54px; /* Align with title text (36px + 18px margin) */ }.ymrs-option label { display: flex; align-items: center; padding: 16px 20px; /* More padding */ background-color: #fdfcff; /* Very light bg */ border: 1px solid var(--ymrs-border); border-radius: 12px; cursor: pointer; transition: var(--ymrs-transition); position: relative; overflow: hidden; }.ymrs-option input[type="radio"] { opacity: 0; position: absolute; width: 0; height: 0; }/* Improved focus visibility */ .ymrs-option input[type="radio"]:focus-visible + label { outline: 2px solid var(--ymrs-accent1); outline-offset: 2px; border-color: var(--ymrs-accent1); }.ymrs-option .option-score { font-weight: 700; /* Bold score */ color: var(--ymrs-accent1); background-color: rgba(123, 44, 191, 0.09); border-radius: 8px; padding: 5px 10px; margin-right: 18px; font-size: 0.95em; min-width: 25px; text-align: center; transition: var(--ymrs-transition); }.ymrs-option .option-text { flex-grow: 1; font-size: 1em; color: var(--ymrs-text-secondary); line-height: 1.6; transition: var(--ymrs-transition); }/* --- Hover and Checked States --- */ .ymrs-option label:hover { background-color: var(--ymrs-highlight); border-color: var(--ymrs-accent1); box-shadow: 0 5px 12px rgba(123, 44, 191, 0.1); transform: scale(1.015); /* Slightly more scale */ }.ymrs-option input[type="radio"]:checked + label { background: linear-gradient(135deg, var(--ymrs-accent1), var(--ymrs-accent2)); border-color: transparent; color: white; box-shadow: 0 6px 18px rgba(123, 44, 191, 0.25); transform: scale(1.02); }.ymrs-option input[type="radio"]:checked + label .option-score { background-color: white; color: var(--ymrs-accent2); transform: rotate(-5deg) scale(1.15); /* Adjusted effect */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); }.ymrs-option input[type="radio"]:checked + label .option-text { color: white; font-weight: 500; }/* Custom Checkmark / Indicator */ .ymrs-option input[type="radio"]:checked + label::before { content: '★'; /* Star or other icon */ position: absolute; right: 20px; top: 50%; transform: translateY(-50%) scale(0.5) rotate(-45deg); /* Start smaller and rotated */ font-size: 1.6em; /* Larger icon */ color: var(--ymrs-accent3); /* Gold color */ opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out; transition-delay: 0.1s; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } .ymrs-option input[type="radio"]:checked + label:hover::before { transform: translateY(-50%) scale(1) rotate(0deg); /* Full size, rotate in */ opacity: 1; }/* --- Reset Button Styling --- */ .ymrs-reset-container { text-align: center; margin: 35px 0 25px 0; }#ymrs-reset-button { background: linear-gradient(135deg, #fca311, var(--ymrs-accent3)); /* Gold/Orange */ color: var(--ymrs-accent2); /* Dark purple text */ border: none; padding: 14px 35px; /* Larger button */ font-size: 1.05em; font-weight: 600; border-radius: 30px; cursor: pointer; transition: var(--ymrs-transition); box-shadow: 0 5px 18px rgba(247, 184, 1, 0.3); opacity: 0.5; pointer-events: none; }#ymrs-reset-button.active { opacity: 1; pointer-events: auto; }#ymrs-reset-button:hover:not(:disabled) { box-shadow: 0 7px 22px rgba(247, 184, 1, 0.45); transform: translateY(-3px); } #ymrs-reset-button:active:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(247, 184, 1, 0.35); }/* --- Results Section --- */ .ymrs-results { margin-top: 40px; background-color: var(--ymrs-card-bg); padding: 40px 35px; border-radius: var(--ymrs-radius); border-top: 5px solid var(--ymrs-accent1); /* Top border accent */ text-align: center; box-shadow: var(--ymrs-shadow); position: relative; display: none; /* Hidden initially */ opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }.ymrs-results.visible { display: block; opacity: 1; transform: translateY(0); }.ymrs-results h3 { margin: 0 0 25px 0; color: var(--ymrs-accent2); font-size: 1.8em; font-weight: 700; }.ymrs-results-content { display: flex; width: 100%; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }/* --- SVG Arc Gauge Styling --- */ .ymrs-gauge-container { width: 180px; /* Larger gauge */ height: 180px; position: relative; }.ymrs-gauge-svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-120deg); /* Start arc slightly lower left */ }.gauge-bg, .gauge-fill { cx: 50%; cy: 50%; r: 42%; /* Radius relative to viewbox */ fill: none; stroke-width: 16; /* Slightly thinner stroke */ stroke-linecap: round; }.gauge-bg { stroke: var(--ymrs-gauge-track); stroke-dasharray: 210; /* Circumference for 240 degrees (2/3 circle) */ stroke-dashoffset: 0; /* Full background arc visible */ }.gauge-fill { stroke: var(--ymrs-remission); /* Default color */ stroke-dasharray: 210; /* Match background arc length */ stroke-dashoffset: 210; /* Start empty */ transition: stroke-dashoffset 0.9s cubic-bezier(0.6, 0, 0.4, 1), stroke 0.5s ease; /* Smoother animation */ filter: drop-shadow(3px 5px 7px rgba(0,0,0,0.12)); }/* 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; }.gauge-score-text { font-size: 46px; /* Bigger score */ font-weight: 700; color: var(--ymrs-text-primary); line-height: 1; transition: color 0.5s ease; }.gauge-max-score-text { font-size: 14px; color: var(--ymrs-text-secondary); line-height: 1; margin-top: 2px; }.ymrs-interpretation-text { flex: 1; min-width: 300px; text-align: left; }#ymrs-interpretation { font-size: 1.5em; /* Larger interpretation level */ font-weight: 600; margin-bottom: 10px; transition: color 0.5s ease; }#ymrs-interpretation-detail { font-size: 1.1em; /* Slightly larger detail */ color: var(--ymrs-text-secondary); line-height: 1.7; }.ymrs-disclaimer { font-size: 0.9em; color: #888; margin-top: 30px; text-align: center; max-width: 600px; margin-left: auto; margin-right:auto; line-height: 1.5; }/* --- Responsive Adjustments --- */ @media (max-width: 768px) { .ymrs-container { padding: 30px 20px; } .ymrs-header h2 { font-size: 1.7em; } .ymrs-header p { font-size: 1em; } .ymrs-question { padding: 25px 20px; } .ymrs-options { padding-left: 15px; } .ymrs-question-header { margin-bottom: 15px;} .ymrs-question-number { width: 32px; height: 32px; line-height: 32px; font-size: 0.9em; margin-right: 15px; } .ymrs-question-title { font-size: 1.1em; } .ymrs-option label { padding: 14px 18px; } .ymrs-option .option-text { font-size: 0.95em; } .ymrs-results { padding: 30px 25px; } .ymrs-results-content { flex-direction: column; gap: 30px; } .ymrs-interpretation-text { text-align: center; } .ymrs-gauge-container { width: 160px; height: 160px; } .gauge-score-text { font-size: 40px; } #ymrs-interpretation { font-size: 1.3em; } #ymrs-interpretation-detail { font-size: 1em; } }@media (max-width: 480px) { .ymrs-header h2 { font-size: 1.5em; } .ymrs-options { padding-left: 5px; } /* Align closer on mobile */ .ymrs-option label { flex-direction: column; align-items: flex-start; } /* Stack score/text */ .ymrs-option .option-score { margin-bottom: 8px; } .ymrs-option input[type="radio"]:checked + label::before { right: 12px; top: 18px; transform: translateY(0) scale(0.5) rotate(-45deg); } /* Adjust icon pos */ .ymrs-option input[type="radio"]:checked + label:hover::before { transform: translateY(0) scale(1) rotate(0deg); } .ymrs-disclaimer { font-size: 0.85em; } }

Young Mania Rating Scale (YMRS)

This scale assesses manic symptoms based on your clinical condition over the previous 48 hours. Please rate the severity of each item, considering both subjective report and clinical observations.

Scale Progress 0 / 11 Items Rated
  • 1

    Elevated Mood

  • 2

    Increased Motor Activity-Energy

  • 3

    Sexual Interest

  • 4

    Sleep

  • 5

    Irritability

  • 6

    Speech (Rate and Amount)

  • 7

    Language-Thought Disorder

  • 8

    Content

  • 9

    Disruptive-Aggressive Behavior

  • 10

    Appearance

  • 11

    Insight

YMRS Score

0
/ 60

Remission / Euthymia

Score suggests symptoms are within the normal range or remission.

Disclaimer: The YMRS is a tool designed for use by trained clinicians to assess mania severity. This interactive version is for educational and informational purposes only and is not a substitute for professional medical evaluation, diagnosis, or treatment. If you have concerns about your mental health, please consult a qualified healthcare provider.

document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('ymrs-form'); const resultsSection = document.getElementById('ymrs-results-section'); const scoreDisplay = document.getElementById('gauge-score'); const gaugeFill = document.getElementById('gauge-fill-circle'); const interpretationDisplay = document.getElementById('ymrs-interpretation'); const interpretationDetailDisplay = document.getElementById('ymrs-interpretation-detail'); const progressFill = document.getElementById('ymrs-progress-fill'); const progressText = document.getElementById('ymrs-progress-text'); const resetButton = document.getElementById('ymrs-reset-button'); const ymrsContainer = document.getElementById('ymrsContainer'); const questions = form.querySelectorAll('.ymrs-question');const totalQuestions = 11; const maxScore = 60; // (7 items * 4 points) + (4 items * 8 points) = 28 + 32 = 60 const gaugeRadius = parseFloat(gaugeFill.getAttribute('r')); // e.g., 42% const viewBoxSize = 100; // Assuming viewBox is "0 0 100 100" const actualRadius = (gaugeRadius / 100) * (viewBoxSize / 2); // Gauge covers 240 degrees (2/3 of circle) const gaugeCircumference = (240 / 360) * 2 * Math.PI * actualRadius;// Add focus class for interaction visual feedback questions.forEach(q => { // Using mouseenter/mouseleave for hover effect persistence is tricky with radio groups // Sticking to focus-within CSS for reliable interactive state indication 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 }; }// Interpretation based on common clinical guidelines function getInterpretation(score) { let level = ''; let detail = ''; let colorVar = '--ymrs-remission'; // Default CSS variableif (score >= 0 && score = 12 && score = 20 && score = 26) { // Simplified '>25' as >=26 level = 'Severe Mania'; detail = 'Score indicates symptoms consistent with severe mania. Clinical evaluation is strongly recommended.'; colorVar = '--ymrs-severe'; } else { level = 'Error'; detail = 'An error occurred calculating the score.'; colorVar = '--ymrs-gauge-track'; } return { level, detail, colorVar }; }function updateGaugeVisuals(score, colorVar) { const scorePercentage = Math.min(1, Math.max(0, score / maxScore)); // Clamp between 0 and 1 const severityColor = getComputedStyle(document.documentElement).getPropertyValue(colorVar).trim();// Arc Gauge Logic (Circle stroke-dashoffset) 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} Items Rated`;// 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(() => { resultsSection.scrollIntoView({ behavior: 'smooth', block: 'end' }); }, 150); // Slightly longer delay for animation } } else { resultsSection.classList.remove('visible'); } }function resetForm() { form.reset(); updateUI(); resultsSection.classList.remove('visible'); resetButton.classList.remove('active');// Scroll back to the top ymrsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); }// --- Event Listeners --- form.addEventListener('change', updateUI); resetButton.addEventListener('click', resetForm);// Initial call to set defaults updateUI();});/* --- 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 */ }