Welcome to the LimeSurvey Community Forum

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

Add text box to question type N: numerical input

  • peterpaul
  • peterpaul's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 10 months ago #228209 by peterpaul
Please help us help you and fill where relevant: 
Your LimeSurvey version: 3.17.0+190402
Own server or LimeSurvey hosting: Open Universiteit Nederland
Survey theme/template: Advanced Template
==================
I want to add a text box to question type N: numerical input. Reason: in my research pupils have to self-assess their work AND write down some additional feedback about what and how to improve their work during revising. Therefore, I need a text box wherein the pupils can write their comments/feedback.
Can someone help me and - if possible - share the code of the additional text box? Thanks in advance!
 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228212 by Joffm
I can offer two options:
1. Two questions merged with some css
 
First question (numerical) gets css class "no-bottom"
Second question (text) gets css class "no-question"
Either you insert it into the question text of one of the questions or you add it to your "custom.css" or (without the surrounding <style>...</style> tags).
Code:
<style type="text/css">
.no-question { border-top:0; }
.no-question .question-title-container { display:none; }
.no-question .question-valid-container { display:none; }
.no-question .answer-container {
    padding-top: 0em;
    padding-bottom: 0.5em;
}
.no-bottom { border-bottom:0;margin-bottom:0; }
.no-bottom .answer-container {
    padding-bottom: 0em;
}
</style>

2. Use an array(text).
 
Set the column width by this javascript in your question text
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);
      });
    });
  });
</script>
Code:
<style type="text/css">
.custom-array table.subquestion-list col {
    width: auto !important;
  }
  .custom-array table.subquestion-list thead .column-0 {  width: 0%; }
  .custom-array table.subquestion-list thead .column-1 {  width: 10%; }
  .custom-array table.subquestion-list thead .column-2 {  width: 90%; }
</style>

Just a few ideas.

Joffm

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

Please Log in to join the conversation.

  • peterpaul
  • peterpaul's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 10 months ago #228237 by peterpaul
Replied by peterpaul on topic Add text box to question type N: numerical input
Thank you Joffm, these options helps me further.
Peter-Paul.

Please Log in to join the conversation.

  • peterpaul
  • peterpaul's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
1 year 10 months ago #228264 by peterpaul
Replied by peterpaul on topic Add text box to question type N: numerical input
Dear Joffm,

I have some additional questions, because it didn't work like I wished.
I used your first suggestion to create a numerical box and text box with css-styles.
This is what I have done:

I made a new question-group (called 'Sjabloon'). Therein I placed two questions: one with numerical input (type N) and one with free text (type T). I placed the text with css-style in the question-box of question 1 (copied from you):

<p><span style="font-size: 18px;">Ik geef het <strong>voorblad</strong> het cijfer:</span></p>

<pre>
<style type="text/css">.no-question { border-top:0; }
.no-question .question-title-container { display:none; }
.no-question .question-valid-container { display:none; }
.no-question .answer-container { padding-top: 0em; padding-bottom: 0.5em; }

.no-bottom { border-bottom:0; margin-bottom:0; }
.no-bottom .answer-container { padding-bottom: 0em; }</style></pre>

<p> </p>

Further, I placed only the text: "Dit ga ik doen om mijn verslag bij de revisie te verbeteren" (means something like ways to improve) in question 2. I placed no further css-styles in this question, because, if I'm correct, placing it in question 1 should be enough.

However, the result not the way I hoped. Under question1, there is extra whitespace and an extra blue bar. See the picture:

 

The extra white space and the blue bar aren't what I want to be shown. What is going wrong here? Can you give me some more tips? Thank you in advance!
 

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 10 months ago #228272 by tpartner
The blue bar is the <pre> tag that you have inserted.

Regarding the questions not merging, you have probably not applied the no-question and no-bottom classes to the questions.

- manual.limesurvey.org/Question_type_-_Nu...lass_.28css_class.29

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: peterpaul

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose