Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

More visually attractive grid

I want to use a grid for a single question: what grade would you give 'us' on a scale of 0 to 10.

Because of visual reasons, the question is asked in the grid header, row labels are not displayed and the column labels are 0 to 10.

What I want to achieve consists of multiple steps:
- Is it possible to show the column labels in the cells, instead of above the grid?
- When the mouse is placed on top one of the cells, the cell colour changes to grey. Is it possible to change this color?
- I want to hide the radiobox, but I want the grid cell to change color once one of the options is selected. Is this possible?
asked Oct 2 by Marten

1 Answer

0 votes
I might just use a free format question instead of a grid.  Give the free format a hidden variable "_Grade" and give the free format these codes:

<input name="[% QuestionName() %]_Grade" id="[% QuestionName() %]_Grade" type="hidden" value="">

<span>What grade would you give us?</span>

<table id="gradeTable">
    <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
</table>


<style>
#gradeTable td {
    cursor: pointer;
    border: 1px solid gray;
    width: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    background-color: lightgray;
}

#gradeTable td.selected {
    background-color: cyan;
}
</style>


<script>
$(document).ready(function(){
    var grade = $('#[% QuestionName() %]_Grade').val();
    if (grade) {
        updateGrade(grade);
    }
})

$('#gradeTable td').click(function(){
    updateGrade($(this).text());
})

function updateGrade(grade) {
    grade = Number(grade);
    $('#[% QuestionName() %]_Grade').val(grade);
    $('#gradeTable .selected').removeClass('selected');
    $('#gradeTable tr > td:nth-child(' + (grade + 1) + ')').addClass('selected');
}
</script>


And this custom JavaScript verification if you want to require a response:

if (!$('#[% QuestionName() %]_Grade').val()) {
    strErrorMessage = 'Error message text.';
}


Then the background colors and any other part of the CSS can be easily modified.
answered Oct 2 by Zachary Platinum Sawtooth Software, Inc. (63,900 points)
...