en:modul:m291:learningunits:lu05:aufgaben:17

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu05:aufgaben:17 [2025/03/22 09:29] – angelegt vdemiren:modul:m291:learningunits:lu05:aufgaben:17 [2025/03/28 12:12] (aktuell) – vdemir
Zeile 4: Zeile 4:
   * Work type: Individual   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.   * 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   * Expected result: A Vue script that uses the v-for directive combined with v-if
  
 ===== Learning objectives ===== ===== Learning objectives =====
-  - Displying an multidimensional array using v-for and v-if+  - Display an multidimensional array using v-for and v-if
  
 ===== Source ===== ===== 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.s17.zip | Source code of the solution}} +===== Assignment  ======
- +
- +
-===== Assignment 1 ======+
 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.  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. 
- +
- +
-  - Go to the link to the task mentioned in the source and save it with the appropriate name in your W3School workspace. +
-  - Change the first x to z and observe what happens.  +
- +
- +
-===== Assignment 2 ===== +
-It can happen, that besides the image, we also want to display the description of our products on our website. That means, that it is time for some elbow grease. We want to handle a multi-dimensional array. Have fun with the challenge. +
- +
-  - E.g.: Multidimensional arrays are manages as follows: **manyBeaches: [{name: 'Sunset', url: './public/beach1.jpg', stat: 'Nice'}, ... ]** +
-  - Name the already existing entries: **img** +
-  - As we just changed the dimension of our array, we need to adjust the call in the v-for-part from z to z.img. +
-  - Add a <figure>-tag just after the div tag, and resettle the v-for in it. The end of the  +
-  - Execute your script. If everthing was done properly you will see the images as before. +
-  - Now add a comment-column to you food-list (array). If you like it: **OK**. If not: **NOK** +
-  - Display the comment with a figcaption-tag by using **z.comm** within a double bracket **{{}}**.  +
-  - Execute your script. If everthing was done properly you will see the images as before AND the comment below the image. +
-  - Do the same with the names of the dishes. +
-  - Execute your script. If everthing was done properly you will see the images as before, the status, but now also the names of the dishes.  +
-  - Comment you script accordingly an save it.+
  
- +  - 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 ===== ===== Solution =====
-[[en:modul:m291:learningunits:lu05:loesungen:16|Lösung]]+[[en:modul:m291:learningunits:lu05:loesungen:17|Lösung]]
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/17.1742632142.txt.gz
  • Zuletzt geändert: 2025/03/22 09:29
  • von vdemir