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, 2017 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">

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

    var grade = $('#[% QuestionName() %]_Grade').val();
    if (grade) {

$('#gradeTable td').click(function(){

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

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, 2017 by Zachary Platinum Sawtooth Software, Inc. (100,575 points)