Welcome to the LimeSurvey Community Forum

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

How to add css? How to create a matrix with different types of questions?

  • ruytterm
  • ruytterm's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 months 4 weeks ago - 10 months 4 weeks ago #243773 by ruytterm
Please help us help you and fill where relevant:
Your LimeSurvey version: 3.25.10+210128
Own server or LimeSurvey hosting: Own Server
Survey theme/template: Default
==================
Hello!

I've searched the forum for what I'm looking for, but I don't know exactly how to use it...
In my searches of finding how to put two questions side by side, I came across to this css that tpartner kindly provided:
Code:
.no-bottom{border-bottom:0;margin-bottom:0;}
.no-bottom .answer-container {padding-bottom: 0em;}

I've tried to use this on the menu show > css class (don't know the correct translation) inside the question, it didn't work.

Print:  pasteboard.co/eDP0cv27a6Lc.png
(this editor is kind of buggy, I was not able to upload an image directly) 

The second thing is that I want to create an matrix with different types of questions.
I want a dropdown on Loja and checkboxes on the other two fields.

Print:  pasteboard.co/HAsWPEHwthxA.png

Can anyone please help?
I'm super noob about css and javascript...
Last edit: 10 months 4 weeks ago by ruytterm.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 months 4 weeks ago - 10 months 4 weeks ago #243774 by Joffm
Hi,
but though

I'm super noob about css and javascript...

you have to learn the basics about it if you want to use it.

1. Learn the difference between a css class and the defibnition.
What you showed is the definition which you put either into the "custom.css" of your extended theme or in the question text (in source code mode and surrounded by <style></style> tags)
And into this field only the css class is inserted.

2. As the name of the class suggests it is used to merge questions vertically (the bottom of the first question is not displayed). Usually you use "no-question" for the second question.
But as I understand you want to display questions "side by side".
Search the forum for "flex-container".
Well, I did it for you.
[url] forums.limesurvey.org/index.php/forum/de...-columns-same-height [/url]

3. Something like this?
 
Use an array(text). First column the drop-down, other with an inserted checkbox.
Here the script(s)
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
 
    // Insert selects
    $('.answer-item.answer_cell_1', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
       <option value="">...</option>\
       <option value="1">Option 1</option>\
       <option value="2">Option 2</option>\
       <option value="3">Option 3</option>\
    </select>');
 
    // Listeners on select elements
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($.trim($('option:selected', this).text())).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
 
    // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

Code:
<script type="text/javascript" charset="utf-8">
    
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
 
        // Column-specific classes
        $('tr.subquestion-list', thisQuestion).each(function(i) {
            $('th, td', this).each(function(i) {
                $(this).addClass('column-'+i);
            });
        });
        
        // Insert checkboxes
        $('.answer-item.column-2, .answer-item.column-3', thisQuestion).addClass('custom-checkbox-item');
        $('.custom-checkbox-item', thisQuestion).each(function(i) {
            var thisID = $('input:text:eq(0)', this).attr('id');
            $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
            if($('input:text:eq(0)', this).val() == 'Y') {
                $('input:checkbox:eq(0)', this).prop('checked', true);
            }
            $(this).removeClass('text-item').addClass('checkbox-item');
            $('input:text:eq(0)', this).remove();
        });
        
    });
</script>

Code:
<style type="text/css">.custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column-0 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 50%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 20%; }
  .custom-array table.subquestion-list thead .column-3 {  width: 20%; }
</style>


Or do you talk about more checkboxes?

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 10 months 4 weeks ago by Joffm.

Please Log in to join the conversation.

  • ruytterm
  • ruytterm's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 months 3 weeks ago #243902 by ruytterm
Hi! Thanks for the quick response and sorry it took so long to get back.

you have to learn the basics about it if you want to use it.

Yes, I know. That's why I open this post, to get some directions to know what I have to search for, and your tips are awesome!

which you put either into the "custom.css" of your extended theme

Do you mean the file "custom.css" located at ".\limesurvey\themes\survey\fruity\css\custom.css"?
Or do I have to "extend" my theme first within the theme editor?

or in the question text (in source code mode and surrounded by <style></style> tags)

Do you mean here , where I put the question text, right? I've used some code before.

So, now that I checked if I really understood what you meant about those topics, let me return to the "merging questions" subjects.

Something like this? Or do you talk about more checkboxes? 

Yes, and yes.

First column with the select is ok, I'll search on the forum for the ability to populate it with a csv file, I remember seeing this somewhere.
I would like if it was possible for the select to return customer code + customer name. "Customer name" is for the user to pick the right customer easily, and "customer code" would be to match it easily with the customer data from my system. Is it possible for the select show only the customer name, but save the customer code? That's why my first thought was to use a dropdown. I know the dropdown can be populated by injecting data directly in limesurvey database, and is easy to create a relation with the customer code for future reference.

Regarding the checkboxes, I would need more than one for de 2nd and 3rd columns.
I've managed to replicate what you kindly provided to me (I had to adjust some column names), but I couldn't find a way to have more then 1 checkbox for column.
I'd like to have 3 checkboxes with labels in each 2nd and 3rd columns.

Thanks again!!!

 

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 months 3 weeks ago #243903 by holch

Or do I have to "extend" my theme first within the theme editor?

This is already answered by Joff by:

into the "custom.css" of your extended theme


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

Please Log in to join the conversation.

  • ruytterm
  • ruytterm's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 months 3 weeks ago #243907 by ruytterm

