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 
 

My final goal is to have something htat looks like this in both Desktop and Mobile:

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