Probleme mit Layout

Question

Liebes SoSci-Team,

ich habe aktuell Probleme mit einem Fragebogen für Grundschulkinder mit Rechenaufgaben.
Hier der Pretest-Link (ab S. 8; davor nicht relevant für Sie):
https://www.soscisurvey.de/lernkids_m1/?act=bkXf17RMTCASNHKhJheRalrq

Der Vollständigkeit halber (für Sie aber wohl nicht relevant) der Pretest-Link für den gesamten Fragebogen:
https://www.soscisurvey.de/lernkids_m1/?act=BX3j2gPT9O3OoJryc71cUvtv

Am Desktop sieht der Fragebogen okay aus, dennoch zwei Fragen:
- Ist es möglich, bei den einzelnen Items bei den Auswahlfragen mit Reaktionszeit die Schriftgröße zu vergrößern? Dies betrifft vor allem die Rechenaufgaben.
- Ist es möglich, die Schriftgröße bei den einzelnen Items der abschließenden Kunin-Skala für die Kinder zu vergrößern?

Ich habe den Fragebogen auch am Handy getestet. Folgende Probleme sind hier aufgetreten:
- Dunkler, fast schwarzer Hintergrund am Handy - das ist nicht ideal für Kinder; die Smileys der Kunin-Skala waren kaum sichtbar. Ich kann mir das nicht erklären - am Desktop ist es das normale Squares Layout.
- Grafiken sind am Handy unübersichtlich dargestellt - um die gesamte Grafik zu sehen, muss man weit rüberwischen
- Die Antwort-Buttons sind teilweise versetzt zu den Inhalten der Buttons, was ebenfalls unübersichtlich ist.

Vielleicht hätten Sie einen Tipp, wie ich diese Layout-Probleme lösen kann. Vor allem mit Blick auf die Darstellung am Smartphone, da viele Kinder den Fragebogen am Handy ausfüllen.

Besten Dank!

Answer 1

Sie binden das Bild mit folgendem HTML-Code ein:

<img src="Zahlenstrahl_1_3_klein.PNG">

Ergänzen Sie hier eine maximale Breite, damit es mit der Seitengröße skaliert:

<img src="Zahlenstrahl_1_3_klein.PNG" style="max-width: 100%;">

Alternativ fügen Sie auf der Seite folgenden PHP-Code ein:

pageCSS('
    img { max-width: 100%; }
');

Ist es möglich, bei den einzelnen Items bei den Auswahlfragen mit Reaktionszeit die Schriftgröße zu vergrößern?

Ich würde dazu folgendes empfehlen:

pageCSS('
    .selClickOption {
        font-size: 200%;
        text-align: center;
    }
');

Dunkler, fast schwarzer Hintergrund am Handy

Es gibt Layouts, die einen Dark Mode unterstützen, wenn der Browser das vorgibt. Für Ihr Layout scheint das aber nicht zuzutreffen. Ich kann eine Darstellung weiß-auf-schwarz nicht replizieren?

• Die Antwort-Buttons sind teilweise versetzt zu den Inhalten der Buttons, was ebenfalls unübersichtlich ist.

Auf welche Frage bezieht sich das genau?

Comments

Danke - die Buttons sind jetzt schön groß beschriftet, aber ist es möglich, die Rechenangabe größer darzustellen? Siehe:
https://www.soscisurvey.de/lernkids_m1/?act=c18nhY4BmpzB94dTqkAaJHcL

---

"Die Antwort-Buttons sind teilweise versetzt zu den Inhalten der Buttons, was ebenfalls unübersichtlich ist."

Auf welche Frage bezieht sich das genau?

Auf Seite 14 (Problem besteht nur am Handy-Display):
https://www.soscisurvey.de/lernkids_m1/?act=vDSsJZCu0KYtWUZu1f0Ul6a8