vorgegebenes Grid bei Rangordnung

Question

Hallo zusammen :)

Ich möchte in meinem Fragebogen eine Rangordnungsaufgabe verwenden, bei der die Kärtchen (Bilder) in einer vorgegebenen Reihenfolge abgelegt werden sollen. Wichtig ist dabei, dass die Kärtchen in einer Art Grid 8x5 abgelegt werden sollen und sich die Grösse des Grids nicht verändern lässt.
Weiss jemand, wie ich das hinkriege?

Vielen Dank!
Moira

Comments

Bezieht sich das 8x5-Raster auf die ursprünglichen Positionen der Kärtchen (also den Zieh-Stapel) oder auf die Zielpositionen?

---

Danke für die schnelle Antwort! Die Zielpositionen sollten ein 8x5 Grid bilden.
Daran anschliessend ist gerade noch eine weitere Frage aufgetaucht: ich habe 40 Kärtchen, die in das 8x5 Grid einsortiert werden sollen und möchte, dass in einer Bedingung einige Kärtchen im Zielgrid bereits als vorgegebene Ränge positioniert sind. Wenn ich nun diese aus den zu vergebenden Kärtchen lösche, bei den zu vergebenden Rängen aber 40 eintrage, erscheint im Vorschaumodus als Zielgrid lediglich ein Raster mit 34 Rängen. Wie kann ich das beheben?

---

Das Vorbelegen können Sie mittels preset() erledigen - allerdings haben die Teilnehmer dann weiterhin die Möglichkeit, die Kärtchen auf andere Positionen zu schieben.

