Welcome to the LimeSurvey Community Forum

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

Title in a multiple choice question

  • Mon2016
  • Mon2016's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
1 week 2 days ago #267099 by Mon2016
Title in a multiple choice question was created by Mon2016
Please help us help you and fill where relevant:
Your LimeSurvey version: [see right hand bottom of your LimeSurvey admin screen]  Versión 5.6.42+231024
Own server or LimeSurvey hosting: 
Survey theme/template:
==================
(Write here your question/remark)



Hello to all forum members.

I want to ask you something if it is possible to do it in multiple choice questions.

I have a huge list of 70 codes with different products that you can find in a self-service store but at some point it gets confusing with the quantity so I want to put the title of each department of the store at the top in each answer option. something like I show in the image.






Can it be done in a multiple choice answer question or is there something different to show?


Thanks everyone <3

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 week 2 days ago - 1 week 2 days ago #267101 by Joffm
Replied by Joffm on topic Title in a multiple choice question
Hi,
yes you can do this
1. question of type "multiple" where you remove some checkboxes
 
You only enter this script into the source code of the question
Code:
<script charset="utf-8" type="text/javascript">
  $(document).ready(function() {
    $( '#question{QID} .question-item:eq(0)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
    $( '#question{QID} .question-item:eq(7)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
    $( '#question{QID} .question-item:eq(13)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
  });
</script>


You see here (eq(x) the rows where the checkbox is removed (starting with 0)
And some styling
I used a class called .myHeader to shorten the subquestion text
 
Code:
<style type="text/css">.hide-pseudo-elements label::before,
  .hide-pseudo-elements label::after
  {
    display: none;
  }
 
  .hide-pseudo-elements .label-text
  {
    margin-left: -40px;
  }
 
  .myHeader
  {
    color: maroon;
    font-weight: bold;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    padding: 1px 5px;
    margin-left: -25px;
    display: inline-block;
   min-width: 100%;
}
 
  li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom: 0.5em;
  }
 
.checkbox-item label {
  min-width: 100%;
}
</style>


You see with your 70 items it will be a very long and boring list.
But it will get messy if you display in more than one column.
 

Therefore there ist a different solution based on a question "multiple with comments"
Now the items are ordered horizontally
 

This script
Code:
 <script type="text/javascript" data-author="Tony Partner">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var qID = '{QID}';
    var thisQuestion = $('#question'+qID);
 
    /****** HEADER ROWS ******/
    // Find the header rows
    var headerRowPrefix = 'O';
    var headerRows = $('li[id^="javatbd"]', thisQuestion).filter(function() {
      return $(this).attr('id').includes('X'+qID+headerRowPrefix+'');
    });
 
    // Loop through the header rows
    $(headerRows).each(function(i) {
      // Assign a class name
      $(this).addClass('inserted-header-row')
      // Move the label
      .prepend($('label.control-label:eq(0)', this))
      // Remove unecessary elements
      .find('input, div').remove();
    });
 
    /****** ANSWERS INTO COLUMNS ******/
    // Number of columns to display (max 4)
    var columns = 4;
 
    thisQuestion.addClass('with-inserted-columns columns-'+columns+'');
 
 
    /****** REMOVE SOME TEXT INPUTS ******/
    // Find the rows to keep text inputs
    var textRowPrefix = 'oth';
    var textRows = $('li[id^="javatbd"]', thisQuestion).filter(function() {
      return $(this).attr('id').includes('X'+qID+textRowPrefix+'');
    });
 
    // Remove text inputs from all except those rows
    $('li[id^="javatbd"]', thisQuestion).not(textRows).find('div.text-item').remove();
  });
</script>


And the css
Code:
<style data-author="Tony Partner" type="text/css">li.inserted-header-row {
    float: none;
    clear: both;
    flex: 0 0 100%;
  }
 
  li.inserted-header-row label {
/* Hier wird das Layout der Überschrift; kann man alles nach Gusto ändern */
    padding-left: 15px;
    padding-right: 15px;
    padding-top:0 !important;
    font-weight: bold;
    width: 100%;
    background-color:#e29514;;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 18px;
    color: #001957;
  }
  li.inserted-header-row label::before,
  li.inserted-header-row label::after{
    display: none;
  }
 
  @media only screen and (min-width: 768px) {
 
    .with-inserted-columns ul.ls-answers {
      display: flex;
      flex-flow: row wrap;
    }
 
    .with-inserted-columns ul.ls-answers li {
      margin: 0 0 1em 0;
      padding: 0 15px 0 0;
    }
 
    .with-inserted-columns.columns-2 ul.ls-answers li { flex: 0 0 50%; }
    .with-inserted-columns.columns-3 ul.ls-answers li { flex: 0 0 33%; }
    .with-inserted-columns.columns-4 ul.ls-answers li { flex: 0 0 25%; }
    .with-inserted-columns.columns-5 ul.ls-answers li { flex: 0 0 20%; }
 
    .with-inserted-columns ul.ls-answers li.inserted-header-row {
      flex: 0 0 100%;
      padding: 0;
    }
 
    .with-inserted-columns ul.ls-answers li > div {
      float: none;
      width: auto;
    }
 
    .with-inserted-columns ul.ls-answers li label {
      text-align: center;
    }
 
    .with-inserted-columns ul.ls-answers li input[type="text"] {
      margin-top: 0.7em;
    }
  }
</style>


You see in the code that header rows, other items are marked by a special character in the subquestion code.
Of course you can change this.
var headerRowPrefix = 'O';
var textRowPrefix = 'oth';
 

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 week 2 days ago by Joffm.
The following user(s) said Thank You: Mon2016

Please Log in to join the conversation.

  • Mon2016
  • Mon2016's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
1 week 2 days ago #267102 by Mon2016
Replied by Mon2016 on topic Title in a multiple choice question
Thank you so much for your great help Joffm

Always being a hero. 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 week 1 day ago #267103 by Joffm
Replied by Joffm on topic Title in a multiple choice question
Another idea to structure this long, long list could be a two-level display
 

 

Now it's your turn.

Send the lss export of this question and we will see.

Joffm

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

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose