Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung | |||
| en:modul:m291:learningunits:lu06:aufgaben:07 [2025/04/28 13:24] – vdemir | en:modul:m291:learningunits:lu06:aufgaben:07 [2025/04/28 13:28] (aktuell) – vdemir | ||
|---|---|---|---|
| Zeile 5: | Zeile 5: | ||
| * 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: 30 Minutes | * Timeframe: 30 Minutes | ||
| - | * Expected result: Changing the color of a area which the reactiing to events e.g. | + | * Expected result: Changing the colour |
| * simple-click | * simple-click | ||
| * mouseover | * mouseover | ||
| Zeile 16: | Zeile 16: | ||
| ===== 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 |
| {{: | {{: | ||
| Zeile 24: | Zeile 24: | ||
| - 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 increment** operation with **step-size 1**. | - Replace the math-method with a **simple increment** operation with **step-size 1**. | ||
| - | - Start with the **color value of 0**. | + | - Start with the **colour |
| ==== Assignment B ==== | ==== Assignment B ==== | ||
| - Add another area for the a **right-click** event. | - Add another area for the a **right-click** event. | ||
| - | - Start with a **color value of 120** | + | - Start with a **colour |
| - Decrement **step-size is 2** | - Decrement **step-size is 2** | ||
| ==== Assignment C ==== | ==== Assignment C ==== | ||
| - Add another area for the a **left-click** event. | - Add another area for the a **left-click** event. | ||
| - | - Start with a **color value of 240** | + | - Start with a **colour |
| - Increment **step-size is 5** | - Increment **step-size is 5** | ||
| ==== Assignment C ==== | ==== Assignment C ==== | ||
| - Add another area for the a **left-click** event. | - Add another area for the a **left-click** event. | ||
| - | - Start with a **color value of 240** | + | - Start with a **colour |
| - Increment **step-size is 5** | - Increment **step-size is 5** | ||
| ==== Assignment D ==== | ==== Assignment D ==== | ||
| - Add another area for the a **mouseover** event. | - Add another area for the a **mouseover** event. | ||
| - | - Start with a **color value of 360** | + | - Start with a **colour |
| - Decrement **step-size is 10** | - Decrement **step-size is 10** | ||
| | | ||