Welcome to the LimeSurvey Community Forum

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

Array with radio buttons and text on the same line

eloner
Topic Author
Offline
Senior Member

More

10 years 2 months ago #116879 by eloner

Array with radio buttons and text on the same line was created by eloner

Hello to everybody.
I am using LS 2.05+ Build 141229.
I am planning to create a question like this:

The logic of the question is:
1. To have on the same line the radio buttons + the text (on the right of each button)
2. Repeat the radio buttons + the text for every sub-question
3. Column width is the same for column 2 and 4 (tight) and for 3 and 5 (wide)

The logic of the experiment is to check for the effect of text close to radio buttons and of distance between columns.
I think I should use javascript code, but it isn't easy for me!

Any suggestion or idea would be greatly appreciated!
Cheers,
elo

Attachments:

Experim.gif

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

10 years 2 months ago #116932 by tpartner

Replied by tpartner on topic Array with radio buttons and text on the same line

This is untested but maybe a script like this in the source of the array:

Code:

<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    thisQuestion.addClass('modified-array');
 
    $('td.answer-item', thisQuestion).each(function(i) {
      $(this).append($('label', this));
    });
    });  
</script>

And, then something like this in template.css:

Code:

.modified-array .subquestions-list col {
  width: auto !important;
}
 
.modified-array .subquestions-list thead {
  display: none;
}
 
.modified-array td.answer-item {
  text-align: left !important;
  vertical-align: top !important;
}
 
.modified-array label.hide {
  position: relative;
  left: auto;
  top: auto;
}
 
.modified-array input.radio {
  margin-right: 5px;
}
 
.modified-array .answertext {
  width: 20%;
}
 
.modified-array .answer-column-1,
.modified-array .answer-column-3 {
  width: 10%;
}
 
.modified-array .answer-column-2,
.modified-array .answer-column-4 {
  width: 30%;
}

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

The topic has been locked.

eloner
Topic Author
Offline
Senior Member

More

10 years 2 months ago #116963 by eloner

Replied by eloner on topic Array with radio buttons and text on the same line

Thank you Tony.
I tried to change my survey as suggested, but apparently the question was not effected.

I enclose the survey file

File Attachment:

File Name: limesurvey...9139.lss
File Size:16 KB

And the template.css file with the new lines added at the end:

Maybe am I doing something wrong?

Thank you for your help and patience!
Cheers,
Enzo

Attachments:

limesurvey...9139.lss

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

10 years 2 months ago #116965 by DenisChenu

Replied by DenisChenu on topic Array with radio buttons and text on the same line

tpartner wrote: This is untested but maybe a script like this in the source of the array:

No need to add lable.

In the last version, label are in each td, but with .hide class.

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

10 years 2 months ago #116970 by tpartner

Replied by tpartner on topic Array with radio buttons and text on the same line

@Denis, I know, I didn't add the label, I simply moved it within the table cell. As you can see I accessed the .hide class.

@eloner, Please activate a test survey so we can see the source.

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

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

10 years 2 months ago #116971 by DenisChenu

Replied by DenisChenu on topic Array with radio buttons and text on the same line

tpartner wrote: @Denis, I know, I didn't add the label, I simply moved it within the table cell. As you can see I accessed the .hide class.

You're rigth, i don't use $('label',$this)) a lot ... maybe i must more.

gitorious.org/skeletonquest/skeletonques...82f:template.js#L391 :blush:

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The following user(s) said Thank You: eloner

The topic has been locked.

eloner
Topic Author
Offline
Senior Member

More

10 years 2 months ago #116973 by eloner

Replied by eloner on topic Array with radio buttons and text on the same line

Dear all,
here you can text the survey:
srssurvey.unitn.it/limesurvey/index.php/899139/lang-en
Cheers,
Enzo

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

10 years 2 months ago #116974 by tpartner

Replied by tpartner on topic Array with radio buttons and text on the same line

You have made an error pasting in the script:

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

Attachments:

...2015-02-04.png

The following user(s) said Thank You: eloner

The topic has been locked.

eloner
Topic Author
Offline
Senior Member

More

10 years 2 months ago - 10 years 2 months ago #116980 by eloner

Replied by eloner on topic Array with radio buttons and text on the same line

Ops... sorry for my thoughtlessness! :S
Initially I pasted correctly all the text...
The problem is that the system seems to override the rules (in template.css) for the column.
I see the label on the right of the radio button, but the width is not as I wanted.
I tyed to play with the parameters of in template.css (i.e. changing the values for the width) or with sub-question width in the advanced options of the array, but the spaces between the column don't change so much.

Maybe is it possible to add a (non clickabel) column between column 2 and colomn 3?

Cheers and thank you for your precious suggestions!

Attachments:

Esperim2.gif

Last edit: 10 years 2 months ago by eloner. Reason: grammatics!

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

10 years 2 months ago #116982 by tpartner

Replied by tpartner on topic Array with radio buttons and text on the same line

Oops, now it's my turn to be embarrassed, I forgot to assign the column classes. Use this script:

Code:

<script type="text/javascript" charset="utf-8">  
  $(document).ready(function() {
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    thisQuestion.addClass('modified-array');
 
    // Assign column-specific classes
    $('.answers-list', thisQuestion).each(function(i){
      $('td.answer-item', this).each(function(i){
        $(this).addClass('answer-column-'+(i+1)+'');
      });
    });
 
    $('td.answer-item', thisQuestion).each(function(i) {
      $(this).append($('label', this));
    });
    });
</script>

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

The topic has been locked.

eloner
Topic Author
Offline
Senior Member

More

10 years 2 months ago #116983 by eloner

Replied by eloner on topic Array with radio buttons and text on the same line

Perfect!
Now it works!
Thank you!!!!!!!!!!!!!!!!
Cheers
elo

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 radio buttons and text on the same line

File Attachment:

Lime-years ahead

Legal

About Us

Open Source