The LimeSurvey Fund-Raiser 2012 is complete. Thank you for donating a total of 25,000 USD! List of donors »
|
-
erregi
-
-
OFFLINE
-
Fresh Lemon
-
- Beiträge: 5
-
Karma: 0
-
|
please find attacched the survey.
The JS code is inside the question "0.1"
In this example i have only one question before the "table with questions" but i need to make it work in any position of a question group.
Thank You for your help!
|
|
|
-
tpartner
-
-
OFFLINE
-
LimeSurvey Team
-
- Beiträge: 2858
- Dank erhalten: 424
-
Karma: 244
-
|
Adding an parameter for the start question number should do the trick.
So, this: function sideBySide(rows, columns) {Changes to this: function sideBySide(rows, columns, startQuestion) {
And, this: Changes to this: if(rowNum <= rows && i >= startQuestion-1) {
Then, calling the function if you have 2 questions before the "inline" questions (as in my sample survey below), this Changes to this:
The complete script would be: <script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Call the "sideBySide" function with number of rows, columns and the start question number
sideBySide(5, 5, 3);
});
function sideBySide(rows, columns, startQuestion) {
/***********
Display multiple questions side by side
***********/
if ($('div.qRow1').length == 0) {
var rowNum = 0;
var colNum = 1;
var rowList = new Array();
//////// Add question classes for later use ////////
// Loop through all questions and add row and column specific classes
$('div[id^="question"]').each(function(i) {
/* This IF condition only needed if there are questions
preceding or following the "inline" questions*/
if(rowNum <= rows && i >= startQuestion-1) {
$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
if(rowNum == 0 && colNum > 1) {
$(this).addClass('columnLabel');
}
if(rowNum > 0 && colNum == 1) {
$(this).addClass('rowLabel');
}
else if(rowNum > 0 && colNum > 1) {
$(this).addClass('questionCell');
}
if(colNum == columns) {
rowList.push('qRow'+rowNum+'');
rowNum++;
colNum = 1;
}
else {
colNum++;
}
}
else {
$(this).addClass('normalQuestion');
}
});
//////// Survey layout manipulation ////////
// Fix the width of the survey
$('table.outerframe').css({
'width': '900px'
});
// Wrap each "row" in a wrapper div
$(rowList).each(function(i) {
$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
});
// Style the wrapper divs
$('.inlineRow').css({
'width': '850px',
'margin': '0 auto 0 auto',
'clear': 'both'
});
$( '.inlineRow:first' ).css({
'margin-top': '10px'
});
// Get all the questions to sit politely side by side
$( '.inlineQuestion' ).css({
'float': 'left',
'height':'41px',
'overflow':'hidden',
'margin-bottom': '-5px'
});
$( '.inlineQuestion .questionhelp' ).hide();
$( '.inlineQuestion .survey-question-help' ).parent().hide();
// A little space under the last row
$( '.inlineRow:last .inlineQuestion' ).css({
'margin-bottom': '10px'
});
/* Any questions not displayed inline (this is only needed
if there are questions following the "inline" questions)*/
$( '.normalQuestion' ).css({
'clear': 'both'
});
//////// Column manipulation ////////
// Set the column widths - can be set individually if necessary
// Must add up to less than 100%
$( '.qCol1' ).css({
'width': '12%'
});
$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
'width': '22%'
});
//////// 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.questionCell td.questiontext').parent().hide();
// Push the question tables to 100%
$( 'div.inlineRow table' ).css({
'width': '100%'
});
// Get everything to line up nicely vertically
$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
'text-align': 'center'
});
// Adjust cell heights so everything lines up nicely horizontally
$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
'height':'35px',
'overflow':'hidden',
'padding':'0.5em'
});
$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
$( '#inlineWrapper0 td.questiontext' ).css({
'height':'50px'
});
// Yes-no question styles
$( 'div.yes-no ul' ).css({
'text-align': 'center',
'font-size': '90%',
'margin': '0',
'padding-bottom': '5px'
});
$( 'div.yes-no li' ).css({
'padding-right': '1.5em'
});
$( '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' });
}
}
</script>
Here is your sample survey back with the modified code. I have added another question before the "inline" questions so the "inlines" star at question 3.
|
|
Folgende Benutzer bedankten sich: erregi |
-
erregi
-
-
OFFLINE
-
Fresh Lemon
-
- Beiträge: 5
-
Karma: 0
-
|
the script works if you have other questions BEFORE "the grid" but it doesn't work if you have other questions after it.
I made a new example with those elements(see the attachment):
2 questions
Grid with questions
2 questions
Thanks again for your Help!
|
|
|
-
tpartner
-
-
OFFLINE
-
LimeSurvey Team
-
- Beiträge: 2858
- Dank erhalten: 424
-
Karma: 244
-
|
Change this line: if(rowNum <= rows && i >= startQuestion-1) {
To this: if(rowNum <= rows-1 && i >= startQuestion-1) {
|
|
Folgende Benutzer bedankten sich: erregi |
-
barbarian
-
-
OFFLINE
-
Fresh Lemon
-
- Beiträge: 13
-
Karma: 0
-
|
Hello!
I want to place one "short text question" and one "array" question (with four radio buttons) side-by-side, like Tpartner explained. But it doesn´t work for me, means it has no effect. <script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var qText = 18a;
var qArray = 18b;
// Fix the width of the survey
$( 'table.outerframe' ).css({'width': '900px'});
// Wrap the 2 questions in a 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>Maybe someone can help me please.
Using 1.92+
|
|
Letzte Änderung: 1 Jahr 1 Monat her von barbarian.
|
-
Mazi
-
-
OFFLINE
-
LimeSurvey Team
-
- Beiträge: 5116
- Dank erhalten: 260
-
Karma: 240
-
|
Please tell us which template you are using and post a link to a sample survey.
|
Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
|
-
barbarian
-
-
OFFLINE
-
Fresh Lemon
-
- Beiträge: 13
-
Karma: 0
-
|
Hey!
test-survey
test
key:test
It´s the default-Template, language is german
The questions 18 and 19 shall be side-by-side
Thanks for your answer:-)
|
|
|
-
barbarian
-
-
OFFLINE
-
Fresh Lemon
-
- Beiträge: 13
-
Karma: 0
-
|
or, if it´s easier, I could use Dual Array.
But then I need on the left column a Drop Down BUT on the right Radio Buttons.
(as a result I would have two questions in one question type)
|
|
|
-
AlexiaK
-
-
OFFLINE
-
Fresh Lemon
-
- Beiträge: 9
-
Karma: 0
-
|
Hi all,
In my survey I will be needing something similar to what the multiple question types in an array can offer (I will need text, yes/no, then two dropdown lists). And so I decided to try the code that was provided ( docs.limesurvey.org/tiki-index.php?page_...stion_types_in_array), but the result looks like what someone posted previously. And I really don't know what I'm doing that's wrong as I've just copied and pasted the code. I'm using the default template and I have the 1.92+.
Thank you in advance for your help!
|
|
|
-
tpartner
-
-
OFFLINE
-
LimeSurvey Team
-
- Beiträge: 2858
- Dank erhalten: 424
-
Karma: 244
-
|
Can you activate a sample survey?
|
|
|
|
