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

Danke! Das mit zeilenweise sieht schon etwas besser aus. Wie stelle ich ein, dass die Kärtchen nur so viel Platz wie für das Wort notwendig einnehmen?

---

Ergänzen Sie auf der Seite mit folgendem PHP-Code bitte ein wenig CSS:

pageCSS('
  .s2iSelection.cards div.option {
     margin: 0.5em 0
  }
');

Das entfernt den Abstand zwischen den Kästchen. Möchten Sie auch noch den Rahmen entfernen?

---

There is an error in the PHP code:
Questionnaire Error: Command or string (text) unfinished

A command, e.g. question() is missing a semicolon or
a string (text in quotation marks) is unclosed or
the string itself contains an apostrophe, e.g. html('Let's do it!'); – if the latter is the case, please type in a backslash (\) first.
Perhaps the opening and closing braces for the statement blocks are mismatched.
PHP code

002
003 pageCSS('
004   .s2iSelection.cards div.option { margin: 0.5em 0 }
005 }
006 return 'ok';

---

Entschuldigung, ich hatte oben die Klammern falsch gesetzt. Nun korrigiert.

---

Danke, mit dem Satz funktioniert's so super. Bei längeren Sätzen sind dann aber z.B. zwei Wörter in der nächsten Zeile, und die werden dann gestreckt, was die Teilnehmer verwirren würde: https://www.soscisurvey.de/terminology/?act=VgnWBOO0HvuPvrjFLmL0VsuN

---

Sie können hier z.B. folgendes testen:

.s2iSelection.dynamic div.place > div.option {
  flex-grow: 0;
}

Wieder mit einem pageCSS('') außenherum, versteht sich. Oder alternativ:

.s2iSelection.dynamic div.place {
  display: inline-block;
}
.s2iSelection.dynamic.rows {
  display: block;
}

---

Letzteres funktioniert gut, danke! Jetzt noch eine letzte Sache, der Abstand der zwei Zeilen zueinander ist etwas zu groß, hätten Sie dafür bitte auch noch einen Code?

---

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".