Jump to content

Likert Scale - Solved


Recommended Posts

I'm posting my solution for developing a Likert Scale in Caspio.

Important:

  • Set table field datatype to Number ; otherwise, the script will add a "," to the end of each value
  • Form returns values 1-5 depending on "star" selection
  • Disable HTML Editor
  • You will need to include each of the survey questions in your datapage, and set the form element to "Hidden"
  • This scale was created as a "Single Record Update" to receive customer feedback.  However, any Datapage type should work.
  • My submit button is an additional block of code, which I did not include in the solution.

image.thumb.jpeg.7a946f3a6c949c02e3c6a9db30e06079.jpeg

image.thumb.jpeg.4965f65921275bca3afb0e547a2f033a.jpegimage.thumb.jpeg.4848de416f4d627e5499f1856fa5e18b.jpeg

 

You will need to alter the names of the fields referenced in each question and javascript to best match yours, ex:      

<input type="text" maxlength="255" name="EditRecordHow_Satisfied" id="EditRecordHow_Satisfied" value="" class="cbFormTextField" size="25" hidden>

later in the Javascript section:

  // Question 1
  document.querySelectorAll('input[name="likert1"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      var selectedValue = document.querySelector('input[name="likert1"]:checked').value;
      document.getElementById('EditRecordHow_Satisfied').value = selectedValue;

 

Below is the code used to create this.  Simply paste in a HTML block with "HTML Editor" disabled.  Keep in mind, Caspio HTML blocks are truncated at 10,000 characters.

For some reason, I have to paste this into word before pasting into Caspio, because it loses its formatting.  I'm not sure why.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Satisfaction Survey</title>
  <style>
    /* General form styling */
    body {
      font-family: 'Poppins', sans-serif;
      background-color: #f0f4f8;
      padding: 20px;
      color: #333;
    }

    .container {
      max-width: 900px;
      margin: 0 auto;
      background-color: #ffffff;
      padding: 40px;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    h2 {
      font-size: 4em;
      color: #1e88e5;
      margin-bottom: 40px;
      font-weight: 600;
    }

    .form-group {
      margin-bottom: 50px;
    }

    .form-group label {
      font-size: 1.2em;
      display: block;
      margin-bottom: 20px;
      color: #3f51b5;
      font-weight: 600; /* Bold for standout */
    }

    /* Likert scale styling */
    .likert-scale {
      display: flex;
      justify-content: space-around; 
      align-items: center;
    }

    .likert-scale div {
      flex: 1;
      margin: 0 20px; 
      text-align: center;
    }

    .likert-scale input[type="radio"] {
      display: none;
    }

    /* Star icon with 3D shadow */
    .likert-scale label {
      font-size: 2.5em;
      color: #ccc;
      cursor: pointer;
      transition: transform 0.3s ease, color 0.3s ease;
      text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 3D shadow */
    }

    .likert-scale label:hover {
      color: #FFD700;
      transform: scale(1.2);
    }

    /* Selected effect */
    .likert-scale input[type="radio"]:checked + label {
      color: #FFD700;
      transform: scale(1.3); 
    }

    /* Description styling */
    .likert-description {
      font-size: 1em;
      margin-top: 10px;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    /* Button styling */
    button {
      background: linear-gradient(135deg, #1e88e5, #42a5f5);
      color: white;
      border: none;
      padding: 15px 30px;
      font-size: 1.2em;
      border-radius: 50px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    button:hover {
      background: linear-gradient(135deg, #42a5f5, #1e88e5);
      transform: translateY(-3px);
    }
  </style>
</head>
<body>


<div class="container">
  <img src="https://cdn-bkknn.nitrocdn.com/fGcPNFYNoLNWGSllWzgDxtBAbrFDaIYE/assets/images/source/rev-a5c1a10/www.caspio.com/wp-content/uploads/2015/06/logo.svg" alt="Caspio Logo" style="width: 300px; height: auto; margin-bottom: 30px;">


<div class="container">
  <h2>Satisfaction Survey</h2><br></br>

  <form id="likertForm" method="post">

    <!-- Question 1: Overall, how satisfied are you with us? -->
    <div class="form-group">
      <label>Overall, how satisfied are you with us?</label>
      <div class="likert-scale">
        <div>
          <input type="radio" name="likert1" id="likert1_1" value="1">
          <label for="likert1_1">★</label> <!-- Directly using star -->
          <span class="likert-description">Very Dissatisfied</span>
        </div>
        <div>
          <input type="radio" name="likert1" id="likert1_2" value="2">
          <label for="likert1_2">★</label>
          <span class="likert-description">Dissatisfied</span>
        </div>
        <div>
          <input type="radio" name="likert1" id="likert1_3" value="3">
          <label for="likert1_3">★</label>
          <span class="likert-description">Neutral</span>
        </div>
        <div>
          <input type="radio" name="likert1" id="likert1_4" value="4">
          <label for="likert1_4">★</label>
          <span class="likert-description">Satisfied</span>
        </div>
        <div>
          <input type="radio" name="likert1" id="likert1_5" value="5">
          <label for="likert1_5">★</label>
          <span class="likert-description">Very Satisfied</span>
        </div>
      </div>
      <input type="text" maxlength="255" name="EditRecordHow_Satisfied" id="EditRecordHow_Satisfied" value="" class="cbFormTextField" size="25" hidden>
    </div>

    <!-- Question 2: How likely would you be to recommend us? -->
    <div class="form-group">
      <label>How likely would you be to recommend us?</label>
      <div class="likert-scale">
        <div>
          <input type="radio" name="likert2" id="likert2_1" value="1">
          <label for="likert2_1">★</label>
          <span class="likert-description">Very Unlikely</span>
        </div>
        <div>
          <input type="radio" name="likert2" id="likert2_2" value="2">
          <label for="likert2_2">★</label>
          <span class="likert-description">Unlikely</span>
        </div>
        <div>
          <input type="radio" name="likert2" id="likert2_3" value="3">
          <label for="likert2_3">★</label>
          <span class="likert-description">Neutral</span>
        </div>
        <div>
          <input type="radio" name="likert2" id="likert2_4" value="4">
          <label for="likert2_4">★</label>
          <span class="likert-description">Likely</span>
        </div>
        <div>
          <input type="radio" name="likert2" id="likert2_5" value="5">
          <label for="likert2_5">★</label>
          <span class="likert-description">Very Likely</span>
        </div>
      </div>
      <input type="text" maxlength="255" name="EditRecordHow_Likely" id="EditRecordHow_Likely" value="" class="cbFormTextField" size="25" hidden>
    </div>

    <!-- Question 3: How fast or timely was your experience? -->
    <div class="form-group">
      <label>How fast or timely was your experience?</label>
      <div class="likert-scale">
        <div>
          <input type="radio" name="likert3" id="likert3_1" value="1">
          <label for="likert3_1">★</label>
          <span class="likert-description">Very Slow</span>
        </div>
        <div>
          <input type="radio" name="likert3" id="likert3_2" value="2">
          <label for="likert3_2">★</label>
          <span class="likert-description">Slow</span>
        </div>
        <div>
          <input type="radio" name="likert3" id="likert3_3" value="3">
          <label for="likert3_3">★</label>
          <span class="likert-description">Neutral</span>
        </div>
        <div>
          <input type="radio" name="likert3" id="likert3_4" value="4">
          <label for="likert3_4">★</label>
          <span class="likert-description">Fast</span>
        </div>
        <div>
          <input type="radio" name="likert3" id="likert3_5" value="5">
          <label for="likert3_5">★</label>
          <span class="likert-description">Very Fast</span>
        </div>
      </div>
      <input type="text" maxlength="255" name="EditRecordHow_Fast" id="EditRecordHow_Fast" value="" class="cbFormTextField" size="25" hidden>
    </div>

    <!-- Question 4: How was your experience today or your last interaction with us? -->
    <div class="form-group">
      <label>How was your experience today or your last interaction with us?</label>
      <div class="likert-scale">
        <div>
          <input type="radio" name="likert4" id="likert4_1" value="1">
          <label for="likert4_1">★</label>
          <span class="likert-description">Very Negative</span>
        </div>
        <div>
          <input type="radio" name="likert4" id="likert4_2" value="2">
          <label for="likert4_2">★</label>
          <span class="likert-description">Negative</span>
        </div>
        <div>
          <input type="radio" name="likert4" id="likert4_3" value="3">
          <label for="likert4_3">★</label>
          <span class="likert-description">Neutral</span>
        </div>
        <div>
          <input type="radio" name="likert4" id="likert4_4" value="4">
          <label for="likert4_4">★</label>
          <span class="likert-description">Positive</span>
        </div>
        <div>
          <input type="radio" name="likert4" id="likert4_5" value="5">
          <label for="likert4_5">★</label>
          <span class="likert-description">Very Positive</span>
        </div>
      </div>
      <input type="text" maxlength="255" name="EditRecordLast_Experience" id="EditRecordLast_Experience" value="" class="cbFormTextField" size="25" hidden>
    </div>

    <!-- Submit Button -->
    <div style="text-align: center;">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>

  </form>
</div>

<script>
  // JavaScript to capture Likert values for all questions

  // Question 1
  document.querySelectorAll('input[name="likert1"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      var selectedValue = document.querySelector('input[name="likert1"]:checked').value;
      document.getElementById('EditRecordHow_Satisfied').value = selectedValue;
    });
  });

  // Question 2
  document.querySelectorAll('input[name="likert2"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      var selectedValue = document.querySelector('input[name="likert2"]:checked').value;
      document.getElementById('EditRecordHow_Likely').value = selectedValue;
    });
  });

  // Question 3
  document.querySelectorAll('input[name="likert3"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      var selectedValue = document.querySelector('input[name="likert3"]:checked').value;
      document.getElementById('EditRecordHow_Fast').value = selectedValue;
    });
  });

// Question 4
  document.querySelectorAll('input[name="likert4"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      var selectedValue = document.querySelector('input[name="likert4"]:checked').value;
      document.getElementById('EditRecordLast_Experience').value = selectedValue;
    });
  });
</script>

</body>
</html>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...