Custom code help for a likert scale report

Design help Custom code
1

Hey there!

So I’m trying to do something a little complicated for Webflow. I’m stuck on how to tackle this problem and I’m wondering if anyone can help. Basically, I’m trying to create a table graph that shows a user the results of a likert scale graph.

I got some code that works well to make it show up like this:

Screenshot 2023-02-28 at 10.00.22 AM
Screenshot 2023-02-28 at 10.00.22 AM725×215 14.4 KB

<!-- Add this CSS code to your <head> section -->
<style>
  .tf-bg-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    padding: 5px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
  }

  .tf-bg-no-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    padding: 5px;
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    background-color: #DDDDDD;
  }
</style>

<!-- Add this HTML code to your page for each element you want to show/hide -->
<div id="q1a" class="tf-bg-color">1</div>
<div id="q1a-no-color" class="tf-bg-no-color">1</div>
<div id="q1b" class="tf-bg-color">2</div>
<div id="q1b-no-color" class="tf-bg-no-color">2</div>
<div id="q1c" class="tf-bg-color">3</div>
<div id="q1c-no-color" class="tf-bg-no-color">3</div>
<div id="q1d" class="tf-bg-color">4</div>
<div id="q1d-no-color" class="tf-bg-no-color">4</div>
<div id="q1e" class="tf-bg-color">5</div>
<div id="q1e-no-color" class="tf-bg-no-color">5</div>

<!-- Add this JavaScript code to the end of your <body> section -->
<script>
  const elements = document.querySelectorAll('.tf-bg-color');

  function showElement(element) {
    element.style.display = 'inline-flex';
  }

  function hideElement(element) {
    element.style.display = 'none';
  }

  function toggleElement(element, value) {
    if (element.innerText === value.toString()) {
      showElement(element);
    } else {
      hideElement(element);
    }
  }

  const variable = 1; // Replace with your variable

  for (let i = 0; i < elements.length; i++) {
    const id = elements[i].id;
    toggleElement(elements[i], variable);

    if (id) {
      const noColorElement = document.querySelector(`#${id}-no-color`);
      if (noColorElement) {
        if (elements[i].style.display === 'none') {
          showElement(noColorElement);
        } else {
          hideElement(noColorElement);
        }
      }
    }
  }
</script>

My question is how can I make this work for multiple rows? I’m stuck on how to make this work for multiple questions and I’m wondering if anyone has any suggestions.

Here is my site Read-Only: Webflow - The Attributes

2

Just a small update of what I’m trying to do with code but can’t get to work:

const elements1 = document.querySelectorAll('.tf-bg-color');
const elements2 = document.querySelectorAll('.tf-bg-color-q2');

function toggleElementQ1(element, value) {
  const dynamicNumber = 2; // Replace with your dynamic number for .tf-bg-color
  if (element.innerText === dynamicNumber.toString() && value) {
    showElement(element);
  } else {
    hideElement(element);
  }
}

function toggleElementQ2(element, value) {
  const dynamicNumber = 4; // Replace with your dynamic number for .tf-bg-color-q2
  if (element.innerText === dynamicNumber.toString() && value) {
    showElement(element);
  } else {
    hideElement(element);
  }
}

const variableQ1 = true; // Replace with your variable for .tf-bg-color
const variableQ2 = true; // Replace with your variable for .tf-bg-color-q2

for (let i = 0; i < elements1.length; i++) {
  const id = elements1[i].id;
  toggleElementQ1(elements1[i], variableQ1);

  if (id) {
    const noColorElement = document.querySelector(`#${id}-no-color`);
    if (noColorElement) {
      if (elements1[i].style.display === 'none') {
        showElement(noColorElement);
      } else {
        hideElement(noColorElement);
      }
    }
  }
}

for (let i = 0; i < elements2.length; i++) {
  const id = elements2[i].id;
  toggleElementQ2(elements2[i], variableQ2);

  if (id) {
    const noColorElement = document.querySelector(`#${id}-no-color`);
    if (noColorElement) {
      if (elements2[i].style.display === 'none') {
        showElement(noColorElement);
      } else {
        hideElement(noColorElement);
      }
    }
  }
}