0 votes
in SoSci Survey (dt.) by s079684 (1.0k points)
edited by SoSci Survey

Ich präsentiere zwei Texte und möchte wissen, welchen von beiden Personen präferieren.
Idealerweise sollen beide Texte nebeneinander präsentiert werden und darunter gibt es dann zwei Auswahlkärtchen "Text A" und "Text B".
Die Texte setze ich mittels <table> in HTML nebeneinander. Gibt es eine Möglichkeit, die Auswahlkärtchen unter den jeweiligen Texten zu zentrieren und fixieren?
Ich habe eine Lösung mit einem eigenen Entwurf in HTML und Radio Buttons, aber da ist die Kompatibilität ja doch eingeschränkt und ich würde eine Sosci-eigene Lösung bevorzugen.
Vielen Dank!

1 Answer

0 votes
by SoSci Survey (328k points)
selected by s079684
 
Best answer

Am schnellsten kommen Sie evtl. mit einer Frage vom Typ "Skala (Zwischenwerte beschriftet)" zum Ziel, bei welcher Sie die Darstellungsvariante "Kärtchen" wählen und einstellen, dass die Items (davon hätten Sie nur eines) in separaten Zeilen zentriert dargestellt werden sollen.

Alterantiv versuchen Sie es bitte einmal mit %input:AB01_01% direkt im HTML-Code, wobei Sie das AB01 natürlich durch die Kennung Ihrer Auswahlfrage ersetzen.

by s079684 (1.0k points)
Die Lösung über Skala führt zu keinem zufriedenstellenden Ergebnis.

Ich habe die Variante mit input versucht, das klappt jedoch noch nicht mit der Kärtchen-Auswahl. Es erscheint lediglich ein Radio-Button links oberhalb der Tabelle.

<table style="border-collapse:collapse">
    <tr>
        <td style="padding-right:2em; padding-bottom:1em; border-bottom:2px solid lightgrey">
            Text A
        </td>
        <td style="padding-left:2em; padding-bottom:1em; border-left:2px solid lightgrey; border-bottom:2px solid lightgrey">
Text B
        </td>
    </tr>
    <tr>
%input:FC02_01%
    </tr>
</table>
by SoSci Survey (328k points)
> Die Lösung über Skala führt zu keinem zufriedenstellenden Ergebnis.

Sind die Optionen zu nahe beisammen?

Im HTML-Code fehlt ein <td></td> um das %input% herum. Aber das Kärtchen wird das nicht herbeizaubern. Dafür muss ich nochmal in den Programmcode gehen. Geben Sie mir ein paar Tage... alternativ müssten Sie, wenn es eilt, die Knöpfe per JavaScript-Code an die gewünschte Stelle im HTML-Code verschieben. Mittels document.getElementById() und appendChild() ist das recht einfach möglich. Vorausgesetzt, Sie geben Ihren Tabellen-Zellen HTML-IDs.
by s079684 (1.0k points)
Bei der Skala-Lösung waren die Optionen zu nah beieinander, ja. Außerdem haben beide Optionen beim Mouseover geleuchtet, nicht nur jeweils eine.

<td> hat den Radio Button nur an die richtige Stelle gesetzt, aber nicht die Kärtchen gebracht. Ich würde mich sehr über eine solche Lösung freuen. Es hat für mich noch etwas Zeit und mit JavaScript wird es mir zu frickelig.
by s079684 (1.0k points)
Mir ist jedoch auch noch nicht ganz klar, wie durch das Einfügen der Kärtchen eine Zentrierung der Kärtchen pro Spalte passieren soll.
by SoSci Survey (328k points)
In Ihrer Tabelle haben Sie zwei Spalten, es würde dann also so aussehen:

    <tr>
      <td style="text-align: center">%input:FC02_01%</td>
      <td style="text-align: center">%input:FC02_02%</td>
    </tr>
by s079684 (1.0k points)
Verstehe! Das führt immerhin zu zwei Radio Buttons :) Wie gesagt, ich würde mich sehr freuen, wenn Sie hier eine Lösung für die Darstellung der Kärtchen finden.
by s079684 (1.0k points)
Ich habe rausgefunden, dass, wenn ich die Kärtchenauswahl einfach unter meine zweispaltige HTML-Tabelle positioniere, die Spaltenweite automatisch der der Tabelle entspricht (habe den Abstand zwischen den Kärtchen auf 0 gesetzt). Das löst mein Problem wunderbar. Werde prüfen, ob das auch auf anderen Browsern und Geräten funktioniert. Werden die Kärtchen intern als Tabelle umgesetzt, vielleicht?
by SoSci Survey (328k points)
Die Kärtchen werden mittels CSS Flexbox implementiert, was deutlich moderner ist als Tabellen und gerade auf kleinen Displays viel mehr Spielraum lässt - z.B. dass die Kärtchen in unterschiedliche Zeilen umbrechen, wenn der Platz nicht ausreicht. Auf ausreichend großen Displays verhält es sich wie eine Tabelle.
by s079684 (1.0k points)
Dann ist mein Problem damit gelöst :)

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...