en:modul:m291:learningunits:lu05:aufgaben:13

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu05:aufgaben:13 [2025/03/14 16:20] – vdemiren:modul:m291:learningunits:lu05:aufgaben:13 [2025/03/20 10:54] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU05.A12 - v-show simple applied to texts ============+====== LU05.A13 - v-show applied to images ======
  
 ===== Prerequisites  ===== ===== Prerequisites  =====
   * 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: 20 Minutes +  * Timeframe: 15 Minutes 
-  * Expected result: A Vue script that fades-in and fades-out a given text.+  * Expected result: A Vue script that fades-in and fades-out images.
  
 ===== Learning objectives ===== ===== Learning objectives =====
-  -  Using v-show  to simple text examples. +  -  Using v-show  to simple image examples. 
  
 ===== Source ===== ===== Source =====
Zeile 14: Zeile 14:
      
 ===== Assignment ====== ===== Assignment ======
-The assignment is basically to use the v-show directive to a given text to hide or to make it visible. This is managed by using the parameter, which will be set to true or false. +This assignment about fading-in and fading-out of images by using the vue-directive v-show in the concerning HTML-Tag. Similar to the previous assignment this is realized by changing the value of the v-show-attribute between //TRUE// and //FALSE//. 
  
   - Click the link above to the code-exambpe to get to the W3School-TryOut area.   - Click the link above to the code-exambpe to get to the W3School-TryOut area.
-  - Save the code with a suitable name+  - Save the code with a suitable name, such as LU05.S13.html.
   - Have it run by clicking the //run-button//.   - Have it run by clicking the //run-button//.
-  - Change the status of the variable //showDiv// within the values true and false, and observe the result carefully.  +  - Search in the internet for images of bulbs and save it in your workspace in the director //media// 
-  - What happens if you set the values of the variable //showDiv// to //-1, 0, 1, 2, etc.// +  - Create a own image-tag. 
 +  - Use the v-show directive for the visibality of the bulb by stearing it with the //v-show// by changing the value of //showDiv// between //true// and //false//.
   - Note the result as a html-comment und beobachten Sie die Reaktion der Applikation.   - Note the result as a html-comment und beobachten Sie die Reaktion der Applikation.
   - Save your result, you may need it as a exam-preparation.   - Save your result, you may need it as a exam-preparation.
-  + 
 ===== Solution ===== ===== Solution =====
 [[en:modul:m291:learningunits:lu05:loesungen:13|Lösung]] [[en:modul:m291:learningunits:lu05:loesungen:13|Lösung]]
Zeile 31: Zeile 33:
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-| ... | ... | +| bulb | Glühbirne | 
-| ... | ... |+
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/13.1741965636.txt.gz
  • Zuletzt geändert: 2025/03/14 16:20
  • von vdemir