So, Christine, dann wollen wir uns einmal den Medikamenten widmen.
Wir haben ja drei Teile zu bearbeiten.
1. Dynamische Anzeige mittels Button
2. Anzeige der Folgefragen
3. Dropdown in den Folgefragen
1. Buttons
Zunächst ist die Frage eine normale Frage vom Typ "mehrfacher kurzer Text", zum Beispiel mit den Teilfragentexten "1. Medikament", "2. Medikament",...
Ich nenne sie Q1.
Du fügst nur folgendes script in den Quellcode der Frage ein.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
// A function to add or remove rows of a multiple-short-text question
function varLengthArray(qID) {
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Medikament zufügen';
var removeContent = '[-] Medikament löschen';
// Insert the buttons
$('#question'+qID+' .subquestion-list').append('<div id="addButton'+qID+'" class="control-button btn btn-primary">'+addContent+'</div><div id="removeButton'+qID+'" class="control-button btn btn-primary">'+removeContent+'</div>');
// Style the elements - you can modify here if you wish
$('#question'+qID+' .control-button').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
function addRow(qID) {
$('#question'+qID+' .answer-item:hidden:first').show();
$('div#removeButton'+qID).show();
if ($('#question'+qID+' .answer-item:visible').length == $('#question'+qID+' .answer-item').length) {
$('div#addButton'+qID).hide();
}
}
// Function to remove a row and clear the input value
function removeRow(qID) {
$('#question'+qID+' .answer-item:visible:last').hide();
$('#question'+qID+' .answer-item:hidden input[type="text"]').each(function(i) {
$(this).val('').trigger('keyup');
});
$( 'div#addButton'+qID ).show();
if ($('#question'+qID+' .answer-item:visible').length == 1) {
$('div#removeButton'+qID).hide();
}
}
// Just some initialization stuff
// Initially hide all except first row or any rows with populated inputs
$('#question'+qID+' .answer-item input[type="text"]:not(:first)').each(function(i) {
if($.trim($(this).val()) == '') {
$(this).closest('.answer-item').hide();
}
if ($('#question'+qID+' .answer-item:visible').length > 1) {
// $('div#removeButton'+qID).show();
}
});
}
// Call the function with a question ID
varLengthArray({QID});
});
</script>
Hier kannst Du den Text der Buttons anpassen
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Medikament zufügen';
var removeContent = '[-] Medikament löschen';
Hier kannst Du die Farbe der Button ändern
// Insert the buttons
$('#question'+qID+' .subquestion-list').append('<div id="addButton'+qID+'" class="control-button btn btn-primary">'+addContent+'</div><div id="removeButton'+qID+'" class="control-button btn btn-primary">'+removeContent+'</div>');
Wie Du siehst, haben beide die Klasse ".btn-primary". Dies bezieht sich auf die benutzte Bibliothek (bootstrap).
Und damit haben diese Buttons das gleiche Verhalten wie der "Weiter"-Button, da dieser dieselbe Klasse besitzt.
Für Buttons gibt es verschiedene Klassen:
.btn-default (
.btn-primary
.btn-success
.btn-înfo
.btn-warning
.btn-danger
Sehen standardmäßig so aus.
Daher kannst Du zum Beispiel den "+"-Button grün machen, indem Du dort "btn-primary in "btn-success" änderst, den "-"-Button rot mit "btn-danger"
Wie Du möchtest.
Hier kann man das Aussehen der Buttons auch noch ändern, würde ich aber nicht (außer es sieht wirklich nicht gut aus in Eurem Uni-theme).
// Style the elements - you can modify here if you wish
$('#question'+qID+' .control-button').css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
Das wäre schon alles.
2. Anzeige der Folgefragen
a. Bisher hast Du die Folgefragen eingeblendet mit der Bedingung "Ist die Anzahl der angegebenen Medikamente größer als x?"
Zunächst einmal hast Du diese Anzahl noch nicht.
Ich würde sie daher berechnen, damit später im Datensatz eine quantifizierte Größe "Anzahl" steht.
Dazu legst Du eine Frage vom Typ "Gleichung" an. Soll sie meinetwegen "anzMed" heißen.
In den Fragetext gibst Du ein
{count(that.Q1)}
Und damit wird in der Variablen "anzMed" die Anzahl der eingegebenen Medikamente gespeichert.
Nun hast Du zwei Möglichkeiten, die Folgefragen einzublenden.
Entweder du benutzt diesen errechneten Wert, dann wäre es - wie schon gehabt
anzMed>0
anzMed>1
anzMed>2
...
b. oder Du sagst "Okay, die Folgefrage für Medikament x muss angezeigt werden, wenn das Feld in Q1 ausgefüllt war, nicht leer war.
Dazu dient die Funktion "is_empty()". Ausrufezeichen ist das Negationszeigen. Steht alles im Handbuch unter "Operatoren"
Dann wären die Relevanzgleichungen entsprechend so:
!is_empty(Q1_SQ001) : wenn die Teilfrage SQ001 der Frage Q1 nicht leer ist.
!is_empty(Q1_SQ002)
!is_empty(Q1_SQ003)
...
3. Drop-Down in den Folgefragen
Dazu gibt es dieses script
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
var qID = {QID};
var inputNum = 4;
// Define the select element (dropdown)
var prov1 = '<select id="prov1" class="form-control">\
<option value="">--</option>\
<option value="1">Option 1</option>\
<option value="2">Option 2</option>\
<option value="3">Option 3</option>\
<option value="4">Option 4</option>\
<option value="5">Option 5</option>\
</select>';
// Hide the text input
$('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').hide();
// Insert the select elements
if($('#question'+qID+' .question-item:eq('+(inputNum-1)+') select').length == 0) {
$('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov1);
}
// Initially select an option if the question has already been answered
$('#question'+qID+' select').each(function(i) {
if($.trim($(this).next('input[type="text"]').val()) != '') {
$(this).val($.trim($(this).next('input[type="text"]').val()));
}
});
// Listener on the dropdowns - insert selected values into hidden text input
$('#question'+qID+' select').change(function() {
var thisInput = $(this).next('input[type="text"]');
$(thisInput).val($(this).val());
checkconditions($(thisInput).attr('value'), $(thisInput).attr('name'), 'text');
});
// Some styles
$('#question'+qID+' select').css({
'margin':'0.3em 0 0 0',
'width':'30%'
});
});
$(document).on('ready pjax:complete',function() {
var qID = {QID};
var inputNum = 5;
// Define the select element (dropdown)
var prov2 = '<select id="prov2" class="form-control">\
<option value="">--</option>\
<option value="1">Eine andere Option 1</option>\
<option value="2">Eine andere Option 2</option>\
<option value="3">Eine andere Option 3</option>\
</select>';
// Hide the text input
$('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').hide();
// Insert the select elements
if($('#question'+qID+' .question-item:eq('+(inputNum-1)+') select').length == 0) {
$('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov2);
}
// Initially select an option if the question has already been answered
$('#question'+qID+' select').each(function(i) {
if($.trim($(this).next('input[type="text"]').val()) != '') {
$(this).val($.trim($(this).next('input[type="text"]').val()));
}
});
// Listener on the dropdowns - insert selected values into hidden text input
$('#question'+qID+' select').change(function() {
var thisInput = $(this).next('input[type="text"]');
$(thisInput).val($(this).val());
checkconditions($(thisInput).attr('value'), $(thisInput).attr('name'), 'text');
});
// Some styles
$('#question'+qID+' select').css({
'margin':'0.3em 0 0 0',
'width':'30%'
});
});
</script>
Eigentlich ist es dasselbe script zweimal hintereinander;
zunächst für die vierte Teilfrage. (Dies musst Du natürlich anpassen, falls Du das Dropdown in einer anderen Teilfrage einsetzt)
var inputNum = 4;
Hier musst Du dann Deine Optionen eintragen.
// Define the select element (dropdown)
var prov1 = '<select id="prov1" class="form-control">\
<option value="">--</option>\
<option value="1">Option 1</option>\
<option value="2">Option 2</option>\
<option value="3">Option 3</option>\
<option value="4">Option 4</option>\
<option value="5">Option 5</option>\
</select>';
Hier wird noch etwas "Schönheit" gemacht
// Some styles
$('#question'+qID+' select').css({
'margin':'0.3em 0 0 0',
'width':'30%'
});
Wichtig die "width". Ich habe sie auf 30% gesetzt. Solltest Du anpassen, damit das Dropdown nicht riesig breit mit ganz kurzen Antwortmöglichkeiten ist, und auch nicht umgekehrt.
Und dann kommt dasselbe noch einmal für die 5. Teilfrage
var inputNum = 5;
// Define the select element (dropdown)
var prov2 = '<select id="prov2" class="form-control">\
<option value="">--</option>\
<option value="1">Eine andere Option 1</option>\
<option value="2">Eine andere Option 2</option>\
<option value="3">Eine andere Option 3</option>\
</select>';
Gespeichert werden übrigens die "values". Aber deswegen machen wir das Ganze ja auch.
Insgesamt bekommen wir dann dies:
Das war alles.
Jetzt noch etwas Grundsätzliches aus eigener Erfahrung.
Hast Du schon einmal überlegt, wie die Daten am Ende aussehen?
Nehmen wir einmal 4 Teilnehmer mit ihren Medikamente-Nennungen
1. "Aspirin", "Ibuprofen", "Makumar", "ACC"
2. "Paracethamol", "ACC-akut", "Ibuprofen"
3. "Makumar", "ASS", Blopress", "Ibuprofen"
4. "Blutdrucksenker", "Hustenlöser"
Hier taucht "Ibuprofen" einmal in der zweiten, einmal in der dritten und einmal in der vierften Spalte auf; die Folgefragen zu diesem Medikament verstreuen sich genauso im datensatz.
Dann gibt darüberhinaus verschiedenen Benennungen und eben diese Oberbegriffe.
Es ist wirklich eine Pest, dies alles zu kodieren und schlussendlich im Datensatz zu sortieren, damit in jeder Tabellenspalte die Daten zu einem Medikament stehen. (gut, das Letzte kann ein EXCEL-Makro machen)
Ich hatte diesen Spaß einmal in einer Medizinstudie mit "nur" 3 möglichen freien Nennungen zusätzlich zu den Precodes.
Bedenke dies, und überlege, ob man im Vorfeld hier etwas kanalisieren kann (z.B. durch Precodes).
Und noch etwas Empfehlenswertes:
LimeSurvey verfügt leider nicht über eine sinnvolle Trennung von logischem und visuellem Layout.
Soll heißen, Du musst entscheiden, ob Du "Frage für Frage", "Gruppe für Gruppe" oder "Alles auf einer Seite" darstellst.
Und ein Problem taucht auf, wenn Du Fragenpaare in unterschiedlicher (zufälliger) Reihenfolge anzeigen willst (jedes Paar aber immer zusammenbleiben soll).
Umgekehrt gibt es javascript-workarounds, die eine zweite Frage in die erste hineinziehen (als berüchtigtes Beispiel: "Sonstige" am Ende einer Itembatterie). Diese müssen dann beide in einer Gruppe und gleichzeitig auf dem Bildschirm sein, obwohl man "Frage für Frage" darstellen will.
Daher ist unsere Empfehlung.
Man wählt "Gruppe für Gruppe", erstellt aber in jeder Gruppe nur eine Frage.
Dann ist der visuelle Eindruck zunächst "Frage für Frage", man hat aber trotzdem die Möglichkeit, einmal zwei Fragen auf einer Seite anzuzeigen und auch die Möglichkeint gewisse workarounds überhaupt anzuwenden.
So, das ist jetzt alles für heute.
Joffm
Topic Author
Das hat mich ein gutes Stück weitergebracht.
