Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu06:aufgaben:07 [2025/04/28 11:02] – angelegt vdemir
+++ en:modul:m291:learningunits:lu06:aufgaben:07 [2025/04/28 13:28] (aktuell) – vdemir
@@ Zeile 4: / Zeile 4: @@
   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 20 Minutes
+  * Timeframe: 30 Minutes
-  * Expected result: a vue script, in which the colour of a of a are change reacting to a to events e.g. mouseover, click, mouse.right-click and mouse-left-click
+  * Expected result: Changing the colour of a area which the reactiing to events e.g.
-  *
+    * simple-click
+    * mouseover
+    * mouse.right-click
+    * mouse-left-click
+    * mouse-middle-click
 ===== Source =====
   * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-on_changeColor|Source-code for the assignment]]
 ===== Assignments  ======
- - Test the code example provided to you: When moving the mouse over a list food elements each element must change the backgroundcolour to grey. After moving the mouse away from the food, the background colour must turn back to white.
+The idea of this assignment is to exercise on the one hand the four basic events, and on the other hand the increment and decrement-operators with various step-sizes. As a base for our exercise we are goint to change the appearance of html-visual-elements such as background colour. Your result should look as following
-  - Make sure that you have the title <h1>  and have the correctl filename: **lu06.s06.html**
-  - Additionally to the current features, we also want to count how many times each food was moved over by the mouse. This count must be shown after each food element.
-  - And finally, count as well how many time the foods were clicked in total.
-  - Save your result in Webstorm, too.
-  - In order to display the food-images, you need to download them and save it in your media-directory.
-  - Needless to say, that the image-path must be adjusted, e.g. "../media/image_burrito.svg"
-  - The result must look as following:
-{{:en:modul:m291:learningunits:lu06:aufgaben:lu06.a06.png?400|Result of the assignment}}
+{{:en:modul:m291:learningunits:lu06:aufgaben:lu06.s07_5.png?500|Result of the assignment A-D}}
+==== Assignment A ====
+  - Test the code example provided to you: When moving the mouse over a list food elements each element must change the backgroundcolour to grey.
+  - Make sure that you have the title <h1>  and have the correctl filename: **lu06.s07.html**
+  - After moving the mouse over the colour area the background-colour should change randomly. Behind this effect there is a sophisticated Math-Operation.
+  - Replace the math-method with a **simple increment** operation with **step-size 1**.
+  - Start with the **colour value of 0**.
+==== Assignment B ====
+  - Add another area for the a **right-click** event.
+  - Start with a **colour value of 120**
+  - Decrement **step-size is 2**
+==== Assignment C ====
+  - Add another area for the a **left-click** event.
+  - Start with a **colour value of 240**
+  - Increment **step-size is 5**
+==== Assignment C ====
+  - Add another area for the a **left-click** event.
+  - Start with a **colour value of 240**
+  - Increment **step-size is 5**
+==== Assignment D ====
+  - Add another area for the a **mouseover** event.
+  - Start with a **colour value of 360**
+  - Decrement **step-size is 10**
+==== Assignment E ====
+  - Add to all four textareas a mouse-middle event which resets all colour to the initial values.
+  - **Hint**: To get the initial values, you need to store te values in separately in the first place: either in 4 variables or in a array with all four initial values.
 ===== Solution =====
-[[en:modul:m291:learningunits:lu06:loesungen:06|Lösung]]
+[[en:modul:m291:learningunits:lu06:loesungen:07|Lösung]]
 ===== Vocabulary =====
 ^ English ^ German ^
-| ... | ...|
+| to compraise | beinhalten |
+| sophisticated | raffiniert, anspruchsvoll |
+| appearance | Erscheinung |
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir