Have an idea?

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

combination button and multiple "Other - Specify" text field in grid

Is it possible for a grid to have buttons and multiple "Other - Specify"?
The question is where the respondent got tested for XXXX medical condition. We would like for the respondent to click on "Other" and then have a text box where they can type in exactly where. For example:

                          Health  |   Doctor's  | Community         | Other-Specify
                          Center      Office          Testing Center        
Cholesterol          O            O                        O                               O [text box]
Diabetes               O             O                       O                                O [text box]
COVID                    O             O                       O                                O [text box]

[O represents a radio button]
Is that possible? Currently, we can only get one text box directly under Other-Specify, so respondents can't enter different locations for the different types of medical conditions.
Thank you!
asked May 16 by wfung (275 points)
I can point you to an earlier forum post ...

https://legacy.sawtoothsoftware.com/forum/31238/other-specify-in-grid?show=31238#q31238

I'm not the wizard at work here. This is Zachary Anderson's neat solution.

It basically asks you to insert 2 grids to work as a team to resolve your solution (one for the radio buttons and one for the other specify text boxes).

If you have any additional questions, continue to post them here. I'm sure Zachary will be seeing this.

Thanks Paul.
Thank you Paul.

I got an email notification that Zachary Anderson replied and pointed me to a previous post (https://sawtoothsoftware.com/forum/28497), but don't see it here for some reason.

Anyways, I think the solution from that previous post will work for us; making a second grid question with open response and just the "Other-Specify" column. And then combining them into a single grid question.

However, I have trouble actually implementing the codes, as I have almost zero experience with HTML or Java. Do I paste the codes mentioned in that post into the first question? In Question Text, the Footer box? Where in the code does it reference the second question that contains the "Other-Specify"?

1 Answer

+1 vote
 
Best answer
Hi there Wenson, I did not see Zachary's comments either? He is likely to see these further comments and add to it a little later.

To assist you now, follow these steps ...

Create GRID 1
Setup a grid question with the rows=medical conditions and the columns=medical locations.

Create GRID 2 (on the same page as GRID 1)
Setup a grid question with the rows=medical conditions and the columns=one column only and label it "Comments".
High-light all items in the rows and select EDIT. Change the question type to O/E.

Now take a preview of this survey page. You should have 2 grids displaying, with the radio buttons grid at the top and the single column O/E grid at the bottom.

Now for the magic Zachary has created ...

Copy the entire HTML script Zachary provided into the footer of any one of those grid questions. Now do a preview once again and you should see the 2 grids merged in to one.

In the same post, Zachary also provide some CSS script that can help you change the column widths to your preference. Add this script in to the footer of any grid question and you should see the affect it has. This script was an example for the first 3 columns. You can tweak this and change the %'s to your liking.

When I have text boxes in grids, I like to stretch the text boxes out using this CSS script that can be inserted in to the footer of GRID 2 ...

Note: Change QG2 to your O/E grid question name.
<style>
#QG2_div .mobile_grid .input_cell {
    width: 100%;
}
 
#QG2_div input.text_input, #QG2_div textarea {
    width: 98%;
}
</style>
answered May 17 by Paul Moon Platinum (100,815 points)
selected May 24 by wfung
Here is the HTML script from Zachary ...
<script>
$(document).ready(function(){
    // Params
    var questions = [];
      
    // Run
    if (!questions.length) {
        $('.grid.question').each(function(){
            questions.push(this.id.replace(/_div$/, ''));
        });
    }
      
    var firstQ = questions.shift();
      
    questions.forEach(function(question){
        $('#' + question + '_div').hide();
    });
      
    if (!$('#' + firstQ + '_div .mobile_grid').length) {
        var firstTbody = $('#' + firstQ + '_div .inner_table > tbody');
        for (var row = 1; row <= $(firstTbody).children().length; row++) {
            questions.forEach(function(question){
                $(firstTbody).find('> :nth-child(' + row + ')').append($('#' + question + '_div .inner_table > tbody > tr:nth-child(' + row + ') > td:not(.corner_label_cell):not(.row_label_cell)'));
            });
        }
    }
      
    else {
        var firstMobileGrid = $('#' + firstQ + '_div .mobile_grid');
        for (var row = 1; row <= $(firstMobileGrid).children().length; row++) {
            questions.forEach(function(question){
                $(firstMobileGrid).find('> :nth-child(' + row + ') .mobile_grid_options').append($('#' + question + '_div .mobile_grid > :nth-child(' + row + ') .mobile_grid_options').children());
            });
        }
    }
})
</script>
And here is the CSS script to adjust the column widths ...
<style>
#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(1) {
    width: 10%;
}
  
#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(2) {
    width: 10%;
}
  
#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(3) {
    width: 10%;
}
</style>

You can change the %'s and you can copy this script to tweak the 4th column, 5th column, etc.
Seems like you had things handled so I figured I'd step out of the conversation.
Zachary, I had an email come through to say you made a comment  but it had disappeared, hence the confusion.
...