Mehrfachauswahl - Abstand zwischen Kärtchen ungleich

Question

In einer Aufgabe müssen TeilnehmerInnen gewisse Wörter in einem Satz auswählen (zB Beispiele für present perfect tense). Habe mich für das Format einer Mehrfachauswahl mit Kärtchen entschieden. Können Sie mir bitte helfen, dass der Abstand zwischen den Kärtchen gleich groß ist? "Abstand quer" unter "Auswahloptionen" verschiebt die Kärtchen zwar, aber der Abstand ist nach wie vor ungleich. Pre-test der Seite:

https://www.soscisurvey.de/terminology/?act=Pd6IhdZazwTuojZvbpAZAtNe

Vielen Dank!

Answer 1

Danke für den Pretest-Link!

In Ihrem Fall ist es so, dass Sie eine relativ schmale Breite für die Kärtchen vorgegeben haben. Bei einigen Kärtchen reicht das nicht für das jeweilige Wort. Das Kärtchen wird dadurch breiter.

Was rein rechnerisch nicht möglcih sein wird ist, dass alle Kästchen gleich breit sind und alle Abstände gleich. Dafür reicht der Platz nicht.

Wählen Sie als erstes die Darstellung "zeilenweise" - dabei erfolgt der Aufbau ein wenig anders als bei "spaltenweise". Anschließend könnte man mit ein wenig CSS noch dafür sorgen, dass die Kärtchen immer nur so viel Platz einnehmen, wie für das Wort jeweils erforderlich.

Comments

Na klar doch...

#P104_tab div.dynamic div.place {
  margin-bottom: 0;
}
s2iSelection.rows.cards div.place {
  padding: 0;
}

Und vielleicht möchten Sie auch das noch versuchen:

.s2iSelection.cards div.option {
  border-left: 0 none;
  border-right: 0 none;
}

---

Der erste Code scheint nicht zu funktionieren (der Zweite funktioniert, aber das wär für die Schüler unübersichtlicher):

https://www.soscisurvey.de/terminology/?act=1wsQtty2UOCLaqWo9AheoxxI

---

Ich vergaß zu erwähnen, dass der o.g. CSS-Code auf spezifische Fragen bezogen ist. Auf der Seite mit Frage P106 müsste es also #P106 statt #P104 heißen. Allerdings lässt es sich auch generischer formulieren:

div.dynamic div.place {
  margin-bottom: 0 !important;
}
.s2iSelection.rows.cards div.place {
  padding: 0;
}

Vorsicht: Beim zweiten Befehl hatte ich auch noch den führenden Punkt vergessen.

---

Leider funktioniert es auch so nicht (siehe gleicher pre-test link). Mein PHP Code lautet:

pageCSS('
  .s2iSelection.cards div.option {
     margin: 0.5em 0
  }
.s2iSelection.dynamic div.place {
  display: inline-block;
}
.s2iSelection.dynamic.rows {
  display: block;
}
div.dynamic div.place {
  margin-bottom: 0 !important;
}
s2iSelection.rows.cards div.place {
  padding: 0;
}
');

---

Wie oben geschrieben: Da fehlt noch ein Punkt vor dem "s2iSelection".