Welcome to the LimeSurvey Community Forum

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

Merge array questions and add % symbol

More
6 years 2 months ago - 6 years 2 months ago #185758 by tixeon
Hi,
Is there a way I can do the following in the attached:
  1. Put a % symbol after each text box in the first question
  2. For the second question, make it look like it is part of the first question (remove the column headers and question text) and put it in the same question border

so that it looks like this?


[edit] Version 3.17.5
Last edit: 6 years 2 months ago by tixeon.
The topic has been locked.
More
6 years 2 months ago #185759 by gabrieljenik
You need some custom CSS to do that. Maybe apply custom classes to those questions and then set the rules for them.

Use input:after for the % sign.

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

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

The topic has been locked.
More
6 years 2 months ago - 6 years 2 months ago #185769 by tpartner
Or use JavaScript to move the array rows from Q2 into the Q1 array and completely hide Q2.

Can you attach a small sample survey (.lss file) containing only the relevant questions?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 2 months ago by tpartner.
The topic has been locked.
More
6 years 2 months ago #185770 by tixeon
Thanks Tony, I thought I had attached the .lss. Trying again.

File Attachment:

File Name: limesurvey...5522.lss
File Size:24.44 KB
The topic has been locked.
More
6 years 2 months ago #185781 by tpartner
You will need to add a script like this to the source of the first question:

Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function()  {
 
    // Identify the questions
    var thisQuestion = $('#question{QID}');    
    var nextQuestion = $(thisQuestion).next('.question-container');
 
    // Hide the next question
    $(nextQuestion).hide();
 
    // Insert the "%" symbols
    $(thisQuestion).addClass('with-inserted-symbols');
    $('.answer-item input:text', thisQuestion).after('<span class="inserted-symbol">%</span>');
 
    // Move the array row
    $('table.subquestion-list', thisQuestion).append($('tr.answers-list', nextQuestion));
  });
</script>

And some CSS like this (this could be in your custom.css file):

Code:
<style type="text/css">
  .with-inserted-symbols .answer-item input[type="text"] { 
    display: inline-block;
  }
 
  .inserted-symbol { 
    margin-left: 5px;
  }
</style>

Sample survey attached:

File Attachment:

File Name: limesurvey...5221.lss
File Size:26.03 KB

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: tixeon
The topic has been locked.
More
6 years 2 months ago #185782 by gabrieljenik
Nice

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

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

The topic has been locked.
More
6 years 2 months ago #185791 by tixeon
That works perfectly and with such nice efficient code, many thanks!
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose