Self-assessment rating

Hello! apologies - I will update the link with it
but here it is:

<!-- Self-Assessment: 3 Sliders + Circular Progress Ring for TOTAL (Accessible, Mobile-Friendly, No Libraries) -->
<div class="sa-card" role="form" aria-labelledby="sa-title">
  <h2 id="sa-title">Quick Self‑Assessment</h2>
  <p class="sa-intro">
    Rate yourself on each question from <strong>1 (low)</strong> to <strong>5 (high)</strong>. 
    The circular progress ring shows your <strong>total</strong> out of 15 in real time. 
    Press <strong>SUBMIT</strong> to see tips based on your score.
  </p>

  <form id="sa-form" novalidate>
    <!-- Question 1 -->
    <fieldset class="sa-fieldset">
      <legend id="q1-label">1) How confident are you with today’s topic?</legend>
      <div class="sa-control">
        <input
          type="range"
          id="q1"
          name="q1"
          min="1"
          max="5"
          step="1"
          value="3"
          aria-describedby="q1-help q1-val"
        />
        <output id="q1-val" class="sa-value" for="q1" aria-live="polite">3 / 5</output>
      </div>
      
    </fieldset>

    <!-- Question 2 -->
    <fieldset class="sa-fieldset">
      <legend id="q2-label">2) How prepared do you feel to apply this?</legend>
      <div class="sa-control">
        <input
          type="range"
          id="q2"
          name="q2"
          min="1"
          max="5"
          step="1"
          value="3"
          aria-describedby="q2-help q2-val"
        />
        <output id="q2-val" class="sa-value" for="q2" aria-live="polite">3 / 5</output>
      </div>
      <p
    </fieldset>

    <!-- Question 3 -->
    <fieldset class="sa-fieldset">
      <legend id="q3-label">3) How motivated are you to practice more?</legend>
      <div class="sa-control">
        <input
          type="range"
          id="q3"
          name="q3"
          min="1"
          max="5"
          step="1"
          value="3"
          aria-describedby="q3-help q3-val"
        />
        <output id="q3-val" class="sa-value" for="q3" aria-live="polite">3 / 5</output>
      </div>
     
    </fieldset>

    <!-- TOTAL Progress Ring (display-only) -->
    <section class="sa-ring-section" aria-labelledby="sa-ring-title">
      <h3 id="sa-ring-title" class="sr-only">Total progress ring</h3>
      <div class="sa-ring-wrap" aria-hidden="true">
        <svg class="sa-ring" viewBox="0 0 120 120" width="240" height="240">
          <!-- Track -->
          <circle class="sa-ring-track" cx="60" cy="60" r="54"></circle>
          <!-- Progress (dasharray & dashoffset set by JS) -->
          <circle id="ring-progress" class="sa-ring-progress" cx="60" cy="60" r="54"></circle>
        </svg>

        <!-- Center total -->
        <div class="sa-ring-center" aria-hidden="true">
          <div class="sa-ring-label">Total</div>
          <div class="sa-ring-value" id="ring-value">9</div>
          <div class="sa-ring-sub">out of 15</div>
        </div>
      </div>

      <!-- Visually hidden live total for screen readers -->
      <p id="sr-total" class="sr-only" aria-live="polite">Current total: 9 out of 15</p>
    </section>

    <!-- Actions -->
    <div class="sa-actions">
      <button type="button" id="sa-submit" class="sa-btn">SUBMIT</button>
    </div>
  </form>

  <!-- Results -->
  <section id="sa-result" class="sa-result" role="region" aria-live="polite" aria-labelledby="sa-result-title">
    <h3 id="sa-result-title" class="sr-only">Your result</h3>
    <p class="sa-score" id="sa-score" hidden></p>
    <div class="sa-suggestion" id="sa-suggestion" hidden></div>
  </section>
</div>

<style>
  :root{
    --brand:#013a82;   /* Submit button + ring progress */
    --ink:#1d1f23;
    --muted:#6b7280;
    --bg:#ffffff;
    --track:#e5e7eb;
    --thumb:#013a82; /* slider button */
    --focus:#2563eb;
    --radius:12px;
  }

.sa-btn {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, Futura, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}


  .sa-card{
    font-family: "Century Gothic", CenturyGothic, AppleGothic, Futura, "Segoe UI", Arial, sans-serif;
    color:var(--ink);
    background:var(--bg);
    border:1px solid #e5e7eb;
    border-radius:var(--radius);
    padding:1.25rem;
    max-width:720px;
    margin:0 auto;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
  }
  
.sa-actions {
  text-align: center;
}

  .sa-card *{box-sizing:border-box;}
  .sa-intro{color:var(--muted); margin-top:.25rem;}

  .sa-fieldset{
    border:none;
    padding:0;
    margin:1rem 0 1.25rem;
  }
  .sa-fieldset legend{
    font-weight:600;
    margin-bottom:.5rem;
  }

  /* Sliders */
  .sa-control{
    display:flex;
    align-items:center;
    gap:.75rem;
  }
  input[type="range"]{
    width:100%;
    -webkit-appearance:none;
    background:transparent;
    height:2rem;
    cursor:pointer;
    touch-action:pan-x;
  }
  /* Track */
  input[type="range"]::-webkit-slider-runnable-track{
    height:8px; background:var(--track); border-radius:999px;
  }
  input[type="range"]::-moz-range-track{
    height:8px; background:var(--track); border-radius:999px;
  }
  /* Thumb */
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:28px; height:28px;
    background:var(--thumb);
    border:3px solid #fff;
    border-radius:50%;
    margin-top:-10px; /* centers thumb on 8px track */
    box-shadow:0 1px 2px rgba(0,0,0,.2);
  }
  input[type="range"]::-moz-range-thumb{
    width:28px; height:28px;
    background:var(--thumb);
    border:3px solid #fff;
    border-radius:50%;
    box-shadow:0 1px 2px rgba(0,0,0,.2);
  }
  /* Focus styles */
  input[type="range"]:focus{ outline:none; }
  input[type="range"]:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:4px;
    border-radius:8px;
  }

  .sa-value{
    min-width:3.5rem;
    text-align:right;
    color:var(--muted);
  }
  .sa-help{
    margin:.35rem 0 0;
    color:var(--muted);
    font-size:.95rem;
  }

  /* Progress ring section */
  .sa-ring-section{
    margin:1.25rem 0 .5rem;
    padding-top:.5rem;
    border-top:1px solid #e5e7eb;
  }
  .sa-ring-wrap{
    position:relative;
    width:260px;
    max-width:100%;
    aspect-ratio:1/1;
    margin-inline:auto;
    display:grid;
    place-items:center;
  }
  /* Rotate the SVG so 0% starts at the top (12 o'clock) */
  .sa-ring{
    transform:rotate(-90deg);
  }
  .sa-ring-track{
    fill:none;
    stroke:#eef2ff;
    stroke-width:12;
  }
  .sa-ring-progress{
    fill:none;
    stroke:var(--brand);
    stroke-width:12;
    stroke-linecap:round;
    stroke-dasharray:0 1;   /* set by JS on load */
    stroke-dashoffset:0;    /* set by JS on update */
    transition:stroke-dashoffset .25s ease;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
  }
  .sa-ring-center{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
    width:92px; height:92px;
    background:#fff;
    border:3px solid var(--brand);
    color:var(--brand);
    border-radius:50%;
    display:grid; place-items:center;
    text-align:center;
    box-shadow:0 1px 3px rgba(0,0,0,.08);
  }
  .sa-ring-label{
    font-size:.75rem;
    color:#1f3b6b;
    letter-spacing:.02em;
  }
  .sa-ring-value{
    font-weight:800;
    font-size:2rem;
    line-height:1;
  }
  /* 1) Hide the extra lines under/above the number (optional but recommended) */
.sa-ring-label,
.sa-ring-sub {
  display: none;
}

/* 2) Ensure the number is mathematically centred within the circular badge */
.sa-ring-center {
  display: grid;             /* already set in your file, re‑declared for clarity */
  place-items: center;       /* vertical + horizontal centring */
  gap: 0;                    /* remove vertical spacing between children */
  line-height: 1;            /* avoid extra line-height pushing content */
}

/* 3) Make the number itself sit neatly */
.sa-ring-value {
  line-height: 1;            /* remove extra vertical lead */
  margin: 0;                 /* ensure no default margins affect centring */
  padding: 0;
}
  