Was die Positionen angeht, muss ich noch testen, ob man diese mittels JavaScript direkt steuern kann. Ein Verschieben des kompletten Antwortbereichs funktioniert (https://support.soscisurvey.de/?qa=2439/&show=2449#a2449), aber für einzelne Felder habe ich es noch nicht getestet.

---

Genau, das Vorbelegen hat mittlerweile geklappt. Haben Sie bereits herausgefunden, ob es irgendwie klappt das Zielgrid 8x5 zu fixieren?

Answer 1

Also ... man kann die Position der Ablageplätze mittels JavaScript anpassen - und von ein paar kleinen Hängern beim Verschieben funktioniert es weiterhin. Hier ein JavaScript-Code (einzufügen unter der Frage als HTML-Code) as Einstieg. In der zweiten Zeile muss man die Kennung der Frage eintragen und am Ende die gewünschten Positionen der Ablageflächen (hier exemplarisch Nr. 1 bis 6).

<script type="text/javascript">
var qstID = "TS14";
function reposition(num, x, y) {
  var htmlID = "ranking" + qstID + "Tgt" + num;
  var target = document.getElementById(htmlID);
  target.style.position = "absolute";
  target.style.left = x + "px";
  target.style.top = y + "px";
}
// Resize the item's area
var items = document.getElementById("ranking" + qstID + "Items");
items.style.position = "absolute";
items.style.width = "400px";
items.style.zIndex = 10;
// Reposition the items
reposition(1, 300, 0);
reposition(2, 300, 50);
reposition(3, 300, 100);
reposition(4, 470, 0);
reposition(5, 470, 50);
reposition(6, 470, 100);
</script>

Comments

Super, vielen Dank! Wenn ich den Code so einfüge, wird allerdings der Ziehstapel in einer fixen breite von 3 Kärtchen angezeigt, wobei ich ja die Zielpositionen als 8x5 Raster fixiert bräuchte. (Ich habe anstatt 1-6 die Kennnummer der Antwortmöglichkeiten eingetragen). Wo mache ich einen Fehler?

Nochmals zu meiner anderen Frage: Ich habe 12 vordefinierte Ränge festgelegt (nicht via preset() sondern als Beschriftung für die Ränge, da es für uns wichtig wäre, dass sich die bereits fixierten Kärtchen nicht mehr verschieben lassen). Bei den Items (Kärtchen) habe ich diese 12 vordefinierten Ränge gelöscht, da die Kärtchen nicht mehr einsortiert werden müssen also auch nicht im Zielstapel liegen sollen. Allerdings soll es insgesamt trotzdem 40 Ränge geben (also 12 definierte, nicht zu verteilende + 32 zu verteilende Ränge). Allerdings erscheinen egal, was ich bei unter weitere Einstellungen entweder bei Rangordnung oder Ränge als Anzahl zu vergebender Ränge eintrage lediglich 32 Ränge. Woran kann das liegen und wie kann ich das beheben?

---

Wie breit der "Ziehstapel" ist, hängt von der Gesamtbreite der Seite und vor allem von der folgenden Zeile ab:

items.style.width = "400px";

> Nochmals zu meiner anderen Frage:

Wollen Sie dafür einfach eine ander Frage anlegen? Sonst wird's hier ganz schnell unübersichtlich. Danke.

Grundsätzlich können Sie mittels CSS ganz bequem noch weitere Kärtchen mit fixer Position auf der Seite verteilen, z.B: mit folgendem HTML-Code über der Frage:

<div style="position: relative; top: 60px;">
  <img src="bildX.jpg" style="position: absolute; left: 300; top: 50;">
</div>

---

Vielen Dank für die schnelle Antwort!
Genau, die Breite des Ziehstapels zu fixieren klappt dank des Codes wunderbar, allerdings habe ich noch keinen Weg gefunden die Ablage also den Zielort der Kärtchen zu fixieren. Kann ich das auch irgendwie in den gleichen Code einbinden?

---

> allerdings habe ich noch keinen Weg gefunden die Ablage also den Zielort der Kärtchen zu fixieren.

Genau das sollte eigentlich das reposition() erledigen - damit sollten Sie für jeden Rang/Ablageplatz eine exakte Position definieren können. Wenn nicht, posten Sie bitte einmal den Code, so wie Sie ihne verwenden, und die Fehlermeldungen in der Browser-Konsole - und am besten auch einen Pretest-Link direkt (!) zur betroffenen Seite.

---

Ich habe den Code so eingebaut:
<script type="text/javascript">
var qstID = "PR04";
function reposition(num, x, y) {
  var htmlID = "ranking" + qstID + "Tgt" + num;
  var target = document.getElementById(htmlID);
  target.style.position = "absolute";
  target.style.left = x + "px";
  target.style.top = y + "px";
}
// Resize the item's area
var items = document.getElementById("ranking" + qstID + "Items");
items.style.position = "absolute";
items.style.width = "455px";
items.style.zIndex = 10;
// Reposition the items
reposition(1, 240, 420);
reposition(2, 325, 420);
reposition(3, 410, 420);
reposition(4, 500, 420);
reposition(5, 590, 420);
reposition(6, 680, 420);
reposition(7, 770, 420);
reposition(8, 240, 490);
reposition(9, 325, 490);
reposition(10, 410, 490);
reposition(11,500, 490);
reposition(12, 590, 490);
reposition(13, 680, 490);
reposition(14, 770, 490);
reposition(15, 240, 560);
reposition(16, 325, 560);
reposition(17, 410, 560);
reposition(18, 500, 560);
reposition(19, 590, 560);
reposition(20, 680, 560);
reposition(21, 770, 560);
reposition(22, 240, 630);
reposition(23, 325, 630);
reposition(24, 410, 630);
reposition(25, 500, 630);
reposition(26, 590, 630);
reposition(27, 680, 630);
reposition(28, 770, 630);

</script>

Und hier noch der Pretest-Link direkt zu der "betroffenen" Seite:
https://www.soscisurvey.de/test129351/?act=BJShEngqZZjaAKaKwxcceceJ

---

Sie dürfen meinen vorherigen Kommentar ignorieren, ich habe auch hier das Problem gerade selbst gelöst. Vielen lieben Dank für Ihre Hilfe!

(wenn ich einfach die Breite der Frage über <div style anpasse, klappt es genau so, wie ich es mir vorgestellt habe :) )