Put the attendance explorer on your site.

<!--
  Attendance Explorer — "What absences add up to"
  Built by Shawn Brown, Montesano School District (WA)
  https://www.monteschools.org/attendance

  MIT License — Copyright (c) 2026 Montesano School District
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions: the above copyright
  notice and this permission notice shall be included in all copies or
  substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS",
  WITHOUT WARRANTY OF ANY KIND.

  Please keep the visible "Built by" credit at the bottom of the widget —
  it's the only thing we ask. Questions: sbrown@monteschools.org

  To use: paste this whole block into any custom-HTML / embed block.
  Spanish: change  var LANG = "en"  to  "es"  in the script below.
  Colors: edit the CSS variables on #msd-attendance-explorer.
-->
<div id="msd-attendance-explorer">
  <style>
    #msd-attendance-explorer {
      /* Theme — swap these for your district's colors. */
      --msd-ae-ontrack: #3f6b4e;   /* fewer than 5% of days missed */
      --msd-ae-atrisk: #8c4720;    /* 5-10% — the warning zone */
      --msd-ae-chronic: #550000;   /* 10%+ — chronic absence */
      --msd-ae-ink: #1c1b19;
      --msd-ae-muted: #5f5b53;
      --msd-ae-card: #ffffff;
      --msd-ae-edge: #d9d2c5;
      --msd-ae-cell-empty: #d1d5c8;
      display: block;
      max-width: 720px;
      color: var(--msd-ae-ink);
      background: var(--msd-ae-card);
      border: 1px solid var(--msd-ae-edge);
      border-radius: 14px;
      padding: 22px 22px 16px;
      line-height: 1.5;
    }
    #msd-attendance-explorer .msd-ae-label {
      display: block;
      font-weight: 700;
      font-size: 16px;
      margin: 0 0 10px;
    }
    #msd-attendance-explorer .msd-ae-slider {
      width: 100%;
      margin: 0;
      accent-color: var(--msd-ae-ontrack);
    }
    #msd-attendance-explorer .msd-ae-scale {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--msd-ae-muted);
      margin: 4px 0 16px;
    }
    #msd-attendance-explorer .msd-ae-readout {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin: 0 0 14px;
    }
    #msd-attendance-explorer .msd-ae-days {
      font-size: 44px;
      font-weight: 700;
      line-height: 1;
    }
    #msd-attendance-explorer .msd-ae-unit {
      font-size: 14px;
      color: var(--msd-ae-muted);
      margin-left: 8px;
    }
    #msd-attendance-explorer .msd-ae-pill {
      display: inline-block;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 100px;
      padding: 6px 14px;
      white-space: nowrap;
    }
    #msd-attendance-explorer .msd-ae-research {
      border-left: 4px solid var(--msd-ae-ontrack);
      background: rgba(0, 0, 0, 0.03);
      border-radius: 0 10px 10px 0;
      padding: 12px 16px;
      margin: 0 0 16px;
    }
    #msd-attendance-explorer .msd-ae-research-head {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--msd-ae-muted);
      margin: 0 0 4px;
    }
    #msd-attendance-explorer .msd-ae-research-title {
      font-size: 16px;
      font-weight: 700;
      margin: 0 0 4px;
    }
    #msd-attendance-explorer .msd-ae-research-detail {
      font-size: 14px;
      margin: 0;
    }
    #msd-attendance-explorer .msd-ae-grid {
      display: grid;
      grid-template-columns: repeat(20, 1fr);
      gap: 3px;
      margin: 0 0 12px;
    }
    #msd-attendance-explorer .msd-ae-cell {
      aspect-ratio: 1;
      border-radius: 2px;
      background: var(--msd-ae-cell-empty);
    }
    #msd-attendance-explorer .msd-ae-foot,
    #msd-attendance-explorer .msd-ae-source {
      font-size: 12.5px;
      color: var(--msd-ae-muted);
      margin: 0 0 8px;
    }
    #msd-attendance-explorer .msd-ae-credit {
      font-size: 12px;
      color: var(--msd-ae-muted);
      border-top: 1px solid var(--msd-ae-edge);
      padding-top: 10px;
      margin: 12px 0 0;
    }
    #msd-attendance-explorer .msd-ae-credit a {
      color: inherit;
      font-weight: 600;
    }
  </style>

  <label class="msd-ae-label" for="msd-ae-slider" id="msd-ae-label"></label>
  <input class="msd-ae-slider" id="msd-ae-slider" type="range" min="0" max="36" step="1" value="4" aria-describedby="msd-ae-readout" />
  <div class="msd-ae-scale" aria-hidden="true">
    <span id="msd-ae-scale-start"></span><span id="msd-ae-scale-end"></span>
  </div>
  <div class="msd-ae-readout" id="msd-ae-readout" aria-live="polite">
    <div>
      <span class="msd-ae-days" id="msd-ae-days">4</span>
      <span class="msd-ae-unit" id="msd-ae-unit"></span>
    </div>
    <span class="msd-ae-pill" id="msd-ae-pill"></span>
  </div>
  <div class="msd-ae-research" id="msd-ae-research" aria-live="polite">
    <div class="msd-ae-research-head" id="msd-ae-research-head"></div>
    <div class="msd-ae-research-title" id="msd-ae-research-title"></div>
    <p class="msd-ae-research-detail" id="msd-ae-research-detail"></p>
  </div>
  <div class="msd-ae-grid" id="msd-ae-grid" aria-hidden="true"></div>
  <p class="msd-ae-foot" id="msd-ae-foot"></p>
  <p class="msd-ae-source" id="msd-ae-source"></p>
  <p class="msd-ae-credit">
    Built by
    <a href="https://www.monteschools.org/attendance" target="_blank" rel="noopener">Shawn Brown &middot; Montesano School District</a>
  </p>

  <script>
    (function () {
      var LANG = "en"; /* change to "es" for Spanish */
      var SCHOOL_DAYS = 180;
      var MAX_DAYS = 36;

      var STRINGS = {
        en: {
          label: "Drag to see what missing school adds up to",
          scaleStart: "0 days",
          scaleEnd: "36 days missed",
          unit: function (days, pct, weeks) {
            return (days === 1 ? "day missed" : "days missed") + " \u00b7 " + pct + "% of the year" + (days >= 5 ? " \u00b7 about " + weeks + " weeks of class" : "");
          },
          tierLabel: { ontrack: "On track", atrisk: "At risk", chronic: "Chronically absent" },
          researchHeading: "What the research says at this level",
          source: "Sources: Attendance Works \u00b7 Johns Hopkins Everyone Graduates Center \u00b7 UChicago Consortium on School Research.",
          outcomes: [
            { max: 0, title: "An ideal run", detail: "Students who are here almost every day are the most likely to read on grade level, stay on track, and graduate. (We never expect perfect \u2014 a real sick day is always the right call.)" },
            { max: 8, title: "Right where we want to be", detail: "Missing less than 5% of the year keeps a child in the strongest position: about 2 in 3 of these students read proficiently by 3rd grade \u2014 versus just 1 in 6 of the students who become chronically absent." },
            { max: 17, title: "The early-warning zone", detail: "This is the tipping point researchers watch \u2014 where achievement quietly starts to slip, just before it becomes chronic. It's also the easiest place to turn things around, which is exactly why schools reach out here." },
            { max: 35, title: "Chronically absent \u2014 the gaps compound", detail: "Now it adds up fast. In the early grades it shows up as reading below grade level; in high school, missing 15 or more days sharply lowers the odds of graduating. Ninth-grade attendance predicts graduation better than test scores do." },
            { max: 999, title: "Severe chronic absence", detail: "That's nearly two full months of school. At this level very few students read on grade level and the risk of not finishing high school is high \u2014 and it's exactly when a child most needs the whole team around them. Reaching out early changes the story." }
          ],
          foot: "Each dot is one school day \u2014 a year is about 180. Chronic absence starts at <strong>18 days</strong> (10%). Some absences are unavoidable, and that's okay \u2014 the goal is to make every day we can count."
        },
        es: {
          label: "Arrastre para ver cu\u00e1nto suman las ausencias",
          scaleStart: "0 d\u00edas",
          scaleEnd: "36 d\u00edas perdidos",
          unit: function (days, pct, weeks) {
            return (days === 1 ? "d\u00eda perdido" : "d\u00edas perdidos") + " \u00b7 " + pct + "% del a\u00f1o" + (days >= 5 ? " \u00b7 unas " + weeks + " semanas de clase" : "");
          },
          tierLabel: { ontrack: "En camino", atrisk: "En riesgo", chronic: "Ausentismo cr\u00f3nico" },
          researchHeading: "Lo que dice la investigaci\u00f3n en este nivel",
          source: "Fuentes: Attendance Works \u00b7 Johns Hopkins Everyone Graduates Center \u00b7 UChicago Consortium on School Research.",
          outcomes: [
            { max: 0, title: "Una asistencia ideal", detail: "Los estudiantes que est\u00e1n presentes casi todos los d\u00edas tienen la mayor probabilidad de leer al nivel de su grado, mantenerse en camino y graduarse. (Nunca esperamos la perfecci\u00f3n \u2014 un d\u00eda de enfermedad real siempre es la decisi\u00f3n correcta.)" },
            { max: 8, title: "Justo donde queremos estar", detail: "Faltar menos del 5% del a\u00f1o mantiene al ni\u00f1o en la mejor posici\u00f3n: cerca de 2 de cada 3 de estos estudiantes lee bien para 3.\u00ba grado \u2014 frente a solo 1 de cada 6 de los que llegan al ausentismo cr\u00f3nico." },
            { max: 17, title: "La zona de advertencia temprana", detail: "Este es el punto de inflexi\u00f3n que observan los investigadores \u2014 donde el rendimiento empieza a bajar en silencio, justo antes de volverse cr\u00f3nico. Tambi\u00e9n es el momento m\u00e1s f\u00e1cil para cambiar el rumbo, por eso las escuelas se comunican aqu\u00ed." },
            { max: 35, title: "Ausentismo cr\u00f3nico \u2014 las brechas se acumulan", detail: "Ahora suma r\u00e1pido. En los primeros grados se ve como leer por debajo del nivel; en la secundaria, faltar 15 d\u00edas o m\u00e1s reduce mucho la probabilidad de graduarse. La asistencia en 9.\u00ba grado predice la graduaci\u00f3n mejor que las pruebas." },
            { max: 999, title: "Ausentismo cr\u00f3nico severo", detail: "Eso es casi dos meses de clases. En este nivel muy pocos estudiantes leen al nivel de su grado y el riesgo de no terminar la secundaria es alto \u2014 y es justo cuando un ni\u00f1o m\u00e1s necesita a todo el equipo a su lado. Comunicarse temprano cambia la historia." }
          ],
          foot: "Cada punto es un d\u00eda de clases \u2014 un a\u00f1o son unos 180. El ausentismo cr\u00f3nico empieza en <strong>18 d\u00edas</strong> (10%). Algunas ausencias son inevitables, y est\u00e1 bien \u2014 la meta es aprovechar cada d\u00eda que podamos."
        }
      };

      var root = document.getElementById("msd-attendance-explorer");
      var t = STRINGS[LANG] || STRINGS.en;
      var css = getComputedStyle(root);
      var COLORS = {
        ontrack: css.getPropertyValue("--msd-ae-ontrack").trim() || "#3f6b4e",
        atrisk: css.getPropertyValue("--msd-ae-atrisk").trim() || "#8c4720",
        chronic: css.getPropertyValue("--msd-ae-chronic").trim() || "#550000"
      };

      function el(id) { return document.getElementById(id); }
      function tierFor(days) {
        var pct = days / SCHOOL_DAYS;
        if (pct < 0.05) return "ontrack";
        if (pct < 0.1) return "atrisk";
        return "chronic";
      }
      function outcomeFor(days) {
        for (var i = 0; i < t.outcomes.length; i++) {
          if (days <= t.outcomes[i].max) return t.outcomes[i];
        }
        return t.outcomes[t.outcomes.length - 1];
      }

      /* Static labels */
      el("msd-ae-label").textContent = t.label;
      el("msd-ae-scale-start").textContent = t.scaleStart;
      el("msd-ae-scale-end").textContent = t.scaleEnd;
      el("msd-ae-research-head").textContent = t.researchHeading;
      el("msd-ae-foot").innerHTML = t.foot;
      el("msd-ae-source").textContent = t.source;
      if (LANG === "es") root.setAttribute("lang", "es");

      /* Build the 180-dot year grid once */
      var grid = el("msd-ae-grid");
      var cells = [];
      for (var i = 0; i < SCHOOL_DAYS; i++) {
        var cell = document.createElement("span");
        cell.className = "msd-ae-cell";
        grid.appendChild(cell);
        cells.push(cell);
      }

      var slider = el("msd-ae-slider");
      function render() {
        var days = parseInt(slider.value, 10) || 0;
        var tier = tierFor(days);
        var color = COLORS[tier];
        var pct = Math.round((days / SCHOOL_DAYS) * 1000) / 10;
        var weeks = Math.round((days / 5) * 10) / 10;
        var outcome = outcomeFor(days);

        slider.style.accentColor = color;
        el("msd-ae-days").textContent = String(days);
        el("msd-ae-days").style.color = color;
        el("msd-ae-unit").textContent = t.unit(days, pct, weeks);
        var pill = el("msd-ae-pill");
        pill.textContent = t.tierLabel[tier];
        pill.style.background = color;
        el("msd-ae-research").style.borderLeftColor = color;
        var title = el("msd-ae-research-title");
        title.textContent = outcome.title;
        title.style.color = color;
        el("msd-ae-research-detail").textContent = outcome.detail;
        for (var i = 0; i < cells.length; i++) {
          cells[i].style.background = i < days ? color : "";
        }
      }
      slider.addEventListener("input", render);
      render();
    })();
  </script>
</div>