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:12 [2025/03/04 12:59] vdemiren:modul:m291:learningunits:lu05:aufgaben:12 [2025/03/28 09:33] (aktuell) vdemir
Zeile 1: Zeile 1:
-====== LU05.A11 - v-if, v-else ...  combined with AND/OR operators ======+====== LU05.A12 - v-show simple applied to texts ============
  
 ===== 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: 10 Minutes 
-  * Expected result: A Vue script that displays HTML elements based on input values.+  * Expected result: A Vue script that fades-in and fades-out a given text.
  
 ===== Learning objectives ===== ===== Learning objectives =====
-  - Explaining the The directive //v-if// in your own word.   +  -  Using v-show  to simple text examples. 
-  - Being able to apply v-if in combination with AND/OR operators+
  
 ===== Source ===== ===== Source =====
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_typewriters3 |Code-example]]+  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-show_div v-show code-example]]
      
 ===== Assignment ====== ===== Assignment ======
-This assignment combines //-vif// with the using of local //AND/OR//-operatorsThat means that several rules must be obeyed in the if-clause.+The assignment is basically to use the v-show directive to a given text to hide or to make it visibleThis is managed by using the parameter, which will be set to true or false
  
-  - People under the age of 12 are not allowed to go to the cinema.  +  - Click the link above to the code-exambpe to get to the W3School-TryOut area
-  - Execute your script and check the result. Proceed only, if the result is correct. +  - Save the code with a suitable name 
-  - Under 12 and with adult company they are allowed to up to 6 o'clock pm+  - Have it run by clicking the //run-button//
-  - Execute your script and check the result. Proceed only, if the result is correct. +  - Change the status of the variable //showDiv// within the values true and false, and observe the result carefully.  
-  - Between 12 and 16 they are allowed up to 6 o'clock pmeven without an adult company.  +  - What happens if you set the values of the variable //showDiv// to //-1, 0, 1, 2, etc.//  
-  - Execute your script and check the result. Proceed only, if the result is correct+  - Note the result as a html-comment und beobachten Sie die Reaktion der Applikation
-  - Between 12 and 16 they may attend to screenings if they are accompanied by an adult+  - Save your result, you may need it as a exam-preparation.
-  - Execute your script and check the result. Proceed only, if the result is correct. +
-  Person older than 16 may go to the cinemas without time restriction+
-  - Execute your script and check the result. Proceed onlyif the result is correct. +
-  Comment and save your script your results accordingly.+
      
-**Hint** 
-To meet the requirements you need to use an additional variable //hasAdult//, which is from type //bool//. 
- 
 ===== Solution ===== ===== Solution =====
 [[en:modul:m291:learningunits:lu05:loesungen:12|Lösung]] [[en:modul:m291:learningunits:lu05:loesungen:12|Lösung]]
Zeile 39: Zeile 31:
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-afterwards anschliessend+... ... 
-accordingly entsprechend |+... ... |
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/12.1741089560.txt.gz
  • Zuletzt geändert: 2025/03/04 12:59
  • von vdemir