Bild bei Ballontest als html einbettbar für angepasste Darstellung auf verschieden großen Bildschirmen?

Question

Guten Tag,

in unserer Studie nutzen wir den Ballontest, bei dem Proband:innen Zahlen in verschiedene Felder, die auf einem Bild liegen, eintragen müssen. Die Studie soll nachher sowohl auf kleinen Bildschirmen wie Smartphones als auch auf Laptops o.ä. sehr gut bearbeitbar sein und das Bild an sich ist etwas größer, weil darauf 18 verschiedene Felder Platz haben müssen.

Kann man die zugrundeliegende Grafik z.B. auch als html einbetten und darauf basierend die Felder spezifizieren, um so die adäquate Darstellung auf verschiedenen Bildschirmgrößen (Laptop, Handy) zu gewährleisten? Oder gibt es einen anderen Weg, um Responsivität bei diesem Fragetyp zu erreichen?

Vielen Dank im Voraus!

Answer 1

Dieser Fragetyp wird sehr, sehr selten verwendet und bekam entsprechend etwas weniger Aufmerksamkeit.

Eine Möglichkeit bestünde darin, dass Sie Ihre Frage mit eine wenig HTML-Code und Platzhaltern für Texteingabefelder bauen. Sie würden dann die Eingabefelder mittels <div style="position: absolute"> in einem Element mit position: relative platzieren, und die Positionen (left/right) in Prozenten angeben, sodass es mit dem Fläche skaliert, welche wiederum das Seitenverhältnis des Bildes und selbiges als Hintegrund enthält.

Die Alternative wäre, dass wir uns den Fragetyp mal vornehmen und responsiv umgestalten. Allerdings würde das ein wenig Zeit in Anspruch nehmen (ca. 2-3 Wochen).