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.

---

Es funktioniert, sorry, da ist gestern bei unseren Testungen irgendwas schief gelaufen. Danke!

Ich habe nur noch eine letzte Frage: Wir verwenden ja als Darstellung "Kärtchen (zentriert)". Wenn man jetzt die Bilder, z.B. über ihren Code runterskaliert, befindet sich nach oben und unten immer eine recht große Lücke zum Rand des Kärtchens. Also das Bild wird nicht optimal umrandet, sondern dort ist immer ein Abstand zu sehen. Die Breite der Kärtchen wird außerdem immer auf die ganze Bildschirmbreite gesetzt. Gibt es eine Möglichkeit die Größe der Kärtchen einzustellen? Also den Abstand zwischen Bild im Item und dem "Rand" des Kärtchens?

---

Zum einen haben die Bild selbst schon etwas Weißraum oben und unten. Etwa nochmal so viel ergänzt die Darstellung im Fragebogen. Sie können das entfernen, indem Sie noch folgenden CSS-Code im pageCSS() ergänzen:

.s2iSelection.cols.cards div.option {
  padding: 0;
}