0 votes
in SoSci Survey (dt.) by s210387 (110 points)

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 :)

1 Answer

0 votes
by SoSci Survey (352k points)

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?

by s210387 (110 points)
Guten Morgen! Vielen Dank für Ihre schnelle Rückantwort.

Ich habe soeben einen Pretest-Link erstellt, der die Horizontale Auswahl in 2 Ausführungen und den derzeit umgesetzten Schieberegler zeigt. Die jeweils vorliegenden Probleme sind nochmal in den Fragebogen textlich eingefügt: https://www.soscisurvey.de/sam_methode/?act=XYS4xwg50k9Uvml3EpWHYftD

Zum Schieberegler: Ah okay! Das würde ich gerne mal ausprobieren.
Muss ich bei der Erstellung bzgl. der Größe etwas beachten? Also wie breit darf der Schieberegler sein? Mit welchem Programm erstelle ich die Grafik am besten?
Und ist der Schieberegler dann responsiv, also wird er schmaler und die Bilder ggf. kleiner, wenn ich das Browser-Fenster verkleinere?

Vielen Dank vorab!!
by SoSci Survey (352k points)
Danke für den Pretest-Link. Sie haben hier erstmal nur 4 Grafiken eingefügt, soweit ich sehe. Fügen sie auf Ihrer Seite bitte mal folgenden PHP-Code ein, um die Abstände zu entfernen:

