Text genau über Auswahlkärtchen präsentieren

Question

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!

Answer 1

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.

Comments

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>

---

> 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.

---

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.

---

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.

---

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>

---

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.

---

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?

---

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.

---

Dann ist mein Problem damit gelöst :)