Self-assessment rating

Question

Hi - here's one of the blocks that I have been working on!

Review360

teresaiden-9681 · Answer

Love the clean UI on this!&nbsp; And thank you! for sharing the code.&nbsp; I am thinking of using this as a base for revamping our supervisor self-assessment we have attendees complete prior to attendance.&nbsp; We had a storyline version at one time, but it wasn't as nice as this.&nbsp; Now it's in MS Forms, so this would make it a greatly improved experience, I think.

lauriannehor341 · Answer

Hello! I love the look and feel of this, but I cannot access the file to imitate - which we know is the sincerest form of flattery...

katemackenzie · Answer

Hello! This is the hmtl file with the code - hopefully it helps?
&lt;!-- Self-Assessment: 3 Sliders + Circular Progress Ring for TOTAL (Accessible, Mobile-Friendly, No Libraries) --&gt;
&lt;div class="sa-card" role="form" aria-labelledby="sa-title"&gt;
  &lt;h2 id="sa-title"&gt;Quick Self‑Assessment&lt;/h2&gt;
  &lt;p class="sa-intro"&gt;
    Rate yourself on each question from &lt;strong&gt;1 (low)&lt;/strong&gt; to &lt;strong&gt;5 (high)&lt;/strong&gt;. 
    The circular progress ring shows your &lt;strong&gt;total&lt;/strong&gt; out of 15 in real time. 
    Press &lt;strong&gt;SUBMIT&lt;/strong&gt; to see tips based on your score.
  &lt;/p&gt;

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

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

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

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

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

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

&lt;!-- Actions --&gt;
    &lt;div class="sa-actions"&gt;
      &lt;button type="button" id="sa-submit" class="sa-btn"&gt;SUBMIT&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;

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

&lt;style&gt;
  :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; }
  }
&lt;/style&gt;

&lt;script&gt;
  (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=&gt;{
        outputs[id].textContent = `${sliders[id].value} / 5`;
      });
    }

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

// Slider interactions (live updates)
    Object.values(sliders).forEach(el=&gt;{
      el.addEventListener('input', ()=&gt;{
        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`;

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

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

&nbsp;

katemackenzie · Answer

Hello! apologies - I will update the link with itbut here it is:
&lt;!-- Self-Assessment: 3 Sliders + Circular Progress Ring for TOTAL (Accessible, Mobile-Friendly, No Libraries) --&gt;
&lt;div class="sa-card" role="form" aria-labelledby="sa-title"&gt;
  &lt;h2 id="sa-title"&gt;Quick Self‑Assessment&lt;/h2&gt;
  &lt;p class="sa-intro"&gt;
    Rate yourself on each question from &lt;strong&gt;1 (low)&lt;/strong&gt; to &lt;strong&gt;5 (high)&lt;/strong&gt;. 
    The circular progress ring shows your &lt;strong&gt;total&lt;/strong&gt; out of 15 in real time. 
    Press &lt;strong&gt;SUBMIT&lt;/strong&gt; to see tips based on your score.
  &lt;/p&gt;