- Posts: 16
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Zusätzliche Spalten in Matrizen Kapitel 4
- ToniLeuphana
- Topic Author
- Offline
- New Member
Less
More
7 months 2 weeks ago #250104
by ToniLeuphana
Replied by ToniLeuphana on topic Zusätzliche Spalten in Matrizen Kapitel 4
$('', qArray).css('width','5%')
-> hiermit habe ich es probiert (leider nicht reinkopiert in der letzten Nachricht)
-> hiermit habe ich es probiert (leider nicht reinkopiert in der letzten Nachricht)
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12940
- Thank you received: 3979
7 months 2 weeks ago #250113
by Joffm
Hier wird die Breite der eingefügten Textbox eingestellt (die eingefügte Spalte)
Die Breite des Labels stellst Du doch ganz normal in den Einstellungen der Frage ein "Label-Spaltenbreite, oder so"
Allerdings: wenn Du dieses script zur Variablen Breite der Spalten benutzt, ist dies dann Spalte 0 und überschreibt diese Einstellung.
Brauchst Du aber nicht; die Textspalte ist festgelegt, die Labelbreite auch, und die Skala verteilt sich gleichmäßig über den Rest.
Und wenn Dir javascript zu kompliziert scheint, dann lade einfach die Beispiel-Datei aus dem Tutorial ind importiere sie.
Dann siehst Du ja wie es geht und wie es aussieht.
Dann kann man sehr leicht Anpassungen vornehmen.
Das ist nämlich auch das Einzige, was ich kann; die meisten dieser scripte stammen ja ursprünglich aus der Feder von Tony Partner.
Bis dann
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Zusätzliche Spalten in Matrizen Kapitel 4
Natürlich nicht. Wenn Du gar keine Klasse anspricht, wird sich nicht viel tun.$('.inserted-column-label', qArray).css('width','25%');
$('', qArray).css('width','5%')
Hat aber leider nicht funktioniert.
Hier wird die Breite der eingefügten Textbox eingestellt (die eingefügte Spalte)
Die Breite des Labels stellst Du doch ganz normal in den Einstellungen der Frage ein "Label-Spaltenbreite, oder so"
Allerdings: wenn Du dieses script zur Variablen Breite der Spalten benutzt, ist dies dann Spalte 0 und überschreibt diese Einstellung.
Brauchst Du aber nicht; die Textspalte ist festgelegt, die Labelbreite auch, und die Skala verteilt sich gleichmäßig über den Rest.
Und wenn Dir javascript zu kompliziert scheint, dann lade einfach die Beispiel-Datei aus dem Tutorial ind importiere sie.
Dann siehst Du ja wie es geht und wie es aussieht.
Dann kann man sehr leicht Anpassungen vornehmen.
Das ist nämlich auch das Einzige, was ich kann; die meisten dieser scripte stammen ja ursprünglich aus der Feder von Tony Partner.
Bis dann
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- ToniLeuphana
- Topic Author
- Offline
- New Member
Less
More
- Posts: 16
- Thank you received: 0
7 months 2 weeks ago #250229
by ToniLeuphana
Replied by ToniLeuphana on topic Zusätzliche Spalten in Matrizen Kapitel 4
ah ok, das mit der Spaltenbreite ist ja wirklich easy.
wie füge ich denn den Quellcode für die dynamische Version in den bisherigen Quellcode ein (einfach dazu reinkopieren hat nicht geklappt haha).
Q6<script>
$(document).ready(function() {
// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {
if ($('#question'+qID+'').length > 0) {
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Zeile zufügen';
var removeContent = '[-] Zeile löschen';
// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
el1.setAttribute('class','btn btn-success');
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
el2.setAttribute('class','btn btn-danger');
document.body.appendChild(el2);
// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );
// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
$( 'div#removeButton'+qID ).css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();
// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});
// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}
// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}
// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';
// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();
$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}
// Call the function with a question ID
varLengthArray({QID});
});
</script>
wie füge ich denn den Quellcode für die dynamische Version in den bisherigen Quellcode ein (einfach dazu reinkopieren hat nicht geklappt haha).
Q6<script>
$(document).ready(function() {
// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {
if ($('#question'+qID+'').length > 0) {
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Zeile zufügen';
var removeContent = '[-] Zeile löschen';
// Create the Add and Remove elements & insert them
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
el1.setAttribute('class','btn btn-success');
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
el2.setAttribute('class','btn btn-danger');
document.body.appendChild(el2);
// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );
// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
$( 'div#removeButton'+qID ).css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();
// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});
// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}
// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}
// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';
// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();
$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}
// Call the function with a question ID
varLengthArray({QID});
});
</script>
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12940
- Thank you received: 3979
7 months 2 weeks ago #250233
by Joffm
Und "hat nicht geklappt" ist wenig aussagekräftig.
Ich jedenfalls sehe überhaupt keine Problem.
Hier einmal schnell drei scripte aus dem Tutorial hintereinander eingefügt. (1.1.2., 2. und 6.)
Und Du solltest Dir auch angewöhnen, den Button zu benutzen, um Code formatiert einzufügen
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Zusätzliche Spalten in Matrizen Kapitel 4
Natürlich klappt das.(einfach dazu reinkopieren hat nicht geklappt haha).
Und "hat nicht geklappt" ist wenig aussagekräftig.
Ich jedenfalls sehe überhaupt keine Problem.
Hier einmal schnell drei scripte aus dem Tutorial hintereinander eingefügt. (1.1.2., 2. und 6.)
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ var thisQuestion = $('#question{QID}'); // Insert selects $('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">...</option>\ <optgroup label="Altona">\ <option value="1">Altona-Altstadt</option>\ <option value="2">Altona-Nord</option>\ <option value="3">Bahrenfeld</option>\ <option value="4">Blankenese</option>\ </optgroup>\ <optgroup label="Bergedorf">\ <option value="5">Allermöhe</option>\ <option value="6">Altengamme</option>\ <option value="7">Billwerder</option>\ </optgroup>\ </select>'); $('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select name="select1" class="inserted-select form-control list-question-select">\ <option value="">...</option>\ <option value="1">Fußball</option>\ <option value="2">Handball</option>\ <option value="3">Karate</option>\ <option value="4">Leichtathletik</option>\ <option value="5">Schwimmen</option>\ <option value="6">Volleyball</option>\ </select>'); $('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">...</option>\ <option value="1">U8 (2014 und jünger)</option>\ <option value="2">U10 (2012-2013)</option>\ <option value="3">U12 (2010-2011)</option>\ <option value="4">U14 (2008-2009)</option>\ <option value="5">U16 (2006-2007)</option>\ <option value="6" selected>U18 (2004-2005)</option>\ </select>'); // Listeners $('.inserted-select', thisQuestion).on('change', function(i) { if($(this).val() != '') { $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).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> <script> $(document).ready(function() { // A function to add or remove rows of an Array (Multi Flexible)(Text) question function varLengthArray(qID) { if ($('#question'+qID+'').length > 0) { // The HTML content of the Add/Remove elements - modify as you wish var addContent = '[+] Zeile zufügen'; var removeContent = '[-] Zeile löschen'; // Create the Add and Remove elements & insert them var el1 = document.createElement('div'); el1.setAttribute('id','addButton'+qID); el1.setAttribute('class','btn btn-success'); document.body.appendChild(el1); var el2 = document.createElement('div'); el2.setAttribute('id','removeButton'+qID); el2.setAttribute('class','btn btn-danger'); document.body.appendChild(el2); // Move them to after the array $( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent()); $( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent()); // Insert their HTML $( 'div#addButton'+qID ).html( addContent ); $( 'div#removeButton'+qID ).html( removeContent ); // Style the elements - you can modify here if you wish $( 'div#addButton'+qID ).css({ 'margin':'10px 0 10px 10px', 'padding':'1px', 'text-align':'center', 'width':'auto', 'cursor':'pointer', 'float':'left' }); $( 'div#removeButton'+qID ).css({ 'margin':'10px 0 10px 10px', 'padding':'1px', 'text-align':'center', 'width':'auto', 'cursor':'pointer', 'float':'left' }); // Initially hide the Remove element $( 'div#removeButton'+qID ).hide(); // Call the functions below when clicked $( 'div#addButton'+qID ).click(function (event) { addRow(qID); }); $( 'div#removeButton'+qID ).click(function (event) { removeRow(qID); }); // Function to add a row, also shows the Remove element and hides the //Add element if all rows are shown function addRow(qID) { var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list'; var rowCount = $( arrayRow ).size() - 1; $( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show(); $( 'div#removeButton'+qID ).show(); if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) { $( 'div#addButton'+qID ).hide(); } } // Function to remove a row, also clears the contents of the removed row, // shows the Add element if the last row is hidden and hides the Remove // element if only the first row is shown function removeRow(qID) { var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list'; var rowCount = $( arrayRow ).size() - 1; $( arrayRow + '[name="visible"]:last input[type="text"]' ).val(''); $( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide(); $( 'div#addButton'+qID ).show(); if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) { $( 'div#removeButton'+qID ).hide(); } } // Just some initialization stuff var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list'; var rowCount = ''; // Initially hide all except first row or any rows with populated inputs $( arrayRow ).each(function(i) { if ( i > 0 ) { // We also need to give the hidden rows a name cause IE doesn't // recognize jQuery :visible selector consistently $( this ).attr('name', 'hidden').hide(); $('input[type=text]', this).each(function(i) { if ($(this).attr('value') != '') { $(this).parents('tbody:eq(0)').attr('name', 'visible').show(); $( 'div#removeButton'+qID ).show(); } }); rowCount = i; } }); } } // Call the function with a question ID varLengthArray({QID}); }); </script> <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> <style type="text/css">.custom-array table.subquestion-list col { width: auto !important; } .custom-array table.subquestion-list thead .column-0 { width: 5%; } .custom-array table.subquestion-list thead .column-1 { width: 20%; } .custom-array table.subquestion-list thead .column-2 { width: 15%; } .custom-array table.subquestion-list thead .column-3 { width: 10%; } .custom-array table.subquestion-list thead .column-4 { width: 10%; } .custom-array table.subquestion-list thead .column-5 { width: 40%; } </style>
Und Du solltest Dir auch angewöhnen, den Button zu benutzen, um Code formatiert einzufügen
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- ToniLeuphana
- Topic Author
- Offline
- New Member
Less
More
- Posts: 16
- Thank you received: 0
7 months 2 weeks ago #250235
by ToniLeuphana
Replied by ToniLeuphana on topic Zusätzliche Spalten in Matrizen Kapitel 4
Moin,
ja sorry war ein wenig ungenau. Die Fragengruppe sieht jetzt bei mir so aus:
Die Funktion ist da, aber sie wird nicht ausgeführt
ja sorry war ein wenig ungenau. Die Fragengruppe sieht jetzt bei mir so aus:
Die Funktion ist da, aber sie wird nicht ausgeführt
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12940
- Thank you received: 3979
7 months 2 weeks ago - 7 months 2 weeks ago #250236
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Zusätzliche Spalten in Matrizen Kapitel 4
Ja, sorry,
ich habe in der Zwischenzeit gesehen, dass sich diese beiden scripte nicht so ganz vertragen.
Aber dies ist ja kein Beinbruch, da sich ja diese Lösung anbietet.
Normale Matrix(Texte) mit eingefügtem Drop-Down
ich habe in der Zwischenzeit gesehen, dass sich diese beiden scripte nicht so ganz vertragen.
Aber dies ist ja kein Beinbruch, da sich ja diese Lösung anbietet.
Normale Matrix(Texte) mit eingefügtem Drop-Down
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 7 months 2 weeks ago by Joffm.
Please Log in to join the conversation.
Moderators: Joffm