pageCSS('
  div.s2question div.s2options.s2horizontal {
    gap: 0;
  }
');

Sobald der Bildschirm zu klein ist, schaltet SoSci Survey allerdings weiterhin responsiv in einer vertikale Darstellung um. Sie könnten die Mindestbreite in der Frage noch kleiner einstellen (z.B. 30 Pixel), um das zu vermeiden bzw. zu verzögern.

Ganz schlecht ist das Umschalten natürlich nicht, denn spätestens auf dem Smartphone-Display erkennt man einfach nichts mehr, wenn die Symbole zu klein werden.

> Muss ich bei der Erstellung bzgl. der Größe etwas beachten? Also wie breit darf der Schieberegler sein?

Es gibt keine Größenbeschränkung, aber die Regler-Grafik wird gemeinsam mit der Skalengrafik skaliert. Sie müssten also aufpassen, dass die beiden Grafiken von der Größe her zusammenpassen.

> Mit welchem Programm erstelle ich die Grafik am besten?

Wenn Sie nur die existierenden 21 Grafiken zusammenfügen möchten, dann sollte es jede Bildbearbeitungsssoftware tun. Also z.B. auch Windows Paint. Wenn Sie etwas mehr Spielraum möchten, verwenden Sie GIMP.

> Und ist der Schieberegler dann responsiv, also wird er schmaler und die Bilder ggf. kleiner, wenn ich das Browser-Fenster verkleinere?

Ja.
by s210387 (110 points)
Guten Abend, vielen Dank für die Antworten, ich habe bereits den PHP-Code und die Mindestbreite in der Frage auf 30px gesetzt - das gefällt mir so schon sehr gut! Die Änderungen sollten unter dem Pretest-Link nun ersichtlich sein. Haben Sie noch Verbesserungsvorschläge oder sehen Sie noch Optimierungsbedarf?


Zum Schieberegler habe ich zwei Rückfragen:

1. Ich habe nun derzeit folgende "Weitere Einstellungen" unter "Schieberegler" vorgenommen:

- Abmessungen der Skala: Breite: 1000 Pixel; Höhe: 40 Pixel
- Abmessungen des Reglers: Breite: 40 Pixel; Höhe: 40 Pixel
- Unter dem abgebildeten Schiebreregler steht "400 x 40 px"

--> An welchem Maß muss ich mich für das Erstellen der Grafik des Schiebereglers nun orientieren?

2. Wie kann ich die Einheit des aktuell ausgewählten Werts am Schieberegler anpassen, sodass dort keine % von 0 bis 100, sondern der Wert von 1 bis 21 angezeigt wird? Die "Weitere Einstellung" unter "Schieberegler" ist bei Differenzierung: 1-21


Zudem überlege ich eine vertikale Skala zu nutzen. Ich hatte daher mal den Fragetyp Auswahl angelegt und ans Ende der Fragebogenseite in dem Pretest-Link gepackt.

1. Gibt es hier auch eine Möglichkeit die Skalenpunkte näher zusammenzurücken? Vermutlich benötigt man einen anderen php-Code?

2. Wäre für eine vertikale Skala auch der Schieberegler geeignet?

3. Mehrere Schieberegler oder Auswahl Fragen nebeneinander könnte man nicht anzeigen, oder? Die wären dann alle untereinander?


Vielen Dank für die Hilfe und viele Grüße!!
by SoSci Survey (352k points)
Ich hatte Sie ursprünglich so verstanden, dass es 21 unterschiedliche Bilder gäbe. Aber soweit ich sehe, gibt es nur die "normalen" 5 Bilder, und die werden zusammen mit 21 Abstufungen angeboten.

Wenn das so ist, würde ich eigentlich zu einer Lösung raten, wo die Abstufungen näher zusammenstehen und vor allem die Bilder größer werden.

Mein Vorschlag wäre, dass Sie aus den Bilder mal ein breites Bild basteln (mit ein wenig Abstand dazwischen) und dieses dann als grafische Verankerung für eine Skala (nur Extremwerte) verwenden oder - wie schon oben angesprochen - als Skalengrafik für einen Schieberegler mit einer Differenzierung 1..22.

Die Lösung mit der Skala wird auf kleinen Displays nicht so gut funktionieren, weil 21 Auswahlpunkte da einfach nicht aufs Display passen. Ich denke, der Schieberegler wäre die bessere Lösung.

Man könnte noch darüber nachdenken, dass man für kleine und große Displays die Grafik mit unterschiedlich viel Abstand baut, sodass die Bilder auf dem kleinen Display nicht zu klein werden. Und dann könnte man je nach Bildschirmgröße eine der beiden Fragen anzeigen.
by s210387 (110 points)
edited by s210387
Vielen Dank für die erneute Antwort!


Ich hatte beim Fragetyp "Horizontale Auswahl" (SAM-Vorlage) tatsächlich 21 Bilder eingefügt, nämlich die 5 SAM-Bilder und noch 16 weiße Rechtecke im Format der SAM-Bilder, damit die Skalenpunkte gleich weit voneinander entfernt, d. h. äquidistant angeordnet werden - war also nur Hilfsmittel zum Zweck.

Ich habe nun eine entsprechend breite Grafik mit allen 5 SAM-Bildern erstellt und in SoSci Survey hochgeladen und die beiden Fragetypen "Skala mit Extremwerten beschriftet" und "Schieberegler" angelegt - unter dem Pretest sind sie nun auf den Seiten 2 und 3 ersichtlich.

Es gibt allerdings noch folgende Probleme:

1) Beim Fragetyp "Skala mit Extremwerten beschriftet" auf Seite 2:
- Bild verschwindet beim Kleinerziehen des Fensters
- SAM Bilder sind verzerrt

2) Beim Fragetyp "Schieberegler" auf Seite 3 (dieser Fragetyp scheint mir auch am meisten geeignet derzeit):

- Sieht für mich schon sehr gut aus - gibt es noch Verbesserungsvorschläge/-bedarf?

- Kann der Regler auch unterhalb des Bilds verlaufen?

- Die Beschriftung der Skala und ihre Einheit passen noch nicht - sie sollte von 1-21 gehen und nicht von 0-100% - Einstellungen unter Variablen:
SA21_01

1 = 0%
21 = 100%
-9 = nicht beantwortet

Weitere Einstellungen beim Schieberegler derzeit:

Einstellungen:
Abmessungen der Skala:  Breite: 1552 Pixel     Höhe: 172 Pixel
Abmessungen des Reglers:  Breite: 40 Pixel     Höhe: 40 Pixel
Position Minimum:      [Pixel]  x: 85  y: 20  Breite:
Position Maximum:     [Pixel]  x: 1467  y: 20  Breite:
Ausgangsposition:     [Pixel]  x: 776  y: 20  Breite:
Unte der Abbildung des Schiebereglers steht noch: 1552 x 172 px


