Have an idea?

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

Space between questions

Hi,
I want to reduce the space between two questions so that 2 different html table looks like a single table. The page format setting affects all the questions and also the result is now quite well.

The question format is as below, I can't create single html table as these attributes need to pipe in. So I have created 7 questions for 7 attributes. Please help me with CSS code so that I can show these 7 tables closely to a single table.

--------------------------------------------------------------------
|                                            | Option 1
|Brand 1 (Pipe in Q14)| Option 2
|                                            | Option 3
|                                            | Option 4
|                                            | Option 5
|--------------------------------------------------------------------
|                                            | Option 1
|Brand 2 (Pipe in Q14)| Option 2
|                                            | Option 3
|                                            | Option 4
|                                            | Option 5
|--------------------------------------------------------------------
asked Jul 5, 2017 by Abdul Bronze (2,525 points)
What type of question are these?  Are these grids with five rows and one column each?
Hi Zachary,
It is not a grid question. It is a straight forward question with aforementioned format. Let me make it more clear.
Example question below,

Q14. Which brands have you heard of?
1. Apple
2. Dell
3. HP
4. Asus
5. Lenovo

Q15. How much do you know about each brands?

[Show Brands if aware in Q14. SINGLE SELECT, ALL ON SAME PAGE]

--------------------------------------------------------------------
|                                            | Only know the name
|Apple (Pipe in Q14)    | Know a little
|                                            | Know a lot
|--------------------------------------------------------------------
|                                            | Only know the name
|Dell (Pipe in Q14)        | Know a little
|                                            | Know a lot
|--------------------------------------------------------------------
|                                            | Only know the name
|HP (Pipe in Q14)          | Know a little
|                                            | Know a lot
|--------------------------------------------------------------------
|                                            | Only know the name
|Asus (Pipe in Q14)       | Know a little
|                                            | Know a lot
|--------------------------------------------------------------------
|                                                   | Only know the name
|Lenovo (Pipe in Q14)        | Know a little
|                                                   | Know a lot
|--------------------------------------------------------------------

'Apple' table box should be suppressed in Q15 if it is not selected in Q14. To achieve this I have created one question for each brand but space between 2 questions clearly shows it is not a single html table. So I want to reduce the space between these questions using CSS or JQuery. Is it clear now?
I can combine the response options from several select questions if you wish, but from your description it sounds like using a grid question for Q15 might be the more readable way to ask these questions.  For the rows, you could use a constructed list with "AIC(Q14)."  Do you need to use selects for Q15?
Thank you so much for taking time to look into this.
Yes, you are right. I need to use select for Q15 with necessary HTML table format. Those 'Only know the name', 'know a little' are for examples, actually each brand has lot of different select options. I have given above just for examples.

2 Answers

+1 vote
Hi Abdul,

In case if the questions are created without the page break you can try the below code to decrease the space between 2 questions  

$("#[% QuestionName() %]_div").hide();

Place the above code in 2nd question in footer
answered Jul 6, 2017 by sandeepkapalawai Bronze (1,475 points)
Thanks Sandeep, however it doesn't work. It just prints
$("#Q15_div").hide();  at the bottom of 2nd question. Any idea?
Hi Rahul,

Have you tried placing it with in the script, if no please using the below code again.


<script>
$("#Q15_div").hide();
</script>

It worked me , as i have  designed 3 questions in a single page , i have used the above code and placed in the last question.
+1 vote
This CSS removes the top and bottom margins and padding to all select questions on a page:

<style>
.select,
.select .question_body,
.select .response_body {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
</style>


I placed the code in one of the select question's HTML head tag.
answered Jul 10, 2017 by Zachary Platinum Sawtooth Software, Inc. (147,200 points)
Can I have this for free format question instead of select?
Would this work?
<style>
.free format,
.free format .question_body,
.free format .response_body {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
</style>
I can rework the CSS for a free format question, but I would need to see the HTML for the question first.  Can you remove any sensitive text from the HTML and post it?
Here it is...

Q14A1
<style type="text/css">
table {
    border: 1px solid #000000;
}
th {border-left: 1px solid black;}
</style>
<table style="width:100%" cellpadding="5">
<col width="42%">
<col width="2%">
<col width="56%">
  <tr>
    <td rowspan="8"><b>Apple</b></td>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 1)%]</th>
    <td>Option 1</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 2)%]</th>
    <td>Option 2</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 3)%]</th>
    <td>Option 3</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 4)%]</th>
    <td>Option 4</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 5)%]</th>
    <td>Option 5</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 6)%]</th>
    <td>Option 6</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 7)%]</th>
    <td>Other (please specify)&nbsp;&nbsp;&nbsp;<input name="Q14A1_A2" id="Q14A1_A2" type="text" size="30"></td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A1_A1, 8)%]</th>
    <td>Don't know</td>
  </tr>
</table>


Q14A2


<style type="text/css">
table {
    border: 1px solid #000000;
}
th {border-left: 1px solid black;}
</style>

<table style="width:100%" cellpadding="5">
<col width="42%">
<col width="2%">
<col width="56%">
  <tr>
    <td rowspan="5"><b>Dell</b></td>
    <th  class="clickable">[%RadioSelect(Q14A2_A1, 1)%]</th>
    <td>Option 1</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A2_A1, 2)%]</th>
    <td>Option 2</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A2_A1, 3)%]</th>
    <td>Option 3</td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A2_A1, 4)%]</th>
    <td>Other (please specify)&nbsp;&nbsp;&nbsp;<input name="Q14A2_A2" id="Q14A2_A2" type="text" size="30"></td>
  </tr>
  <tr>
    <th  class="clickable">[%RadioSelect(Q14A2_A1, 5)%]</th>
    <td>Don't know</td>
  </tr>
</table>
Try putting this in one of the free format's HTML head tag:

<style>
.freeformat,
.freeformat .question_body {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
</style>
...