Traditionelle Conjoint-Analyse: Bilder im Rankingverfahren nebeneinander positionieren.

Question

Hallo Zusammen,

Ich würde gerne eine traditionelle Conjoint-Analyse durchführen. Dafür sollen die VPN 9 Produktbilder entsprechend ihrer Kaufpräferenzen in eine Rangfolge bringen. Für eine übersichtlichere Darstellung würde ich die 9 Bilder gerne in einem 3x3 Layout zeigen, wobei die VPN direkt bei jedem Bild den entsprechenden Rang per Drop-Down auswählen sollen.

Ich habe es bisher mit dem Fragetyp "Rangordnung" versucht, komme nun aber nicht weiter. Daher meine Frage, wie lässt sich sowas umsetzen?

Danke vorab! :)

Comments

Ergänzend muss ich sagen, dass ich zwei Conjoint-Fragen gebaut habe und mittels eines Zufallsgenerators entscheiden lassen, welche der zwei Versionen der VPN angezeigt werden. Bisher sieht der Code auf meiner Seite also so aus:

if (value('RD01') == 1) {
    question('CA02');
} elseif (value('RD01') == 2) {
    question('CA01');
}

An welcher Stelle müsste ich ggf. Code hinzufügen?

---

Der PHP-Code würde die Frage auf der Seite ersetzen.

Die Rangordnung wäre auch meine erste Überlegung gewesen. Überlegungen wir eine 3x3-Matrix machen allerdings nur solange Sinn, wie die Leute auf dem großen Bildschirm arbeiten. Sind Sie sicher, dass die Leute nicht auch vom Handy aus teilnehmen? Da wären 9 Optionen zugleich schon eine Herausforderung.

Alternativ könnten Sie noch die eindimensionale Positionierung ausprobieren. Diese kann im "Stapel" mehr zeigen (z.B. das Bild in groß) und nach der Platzierung dann weniger. Im Prinzip lässt sich so etwas auch mit der Rangordnung basteln, aber da ist es komplizierter.

Aber vielleicht denke ich gerade auch zu kompliziert. Was ist es denn genau, weshalb Sie mit der Rangordnung nicht  zum gewünschten Ergebnis kommen?

---

Vielen Dank für die schnelle Antwort!

Es werden voraussichtlich auch Leute vom Handy teilnehmen. Mich stört aktuell vor allem, dass meine Bilder so groß sind, dass ich immer nur eins gleichzeitig auf dem Bildschirm sehe und für jedes weitere Bild nach unten scrollen muss. Es wäre wünschenswert, dass die Probanden zumindest 3 bis 4 Produkte gleichzeitig sehen können.

Wie genau funktioniert das mit dem Stapel? Das klingt erstmal vielversprechend

---

Wenn die Bilder zu groß sind, wäre die naheliegende Lösung, dass Sie sie in geringerer (Pixel-)Größe hochladen. Aber auch eine Skalierung mittels CSS wäre machbar. Wenn Sie mir einen Pretets-Link direkt zur betroffenen Seite senden möchten, kann ich gerne mit ein wenig CSS-Code aushelfen.

> Wie genau funktioniert das mit dem Stapel?

Legen Sie mal eine Frage mit dem Fragetyp Kärtchen eindimensional platzieren an. Dort können Sie für jede Option einen Titel und einen Untertitel eintragen. Das Bild würden Sie in den Untertitel packen.

---

Gerne, hier der Link: https://www.soscisurvey.de/onlineexperiment2025/?act=rEWwzSmQ1UwF5oEV4FJQP441

Es geht um die Fragen im Abschnitt CA (bei negativ sind noch keine Bilder hinterlegt).

Leider werden die Bilder mittlerweile auch unterschiedlich groß dargestellt, ich weiß nicht woran das liegt. Das mit dem Stapel sieht erstmal ganz gut aus, aber gäbe es hier auch die Möglichkeit, Ränge mittels Drop-Down zu verteilen? Oder nur das Platzieren auf dem Strahl?

---

https://www.soscisurvey.de/onlineexperiment2025/index.php?i=MOQYG7BK9Q17&rnd=JFBE

---

Ich glaube meine präfererierte Option wäre es, die Bilder etwas kleiner zu skalieren, und dann in 2 bis 3 Reihen darzustellen. Ggf. ist eine Teilnahme übers Handy dann halt nicht möglich. Könnten Sie mir zeigen, wie ich das in Kombination mit dem Zufallsgenerator erreichen kann?

Vielen Dank vorab!

Answer 1

meine präfererierte Option wäre es, die Bilder etwas kleiner zu skalieren, und dann in 2 bis 3 Reihen darzustellen.

Sie haben die Frage im Moment auf die Dropdown-Darstellung geändert, deshalb kann ich nicht prüfen, ob die CSS-Modifikation auch in der Drag&Drop-Darstellung funktioniert. Aber probieren Sie es einmal hiermit (als PHP-Code auf der Seite):

