SCORAD (Scoring Atopic Dermatitis) is a clinical index used to assess the extent and severity of atopic dermatitis by combining area affected (A), objective intensity signs (B), and subjective symptoms (C) into a single score (SCORAD = A/5 + 7·B/2 + C; range 0–103).

How to Use the SCORAD Calculator — Quick, Accurate Atopic Dermatitis Scoring

This SCORAD calculator is an interactive web tool designed for clinicians, researchers, and patients to calculate a standardized SCORAD value quickly and visually. It combines sliders and select inputs to capture the three SCORAD components — extent (A), intensity signs (B), and subjective symptoms (C) — then computes the total score and shows clear visual feedback using Plotly.js charts.

Why use this SCORAD calculator?

This tool is built to be embedded into WordPress between sidebars (responsive max width 720px) and features:

• Fast, live calculation of SCORAD using the official formula (A/5 + 7·B/2 + C).
• Visual breakdown of how each component contributes to the final score (Plotly bar chart).
• A gauge to show overall severity (mild/moderate/severe).
• Export option for the contribution chart, white background for clean integration in most themes, and compact sizing for standard WordPress content areas.

Anatomy of the calculator (what each control means)

Extent (A)

• Represented as a percentage slider (0–100%).
• Enter the approximate percent of body surface area affected. The calculator converts this to the A contribution as A/5.

Intensity signs (B)

• Six objective signs are rated 0–3 each: erythema, edema/papulation, oozing/crusts, excoriation, lichenification, dryness.
• The calculator provides dropdown selects for each sign; the sum is the B value (range 0–18).
• The B contribution to SCORAD is 7 × B / 2.

Subjective symptoms (C)

• Two patient-reported scales: pruritus (itch) and sleep loss, each 0–10.
• The sum (0–20) is the C component and is added directly to SCORAD.

Step-by-step: Using the calculator

1. Place the tool in a WordPress Custom HTML block (copy the provided single-file HTML into the block). The widget is responsive and will fit between most sidebars (max-width set to 720px).
2. Move the Extent slider to the percent of body surface area affected. The percent updates live.
3. For each intensity sign, choose 0–3 from the dropdowns. The interface defaults to a baseline so you can quickly adjust.
4. Move the Pruritus and Sleep loss sliders to reflect patient-reported symptom severity.
5. Observe the live SCORAD score near the top-right and the gauge. Interpretation text will read “Mild”, “Moderate”, or “Severe” using standard cutoffs.
6. Use the contribution bar chart to see which component (A, B or C) is driving the score.
7. Click Export Chart to download the contribution chart as a PNG for records or reporting.

Interpreting the results

• SCORAD < 25: Generally considered Mild disease.
• SCORAD 25–49: Moderate disease.
• SCORAD ≥ 50: Severe disease.
  Keep in mind these are clinical guidelines; treatment and follow-up decisions should integrate clinical judgment, patient preferences, and other assessments.

Data privacy and clinical use

• This calculator runs entirely in the browser (no data leaves the page unless you explicitly export or send it), which is a help for privacy-sensitive settings. For any identifiable patient data, follow your institution’s data protection rules (e.g., GDPR, HIPAA) before storing or sharing outputs.
• The calculator is intended as a clinical aid — not a replacement for professional consultation. Use it to standardize scoring and track changes over time.

Advanced uses and customization ideas

• Save repeated results by augmenting the code to store timestamped scores to localStorage or to submit anonymized results to your clinic’s database.
• Add historical charts for longitudinal tracking by storing past scores and plotting them with Plotly’s time-series capabilities.
• Adapt thresholds or labels if your research protocol uses different cutoffs; the code is straightforward to tweak.

Troubleshooting

• If charts don’t render, check console for blocked scripts. Allow https://cdn.plot.ly.
• If the widget looks too narrow or too wide for your theme, adjust max-width in the .scorad-widget CSS to match your content column width (e.g., 640px or 780px).
• Export may be disabled in some browsers; saving the entire page as PDF or taking a screenshot are fallback options.

---

Frequently Asked Questions (FAQ)

Q: What is the maximum possible SCORAD score?
A: The maximum SCORAD is 103 (A max 100 → A/5 = 20; B max 18 → 7×18/2 = 63; C max 20 → total = 20+63+20 = 103).

Q: Is this calculator validated for clinical trials?
A: The calculator implements the standard SCORAD formula. For clinical-trial use, validate the widget within your protocol and ensure any data-handling meets regulatory requirements.

Q: Can I use this on mobile devices?
A: Yes — the layout is responsive and collapses to a single column below ~520px width.

Q: Can I store user results on my site?
A: The provided code does not send data off the page. You can extend it to POST results to your server, but ensure you comply with privacy laws and institutional policies.

Q: How do I change the visual style to match my site?
A: Edit the CSS at the top of the HTML. The container .scorad-widget controls size, padding, and background.

Q: Do I need Plotly to be online?
A: The code uses Plotly via CDN. For offline or intranet use, download and serve Plotly locally and update the script tag.