This is already answered by Joff by:

Oh, yes, thanks.
I asked because I found this :
  1. Login to the LimeSurvey admin area
  2. Browse to the theme editor: Configuration > Themes
  3. Find "LimeSurvey Fruity Theme" in the list and click the "Theme Editor" button
  4. Click "custom.css" in the files list on the left at near the bottom of the page
  5. Copy the following CSS into that file and press "Save Changes"
But I couldn't find the custom.css. But after your answer, I've noticed that earlier is mentioned to extend the theme on the Adding your own logo to the survey list.

Thanks for the clarification.

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 months 3 weeks ago #243908 by holch
Yeah, but you conveniently omitted this part at the beginning above your citation:

This example is for the "extends_fruity" template.


:-)

Never change anything in the standard themes, always create a copy or extend a standard theme.

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

Please Log in to join the conversation.

  • ruytterm
  • ruytterm's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 months 3 weeks ago #243910 by ruytterm
True, but wasn't "conveniently".
I was looking for a "where to find" the custom.css file.
It looks like it only appears on a extended theme, and since I've never edit the theme in any way, I didn't know about this "extend" process.
I honestly thought that "extends_fruity" was the name of the template/theme. That's what I get not reading the whole thing and not knowing more about it.

Sorry about my mistakes.
I'm learning a lot about it with this conversation, thanks!

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 months 3 weeks ago #243911 by holch

I honestly thought that "extends_fruity" was the name of the template/theme.


And you are not wrong. It is the the name of the extended theme/template, based on Fruity.

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

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 months 3 weeks ago - 10 months 3 weeks ago #243912 by Joffm
Sorry, but did you ever read the manual?
Here
[url] manual.limesurvey.org/Themes/en#Theme_editor [/url]
you find everything about the theme editor, extension and inheritence.
AND the two phrases
The LimeSurvey core themes (default themes) cannot be modified. The "extend" button give users the opportunity for a core theme to be modified(extended).
and
The "Extend" button will ask for a new name to save a copy of the theme you want to modify.
In our case, the fruity theme will be named "extends_fruity".

So this is the default name of an extended theme as long you do not select a different one.


Okay, your question about the array.
When you talk about a csv file I assume you think of an "autocomplete". This is something quite different.
This drop-down in an array(text) is created by a script with hard coded options.
Advantage: The text (name) is displayed, the value (ID) is stored.
Disadvantage: A drop-down with a lot of items is cumbersome to handle.

Autocomplete: 
There are two ways to implement.
1. Jquery (search the forum for "autocomplete")
Advantage: Really fast, even if there are more than 10000 entries
Disadvantage: You can' t display one value and store another one.
2. Devbridge
[url] gitlab.com/SondagesPro/QuestionSettingsType/autoComplete [/url]
Advantage: You can use two columns, one to display, one to store (BUT only in "short text" questions; you have to revise your design)
Disadvantage: Really slow if there are more than 500 entries.

Well, you may use an equation to find the matching ID of the name.

But if you use a "short text" question, you also could use a "searchable dropdown"
[url] github.com/tpartner/LimeSurvey-Searchable-Dropdown-3x-5x [/url]

Now it is up to you to decide.

And you can imagine that you can't place more than one checkbox in a column, but you can make it look like this by some styling.
Use the webdevelopment tool of your browser (usually F12) to investigate and find out which classes are affected
Only a rough example
 

And here the autocomplete
 

So, decide what you want, send a lss export of these questions and I'll show you the rest.

By the way:

(this editor is kind of buggy, I was not able to upload an image directly) 

As you see there are no issues to attach images or files.
And there were no complaints about it 
So why can't you? Is there an error message? What happens?

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 10 months 3 weeks ago by Joffm.

Please Log in to join the conversation.

  • ruytterm
  • ruytterm's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
10 months 3 weeks ago #243913 by ruytterm

Sorry, but did you ever read the manual?

Honestly, I didn't read the whole thing and that was the problem. The documentation is very extensive, so I usually search on the forum, or use the summary to jump to the section of interest (which this time made me miss important information). 

I'm into programming, mostly vba and phyton, but not styling, and now that I'm back using limesurvey, I will learn css and javascript.
I'll look into the options you've suggested, see what will fit me better. But all are awesome ideas.

And you can imagine that you can't place more than one checkbox in a column, but you can make it look like this by some styling.

Well, I've tried to, but I thought maybe the problem was me. I'll make some styling as you suggested.

So why can't you? Is there an error message? What happens? 

About this, I don't know what I am doing wrong.
If I click the image icon, a popup shows up to insert a link, but the image doesn't show.
The first post I made all the images were not loading, so I went back and edited it with links to the prints.
 
But attaching it and then inserting into the editor works flawlessly.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 months 2 weeks ago #243964 by Joffm
As promised, here a few examples.
1. the "simple" dropdown
 

2. "autocomplete" with array (Countries of the world).
In group "GCalc" you see how you can calculate the ID of the given name
 

3. "autocomplete" with csv file. The file "namen.csv" was uploaded to the files-folder of the survey.
 

I should say: As long as there are less than 500 names you may use the "autocomplete(array)" solution. Just try.

Here the files
 

File Attachment:

File Name: limesurvey...1662.lss
File Size:57 KB


And the csv (had to be zipped; csv not allowed)
 

File Attachment:

File Name: namen.zip
File Size:0 KB


Good luck

Joffm

 

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose