So jetzt kommt der zweite Teil.
Zunächst generell:
In mehrdimensionalen Matrizen kodiere ich meist die y-Achse mit "Y001", "Y002",..., die x-Achse entsprechend mit "X001". "X002",...
A. Das Layout
Hierbei handelt es sich um eine Matrix(Texte) mit 4 Spalten, den drei Ergebnis-Spalten und der Bewertungsspalte.
Wir haben ja mehrere Baustellen bei dieser Lösung:
1. In eine Matrix(Texte) wird ein Drop-down eingefügt.
2. Die Zellen der Ergebnisse werden auf "readonly" gesetzt und die Zahlen zentriert
3. Es wird ein zusätzlicher Header eingefügt (muss aber nicht sein)
4. Da normalerweise in einer Matrix die Spalten alle gleich breit sind, wird dies geändert
Zu 1. Füge in den Fragetext (im Quellcode-Modus) folgendes javascript ein
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Insert selects
$('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">Bitte, wählen...</option>\
<option value="1">----</option>\
<option value="2">---</option>\
<option value="3">--</option>\
<option value="4">-</option>\
<option value="5">0</option>\
<option value="6">+</option>\
<option value="7">++</option>\
<option value="8">+++</option>\
<option value="9">++++</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>
Du siehst hier
$('.answer-item.answer_cell_X004 die Kodierung mit "X004", der 4. Spalte.
Zu 2. Dazu haben wir dann dieses kleine javascript-Stückchen
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('input[ name="{SGQ}Y001_X001"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y001_X002"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y001_X003"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y002_X001"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y002_X002"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y002_X003"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y003_X001"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y003_X002"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y003_X003"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y004_X001"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y004_X002"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y004_X003"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y005_X001"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y005_X002"]').prop('readonly', true).css('text-align', 'center');
$('input[ name="{SGQ}Y005_X003"]').prop('readonly', true).css('text-align', 'center');
});
</script>
Beachte: der Platzhalter {SGQ} wird automatisch in die Werte "StudienID", "GruppenID" und FragenID" geändert.
Eventuell musst Du die Zeilen- und Spaltencodes anpassen, erweitern.
Zu 3. Auch wieder - wie gehabt - ein kleines javascript-Stückchen
[code type=javascript[<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Insert the column categories
$('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
<td colspan="1" style="border-top:0 !important;"></td>\
<th class="answer-text inserted-header" colspan="3">Testergebnisse</th>\
<th class="answer-text inserted-header" colspan="1">Bewertung</th>\
</tr>');
});
</script>/code]
Ich habe gerade im Bild gesehen, dass dort jetzt zweimal "Bewertung" steht. Kann man ja ändern.
Zu 4. Hier haben wir erneut ein bisschen javascript, zusammen mit ein paar Zeilen css.
Hier das javascript
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>
Und jetzt das css
Code:
<style type="text/css">.custom-array table.subquestion-list col {
width: auto !important;
}
.custom-array table.subquestion-list thead .column-0 { width: 30% !important; }
.custom-array table.subquestion-list thead .column-1 { width: 30% !important; }
.custom-array table.subquestion-list thead .column-2 { width: 40% !important; }
</style>
Beachte: Durch den zugefügten Header gibt es nur drei Spalten. Lässt man diesen weg, gibt es wieder 5 Spalten und es muss hier angepasst werden
B. Einfügen der Ergebniswerte
Da wir hier eine normale Matrix(Texte) benutzen, bei welcher ja normalerweise die Zellen durch den Teilnehmer gefüllt werden, müssen wir nun unsere vordefinierten Werte hineinschieben.
Nehmen wir an, die Matrix hat den Code Q2, die y-Achse die Codes "Y001", "Y002",..., die x-Achse die Codes "X001", "X002"
Wir fügen vor diese Matrix eine Frage vom Typ Gleichung ein, in welcher wir diese Zuordnungen vornehmen:
Also füllen wir die erste Zeile; im Gegensatz zur gewohnten Benutzung von "==" hier nur ein einfaches "=".
Das doppelte "==" testet auf Gleichheit, währen das einfache "=" den Wert zuweist (also etwas ganz anderes)
{Q2_Y001_X001=70}
{Q2_Y001_X002=74}
{Q2_Y001_X003=78}
2.Zeile
{Q2_Y002_X001=82}
{Q2_Y002_X002=78}
{Q2_Y003_X003=74}
usw.
Dies Frage vo Typ Gleichung zeigen wir natürlich nicht an.
Das ist alles.
Wie ich schon schrieb, ist mein Beispiel etwas zu ausführlich, das es für mich einfacher war.
Wenn Du Dich für eine Lösung entschieden hast, kommt dann der abgespeckte Teil.
Viel Erfolg
Joffm