pageCSS('
    #CA01_qst div.s2item img,
    #CA02_qst div.s2item img {
      max-width: 320px;
    }
');

Könnten Sie mir zeigen, wie ich das in Kombination mit dem Zufallsgenerator erreichen kann?

Den Code für die Anzeige des Frage abhängig vom Zufallsgenerator packen Sie einfach unter den o.g. Code.

Leider werden die Bilder mittlerweile auch unterschiedlich groß dargestellt

Eventuell hat sich da etwas im Browser-Cache verfangen, den könnten Sie mal leeren. Ansonsten sagen Sie gerne Bescheid, wenn der Pretest-Link das Problem wieder anzeigt. Dann kann ich Genaueres sagen.

Comments

Ich verstehe leider nicht, wie der Code genau anzuwenden ist. Ich bin jetzt dazu übergegangen, den Zufallsgenerator erstmal außen vor zu lassen und mich auf die Darstellung zu konzentrieren.

Hier habe ich es geschafft, die 2 Spalten zu erzeugen, allerdings ist die Frage hierfür aufgespaltet worden, sodass man nicht mehr alle Ränge bis 9 vergeben kann: https://www.soscisurvey.de/onlineexperiment2025/index.php?i=S161V2V8D55G&rnd=DHQY

Hier habe ich es dann mit einem Mehrfach-Dropdown versucht. Das funktioniert zwar, aber es ist jetzt den VPN möglich, mehreren Stimuli den gleichen Rang zuzuweisen. Lässt sich das ändern? --> https://www.soscisurvey.de/onlineexperiment2025/index.php?i=KF2EMX0TMQWJ&rnd=LFQY

Könnten Sie mir alternativ nochmal zeigen, wie ich Ihren Code nutzen kann? Es sollte möglichst mit Dropdown funktionieren und nicht mit Drag&Drop.

Vielen Dank!!

---

> allerdings ist die Frage hierfür aufgespaltet worden, sodass man nicht mehr alle Ränge bis 9 vergeben kann

Das scheint mir keine gute Lösung.

> Ich verstehe leider nicht, wie der Code genau anzuwenden ist.

Das mit pageCSS() setzen Sie einfach in ein Element "PHP-Code" irgendwo auf die Seite.

> Es sollte möglichst mit Dropdown funktionieren und nicht mit Drag&Drop.

Beim Dropdown-Ranking bin ich sicher, dass die Bilder mit dem Code kleiner werden :)

---

Super, jetzt sind die Bilder kleiner. Wenn ich die Bilder jetzt noch in 3 Spalten anzeigen kann (im Optimalfall mit dynamischer Anpassung fürs handy) wäre es perfekt. Können Sie mir damit helfen?

Danke für die Geduld :)

---

Es ist zum Testen nicht gerade hilfreich, dass ich unter dem Pretest-Link ständig eine andere Variante der Frage finde als das, was Sie eigentlich schreiben, dass Sie wollen ;)

Legen Sie das Ranking bitte mal "normal" auf die Seite und ergänzen sie diesen PHP-Code (der untere Teil ist der alte):

pageCSS('
    #CA01_tab,
    #CA02_tab {
      display: flex;
    }
    #CA01_qst div.s2item img,
    #CA02_qst div.s2item img {
      max-width: 320px;
    }
');

---

Ja ich weiß, tut mir leid - ich hör auf! :)

https://www.soscisurvey.de/onlineexperiment2025/index.php?i=FPWWMBSA2TST&rnd=ZVQJ

Hier liegt jetzt die Ranking-Frage mit Drop-Down "normal" inklusive Ihrem Code. Die Bilder sind kleiner, allerdings werden jetzt alle nebeneinander dargestellt. Bekommen wir das in Spalten?

Vielen Dank weiterhin, ich entschuldige mich.

---

Na klar, ergänzen Sie bitte noch eine Zeile mit flex-wrap:

#CA01_tab,
#CA02_tab {
  display: flex;
  flex-wrap: wrap;
}

Vermutlich müssen Sie die Bilder noch einen Tick kleiner machen oder Sie versuchen es mal hiermit, um die Dropdowns unter die Bilder zu packen:

#CA01_qst div.s2item {
  max-width: 320px;
  padding-bottom: 1.6em;
}

---

Jetzt sieht es schon sehr gut aus! Ist es möglich, noch einen ganz kleinen Abstand zwischen die Fotos einer Reihe einzufügen, damit es nicht so gequetscht aussieht? Bei CA01 sieht es schon perfekt aus, aber bei CA02 sieht es sehr eng aus.

---

Die Flexbox erlaubt einen "gap" Parameter:

#CA01_tab,
#CA02_tab {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

---

Vielen Dank, jetzt ist es perfekt. Sie sind ein Gott.