Welcome to the LimeSurvey Community Forum

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

Multiple question types in array modifiy

  • phpsurvey
  • phpsurvey's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
13 years 11 months ago - 13 years 11 months ago #53081 by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
Hi tpartner,

thanks for your professional help. Can you tell me: How can I input a single checkbox instead of a dropdown??

Example with Photoshop -> checkbox instead of a dropdown??

Last edit: 13 years 11 months ago by phpsurvey.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
13 years 11 months ago #53083 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
Replace the short-text questions with multiple-options questions with only one answer each and no question or answer text.

In the script, replace this line:
Code:
$('div.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide();
With:
Code:
$('div.multiple-opt td.questiontext, div.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide();

And add this to the script before the "// Yes-no question styles" block:
Code:
// Checkbox question styles
$( 'div.multiple-opt ul' ).css({
    'text-align': 'center',
    'font-size': '90%',
    'margin': '0',
});
$( 'div.multiple-opt ul li' ).css({
    'text-align': 'center',
});

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • phpsurvey
  • phpsurvey's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
13 years 11 months ago #53084 by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
tpartner - you are amazing
The topic has been locked.
  • phpsurvey
  • phpsurvey's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
13 years 11 months ago - 13 years 11 months ago #53125 by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
before I post this I tried it a lot of times :) realy


I want to add an extra array with a comment field under an normal radio array



Question group 1
1. First question is an normal radio array
2. Second question is one row: comment field + radio array

I think my javascript is wrong, but I don't know how I can make it:
Code:
<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() {
 
    /*********** 
    Display multiple questions side by side
    ***********/
 
    //////// Define question attributes for later use ////////
 
    // Give questions row specific attributes so we can easily manipulate them by row
         $('#question583,#question1145, #question1146').attr('name', 'qRow1');
 
 
    // Give questions column specific attributes so we can easily manipulate them by column
    // I know, not the correct use of "rel" attribute but...too bad!
    $('#question583').attr('rel', 'qCol1');
    $('#question1145').attr('rel', 'qCol2');
                $('#question1146').attr('rel', 'qCol3');
 
 
    //////// Survey layout manipulation ////////
 
    // Fix the width of the survey
    $( 'table.outerframe' ).css({
      'width': '900px'
    });
 
    // Wrap each row in a div
    // This is kinda verbose but IE won't let me use jQuery shortcuts
    var el = document.createElement('div');
    el.setAttribute('id','inlineWrapper1');
    document.body.appendChild(el);
    $('div[name="qRow1"]').wrapAll($('#inlineWrapper1'));
 
    el.setAttribute('id','inlineWrapper2');
    document.body.appendChild(el);
    $('div[name="qRow2"]').wrapAll($('#inlineWrapper2'));
 
    el.setAttribute('id','inlineWrapper3');
    document.body.appendChild(el);
    $('div[name="qRow3"]').wrapAll($('#inlineWrapper3'));
 
    el .setAttribute('id','inlineWrapper4');
    document.body.appendChild(el );
    $('div[name="qRow4"]').wrapAll($('#inlineWrapper4'));    
 
    // Style the wrapper divs
    $( '#inlineWrapper1, #inlineWrapper2' ).css({
      'width': '850px',
      'margin': '0 auto 0 auto',
      'clear': 'both'
    });
 
    // Get all the questions to sit politely side by side
    $( 'div[name="qRow1"], div[name="qRow2"]' ).css({
      'float': 'left'    
    });
 
    //////// Column manipulation ////////
 
    // Set the column widths - can be set individually if necessary
    // Must add up to less than 100%
    $( 'div[rel="qCol1"]' ).css({
      'width': '12%'
    });
    $( 'div[rel="qCol2"], div[rel="qCol3"]' ).css({
      'width': '30%'
    });
 
    //////// Question manipulation ////////
 
    // Hide the answer element in boilerplate questions
    $( 'div.boilerplate td.answer' ).parent().hide();
 
    // Hide the question text elements in non-boilerplate questions
    $('div.multiple-opt td.questiontext, div.text-short td.questiontext, div.list-dropdown td.questiontext, div.yes-no td.questiontext, div.numeric td.questiontext').parent().hide();
 
    // Push the question tables to 100%
    $( 'div[name="qRow1"] table, div[name="qRow2"] table' ).css({
      'width': '100%'
    });
 
    // Get everything to line up nicely vertically
    $( 'td.questiontext, td.answer p' ).css({
      'text-align': 'center'
    });
 
    // Adjust cell heights so everything lines up nicely horizontally
    $( 'td.answer, td.questiontext' ).css({
      'height':'35px'
    });
 
// Checkbox question styles
$( 'div.multiple-opt ul' ).css({
    'text-align': 'center',
    'font-size': '90%',
    'margin': '0',
});
$( 'div.multiple-opt ul li' ).css({
    'text-align': 'center',
});
 
    // Yes-no question styles
    $( 'div.yes-no ul' ).css({
      'text-align': 'center',
      'font-size': '90%',
      'margin': '0',
      'padding-bottom': '5px'
    });
    $( 'div.yes-no td.answer' ).css({
      'padding-bottom': '0'
    });
 
    // Short-text question styles
    $( 'div.text-short input' ).css({
      'width': '125px',
      'margin-left': '0'
    });
 
    // Numeric question styles
    $( 'div.numeric input' ).css({
      'width': '125px',
      'margin-left': '0'
    });
    $( 'div.numeric p.tip' ).css({
      'display': 'none'
    });
 
    // Get rid of the margins around select boxes  
    $( 'p.question' ).css({'margin':'0'});
 
    // Reduce the space caused by the question help table
    $( 'div[name="qRow1"], div[name="qRow2"]' ).css({
      'margin-bottom': '-8px'
    });  
 
  });
 
