Schieberegler mit mehr als 3 Bildern bzw. SAM Skala mit 21 Punkten

Question

Hallo zusammen,

es gibt eine 21-Punkte SAM-Version, die ich in SoSci Survey umsetzen will. Diese bietet statt 9 Auswahloptionen 21 Auswahloptionen an.

Nun habe ich probiert die SAM-Vorlage in SoSci-Survey (Fragentyp: Horizontale Auswahl) zu modifizieren, indem ich dort 21 statt nur 9 Textfelder anlege. Dann hatte ich zunächst das Problem, dass die Bilder sehr klein wurden und kaum noch erkennbar waren. Daraufhin habe ich die Bilder über den Code <div style="width: 50px;"><img src="sosci://sam-valence-P1" alt="äußerst negativ" class="option"> </div> vergrößert und in die leeren Textfelder dazwischen weiße Kästchen als Bilder in gleicher Größe wie die SAM-Bilder eingefügt, sodass der Abstand zwischen den Skalenpunkten gleich bleibt. Hier habe ich nun aber das Problem, dass die gesamte horizontale 21-Punkte Skala sehr breit ist und man quasi über den Scrollbalken nach rechts gehen muss, um am PC die gesamte Skala auf einen Blick sehen zu können, was ich sehr schlecht finde. Gibt es hier eine Möglichkeit die Darstellung auf eine Seite zu bringen?

Alternativ hatte ich überlegt einen Schieberegler zu verwenden und hier in 1er Schritten angelegte Auswahlmöglichkeiten von 1-21 anzubieten. Allerdings habe ich gesehen, dass man beim Schieberegler nur 3 Bilder (links, mittig, rechts) anlegen kann - gibt es eine Möglichkeit auch noch zwei weitere Bilder - ein Bild zwischen links und mittig und ein Bild zwischen mittig und rechts - also in Summe 5 Bilder in einen Schieberegler zu intergrieren?

Vielleicht gibt es auch einen anderen Fragetyp, der sich hierfür besser eignet. Vielleicht die Bildskala?

Über Tipps würde ich mich sehr freuen!!

Vielen Dank vorab und viele Grüße :)

Answer 1

Nun, die zentrale Frage ist, ob die 21 Bilder nebeneinader auf den Bildschirm passen oder nicht. Beachten Sie dabei, dass Bildschirme unterschiedlich groß bzw. klein sind. Auf einem Tablet oder auf einem kleinen Laptop ist nicht besonders viel Platz.

Ob Sie die horizontale Auswahl oder einen anderen Fragetyp verwenden, ist dann gar nicht so wichtig. Sie müssten aber 2 Dinge anpassen.

1) Evtl. möchten Sie im Fragebogen-Layout eine größere Breite erlauben

2) Mit ein wenig CSS-Code müssten Sie dafür sorgen, dass die horizontale Auswahl wenig oder keinen Abstand zwischen den Optionen lässt.

Erstellen und posten Sie gerne einen Pretest-Link direkt zu der Seite mit der Frage. Dann helfe ich mit dem passenden CSS-Code aus.

Allerdings habe ich gesehen, dass man beim Schieberegler nur 3 Bilder (links, mittig, rechts) anlegen kann

Tja, bis vorgestern waren es sogar nur 2 :) Im Prinzip könnten Sie eine breite Grafik mit allen 21 Bildern erstellen und diese als Skalengrafik für einen Schieberegler verwenden. Aber ob das wirklich eine intuitive Darstellung ist?

Comments

Guten Morgen, ich habe den Code nun folgendermaßen angepasst:

1. PHP-Feld mit folgendem Code:

pageCSS('
  #SA22_qst,
  #SA23_qst,
  #SA24_qst {
        width: 17vh;
        width: calc(20vh - 15px);
  }

 .responsive {
        display: block;
    }

    @media (min-width: 720px) {
        .responsive {
            display: flex;
            flex-wrap: wrap;
            gap: 0 50px;
        }
    }

');

2. PHP-Feld mit folgendem Code:

html('<div class="responsive">');

html('<div style="width: 200px">');
question('SA22');
html('</div>');

html('<div style="width: 200px">');
question('SA23');
html('</div>');

html('<div style="width: 200px">');
question('SA24');
html('</div>');

html('</div>');


Ist der Code so richtig angepasst? Also bzgl. des Packens von  .responsive u.s.w. mit ins pageCSS()?

Das 1. PHP-Feld habe ich am Seitenanfang stehen, das 2. PHP-Feld dort, wo dann auch der Schieberegler stehen soll. Der Code ist auch auf der 1. Fragebogenseite des Pretest-Links implementiert - allerdings ohne die Textfelder, die im richtigen Fragebogen zwischen dem 1. und 2. PHP-Feld stehen:
https://www.soscisurvey.de/sam_methode/?act=XYS4xwg50k9Uvml3EpWHYftD

Ich habe nun die Grenze auf 720px gesetzt, weil sie ausreicht, um die drei jeweils 200px breiten Fragen-Container mit zweimal 50px Abstand nebeneinander darzustellen - passt das besser?

Vielen Dank und Grüße

---

Sieht auf den ersten Blick schon ganz gut aus.

Im Moment ist es noch so, dass die Regler bei einer Breite <700 Pixel einzeln nach unten springen - das haben Sie mittels flex-wrap:wrap so eingestellt, davon würde ich abraten:

flex-wrap: nowrap;

Und die Breiten sollten Sie m.E. etwas dynamischer gestalten:

html('<div style="width: 200px">');

wird dann zu

html('<div style="flex: 1 1 200px">');

> Ich habe nun die Grenze auf 720px gesetzt

Im Prinzip richtig, aber Sie haben dabei noch den Rand links und rechts des Elements vergessen. Das sind nochmal jeweils 30 Pixel. Daher wären 780 Pixel besser geeignet.

---

Hallo, vielen Dank. Ich habe alle drei Punkte nun auf der ersten Seite des Fragebogens unter folgendem Pretest-Link umgesetzt, doch leider klappt das Anpassen der Höhe des Schiebereglers auf dem Handy nicht zuverlässig. Einmal hat es beim Öffnen des Fragebogens auf dem Handy geklappt, ansonsten nicht - gibt es dafür einen Grund?

https://www.soscisurvey.de/sam_methode/?act=N46OqslTrR5PzkoauFWWg9Qi

---

Soweit ich sehe, sind die Schieberegler nun deutlich schmaler als zuvor - ob das eine Folge der HTML-Konstruktion ist, eine Änderung in den Frage-Einstellungen oder ob Sie die Grafiken ausgetauscht haben, weiß ich nicht genau.

Jedenfalls isdt die Formel  calc(20vh - 30px)  bei der automatischen Anpassung der Breite damit nicht mehr korrekt. Folgendes habe ich erfolgreich getestet:

width: calc(10vh - 12px)

---

Hmm die Grafik hatte ich nicht ausgetauscht und auch keine Änderung in der Frage-Einstellung vorgenommen - muss also an der HTML Konstruktion liegen. Nun sieht es jedenfalls gut aus!

Ich denke, dass die Umsetzung des Schiebereglers nun einen sehr guten Stand erreicht hat. Die Grafik und den Regler werde ich nun noch verbessern - das sollte ich hinbekommen.

Herzlichen Dank für die andauernde und geduldige Unterstützung bei der Layout-Gestaltung und Umsetzung des Fragebogens – auch bei meinen zahlreichen Rückfragen und Detailwünschen. Viele Grüße und ein schönes Wochenende! :)