Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu19:theorie:02 [2025/06/20 12:36] – vdemir
+++ en:modul:m291:learningunits:lu19:theorie:02 [2025/06/26 10:50] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU19a - Aufgabe 1 / Task 02: v-bind, v-if, ... - TBD ======
+====== LU19a - Aufgabe 1 / Task 02: v-bind, v-if, ... ======
 ===== Administration =====
@@ Zeile 6: / Zeile 6: @@
 **Klasse:** ....................................
-**Vorname:** .................................
+**Vorname:** ...................................
 **Name:** ......................................
 ===== Vorarbeit =====
-  * Verwenden Sie als Basis zu dieser Aufgabe die Lösung **LU05.S09.html**
+  * Sie können als Vorlage für diese Aufgabe die Lösung **LU05.S09.html** verwenden.
   * Das entsprechende Bild, dass aktuell angezeigt wird, kann in Ihrer Lösung variieren (kann anders sein).
 ===== Ausgangslage =====
-Beim Auftrag **LU05.S09.html** wurde der Lagerbestand von Schreibmaschinen in 4 Gruppen ausgegeben:
+Beim Auftrag **LU05.A09.html** wurde der Lagerbestand von Schreibmaschinen in Gruppen ausgegeben:
   - //Plenty in Stock//
   - //In Stock//
@@ Zeile 22: / Zeile 22: @@
   - //Not in Stock//
-Die Hintergrundfarbe blieb bei allen 3 Meldungen gleich gün.
+Die Hintergrundfarbe blieb bei allen Meldungen grün.
 {{:en:modul:m291:learningunits:lu19:theorie:lu09.s09_start.png?400|}}
 ===== Auftrag =====
-  * Veränderung Sie die Anzeige dahingehend, dass bei jeder Meldung die Text-Hindergrundfarbe sich nach dem Ampelprinzip verändert.
+  * Veränderung Sie die Anzeige dahingehend, dass bei jeder Meldung die Text-Hintergrundfarbe sich nach dem Ampelprinzip verändert.
-    * Grün: Es hat genug Lagerbestand
+    * Grün:  Es hat an Lager bzw. es hat reichlich an Lager
     * Orange: Es hat weniger an Lager
-    * Grün: Es hat an Lager bzw. es hat reichlich an Lager
+    * rot: Es hat keine mehr an Lager
-  * Realisieren sie die Farbanpassungen anhand von 2 neuen CSS-Klassen **outOfStockClass** und **lowStockClass**, die mittels v-bind beim entsprechenden <p>-Tag eingebaut werden müssen,
+  * Realisieren sie die Farbanpassungen anhand von 2 neuen CSS-Klassen **outOfStockClass** und **lowStockClass**, die mittels v-bind beim entsprechenden <p>-Tag eingebaut werden müssen.
+  * Der jeweilige Warenbestand muss auch angezeigt werden.
 **Hinweis**
@@ Zeile 37: / Zeile 39: @@
   * Der Farbton ist nicht relevant.
-^Zieluzustand 1 ^Zielzustand 2 ^Zielzustand 3 ^
+^Zielzustand 1 | Wenn es **an Lager** oder **reichlich an Lager** hat | {{:en:modul:m291:learningunits:lu19:theorie:t02_ziel1.png?400|}} |
-|Wenn es **an Lager** oder **reichlich an Lager** hat | Es hat nur noch **wenig an Lager** | Schreibmaschinen hat es **keine an Lager** |
+^Zielzustand 2 | Es hat nur noch **wenig an Lager** | {{:en:modul:m291:learningunits:lu19:theorie:t02_ziel2.png?400|}} |
-| {{:en:modul:m291:learningunits:lu19:theorie:lu09.a02_ziel1.png?400|}} | {{:en:modul:m291:learningunits:lu19:theorie:lu09.a02_ziel2.png?400|}}| {{:en:modul:m291:learningunits:lu19:theorie:lu09.a02_ziel3.png?400|}}  |
+^Zielzustand 3 | Schreibmaschinen hat es **keine an Lager** | {{:en:modul:m291:learningunits:lu19:theorie:ta02_ziel3.png?400|}} |
 -----