Welcome to the LimeSurvey Community Forum

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

Array with tickboxes and text

  • arpsh
  • arpsh's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 4 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
  • arpsh's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 4 months ago - 8 years 4 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 4 months ago by arpsh.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 4 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
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
8 years 4 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 4 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
  • arpsh's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 4 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
  • arpsh's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 4 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
  • arpsh's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 4 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 4 months ago - 8 years 4 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 4 months ago by tpartner.
The following user(s) said Thank You: arpsh
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
8 years 4 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 4 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
  • arpsh's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 3 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.

Lime-years ahead

Online-surveys for every purse and purpose