Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:aufgaben:17 [2025/03/22 10:39] – vdemir
+++ en:modul:m291:learningunits:lu05:aufgaben:17 [2025/03/28 12:12] (aktuell) – vdemir
@@ Zeile 4: / Zeile 4: @@
   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 15 Minutes
+  * Timeframe: 20 Minutes
   * Expected result: A Vue script that uses the v-for directive combined with v-if
 ===== Learning objectives =====
-  - Displying an multidimensional array using v-for and v-if
+  - Display an multidimensional array using v-for and v-if
 ===== Source =====
-This is the result of the previous assignment. Copy + paste the content to your W3School-Workingspace.
+You can take your solution from the recent assignment and extend it with the new features.
-{{ :en:modul:m291:learningunits:lu05:loesungen:lu05.s16.zip | Source code of the solution}}
 ===== Assignment  ======
 After successfully being able to manage 2-dimensional-arrays with the v-for directive, it is time to take next challenge: the combined usage of v-for and v-if.
-Though the assigment is to dispay the pictures only, when they are likes. For that we need to check the status, it they are **OK** we display the image of the dish, if they are **NOK** we simply give out the name and the statu of the dish, but no image of it.
+Though the assignment is to display the pictures only, when they are liked. For that we need to check the status, it they are **OK** we display the image of the dish, if they are **NOK** we simply give out the name and the status of the dish, but no image of it.
-  - Download the provided Vue-Script and copy-paste it to your W3School-workspace.
-  - Save it with a suitable name e.g. LU05.s17
-  - Right after the image-tag add a first **div** container with
-      * v-if statement that checks the status OK
-      * area with the text //I love // and the name of the dish
-      * Mind the colour-change of the text to red
-      * closing div
-  - Execute the the script and proceed only when your script works properly.
-  - Create a second **div** container with
-    * v-else
-    * area with the text //I don't like // and the name of the dish
-    * mind the color change of the text to green
-    *  closing div
+  - Take your result from the previous assignment and safe it **lu05.s17.html**
+  - Add a <div>-tag just before the <img> for the **v-if**. Make shure that the image-tag is within the if-statement.
+    - The output is in that case of **OK**: <color #ed1c24>I like ... </color>
+    - close the div
+  - Execute your script. If everything was done properly you will receive a message what you like, in red letters AND the image of the dish.
+  - Add a second <div> for the **v-else**
+    - The output is in that case of **OK**: <color #22b14c>I don't like  </color>
+    - In that case there is no image to display!!!
+    - close the div
+  - Execute your script. If everything was done properly you will receive a message what you don't like, in green letters, but without the image of it.
 ===== Solution =====