Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:aufgaben:11 [2025/01/27 14:43] – vdemir
+++ en:modul:m291:learningunits:lu05:aufgaben:11 [2025/03/28 09:15] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05.A11 - v-if and functions ======
+====== LU05.A11 - v-if, v-else ...  combined with AND/OR operators ======
 ===== Prerequisites  =====
   * 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 displays HTML elements based on input values.
 ===== Learning objectives =====
   - Explaining the The directive //v-if// in your own word.
-  - Being able to apply v-if in combination wit a function
+  - Being able to apply v-if in combination with AND/OR operators
-===== Source =====
+===== Hint =====
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_pizza |Code-example: v-if pizza 1]]
+  * Use the following code-example since it provides you with the basic structure of a Vue file.
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_pizza2 |Code-example: v-if  pizza 2]]
+  * Delete first of all the image, and then begin from the scratch to build up your program logic following the requirements of the assigment.
+  * To meet the requirements you will need an additional variable //hasAdult//, which is from type //bool//.
+===== Sourcecode =====
+  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-if_typewriters3 |Code-example]]
-===== Assignment 1 ======
+===== Assignment ======
-As we are now capable to use v-if with logical values (true/false), and furhtermore check actual values e.g. numbers, this assignment is about hoch to check stings (words). For this we are going touse the function //text.includes()</b> within our v-if.
+This assignment combines //-vif// with the using of local //AND/OR//-operators. That means that several rules must be obeyed in the if-clause.
-  - Execute the script. As you can see the content of the variable text is displayed on the screen.
+  - People under the age of 12 are not allowed to go to the cinema.
-  - Now delete the word //Pizza// from the variable text. Execute your script again.
+  - Execute your script and check the result. Proceed only, if the result is correct.
-  - Note your realisations as a html-comment.
+  - Under 12 and with adult company they are allowed to up to 6 o'clock pm.
-  - Save your script acoordingly, whether in your W3School workspace or on you local computer in your code-editor Webstorm
+  - Execute your script and check the result. Proceed only, if the result is correct.
+  - Between 12 and 16 they are allowed up to 6 o'clock pm, even without an adult company.
-===== Assignment 2 ====
+  - Execute your script and check the result. Proceed only, if the result is correct.
-In the if paragraph there is a image of a pizza displayed as well.
+  - Between 12 and 16 they may attend to screenings if they are accompanied by an adult.
+  - Execute your script and check the result. Proceed only, if the result is correct.
-  - Add a section //v-else with a according //img-tag// which shows a different image than a pizza.
+  - Person older than 16 may go to the cinemas without time restriction.
-  - Note your realisations as a html-comment.
+  - Execute your script and check the result. Proceed only, if the result is correct.
-  - Save your script acoordingly, whether in your W3School workspace or on you local computer in your code-editor Webstorm
+  - Comment and save your script your results accordingly.
 ===== Solution =====
-[[en:modul:m291:learningunits:lu05:loesungen:10|Lösung]]
+[[en:modul:m291:learningunits:lu05:loesungen:11|Lösung]]
@@ Zeile 37: / Zeile 42: @@
 ^ English ^ German ^
 | afterwards | anschliessend|
-| accordingly | entsprechend
+| accordingly | entsprechend |
+| to obey | folgen, gehorchen |
+| requirement | Anforderung |
+| to proceed | weitermachen |