Interactive Y-BOCS Scale /* --- Global Styles & Variables --- */
:root {
--primary-color: #5b21b6; /* Deep Violet */
--secondary-color: #7c3aed; /* Brighter Violet */
--accent-color: #14b8a6; /* Teal */
--bg-color: #f8fafc; /* Very Light Gray */
--card-bg: #ffffff;
--text-color: #1f2937; /* Dark Gray */
--text-light: #4b5563; /* Medium Gray */
--border-color: #e5e7eb; /* Light Gray Border */
--selected-bg: #ede9fe; /* Light Violet Background for selected */
--score-bg: #f3e8ff; /* Lighter violet for score */
--success-low: #a7f3d0; /* Light Green */
--warning-medium: #fde68a; /* Light Yellow */
--error-high: #fecaca; /* Light Red */--font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--border-radius: 12px;
--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--transition-speed: 0.3s;
}*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}body {
font-family: var(--font-main);
color: var(--text-color);
background-color: var(--bg-color);
line-height: 1.6;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start; /* Align to top */
min-height: 100vh;
}.y-bocs-container {
background: linear-gradient(135deg, var(--card-bg) 0%, #f5f3ff 100%); /* Subtle gradient */
border-radius: var(--border-radius);
box-shadow: 0 10px 25px rgba(91, 33, 182, 0.15);
padding: 30px 35px;
max-width: 800px;
width: 100%;
margin: 20px;
}/* --- Header --- */
.y-bocs-header {
border-bottom: 2px solid var(--primary-color);
padding-bottom: 20px;
margin-bottom: 30px;
text-align: center;
}.y-bocs-header h1 {
color: var(--primary-color);
font-size: 1.8em;
font-weight: 600;
margin-bottom: 5px;
}
.y-bocs-header p {
color: var(--text-light);
font-size: 0.95em;
}.patient-info {
display: flex;
gap: 20px;
margin-top: 20px;
justify-content: center;
flex-wrap: wrap;
}.patient-info label {
display: block;
font-size: 0.9em;
color: var(--secondary-color);
margin-bottom: 3px;
font-weight: 500;
}.patient-info input {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-family: var(--font-main);
font-size: 0.95em;
min-width: 200px;
transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}.patient-info input:focus {
outline: none;
border-color: var(--secondary-color);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}/* --- Form & Sections --- */
#y-bocs-form section {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px dashed var(--border-color);
}
#y-bocs-form section:last-of-type {
border-bottom: none;
margin-bottom: 0;
}#y-bocs-form h2 {
color: var(--secondary-color);
font-size: 1.4em;
margin-bottom: 15px;
border-left: 4px solid var(--accent-color);
padding-left: 10px;
}#y-bocs-form .section-intro {
background-color: rgba(20, 184, 166, 0.05); /* Light teal bg */
padding: 12px 15px;
border-radius: 8px;
margin-bottom: 25px;
font-size: 0.9em;
color: var(--text-light);
border: 1px solid rgba(20, 184, 166, 0.2);
}/* --- Question Block --- */
.question-block {
background: var(--card-bg);
padding: 20px;
margin-bottom: 25px;
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
box-shadow: var(--box-shadow);
transition: box-shadow var(--transition-speed);
}
.question-block:focus-within {
border-left: 5px solid var(--secondary-color);
box-shadow: 0 6px 12px -1px rgba(91, 33, 182, 0.15), 0 3px 7px -2px rgba(91, 33, 182, 0.1);
}.question-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
flex-wrap: wrap; /* Wrap score if needed */
}.question-title {
color: var(--primary-color);
font-weight: 600;
font-size: 1.1em;
margin-bottom: 5px; /* Adjust as needed */
}.question-score {
font-size: 0.9em;
font-weight: bold;
color: var(--primary-color);
background-color: var(--score-bg);
padding: 3px 8px;
border-radius: 4px;
min-width: 70px;
text-align: right;
}.question-text {
font-style: italic;
color: var(--text-light);
margin-bottom: 15px;
font-size: 0.95em;
}/* --- Options Styling --- */
.options-group {
display: flex;
flex-direction: column;
gap: 10px;
}.option-label {
display: flex;
align-items: flex-start; /* Align radio with start of text */
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: background-color var(--transition-speed), border-color var(--transition-speed);
position: relative; /* For custom radio */
}.option-label:hover {
background-color: #f9fafb; /* Slightly off-white hover */
border-color: var(--secondary-color);
}.option-label input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}/* Custom Radio Button */
.custom-radio {
min-width: 18px;
height: 18px;
border: 2px solid var(--border-color);
border-radius: 50%;
margin-right: 12px;
margin-top: 2px; /* Align better with text */
position: relative;
transition: border-color var(--transition-speed);
flex-shrink: 0; /* Prevent shrinking */
}.option-label:hover .custom-radio {
border-color: var(--secondary-color);
}.option-label input[type="radio"]:checked + .custom-radio {
border-color: var(--primary-color);
}/* Custom Radio Checkmark */
.option-label input[type="radio"]:checked + .custom-radio::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: var(--primary-color);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s ease-out;
transform-origin: center center;
animation: radio-pop 0.3s forwards;
}@keyframes radio-pop {
0% { transform: translate(-50%, -50%) scale(0); }
70% { transform: translate(-50%, -50%) scale(1.1); }
100% { transform: translate(-50%, -50%) scale(1); }
}.option-content {
display: flex;
align-items: baseline; /* Align score and text */
gap: 8px;
flex-grow: 1;
}.option-score {
font-weight: bold;
color: var(--secondary-color);
min-width: 15px; /* Ensure alignment */
text-align: right;
}.option-text {
font-size: 0.95em;
color: var(--text-color);
}/* Style for selected label */
.option-label input[type="radio"]:checked ~ .option-content .option-text {
font-weight: 500; /* Slightly bolder text */
}
.option-label input[type="radio"]:checked + .custom-radio + .option-content {
/* Optional: specific style for content when selected */
}.option-label.selected { /* Class added by JS for better styling control */
background-color: var(--selected-bg);
border-left: 5px solid var(--accent-color);
padding-left: 10px; /* Adjust padding for border */
}
.option-label.selected .option-text {
color: var(--primary-color);
}/* --- Scoring Summary --- */
.scoring-summary {
margin-top: 30px;
padding: 25px;
background-color: var(--card-bg);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
border: 1px solid var(--border-color);
}.scoring-summary h2 {
text-align: center;
margin-bottom: 25px;
}.score-display-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
text-align: center;
margin-bottom: 30px;
}.score-item {
background-color: #f9fafb;
padding: 15px;
border-radius: 8px;
border: 1px solid var(--border-color);
}.score-item .score-label {
display: block;
font-size: 0.9em;
color: var(--text-light);
margin-bottom: 5px;
}.score-item .score-value {
display: block;
font-size: 1.8em;
font-weight: 600;
color: var(--primary-color);
}/* Total Score Gauge */
#total-score-gauge-container {
margin-top: 20px;
}
#total-score-gauge-label {
font-size: 0.9em;
color: var(--text-light);
text-align: center;
margin-bottom: 8px;
display: block;
}
#total-score-gauge {
width: 100%;
height: 20px;
background-color: var(--border-color);
border-radius: 10px;
overflow: hidden;
position: relative;
}
#total-score-gauge-bar {
height: 100%;
width: 0%; /* Initial width */
background: linear-gradient(90deg, var(--success-low) 0%, var(--warning-medium) 50%, var(--error-high) 100%);
border-radius: 10px 0 0 10px;
transition: width 0.5s ease-out;
position: absolute;
left: 0;
top: 0;
}
#total-score-gauge-text {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 0.85em;
font-weight: 600;
color: var(--text-light);
}/* --- Controls --- */
.y-bocs-controls {
margin-top: 30px;
text-align: center;
}#reset-button {
padding: 12px 25px;
font-size: 1.05em;
font-weight: 500;
color: white;
background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
border: none;
border-radius: 8px;
cursor: pointer;
transition: opacity var(--transition-speed), box-shadow var(--transition-speed);
box-shadow: 0 2px 5px rgba(91, 33, 182, 0.2);
}#reset-button:hover {
opacity: 0.9;
box-shadow: 0 4px 10px rgba(91, 33, 182, 0.3);
}/* --- Responsiveness --- */
@media (max-width: 600px) {
.y-bocs-container {
padding: 20px 15px;
}
.y-bocs-header h1 {
font-size: 1.5em;
}
.patient-info {
flex-direction: column;
gap: 15px;
align-items: center;
}
.patient-info div {
width: 100%;
max-width: 300px; /* Limit width on small screens */
}
.patient-info input {
width: 100%;
min-width: unset;
}
.question-block {
padding: 15px;
}
.question-header {
align-items: flex-start; /* Stack title and score */
}
.question-title {
margin-bottom: 10px;
}
.option-label {
padding: 10px;
}
.option-content {
flex-direction: column; /* Stack score and text vertically */
align-items: flex-start;
gap: 3px;
}
.option-score {
min-width: unset;
text-align: left;
font-size: 0.9em;
color: var(--text-light); /* Less emphasis on score number alone */
}
.option-text {
font-size: 0.9em;
}
.custom-radio {
margin-top: 3px; /* Adjust alignment */
}
.score-display-grid {
grid-template-columns: 1fr; /* Stack scores vertically */
gap: 15px;
}
}
Obsessive Thoughts (Questions 1-5)
Obsessions: Unwanted ideas, images, or impulses intruding on thinking despite efforts to resist. Often themes of harm, risk, contamination, doubt, order, or losing things.
How much of your time is occupied by obsessive thoughts?
0
None
1
Less than 1 hr/day or occasional occurrence
2
1 to 3 hrs/day or frequent
3
Greater than 3 and up to 8 hrs/day or very frequent occurrence
4
Greater than 8 hrs/day or nearly constant occurrence
How much do obsessive thoughts interfere with work, school, social, or other important role functioning? Is there anything you don’t do because of them?
0
None
1
Slight interference with social or other activities, but overall performance not impaired
2
Definite interference with social or occupational performance, but still manageable
3
Causes substantial impairment in social or occupational performance
4
Incapacitating
How much distress do your obsessive thoughts cause you?
0
None
1
Not too disturbing
2
Disturbing, but still manageable
3
Very disturbing
4
Near constant and disabling distress
How much effort do you make to resist obsessive thoughts? How often do you try to disregard or turn your attention away?
0
Try to resist all the time
1
Try to resist most of the time
2
Make some effort to resist
3
Yield to all obsessions without attempting to control them, but with some reluctance
4
Completely and willingly yield to all obsessions
How much control do you have over obsessive thoughts? How successful are you in stopping or diverting them? Can you dismiss them?
0
Complete control
1
Usually able to stop or divert obsessions with some effort and concentration
2
Sometimes able to stop or divert obsessions
3
Rarely successful in stopping or dismissing obsessions, can only divert attention with difficulty
4
Obsessions are completely involuntary, rarely able to even momentarily alter obsessive thinking
Compulsive Behaviors (Questions 6-10)
Compulsions: Urges to perform repetitive, purposeful behaviors (rituals) or mental acts to lessen anxiety/discomfort, often linked to obsessions. Can include washing, checking, repeating, ordering, hoarding etc.
How much time do you spend performing compulsions? How much longer do routine activities take due to rituals? How frequent are rituals?
0
None
1
Less than 1 hr/day or occasional performance
2
From 1 to 3 hrs/day, or frequent performance
3
More than 3 and up to 8 hrs/day, or very frequent performance
4
More than 8 hrs/day, or near constant performance (too numerous to count)
How much do compulsions interfere with work, school, social, or other important role functioning? Is there anything you don’t do because of them?
0
None
1
Slight interference with social or other activities, but overall performance not impaired
2
Definite interference with social or occupational performance, but still manageable
3
Causes substantial impairment in social or occupational performance
4
Incapacitating
How would you feel if prevented from performing your compulsion(s)? How anxious would you become?
0
None
1
Only slightly anxious if compulsions prevented
2
Anxiety would mount but remain manageable if compulsions prevented
3
Prominent and very disturbing increase in anxiety if compulsions interrupted
4
Incapacitating anxiety from any intervention aimed at modifying activity
How much effort do you make to resist the compulsions?
0
Always try to resist
1
Try to resist most of the time
2
Make some effort to resist
3
Yield to almost all compulsions without attempting to control them, but with some reluctance
4
Completely and willingly yield to all compulsions
How strong is the drive to perform the compulsion? How much control do you have over it?
0
Complete control
1
Pressure to perform the behavior but usually able to exercise voluntary control over it
2
Strong pressure to perform behavior, can control it only with difficulty
3
Very strong drive to perform behavior, must be carried to completion, can only delay with difficulty
4
Drive to perform behavior experienced as completely involuntary and overpowering, rarely able to even momentarily delay activity
Scoring Summary
Obsession Subtotal (0-20)
0
Compulsion Subtotal (0-20)
0
TOTAL SCORE (0-40)
0
Severity: 0-7 Subclinical; 8-15 Mild; 16-23 Moderate; 24-31 Severe; 32-40 Extreme
Reset Scale
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('y-bocs-form');
const obsessionScoreEl = document.getElementById('obsession-score');
const compulsionScoreEl = document.getElementById('compulsion-score');
const totalScoreEl = document.getElementById('total-score');
const gaugeBar = document.getElementById('total-score-gauge-bar');
const gaugeText = document.getElementById('total-score-gauge-text');
const questionScoreDisplays = form.querySelectorAll('.question-score');
const allOptionLabels = form.querySelectorAll('.option-label');function getScoreInterpretation(totalScore) {
if (totalScore >= 32) return "Extreme";
if (totalScore >= 24) return "Severe";
if (totalScore >= 16) return "Moderate";
if (totalScore >= 8) return "Mild";
return "Subclinical";
}function updateScores() {
let obsessionScore = 0;
let compulsionScore = 0;
let scoreDetails = {}; // To store individual question scores// Calculate Obsession Score (Questions 1-5)
for (let i = 1; i <= 5; i++) {
const checkedRadio = form.querySelector(`input[name="q${i}"]:checked`);
const score = checkedRadio ? parseInt(checkedRadio.value) : 0;
obsessionScore += score;
scoreDetails[`q${i}`] = checkedRadio ? score : '--'; // Store '--' if not answered
}// Calculate Compulsion Score (Questions 6-10)
for (let i = 6; i {
const qId = el.id.replace('score-', ''); // e.g., "q1"
el.textContent = `Score: ${scoreDetails[qId]}`;
});// Update Gauge
const maxScore = 40;
const percentage = (totalScore / maxScore) * 100;
gaugeBar.style.width = `${percentage}%`;
gaugeText.textContent = getScoreInterpretation(totalScore);// Update selected label styles
allOptionLabels.forEach(label => {
const radio = label.querySelector('input[type="radio"]');
if (radio && radio.checked) {
label.classList.add('selected');
} else {
label.classList.remove('selected');
}
});
}// Event Listener for changes
form.addEventListener('input', updateScores);// Event Listener for Reset Button
// Note: type="reset" handles clearing inputs, we just need to update scores after
form.addEventListener('reset', () => {
// Use setTimeout to allow the native reset to complete first
setTimeout(updateScores, 0);
});// Initial Calculation on Load (in case of browser pre-fill or just to set initial state)
updateScores();// Set current date for the date input
const dateInput = document.getElementById('assessment-date');
if (dateInput) {
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-based
const dd = String(today.getDate()).padStart(2, '0');
dateInput.value = `${yyyy}-${mm}-${dd}`;
}
});/* --- 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 */
}