Hi,
I want to make a multiple choice question customized for mobile experience and to add a “Haven’t though about this” button.
I relied on LLMs to get me halfway through, but they have all hit a wall. The code is below.
Right now, it is looking like this, and nothing I can change is making the boxes not overlap. I wanted the boxes to look like the Net Promoter Score, and then add another big box on the bottom
![](https://uploads-us-west-2.insided.com/qualtrics-us/attachment/7d509d07-e381-4564-a158-1636150a8452.png)
My final goal is to have something htat looks like this in both Desktop and Mobile:
![](https://uploads-us-west-2.insided.com/qualtrics-us/attachment/48b8ece7-6f84-4cc4-aba0-2e8d24c79550.png)
/* Custom CSS for square grid layout */
.question .question-content .choice {
display: inline-block;
width: calc(8.8% - 0px); /* Adjust width to fit all 10 boxes in one line accounting for borders */
height: 30px; /* Adjust height as needed */
background-color: #f0f0f0; /* Gray background */
margin: 0; /* Remove margin */
padding: 0; /* Remove padding */
text-align: center;
line-height: 60px; /* Vertically center text */
border: 1px solid #ccc; /* Border color */
border-radius: 2px; /* Rounded corners */
box-sizing: border-box; /* Ensure padding and border are included in the width and height */
position: relative;
vertical-align: top; /* Align vertically */
}
.question .question-content .choice input type="radio"] {
display: none; /* Hide the default radio buttons */
}
.question .question-content .choice label {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
margin: 0; /* Remove margin */
padding: 0; /* Remove padding */
line-height: 60px; /* Vertically center text */
text-align: center;
box-sizing: border-box; /* Ensure padding and border are included in the width and height */
}
.question .question-content .choice input type="radio"]:checked + label {
background-color: #007ac1; /* Background color when selected */
color: white; /* Text color when selected */
border-color: #007ac1; /* Border color when selected */
}
The current JS is quite simple but also not there yet:
Qualtrics.SurveyEngine.addOnload(function() {
var choices = document.querySelectorAll('.question .question-content .choice');
choices.forEach(function(choice) {
var input = choice.querySelector('inputetype="radio"]');
var label = choice.querySelector('label');
if (label && input) {
label.textContent = input.innerText.trim(); // Use the input's value for the label text
}
});
});
Any help is appreciated!