Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Array with tickboxes and text

arpsh
Topic Author
Offline
Junior Member

More

8 years 11 months ago #128842 by arpsh

Array with tickboxes and text was created by arpsh

I have a pretty simple query, and hopefully someone can help!

I have some javascript that I am sure is one of Tony's, but my coding abilities pretty much stop at the 'educated guesswork' and 'trial and error using examples' stage.

I have an array which is built up from a tickbox gender question (q1), plus a second multiple short comments question for age which is hidden(q2), with the input boxes moved into the preceding array. Currently the text boxes appear first, and then the tick boxes. All I am trying to is swap them over, and I can't seem to be able to do it (i.e. gender first, then age).

I sure it is really simple if you know how - does anyone out there know?

Code:

<span class="qnumber">Q1</span>  Please tell us the age and gender of everyone who lives with you in your household. <script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
 
    var newHeader = 'Age';
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.multiple-short-txt:eq(0)');
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Hide the second question
    $(q2).hide();
 
    // Clean up the array widths imposed by LS
    $('.subquestions-list col', q1).css({ 'width':'auto' });
 
    // Insert a new header in the array
    $('.subquestions-list thead td', q1).after('<th>'+newHeader+'</th>');
 
    // Move the age inputs into the array
    $('.answers-list', q1).each(function(i) {
      $('.answertext', this).after('<td class="answer_cell_000"></td>');
    });
    $('input[type="text"]', q2).each(function(i) {
      $('.answer_cell_000:eq('+i+')', q1).append($(this));
    });
 
    // Some styles for the array (this could be done in template.css)
    $('.subquestions-list th, .subquestions-list td', q1).css({ 'padding':'3px 7px' });
  });
</script>

The topic has been locked.

arpsh
Topic Author
Offline
Junior Member

More

8 years 11 months ago - 8 years 11 months ago #128843 by arpsh

Replied by arpsh on topic Array with tickboxes and text

Damn, it's gone in the wrong section! Anyone know how to delete this topic as I meant to put it in the design issues section?

Last edit: 8 years 11 months ago by arpsh.

The topic has been locked.

holch
Offline
LimeSurvey Community Team

More

8 years 11 months ago #128848 by holch

Replied by holch on topic Array with tickboxes and text

Moved to "design issues" as requested.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.

Mazi
Offline
LimeSurvey Community Team & Official Partner

More

8 years 11 months ago #128849 by Mazi

Replied by Mazi on topic Array with tickboxes and text

Please post a link to an activated test survey so we can have a look at the live version.

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

8 years 11 months ago #128850 by tpartner

Replied by tpartner on topic Array with tickboxes and text

Untested, but it seems to me that this should do the trick:

Code:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
 
    var newHeader = 'Age';
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.multiple-short-txt:eq(0)');
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Hide the second question
    $(q2).hide();
 
    // Clean up the array widths imposed by LS
    $('.subquestions-list col', q1).css({ 'width':'auto' });
 
    // Insert a new header in the array
    $('.subquestions-list thead th:last', q1).after('<th>'+newHeader+'</th>');
 
    // Move the age inputs into the array
    $('.answers-list', q1).each(function(i) {
      $('td.answer-item:last', this).after('<td class="answer_cell_000"></td>');
    });
    $('input[type="text"]', q2).each(function(i) {
      $('.answer_cell_000:eq('+i+')', q1).append($(this));
    });
 
    // Some styles for the array (this could be done in template.css)
    $('.subquestions-list th, .subquestions-list td', q1).css({ 'padding':'3px 7px' });
  });
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The following user(s) said Thank You: arpsh

The topic has been locked.

arpsh
Topic Author
Offline
Junior Member

More

8 years 11 months ago #128851 by arpsh

Replied by arpsh on topic Array with tickboxes and text

tpartner wrote: Untested, but it seems to me that this should do the trick:

Bloomin hell, that was quick!

Just tested it now, and it does indeed work as intended - thanks Tony!

Mazi wrote: Please post a link to an activated test survey so we can have a look at the live version.

