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 13:13] – [Prerequisites] 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** | ||
| | ||
Zeile 54: | Zeile 54: | ||
===== Solution ===== | ===== Solution ===== | ||
[[en: | [[en: | ||
+ | |||
===== Vocabulary ===== | ===== Vocabulary ===== | ||
^ English ^ German ^ | ^ English ^ German ^ |