</script>
Last edit: 13 years 11 months ago by phpsurvey.
The topic has been locked.
  • phpsurvey
  • phpsurvey's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
13 years 11 months ago #53160 by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
this is what I want to do:




seriously

div.array is not avaible

at docs.limesurvey.org/tiki-index.php?page=...g_questions_with_CSS

and I don't know how I can do it..
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
13 years 11 months ago #53216 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
This should do the trick.

Create a short-text question and an array question with only one answer. Insert the following script in the source of one of them. Replace "11" (line 5) with the ID of the short-text and "22" (line 6) with the ID of the array you want inline.

Note that the styles inserted here only apply to the default template and you my need to adjust the padding in line 40 if any of your array labels wrap.
Code:
<script type="text/javascript" charset="utf-8">
 
    $(document).ready(function() {
 
        var qText = 11;       
        var qArray = 22;
 
        // Fix the width of the survey
        $( 'table.outerframe' ).css({'width': '900px'});
 
        // Wrap the 2 questions ina container div and style it
        $('#question'+qText+', #question'+qArray+'').wrapAll('<div class="inlineWrapper" />');
        $('.inlineWrapper').append('<div style="clear:both" />');
        $('.inlineWrapper').css({
            'width': '75%',
            'margin':'0 auto 10px auto',
            'background-color':'#FFFFFF'
        });
        $('.inlineWrapper *').css({
            'padding': '0',
            'margin':'0'
        });
 
        // Hide the question and the help text
        $('#question'+qText+' td.questiontext, #question'+qArray+' td.questiontext').parent().hide();
        $('#question'+qText+' > table:eq(1), #question'+qArray+' > table:eq(1)').hide();
        $('#question'+qText+' td.survey-question-help, #question'+qArray+' td.survey-question-help').parent().hide();
 
        //Hide the answer cell of the array
        $('#question'+qArray+' table.question thead tr').children(":first").hide();
        $('#question'+qArray+' table.question tbody tr').children(":first").hide();
        $('#question'+qArray+' col').attr('width', '');
 
        // Push all question tables to 100%
        $('#question'+qText+' table, #question'+qArray+' table').css({'width': '100%'});
 
        // Get the 2 questions to sit politely side by side
        $('#question'+qText+', #question'+qArray+'').css({'float':'left'});
        $('#question'+qText+'').css({'padding':'15px 0 5px 25px'});
        $('#question'+qText+'').css({'padding-top':'27px'}); // Adjust here for wrapped array labels
        $('#question'+qArray+'').css({'padding':'5px 0 10px 0'});
        $('#question'+qArray+' table.question td').css({'padding':'4px'});
        $('#question'+qText+' table:first').attr('align', 'left');
        $('#question'+qText+' label').css({
            'display':'inline', 
            'width':'auto', 
            'margin-right':'10px'
        });
 
        // Set the widths of the 2 questions
        $('#question'+qText+'').css({'width': '35%'});
        $('#question'+qArray+'').css({'width': '58%'});
 
    });
 
</script>


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: phpsurvey
The topic has been locked.
  • phpsurvey
  • phpsurvey's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
13 years 11 months ago #53236 by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
thank you tpartner
The topic has been locked.
  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Community Team & Official Partner
  • LimeSurvey Community Team & Official Partner
More
13 years 11 months ago #53270 by Mazi
Replied by Mazi on topic Multiple question types in array modifiy
You're welcome!

If our hints have been helpful and you enjoy limesurvey please consider a donation to the team .
We do all this in our free time and you don't have to pay a penny for this software.

Without your help we can't keep this project alive.

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com
The topic has been locked.
  • phpsurvey
  • phpsurvey's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
13 years 11 months ago - 13 years 11 months ago #53316 by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
When I find a solution for my last problem I write an article about limesurvey with multiple question types in array in two languages, that nobody has the the barriers like me...:)

I have the same problem like: www.limesurvey.org/de/support/hilfe-fore...ernet-explorer#50103

tpartner wrote:

You have a span in your banner element that's not closed properly and the resulting HTML error may be messing up IE.

Code:
<h2><span style='font-size:26px;font-family:"Times New Roman"; color:#003366' >SocPiMu10</h2>


Okay I understand the error, but I don't know how I can fix it????
Last edit: 13 years 11 months ago by phpsurvey.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
13 years 11 months ago #53318 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
This particular error is solved by inserting a </span> before the </h2> tag:
Code:
<h2><span style='font-size:26px;font-family:"Times New Roman"; color:#003366' >SocPiMu10</span></h2>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • phpsurvey
  • phpsurvey's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
13 years 11 months ago #53330 by phpsurvey
Replied by phpsurvey on topic Multiple question types in array modifiy
Sorry, but where should I insert the </span> before the </h2> tag and what means SocPiMu10 ?????

Please tell me the data or field where I can insert the tag.

I tried the Boilerplate question and set it in the tags, but this solved not the problem ???
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
13 years 11 months ago #53352 by tpartner
Replied by tpartner on topic Multiple question types in array modifiy
I'm afraid I don't understand your problem. My previous post is simply a suggestion on how to fix that particular snippet of HTML.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose