Bilder in Antwortoptionen optimal für Tabletgröße skalieren

Question

Hallo zusammen,

Ich generiere einen Test für die junge Zielgruppe von 1.Klässlern, der auf dem Tablet durchgeführt wird. Die Skalierung der Items muss optimal sein, damit die Kinder nicht unnötig scrollen müssen. Es geht vor allen Dingen um den klassischen Fragetyp "Auswahl", wo die Kinder dann aus 4 Antwortmöglichkeiten (Bilder eingebunden als <img src="Haus.png">) eins anklicken sollen.

Das Problem ist, im Moment muss man immer auf das "Weiter" runterscrollen. Ich möchte aber, dass das Weiter mit auf der Seite ist. Hier sehen sie die Beispiele:

https://www.soscisurvey.de/mika_inf/?q=probleme

Was ist die beste Möglichkeit die Bilder zu skalieren? Geht das über Auswahloptionen(dort sehe ich nur Mindest-Pixelgröße aber ich brauche ja das Gegenteil eine Maximal-Pixelgröße). Oder muss man das bei jedem Antwortitem einzeln via HTML skalieren? Das wäre aber auch da wüsste ich gerne den "besten" Code.

Ich habe bereits in den Layouteinstellungen die Abstände nach Item usw möglichst gekürzt, aber es hilft nicht.

Vielen Dank für ihre Hilfe!!!

Answer 1

"Optimal" ist ein sehr komplexer Begriff ... wenn sie die Auflösung des Tablets kennen, dann können Sie die Bilder natürlich auf genau diese Auflösung hin skalieren. Das ist nicht besonders flexibel, aber vielleicht für Ihren Anwendungsfalls ausreichend.

Eine einfache Lösung wäre also folgende PHP-Code auf der Seite:

pageCSS('
    div.s2items img {
      height: 120px;
    }
');

Die genaue Höhe müssten Sie bitte anhand der Tablets testen.

Eine andere Möglichkeit bestünde darin, dass Sie die Bilder relativ zur Bildschirmhöhe (vh) skalieren, also z.B.

pageCSS('
    div.s2items img {
      max-height: 15vh;
    }
');

Im Prinzip könnte man die Kopfleiste und das "Weiter" auch noch mit einem calc() genau mit einberechnen, aber ich glaube, das würde für Ihren Anwendungsfall ein wenig über's Ziel hinaus schießen.

Comments

Vielen Dank für die Antwort.

Könnten sie für die erste Variante "Bilder natürlich auf diese Auflösung skalieren" einen Beispiel-Code zeigen? Momentan ist es wie gesagt mit <img src="Haus.png"> eingebunden, und die Skalierungsmöglichkeiten die wir probiert haben klappen nicht.

Wir verstehen auch nicht, wo der genannt PHP-Code einzufügen ist. PHP-Code geht ja nur bei "Fragebogen zusammenstellen" richtig? Wenn wir den Code bei "Verarbeitung der Antworten mittels PHP" einfügen, kommt eine Fehlermeldung. Wenn wir davor ein PHP-Code-Element einfügen und dort den von Ihnen genannten Code einfügen, verändert dies die Skalierung bei uns nicht. Wir kommen also gerade bei allen Lösungen nicht wirklich weiter, wie man explizit bei einem Antwort-Item die Größe (z.B. in Pixel) einstellen kann.

---

> Momentan ist es wie gesagt mit <img src="Haus.png"> eingebunden

Ja, das können Sie so belassen. Der von mir vorgeschlagene CSS-Code steuert automatisch alle Bilder auf der Seite.

> PHP-Code geht ja nur bei "Fragebogen zusammenstellen" richtig?

Ja, richtig. Dort müssen Sie es als "PHP-Code" einfügen, nicht als "Verarbeitung der Antworten mittels PHP", vgl. https://www.soscisurvey.de/help/doku.php/de:create:php

> Wenn wir davor ein PHP-Code-Element einfügen und dort den von Ihnen genannten Code einfügen, verändert dies die Skalierung bei uns nicht.

Versuchen Sie es testweise bitte mit einem kleineren Wert, z.B.

pageCSS('
    div.s2items img {
      max-height: 5vh;
    }
');

Wenn sich selbst dann noch nichts ändert, lassen Sie das pageCSS() bitte in der Seite und posten Sie bitte nochmal einen Link zum Testen.