.sa-ring-sub {
  display: none;
}
  
  .sa-ring-sub{
    font-size:.7rem;
    color:#4b5563;
  }

  /* Actions */
  .sa-actions{ margin-top:.75rem; }
  .sa-btn{
    background:var(--brand);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:.75rem 1.1rem;
    font-weight:600;
    cursor:pointer;
    min-width:140px;
    min-height:44px;
    box-shadow:0 1px 2px rgba(0,0,0,.12);
  }
  .sa-btn:hover{ filter:brightness(1.05); }
  .sa-btn:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:2px;
  }

  /* Results */
  .sa-result{
    margin-top:1rem;
    border-top:1px solid #e5e7eb;
    padding-top:1rem;
  }
  .sa-score{
    font-weight:700;
    margin:.25rem 0 .5rem;
  }
  .sa-suggestion{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:.85rem;
    line-height:1.5;
  }

  /* Screen-reader only */
  .sr-only{
    position:absolute !important;
    height:1px; width:1px;
    overflow:hidden; clip:rect(1px, 1px, 1px, 1px);
    white-space:nowrap;
  }

  /* Responsive tweaks */
  MeDia (max-width:520px){
    .sa-card{ padding:1rem; }
    .sa-ring-center{ width:80px; height:80px; }
    .sa-ring-value{ font-size:1.3rem; }
    input[type="range"]::-webkit-slider-thumb,
    input[type="range"]::-moz-range-thumb{ width:26px; height:26px; }
  }
</style>

<script>
  (function(){
    const sliders = {
      q1: document.getElementById('q1'),
      q2: document.getElementById('q2'),
      q3: document.getElementById('q3')
    };
    const outputs = {
      q1: document.getElementById('q1-val'),
      q2: document.getElementById('q2-val'),
      q3: document.getElementById('q3-val')
    };

    // Progress ring elements for TOTAL
    const ring = document.getElementById('ring-progress');
    const ringValue = document.getElementById('ring-value');
    const srTotal = document.getElementById('sr-total');

    const submitBtn  = document.getElementById('sa-submit');
    const scoreEl    = document.getElementById('sa-score');
    const suggestionEl = document.getElementById('sa-suggestion');
    const resultRegion = document.getElementById('sa-result');

    // Prepare SVG circumference for r=54
    const R = 54;
    const C = 2 * Math.PI * R;
    ring.style.strokeDasharray = `${C} ${C}`;
    ring.style.strokeDashoffset = `${C}`; // start visually empty

    function totalScore(){
      const v1 = parseInt(sliders.q1.value,10);
      const v2 = parseInt(sliders.q2.value,10);
      const v3 = parseInt(sliders.q3.value,10);
      return v1 + v2 + v3; // 3..15
    }

    function updateOutputs(){
      ['q1','q2','q3'].forEach(id=>{
        outputs[id].textContent = `${sliders[id].value} / 5`;
      });
    }

    function reflectRingFromTotal(){
      const total = totalScore();   // 3..15
      // Map total directly to percent of max: 3→20%, 15→100%
      const pct = total / 15;       // 0.2..1
      const offset = C * (1 - pct);
      ring.style.strokeDashoffset = `${offset}`;
      ringValue.textContent = total;
      srTotal.textContent = `Current total: ${total} out of 15`;
    }

    // Initialize all outputs and ring
    updateOutputs();
    reflectRingFromTotal();

    // Slider interactions (live updates)
    Object.values(sliders).forEach(el=>{
      el.addEventListener('input', ()=>{
        updateOutputs();
        reflectRingFromTotal();
      });
    });

    // Submit: calculate score and show suggestions
    submitBtn.addEventListener('click', function(){
      const total = totalScore(); // 3..15

      scoreEl.hidden = false;
      scoreEl.textContent = `Your score: ${total} / 15`;

      let html = '';
      if(total >= 12){
        html = `
          <p><strong>Great work!</strong> You’re showing strong confidence and motivation.</p>
          <ul>
            <li>Challenge yourself with stretch tasks or optional extensions.</li>
            <li>Explain a concept to a peer—teaching deepens mastery.</li>
            <li>Track one “skill to sharpen” this week and measure it.</li>
          </ul>
        `;
      }else if(total >= 8){
        html = `
          <p><strong>Nice progress.</strong> You’re on the right track—keep building consistency.</p>
          <ul>
            <li>Practice for 10–15 minutes daily to keep momentum.</li>
            <li>Revisit one tricky area and try a new approach.</li>
            <li>Set a small, specific goal for your next session.</li>
          </ul>
        `;
      }else{ // 3–7
        html = `
          <p><strong>You’ve got this.</strong> Start small and focus on the basics.</p>
          <ul>
            <li>Review the key steps and try one short example.</li>
            <li>Use a checklist or tip sheet while practicing.</li>
            <li>Ask for feedback on one thing you want to improve.</li>
          </ul>
        `;
      }

      suggestionEl.hidden = false;
      suggestionEl.innerHTML = html;

      // Scroll results into view for mobile users
      resultRegion.scrollIntoView({behavior:'smooth', block:'start'});
    });
  })();
</script>