Größe des Auswahlsfelds bei einer Zuordnungsfrage

Größe des Auswahlsfelds bei einer Zuordnungsfrage

von Jörg Weißenhorner -
Anzahl Antworten: 1

Hallo zusammen,

ich habe folgendes Problem:

In einem Kurs sollen EKG-Streifen mittels Zuordnungsfrage eingeschätzt werden. Das klappt soweit auch wie gewünscht. Problematisch wird es allerdings bei kleineren Monitorbreiten. Hierbei werden die Grafiken so klein skaliert, bis sie schließlich nicht mehr erkennbar sind.

Wie kann ich in diesem Setting die Darstellung der Grafiken mit einer Mindest-Darstellungsgröße festlegen? Oder die Breite des Auswahlfeldes reduzieren? Oder gibt es eine weitere elegante Herangehensweise, denn gerade bei geringeren Darstellungsbreiten, wie sie sich auf manchen portablen Geräten finden, hat der betroffene Teilnehmer sonst keine Chance.


Besten Dank vorab

Jörg

Anhang Screenshot_1.jpg
Anhang Screenshot_2.jpg
Mittelwert:  -
Als Antwort auf Jörg Weißenhorner

Re: Größe des Auswahlsfelds bei einer Zuordnungsfrage

von Martin Smaxwil -
Nutzerbild von Besonders aktive Moodler

Hi.

Das gesamte "Antwortformular" der Zuordnungsfragen ist im HTML als Tabelle angelegt, so dass die Abbildung immer neben dem Zuordnungs-DropDown dargestellt wird. HTML-Tabellen sind recht schwer zu manipulieren.

Und: Bilder werden vom Editor meist mit der Klasse "img-responsive" versehen, so dass dieses auf die Bildschirmbreite reagiert (und eben immer kleiner wird, je weniger Platz zur Verfügung steht). Das DropDown nimmt sich dagegen einfach den Platz, den es braucht.

Man könnte mit einem kleinen CSS 'Hack'

  1. eine Mindestbreite für Bilder angeben und
  2. die Tabellen-Zeilen zwischen dem Bild und dem Drop-Down umbrechen.

Trage dafür (z.B. beim Boost-Theme) unter

> Website-Administration
> Darstellung
> Designs
> Boost
> Tab: Erweiterte Einstellung
> Feld: Raw SCSS

folgendes ein:

.match table.answer td.text {
    min-width: 350px;
}
.match table.answer td {
    display: table-row;
}
Wenn das Ganze erst ab einer bestimmten Bildschirmbreite (z.B. bis maximal 576px Breite) greifen soll, könnte man das Ganze auch in sog. Media Queries einbetten:

@media (max-width:576px) {
    .match table.answer td.text {
        min-width: 350px;display: block;
    }
    .match table.answer td {
        display: table-row;
    }
}

Berichte mal, ob das ungefähr funktioniert.

Details können wir dann später noch klären zwinkernd

LG, M

Mittelwert:  -