Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| en:modul:m291:learningunits:lu06:aufgaben:07 [2025/04/28 12:16] – vdemir | en:modul:m291:learningunits:lu06:aufgaben:07 [2025/04/28 13:28] (aktuell) – vdemir | ||
|---|---|---|---|
| Zeile 4: | Zeile 4: | ||
| * 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: | + | * Timeframe: |
| - | * Expected result: Changing the color of a area which the reactiing to events e.g. simple-click, mouseover, mouse.right-click | + | * Expected result: Changing the colour |
| - | * | + | * simple-click |
| + | * mouseover | ||
| + | * mouse.right-click | ||
| + | * mouse-left-click | ||
| + | * mouse-middle-click | ||
| ===== Source ===== | ===== Source ===== | ||
| * [[https:// | * [[https:// | ||
| ===== Assignments | ===== Assignments | ||
| - | 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 | + | 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 |
| + | |||
| + | {{: | ||
| + | | ||
| ==== Assignment A ==== | ==== 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. | - 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 < | - Make sure that you have the title < | ||
| - | - After moving the mouse over the color area the background-color should change randomly. Behind this effect there is a sophisticated Math-Operation. | + | - After moving the mouse over the colour |
| - | - Replace the math-method with a simple | + | - Replace the math-method with a **simple |
| - | - Your result should look as following | + | - Start with the **colour value of 0**. |
| - | {{: | + | |
| - | - 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. | + | ==== Assignment B ==== |
| - | - And finally, count as well how many time the foods were clicked in total. | + | - Add another area for the a **right-click** event. |
| - | | + | - Start with a **colour value of 120** |
| - | - In order to display the food-images, | + | - Decrement **step-size is 2** |
| - | - Needless to say, that the image-path must be adjusted, e.g. " | + | |
| - | | + | |
| - | {{: | + | ==== 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 ===== | ===== Solution ===== | ||
| Zeile 37: | Zeile 59: | ||
| | to compraise | beinhalten | | | to compraise | beinhalten | | ||
| | sophisticated | raffiniert, anspruchsvoll | | | sophisticated | raffiniert, anspruchsvoll | | ||
| + | | appearance | Erscheinung | | ||
| ---- | ---- | ||
| [[https:// | [[https:// | ||