Looks like Tony beat you to the punch Marcel - I was just preparing a link for you when he posted!

The topic has been locked.

arpsh
Topic Author
Offline
Junior Member

More

8 years 11 months ago #128853 by arpsh

Replied by arpsh on topic Array with tickboxes and text

For anyone else curious about this, the screenshot below is how it looks (this is the newer version with the order of the columns swapped).

The topic has been locked.

arpsh
Topic Author
Offline
Junior Member

More

8 years 11 months ago #128854 by arpsh

Replied by arpsh on topic Array with tickboxes and text

Mazi wrote: Please post a link to an activated test survey so we can have a look at the live version.

One last issue is that I am using Marcel's extremely good TFR responsive template as my basis, which I would recommend people buy as it is so much better than others I have used. However, I have realised that it drops the column header for the age box once the array flips to a tablet/mobile optimized format (I think it is lower than 768 pixels width?)

An example of the survey is linked here so you can see what I mean by dragging the browser width down until it flips.

Any ideas on how I can deal with this Marcel?

Cheears

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

8 years 11 months ago - 8 years 11 months ago #128858 by tpartner

Replied by tpartner on topic Array with tickboxes and text

Hmm...to handle that, you'll need to use this script which inserts a label element:

Code:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { 
 
    var newHeader = 'Age';
 
    // Identify the questions
    var q1ID = '{QID}';
    var q1 = $('#question'+q1ID+'');
    var q2 = $(q1).nextAll('.multiple-short-txt:eq(0)');
    var q2ID = $(q2).attr('id').split('question')[1];
 
    // Hide the second question
    $(q2).hide();
 
    // Clean up the array widths imposed by LS
    $('.subquestions-list col', q1).css({ 'width':'auto' });
 
    // Insert a new header in the array
    $('.subquestions-list thead th:last', q1).after('<th>'+newHeader+'</th>');
 
    // Move the age inputs into the array
    $('.answers-list', q1).each(function(i) {
      $('td.answer-item:last', this).after('<td class="answer_cell_000 answer-item radio-item"><label>'+newHeader+'</label></td>');
    });
    $('input[type="text"]', q2).each(function(i) {
      $('.answer_cell_000:eq('+i+')', q1).append($(this));
    });
 
    // Some styles for the array (this could be done in template.css)
    $('.subquestions-list th, .subquestions-list td', q1).css({ 'padding':'3px 7px' });
  });
</script>

And then add something like this to the end of template.css:

Code:

.subquestions-list .answer_cell_000 label::before, 
.subquestions-list .answer_cell_000 .label::before {
  content: "";
}
 
.subquestions-list .answer_cell_000 label {
  display:none;
}
 
@media (max-width: 768px) {
 
  .subquestions-list .answer_cell_000 {
    padding: 3px 7px 3px 15px !important;
    text-align: left;
  }
 
  .subquestions-list .answer_cell_000 label {
    display:inline-block;
    width: 50%;
    color: #4d4d4d;
    text-align: left;
  }
 
  .subquestions-list .answer_cell_000 input {
    display:inline-block
    width: 50%;
  }
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 8 years 11 months ago by tpartner.

The following user(s) said Thank You: arpsh

The topic has been locked.

Mazi
Offline
LimeSurvey Community Team & Official Partner

More

8 years 11 months ago #128861 by Mazi

Replied by Mazi on topic Array with tickboxes and text

Thanks for the support, Tony!

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

8 years 11 months ago #128874 by tpartner

Replied by tpartner on topic Array with tickboxes and text

No thanks until we know it works

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

arpsh
Topic Author
Offline
Junior Member

More

8 years 11 months ago #128889 by arpsh

Replied by arpsh on topic Array with tickboxes and text

Mazi wrote: Thanks for the support, Tony!

tpartner wrote: No thanks until we know it works

It does indeed work Tony

Apologies that I couldn't get back until now to let you know!

Once again, thanks so much for your help.

The topic has been locked.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Array with tickboxes and text

Lime-years ahead

Legal

About Us

Open Source