Herzlichen Dank vorab!
by SoSci Survey (352k points)
> Beim Fragetyp "Skala mit Extremwerten beschriftet" auf Seite 2

Die Verzerrung bekommen Sie wie folgt weg:

img.s2visual {
  max-height: none;
}

Und damit die Skala nicht verschwindet:

img.s2visual {
  max-width: calc(100% - 64px);
}
div.s2layoutMatrix {
  display: block !important;
}

> Beim Fragetyp "Schieberegler" auf Seite 3

Laden Sie doch mal eine größe Grafik für den Reglerknopf hoch (den aktuellen sieht man kaum). Oder evtl. reicht es auch schon, größere Maße für den Regler einzustellen, z.B. 80x80 Pixel.

Anschließend sehen Sie sich beim Schieberegler in der Frage bitte einmal die Einstellungen im Karteireiter "Schiebregler" an. Und zwar finden Sie das ein "Position Minimum" und "Maximum". Da können Sie festlegen, an welcher Stelle (also auch, auf welcher Höhe) im Bild der Regler entlang laufen soll. Evtl. möchten Sie dem Bild dafür unten oder oben noch ein wenig weiß ergänzen.

Tipp: Klicken Sie in das Eingabefeld für die Position und klicken Sie anschließend einfach auf das Bild an die Stelle, wo der Regler hin soll.

> Die Beschriftung der Skala und ihre Einheit passen noch nicht - sie sollte von 1-21 gehen und nicht von 0-100%

Ich würde empfehlen, die Beschriftung im Fragebogen (also sichtbar für die Befragten) abzuschalten. Die passt nicht zu Ihrem Anwendungsfall. Was in den Variablen steht, ist egal, die 100% bedeuten hier nur "am Maximum". Im Datensatz gespeichert wird die 21.
by s210387 (110 points)
Hat alles geklappt, vielen Dank!

Ich habe auf der ersten Seite des Fragebogens unter dem Pretest-Link nun auch einen vertikalen Schieberegler unter dem horizontalen Schieberegler eingefügt und habe eine Frage dazu: https://www.soscisurvey.de/sam_methode/?act=XYS4xwg50k9Uvml3EpWHYftD

Gibt es eine Möglichkeit den Schieberegler schmaler zu machen? Beim aktuellen Drüberhovern wird ein sehr breites blau gefärbtes Feld sichtbar. Der Hintergrund ist, dass ich beim vertikalen Anlegen des Schiebereglers gerne drei Schieberegler, nämlich alle drei Schieberegler für die drei verschiedenene SAM-Emotionsdimensionen nebeneinander packen würde. Geht das?

Viele Grüße
by SoSci Survey (352k points)
> Beim aktuellen Drüberhovern wird ein sehr breites blau gefärbtes Feld sichtbar.

Der Schieberegler nimmt die gesamte Breite ein ... das kann gut sein oder auch nicht.

Den Hover-Effekt können Sie in der Frage einfach abschalten, wenn Sie möchten ("Schattierung").

Und im Prinzip können Sie die Breite auch begrenzen, wenn Sie vor die Frage den HTML-Code <div style="width: 400px"> und dahinter <div> setzen.

>  alle drei Schieberegler für die drei verschiedenene SAM-Emotionsdimensionen nebeneinande

Als kombinierte Frage sollte das funktionieren. Falls nicht, dann mit einer HTML-Konstruktion.
by s210387 (110 points)
Dankeschön! Mit einem HTML Code habe ich die drei vertikalen Schieberegler nebeneinander anordnen können, das Ergebnis ist auf der ersten Seite des Pretest-Links zu sehen:
https://www.soscisurvey.de/sam_methode/?act=XYS4xwg50k9Uvml3EpWHYftD

Auf der ersten Seite meines Fragebogens erfasse ich mit der Geräte-Frage die Bildschirmgröße. Gibt es eine Möglichkeit, unter Verwendung der erfassbaren Variablen in der Geräte-Frage die Höhe der angezeigten Schieberegler anzupassen, je nachdem wie hoch der verwendete Bildschirm ist?

