Ist es möglich eine 4x3 Produktmatrix mit Textfeldern zu kreieren?

Question

Ich würde gerne eine Produktmatrix mit 4x3 Bildern plus Textfeldern darunter einfügen, damit Probanden eine Zahl eintippen können wie viel sie von dem Produkt kaufen würden. (Zur Veranschaulichung habe ich diesbezüglich ein Bild hochgeladen)

Weiß irgendjemand ob sowas überhaupt möglich ist und falls ja, wie das geht?

Es ist sehr wichtig für mich, dass dies irgendwie funktioniert, deshalb bin ich für jeden Tipp überaus dankbar!

---

I would like to insert a product matrix with 4x3 images plus text fields underneath so that test subjects can type in a number how much they would buy of the product. (I uploaded a picture to illustrate this)

Does anyone know if something like this is even possible and if so, how it works?

It is very important to me that this works somehow, so I am extremely grateful for every tip!

Answer 1

Die Schwierigkeit dürfte darin bestehen, dass einige Teilnehmer:innen den Fragebogen auf einem Mobilgerät ausfüllen - und dann ist die beschrieben Matrix zu breit für das kleine Display. Die Lösung dafür wäre ein Layout mittels CSS Flexbox.

Aber darum dürfen Sie sich dann kümmern, wenn es soweit ist. Die einfache Lösung ist erstmal eine HTML-Tabelle, in welcher Sie die Bilder mittels <img>-Tag platzieren.

Und die Eingabefelder können Sie dann ganz einfach noch die Platzhalter in der Tabelle unterbringen: Eingabefelder frei platzieren

Und wie gesagt: Wenn das läuft und Sie über Mobilgeräte nachdenken, dann wird die Tabelle noch durch Flexbox ersetzt :)

Comments

Vielen Dank für die schnelle Antwort!

Habe alles umgesetzt und es funktioniert super!


Bin jetzt gerade am überlegen ob ich noch sicherheitshalber diese "Flexbox" einbauen sollte. Gibt es diesbezüglich auch irgendwo eine Anleitung von euch?

---

Bei der Flexbox-Lösung gibt es keine fixen Zeilen und Spalten - nachzulesen sehr schön aufbereitet hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/