Card Ranking Aufgabe

Question

Hallo,

Bitte um Hilfestellung zur folgenden Seite:

https://www.soscisurvey.de/CrowdWork/?act=f2VAA3ngVTWRf7mppdZTFxmG

• Ist es möglich den Abstand zwischen den Karten und der Linie zu verringern?
• Wie kann ich die Größe der Kärtchen einheitlich groß machen?

Besten Dank!

Answer 1

Ist es möglich den Abstand zwischen den Karten und der Linie zu verringern?

Sie könnten das Bild aus dem Itemtext herausnehmen und in den zusätzlichen Text packen, der nur oben bei den Karten angezeigt wird, aber nicht wenn die Kärtchen platziert werden. Dadurch wird der Abstand automatisch kleiner. SoSci Survey plant nämlich (bisher fix) drei Kartenhöhen Platz ein. Das ist auf Texte ausgelegt.

Der Fragetyp ist aber noch recht neu ... und wir sind uns bewusst, dass es sicher noch Optimierungspotenzial gibt. Demnach würde ich den Wunsch, den Platz für die Platzierung feiner zu regeln, gleich mal in die SoSci-Wunschliste aufnehmen. Vielleicht sagen Sie nochmal kurz Bescheid (einfach unten als Kommentar), ob Sie das nach Test der oben genannten Möglichkeit überhaupt noch brauchen.

Wie kann ich die Größe der Kärtchen einheitlich groß machen?

Am besten sorgen Sie erst einmal für einheitliche Bilder, sodass man dort den Inhalt in gleicher Größe gleichermaßen gut erkennen kann.

Um eine Mindesthöhe für alle Kärtchen festzulegen, würden Sie folgenden PHP-Code auf der Seite verwenden. Vorsicht, das funktioniert nur solange Sie die o.g. Änderung nicht vornehmen. Dann müsste der Code ein wenig anders aussehen.

pageCSS('
    .s2qtCardrate > div.s2items div.s2title {
        min-height: 180px;
    }
');

Comments

Zurzeit sind die Kärtchen so definiert: <p>Data extraction from receipts</p><img src="rankrec.png" >

Wie müsste der Code aussehen dass das Bild sich im Text befindet, jedoch der Text nicht in der Mitte gespaltet wird?

---

Ich sehe, dass es im Moment (zumindest in Firefox) auch noch Schwierigkeiten gibt, wenn man auf das Bild klickt und nicht auf den Text. Das nehme ich noch auf die TODO-Liste.

Was meinen Sie genau mit " der Text ... gespaltet wird"? Den Zeilenumbruch? Dieser ließe sich vermeiden, wenn Sie breitere Kärtchen verwenden, aber ich denke, dass es dann ziemlich unübersichtlich wird, zumal die Kärtchen oben dann noch mehr Platz benötigen würden.

---

Also wenn ich das Bild mit in den Textabsatz nehme wird das Bild zwischen dem Text platziert (Ein Teil Text davor und ein Teil danach).

Oder was haben Sie mit "das Bild aus dem Itemtext herausnehmen und in den zusätzlichen Text packen" genau gemeint?

---

> Also wenn ich das Bild mit in den Textabsatz nehme wird das Bild zwischen dem Text platziert (Ein Teil Text davor und ein Teil danach).

Ähm ja, das ist normal ... aber warum würden Sie das Bild mitten im Text platzieren wollen? Und hat das noch etwas mit der ursprünglichen Frage zu tun oder ist das bereits die nächste Frage?

---

Nein ich möchte nicht dass das Bild mitten im Text steht. Das Bild soll unterhalb des Textes stehen. Ja Ziel ist immer noch dass der Abstand zwischen den Bildern und der Linei kleiner wird.

Das heißt das Bild kommt in das Beschreibungsfeld neben dem Textfeld, damit die Kärtchengröße verringert wird?

---

> Das heißt das Bild kommt in das Beschreibungsfeld neben dem Textfeld, damit die Kärtchengröße verringert wird?

Ja, bitte schreiben Sie den HTML-Code für das Bild einmal in das Eingabefeld für die Beschreibung. Entfernen Sie derweilen bitte auch nochmal den PHP/CSS-Code für die einheitliche Kärtchengröße, damit Sie die Änderung sehen. Sagen Sie dann nochmal Bescheid, dann schaue ich nochmal auf das Ergebnis.

---

Habe den Code in das Beschreibungsfeld gepackt. Der Abstand wurde kleiner. Jetzt müssten nur die Kärtchen noch auf die selbe Größe gebracht werden.

---

Für die Höhe sollte folgenden CSS-Code helfen:

.s2qtCardrate > div.s2items > div.s2item {
    min-height: 200px;
}

Wenn Sie die Breite noch einen Tick reduzieren, dann sollten auch 4 Kärtchen in die Zeile passen, sodass es insgesamt übersichtlicher wird.

---

Danke. Kann die Breite mit "min-height:" eingestellt werden?

---

Ähm ... ich sehe gerade, dass man die Breite der Kärtchen noch gar nicht ändern kann. Diese ist noch fix auf 180 Pixel eingestellt. Aber es scheint so, dass Sie damit trotzdem gut zurecht gekommen sind? Zumindest werden mir die Kärtchen nun in 4 Spalten angezeigt.

---

Also bei mir werden sie noch in drei Reihen dargestellt (4-3-2). Kann es sein dass dies mit dem Nutzer Bildschirm zusammenhängt?

---

Weniger als drei Reihen werden es nicht werden: Selbst ebi 4 Spalten passen 9 Items nicht in 2 Zeilen...

Sie können einmal folgenden PHP- bzw. CSS-Code auf der Seite einfügen, um die Breite auf 120 Pixel zu reduzieren, sodass es in 2 Zeilen passt. Aber so 100%ig überzeugt bin ich nicht davon:

pageCSS('
  #TE01_qst div.s2items {
    display: flex;
    flex-flow: wrap;
  }
  #TE01_qst div.s2items div.s2item {
    flex: 0 0 120px;
  }
');

---

Also von der Größe her würde das schon passen, wenn die Bilder zentriert blieben.

---

Die Bilder sind in der aktuellen Lösung auch nicht zentriert. Sie können das aber natürlich noch ergänzen:

.s2qtCardrate > div.s2items > div.s2item > div.s2desc {
  text-align: center;
}

---

Was stimmt hierbei nicht?

pageCSS('
  #TE01_qst div.s2items {
    display: flex;
    flex-flow: wrap;
  }
  #TE01_qst div.s2items div.s2item {
    flex: 0 0 120px;
  }
.s2qtCardrate > div.s2items > div.s2item > div.s2desc {
  text-align: center;
}
');

---

Haben Sie den PHP-Code auf der Seite eingebunden? Wenn ich den Pretest-Link aufrufe, finde ich es nirgends im Quellcode.

---

Jetzt habe ich es wieder drinnen.

---

Nun sind die Bilder auch mittig ... aber natürlich nur, wenn sie von der Breite passen. Damit alle Bilder passen, müssten Sie diese noch skalieren lassen:

.s2qtCardrate > div.s2items > div.s2item > div.s2desc img {
  max-width: 100%;
}

---

perfekt danke.

---

Ein kurzes Update: Man kann dire Breite der Kärtchen nun direkt in der Frage festlegen - und die Höhe des Ablagebereichs kann man dort ebenfalls nach Bedarf anpassen. Außerdem verursachen die Bilder beim Drag&Drop keine Probleme mehr.