Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu07:aufgaben:05 [2025/05/09 09:32] – vdemir
+++ en:modul:m291:learningunits:lu07:aufgaben:05 [2025/05/26 16:21] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU07.A05 - Cascading methods - TBD ======
+====== LU07.A05 - Mood measurement, realized with methods======
 ===== Prerequisites  =====
   * Work type: Individual
   * Means of aid: only teaching materials, no websearch, no use of ai.
-  * Timeframe: 40 Minutes
+  * Timeframe: 20 Minutes
-  * Expected result: ????
+  * Expected result: a vue application, that reflects the mood of the user.
+===== Source =====
+  * {{ :en:modul:m291:learningunits:lu06:lu06.s04.zip | Take the solution LU06.S04 and adjust it as required. }}
-===== Learning Objectves =====
+===== Assignments  ======
-  - ???
+Realize the assignment **LU07.A05 - Events - Mood measuremen** by using methods:
+  - Display a heading: **Choose Your Mood**.
+  - Add three buttons, each representing a different mood, e.g:
+    * 😊 Happy
+    * 😢 Sad
+    * 😠 Angry
+    * 😢 Desperate
+    * 😕 Confused
+    * 😅 Glad
+  - Use the v-on directive to update a data property called mood based on the button clicked.
+  - Display a custom message below the buttons that changes based on the selected mood.
+  - When no mood is selected, show a default message prompting the user to pick one.
-===== Source =====
+===== Hint =====
-  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_methods_helloWorld |Code-example: Methods in VUE]]
+  - When clicking a button, just pass a number to the method with the messages.
+  - In that methods a if (selction) checks the content of the argument and displays the corresponding message.
-===== Assignment: ???  =====
-  * ???
 ===== Solution =====
@@ Zeile 22: / Zeile 33: @@
 ^ English ^ German ^
 | ... | ... |