Vielen Dank und schönen Sonntag!
by SoSci Survey (352k points)
Ehr gesagt würde ich empfehlen, die Regler von der Farbe her ein wenig abzuheben und die Größe zu erhöhen. Das kleine Kreuzchen neben den Bildchen dürften viele übersehen. Vielleicht ein schöner großer roter Pfeil nach links oder sowas.

> Gibt es eine Möglichkeit, unter Verwendung der erfassbaren Variablen in der Geräte-Frage die Höhe der angezeigten Schieberegler anzupassen

Sie können die breite anpassen. Ich habe gerade mal ein wenig mit dem Pretest-Link ausprobiert, und folgendes CSS sollte funktionieren. Zum Verständnis: 100vh bedeutet "100% der Fensterhöhe"

#SA22_qst,
#SA23_qst,
#SA24_qst {
    width: 7vh;
    width: calc(8vh - 15px);
}

Also dann als PHP Code

pageCSS('
  #SA22_qst,
  #SA23_qst,
  #SA24_qst {
      width: 7vh;
      width: calc(8vh - 15px);
  }
');
by s210387 (110 points)
Hallo, vielen Dank! Ich habe den Code bereits umgesetzt (siehe 1. Seite Pretest-Link). Zum Verständnis: width: 7vh und width: calc(8vh - 15px) sind Alternativen, oder?

Ich möchte, dass die Probanden den Fragebogen primär am Tablet oder Computer ausfüllen, kann es aber nicht garantieren bzw. kann nicht verhindern, dass sie den Fragebogen nicht doch am Handy ausfüllen... Für den Fall würde ich gerne die Skalen doch untereinander anzeigen lassen, weil man sonst beim Scrollen der Gefahr läuft den Schieberegler aus Versehen zu verschieben weil die ganze Breite aus Schiebereglern besteht und kaum freier Platz zum Scrollen ist. D. h. der html Code zur Anordnung der Skalen nebeneinander soll im Fall des Ausfüllens am Handy nicht gelten. Muss ich dann zwei verschiedene Seiten anlegen, eine Seite mit html Code fürs Anzeigen der Skalen nebeneinander und eine Seite ohne html Code fürs Anzeigen der Skalen untereinander und die jeweilige Seite dann je nach Ausprägung der Gerätevariable über einen php Code nach folgendem Schema aufrufen?

if ((value('PC11_FmF') == 4) or (value('PC11_FmF') == 5)) {
   goToPage(Seite ohne html Code);
}
if ((value('PC11_FmF') == 1) or (value('PC11_FmF') == 3)) {
   goToPage(Seite mit html Code);
}

P.s.: Ich werde den Schieberegler zu gegebener Zeit noch schöner machen und Ihre Anmerkungen bzgl. des Reglers berücksichtigen :)
by SoSci Survey (352k points)
> Zum Verständnis: width: 7vh und width: calc(8vh - 15px) sind Alternativen, oder?

Ältere Browser beherrschen das genauere calc() u.U. noch nicht, daher beide Abgaben. Der Browser verwendet die letzte, mit der er umgehen kann.

> Für den Fall würde ich gerne die Skalen doch untereinander anzeigen lassen

Ich persönlich würde nicht die FmF-Variable verwenden, sondern die Bildschirmbreite oder -Höhe. Nicht jedes Mobilgerät verrät per Browserkennung, um was für ein Format es sich handelt.

Außerdem würde ich empfehlen, dass Sie nicht zu separaten Seiten springen, sondern den Inhalt direkt einbinden, also z.B.

if (...) {
  html(...);
  question(...);
  html(...);
  question(...);
  html(...);
} else {
  question(...);
  question(...);
}
by s210387 (110 points)
edited by s210387
Danke für die Erklärung und den Code, habe ich umgesetzt bekommen!


Die Umsetzung sieht nun so aus:

if (value('PC11_ScW') < 1440){
    question('SA21');
    question('SA22');
    question('SA23');
} else {
    html('<div style="display: flex; flex-wrap: wrap; gap: 0 50px;">');

    html('<div style="flex: 1 1 50px; min-width: 50px;">');
    html('<div style="width: 200px">');
    question('SA21');
    html('</div></div>');

    html('<div style="flex: 1 1 50px; min-width: 50px;">');
    html('<div style="width: 200px">');
    question('SA22');
    html('</div></div>');

    html('<div style="flex: 1 1 50px; min-width: 50px;">');
    html('<div style="width: 200px">');
    question('SA23');
    html('</div></div>');

    html('</div>');
}

--> Ich habe die Weite entsprechend des größten Smartphones Samsung Galaxy S25 Ultra gewählt (3120 × 1440). Passt die Bedingung?
--> Angenommen die Probanden drehen auf der ersten Fragebogenseite, auf der die Geräte-Frage steht und damit die Variablen erfasst werden, das Smartphone ins Querformat - würde dann die eigentliche Smartphone Höhe in der Variable PC11_ScW gespeichert werden?


Eine abschließende Frage habe ich noch - der aktuell verwendete Code lautet nun:

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

--> passt das Setzen der ersten width Angabe auf 15vh, wenn die zweite width Angabe nun auf calc(20vh - 50px) eingestellt ist? Ich kann derzeit leider nur die zweite width-Angabe testen (mein Browser greift scheinbar darauf zu), weshalb ich mich frage und gerne eine Einschätzung hätte, ob die Wahl der 15vh passt, wenn es vorher wie von Ihnen angegeben width: 7vh und width: calc(8vh - 15px) war?


Vielen Dank nochmal!!!
by SoSci Survey (352k points)
1440 Pixel ist schon ziemlich viel - und das Gerät berichtet an den Browser wahrschienlich eine geringere Auflösung als die native. Ich würde die Grenze eher mal bei 600-800 Pixeln ziehen.

> Angenommen die Probanden drehen auf der ersten Fragebogenseite, auf der die Geräte-Frage steht und damit die Variablen erfasst werden, das Smartphone ins Querformat - würde dann die eigentliche Smartphone Höhe in der Variable PC11_ScW gespeichert werden?

Die Frage "Gerät und interne Variablen" speichert die Breite beim Aufruf der Seite. Sie sollten diese Frage also möglichst erst auf der Seite vor SA21 etc. platzieren.

> passt das Setzen der ersten width Angabe auf 15vh

Ich hatte die 8vh-15px durch Ausprobieren mit den Developer Tools im Browser angenähert. Es geht bei der Rechnung darum, den konstanten Höhenverlust durch das Layout zu kompensieren. Sie können das Browserfenster kleiner und größer ziehen, um zu testen, ob Sie mit dem Ergebnis glücklich sind.

> Ich kann derzeit leider nur die zweite width-Angabe testen

Wenn Sie auch das 15vh testen möchten, löschen Sie die calc()-Zeile zeitweise zum Testen aus dem Code.
by s210387 (110 points)
Guten Morgen,
vielen Dank für die Einschätzung und die Erklärung zum Testen.

Eine Rückfrage habe ich zu "Die Frage "Gerät und interne Variablen" speichert die Breite beim Aufruf der Seite. Sie sollten diese Frage also möglichst erst auf der Seite vor SA21 etc. platzieren."
--> Beim Aufruf welcher Seite ist gemeint? Der Seite, auf der die Geräte-Frage platziert ist oder der Seite, die die Variablen nutzt, also meine Schieberegler-Seite(n)? Ich habe derzeit die Geräte-Frage auf Seite 1 meines Fragebogens platziert, die Schieberegler kommen allerdings erst auf den Seiten 6-12 vor (jeweils die drei Schieberegler). Auf welcher Seite/welchen Seiten sollte nun die Geräte-Frage platziert werden?

Vielen Dank vorab und schönen Tag
by SoSci Survey (352k points)
> Der Seite, auf der die Geräte-Frage platziert ist

Diese ist gemeint :)

Ich würde demnach empfehlen, dass Sie die Frage "Gerät und interne Variablen" auf Seite 5 legen. Dann haben Sie zumindest alle Fälle korrekt im Datensatz/für den Filter, die zwischen Seite 1 und 4 gedreht haben.

Wenn Sie die kombinierte Frage mit show() statt question() bauen, bekommen Sie übrigens im Hintergrund eine HTML-Konstruktion, die Sie im Prinzip auch responsiv gestalten können. Heißt, mit ein wenig CSS könnten Sie dafür sorgen, dass die Regler beim Drehen des Geräte von der "nebeneinander" in die "untereinander" Darstellung wechseln. Die Frage ist, wie viel Zeit Sie in solche Detail-Optimierungen stecken möchten ;)
by s210387 (110 points)
Leider komme ich erst jetzt zum Antworten. Vielen Dank für die Erklärung.

Sehr gerne würde ich den Code entsprechend abändern, habe aber leider zu wenig Ahnung von CSS... Die Codes, die aktuell auf der Seite der drei Schieberegler sind, lauten:

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

2. if (value('PC13_ScW') < 800){
    question('SA21');
    question('SA22');
    question('SA23');
} else {
    html('<div style="display: flex; flex-wrap: wrap; gap: 0 50px;">');

    html('<div style="flex: 1 1 50px; min-width: 50px;">');
    html('<div style="width: 200px">');
    question('SA21');
    html('</div></div>');

    html('<div style="flex: 1 1 50px; min-width: 50px;">');
    html('<div style="width: 200px">');
    question('SA22');
    html('</div></div>');

    html('<div style="flex: 1 1 50px; min-width: 50px;">');
    html('<div style="width: 200px">');
    question('SA23');
    html('</div></div>');

    html('</div>');
}

Können Sie mir bitte helfen den Code entsprechend anzupassen, sodass die Dartstellung responsive ist und beim Drehen des Geräts wechselt? Vielen Dank und schönes Wochenende!
by SoSci Survey (352k points)
html('</div></div>');

Das stimmt so noch nicht. Das <div> mit display:flex brauchen Sie nur einmal außenherum. Nur dann rücken die enthaltenen drei <div> nebeneinander.

> Können Sie mir bitte helfen den Code entsprechend anzupassen, sodass die Dartstellung responsive ist und beim Drehen des Geräts wechselt?

Nehmen Sie statt des

<div style="display: flex; flex-wrap: wrap; gap: 0 50px;">

bitte mal

<div class="responsive">

Das "responsive" ist hier nur ein Name. Also müssten Sie jetzt noch den CSS-Code ergänzen, der abhängig von der Größe des Bildschirms das flex ein- oder ausschaltet.

@media (max-width: 600px) {
  div.responsive {
    display: flex;
    gap: 0 50px;
  }
}
by s210387 (110 points)
edited by s210387
Hallo, vielen Dank.

Auf der Seite mit den drei Schiebereglern stehen nun die folgenden beiden PHP-Codes - sollen diese getrennt voneinander stehen bleiben oder sollten sie zusammengeführt werden?

Ist die Umsetzung des 2. PHP-Codes mit der responsive-Klasse korrekt? Ich habe nun aus dem 2. PHP-Code die If-Bedingung entfernt, da dies nun ja über die responsive-Klasse abgedeckt sein sollte meinem Verständnis nach und habe min-width statt max-width verwendet - ist das so richtig?


1. PHP-Code:

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

2. PHP-Code:

html('
    <style>
        .responsive {
            display: block;
        }
        @media (min-width: 600px) {
            .responsive {
                display: flex;
                flex-wrap: wrap;
                gap: 0 50px;
            }
        }
    </style>
    ');

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

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

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

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

    html('</div>');

Viele Grüße und schönen Samstag
by SoSci Survey (352k points)
> sollen diese getrennt voneinander stehen bleiben oder sollten sie zusammengeführt werden?

Packen Sie das .responsive u.s.w. auf alle Fälle noch mit ins pageCSS(), denn dort gehört es hin. Eine Einbindung direkt in den HTML-Inhalt funktioniert zwar meist, ist aber entgegen der Spezifikation und wird daher evtl. nicht von jedem Browser unterstützt.

Ansonsten spielt es hier keine Rolle, ob Sie zwei PHP-Code-Felder verwenden oder nur eines.

PS: Die 600 Pixel sind evtl. etwas gering gewählt. Testen Sie das bitte einfach mal, indem Sie das Browserfenster kleiner schieben.
by s210387 (110 points)
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
by SoSci Survey (352k points)
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.
by s210387 (110 points)
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
by SoSci Survey (352k points)
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)
by s210387 (110 points)
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! :)

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

...