Individuelle Anpassungen bei Auswahlfrage mit Kärtchen und Bildern

Question

Hallo Zusammen,

ich habe eine Auswahlfrage mit Kärtchen (Bildern) programmiert und möchte gerne folgende Änderungen vornehmen; es sind einige :-D Bin dankbar für jede Unterstützung, danke!

1. Vorspann zu den Optionen: Ich möchte, dass das "1. Gegenüberstellung" links neben der Frage steht. Gern auch "1. Gegen- über- stellung", quasi in 3 Zeilen. Ich hatte es mit einer Tabelle mit zwei Spalten versucht, Änderung in den Fragebogen-Elementen vorgenommen, aber bisher hat nichts funktioniert.

2. Kärtchen: Die eingesetzten Bilder haben eine Breite von 142 Pixel und eine Höhe von 214 Pixel. Wie passe ich die Größe der Kärtchen an die Größe der Bilder an? Ich möchte den Rahmen individuell einstellen können, wenn es möglich ist.

3. Skalieren: Aktuell habe ich die Antwortoptionen (also die Platzhalter für die Bilder) wie folgt programmiert:

//
center
img src="%Bild1%" width="142" height="214" style="margin-right: 10px" alt="">
</center

Was muss ich zum Code hinzufügen, damit sich die Bilder an jede Bildschirmgröße automatisch anpassen oder wenn man das Fenster kleiner macht sich die Bilder dann automatisch selbst skalieren?

1. Kärtchen - Abstand dazwischen: Wie verringere ich den Abstand zwischen den Kärtchen?

2. Hintergrund: Unter dieser Frage (also dem Screenshot der Auswahlfrage) werde ich eine weitere Auswahlfrage mit Bildern platzieren. Ich möchte, dass die 1. Frage einen anderen Hintergrund hat, als die zweite Frage. Wie programmiere ich das?

Ich freue mich sehr über die Unterstützung, besten Dank!

Answer 1

Bitte stellen Sie sicher, dass Sie in der Auswahlfrage nicht nur die Dartellung "Kärtchen" eingestellt habe, sondern auch (in Ihrem Fall) 7 Spalten und die Anordnung "Zeilenweise".

Binden Sie die Bilder dann bitte ohne extra Anweisungen für die Formatierung und Blockelemente ein, sondern einfach nur:

<img src="%Bild1%" alt="">

Die Bilder können Sie auch in höherer Auflösung hinterlegen. Nachdem sie ohnehin ein wenig skalieren werden, bekommen Sie mit mehr Auflösung bessere Ergebnisse. SoSci Survey kümmert sich dann eigentlich um den Rest und passt die Bilder in die Kärtchen ein.

Comments

Genau, die Anzahl der Spalten und die Anordnung hatte ich bereits festgelegt. Aber den Code habe ich noch mal angepasst, vielen Dank für den Hinweis! Die Gesamtbreite der Kärtchen lässt sich aber nur über Fragebogenlayouts -> Grundeinstellungen -> Basisbreite des Layouts schmälern? Oder gibt es noch eine andere Möglichkeit? Hatte noch versucht bei Fragebogen-Elemente -> Auswahl-Taster und Kärtchen -> Rahmenbreite zu reduzieren, die per default auf 1.6px ausgelegt ist; aber bei Änderung tut sich da nix.

Mein Ziel ist es, links neben den Kärtchen einen Text (siehe oben Frage zu Vorspann zu den Optionen) zu platzieren; dafür müssten die Kärtchen aber in ihrer Gesamtbreite kleiner werden.

Freue mich über eine Nachricht, vielen Dank!

---

> Die Gesamtbreite der Kärtchen lässt sich aber nur über Fragebogenlayouts -> Grundeinstellungen -> Basisbreite des Layouts schmälern?

Sie können das Element auch einfach in ein <DIV>-Element setzen. Platzieren Sie dafür vor der Frage z.B. den HTML-Code

<div style="width: 600px; max-width: 100%">

und unter der Frage dann

</div>

> Mein Ziel ist es, links neben den Kärtchen einen Text (siehe oben Frage zu Vorspann zu den Optionen) zu platzieren

Ach ja ... okay, dann ein wenig anders. Vor das Element kommt

<div style="display: flex">
<div style="flex: 0 0 160px">TEXT</div>
<div>

und hinter das Element

</div>

Die Platzierung des Textes können Sie mit den CSS-Flexbox-Eigenschaften dann noch optimieren: https://css-tricks.com/snippets/css/a-guide-to-flexbox/