Beoordeling met een gezicht dat meeverandert Nieuw

<!-- Beoordeling met een gezicht dat meeverandert · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7m">
  <div class="k7m__card">
    <svg class="k7m__face" viewBox="0 0 100 100" aria-hidden="true"><circle class="k7m__head" cx="50" cy="50" r="46"/><circle class="k7m__ck" cx="25" cy="60" r="7"/><circle class="k7m__ck" cx="75" cy="60" r="7"/><path class="k7m__ln k7m__bl"/><path class="k7m__ln k7m__br"/><ellipse class="k7m__eye" cx="36" cy="42" rx="4.5" ry="6"/><ellipse class="k7m__eye" cx="64" cy="42" rx="4.5" ry="6"/><path class="k7m__ln k7m__mouth"/></svg>
    <div class="k7m__side">
      <p class="k7m__q">Hoe was je afspraak bij Fysio Leidsche Rijn?</p>
      <p class="k7m__word" aria-hidden="true">Gaat wel</p>
      <input class="k7m__range" type="range" min="1" max="5" step="1" value="3" aria-label="Beoordeling van 1 tot 5" aria-valuetext="3 van 5, gaat wel">
      <button class="k7m__send" type="button">Verstuur</button>
      <p class="k7m__st" role="status"></p>
    </div>
  </div>
</div>
</div>

/* Beoordeling met een gezicht dat meeverandert · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7m{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;padding:12px}
.k7m *{box-sizing:border-box}
.k7m__card{display:flex;align-items:center;gap:16px;width:100%;max-width:370px}
.k7m__face{flex:none;width:100px;height:100px;overflow:visible}
.k7m__face.is-jump{animation:k7m-jump .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes k7m-jump{30%{transform:translateY(-12px) rotate(-6deg)}65%{transform:translateY(0) rotate(4deg)}}
.k7m__eye{fill:#0a0a0a}
.k7m__ck{fill:#b8360a}
.k7m__ln{fill:none;stroke:#0a0a0a;stroke-width:3.6;stroke-linecap:round}
.k7m__side{flex:1;min-width:0}
.k7m__q{margin:0 0 4px;font-size:13px;font-weight:600;line-height:1.35}
.k7m__word{margin:0;font-size:20px;font-weight:700;line-height:1.25}
.k7m__range{display:block;width:100%;height:28px;margin:2px 0 8px;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.k7m__range::-webkit-slider-runnable-track{height:4px;background:#d9d5cf;border-radius:2px}
.k7m__range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border:2px solid #0a0a0a;border-radius:4px;background:#fff}
.k7m__range::-moz-range-track{height:4px;background:#d9d5cf;border-radius:2px}
.k7m__range::-moz-range-thumb{width:20px;height:20px;border:2px solid #0a0a0a;border-radius:4px;background:#fff}
.k7m__range:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.k7m__send{height:32px;padding:0 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s}
.k7m__send:hover{background:#333}
.k7m__send:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.k7m__st{margin:6px 0 0;min-height:17px;font-size:12px;line-height:1.4;color:#4d4d4d}
@media (prefers-reduced-motion:reduce){.k7m__face.is-jump{animation:none}}

// Beoordeling met een gezicht dat meeverandert · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7m'); if (!w) return;
    var face = w.querySelector('.k7m__face'), head = w.querySelector('.k7m__head'), eyes = w.querySelectorAll('.k7m__eye'), cks = w.querySelectorAll('.k7m__ck');
    var bl = w.querySelector('.k7m__bl'), br = w.querySelector('.k7m__br'), mouth = w.querySelector('.k7m__mouth');
    var word = w.querySelector('.k7m__word'), rng = w.querySelector('.k7m__range'), send = w.querySelector('.k7m__send'), st = w.querySelector('.k7m__st');
    var WD = ['Slecht', 'Matig', 'Gaat wel', 'Goed', 'Top'], rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
    var v = 3, d = 3, raf = 0, blink = 1;
    function mix(a, b, t) { return Math.round(a + (b - a) * t); }
    function render() {
      var t = Math.pow((d - 1) / 4, 1.3);
      head.setAttribute('fill', 'rgb(' + mix(217, 245, t) + ',' + mix(213, 72, t) + ',' + mix(207, 15, t) + ')');
      var k = -14 + 8 * (d - 1), y = 68 - Math.max(0, k) * .25, hw = 14 + (d - 1) * 1.6;
      mouth.setAttribute('d', 'M' + (50 - hw).toFixed(1) + ' ' + y.toFixed(1) + ' Q50 ' + (y + 2 * k).toFixed(1) + ' ' + (50 + hw).toFixed(1) + ' ' + y.toFixed(1));
      var tilt = Math.max(0, (3 - d) / 2), lift = Math.max(0, d - 3) * 1.5, o = 30 + tilt * 1.5 - lift, i = 30 - tilt * 4 - lift;
      bl.setAttribute('d', 'M27 ' + o.toFixed(1) + ' L43 ' + i.toFixed(1)); br.setAttribute('d', 'M57 ' + i.toFixed(1) + ' L73 ' + o.toFixed(1));
      var ry = (6 - Math.max(0, d - 3.5) * 2) * blink;
      eyes.forEach(function (e) { e.setAttribute('ry', Math.max(.4, ry).toFixed(2)); });
      var c = Math.max(0, Math.min(1, (d - 3.6) / 1.4)) * .5;
      cks.forEach(function (e) { e.setAttribute('opacity', c.toFixed(2)); });
    }
    function tick() { d += (v - d) * .2; if (Math.abs(v - d) < .01) d = v; render(); raf = d !== v ? requestAnimationFrame(tick) : 0; }
    rng.addEventListener('input', function () {
      v = +rng.value; word.textContent = WD[v - 1];
      rng.setAttribute('aria-valuetext', v + ' van 5, ' + WD[v - 1].toLowerCase());
      send.textContent = 'Verstuur'; st.textContent = '';
      if (rm) { d = v; render(); } else if (!raf) raf = requestAnimationFrame(tick);
    });
    send.addEventListener('click', function () {
      st.textContent = 'Bedankt. Je gaf een ' + v + ' van 5: ' + WD[v - 1].toLowerCase() + '.';
      send.textContent = 'Verstuurd';
      face.classList.remove('is-jump'); void face.getBoundingClientRect(); face.classList.add('is-jump');
    });
    if (!rm) {
      (function knipper() {
        setTimeout(function () {
          if (!w.isConnected) return;
          blink = .08; render(); setTimeout(function () { blink = 1; render(); knipper(); }, 130);
        }, 3200 + Math.random() * 2400);
      })();
    }
    render();
}
init(document.querySelector('.jouw-container'));