Likert Scale - Solved

CatCity · September 11

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.

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

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">
<h2>Satisfaction Survey</h2><br></br>

<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> 
<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>

<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>

<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>

<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>

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

</form>
</div>

// 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>

chumkirebzi · 2024-10-22T19:42:27Z

This is a great solution!

I did try to also test it on a submission form by changing the EditRecord to InsertRecord and everything works perfect! Made some few small adjustments like using a Header and Footer and separated some HTML blocks for readability, but other than that nothing else needed!

Also followed this JS Reference Guide when I tried it on a submission form:

Thank you @CatCity!

Good luck everyone!

Login

Likert Scale - Solved

Recommended Posts

CatCity

Link to comment

Share on other sites

chumkirebzi

Link to comment

Share on other sites

Join the conversation

Browse