<
und erstelle eine Demo-Website ('create > Demo'). Besuche anschliessend dieselbe Website mit deinem Handy und trete dem Raum bei. Du kannst nun über die
Bewegungssensoren in deinem Smartphone (Accelerometer) den Stift auf der Website steuern.
Es lassen sich auch eigene Websites hochladen, die dann zugriff auf das Event `motionData` erhalten.
</div>
```javascript
on('motionData', function(data){
// data.gameId => uploaded website id
// data.sender => joined device/player id
// data.acceleration.x => value [-9.81, 9.81]
// data.acceleration.y => value [-9.81, 9.81]
// data.acceleration.z => value [-9.81, 9.81]
})
```
<div style="background-color: #f4f142; border-radius: 5px; padding: 12px; border: 1px solid #444;">
Bei der hochgeladenen Website muss die angezeigte Website den Dateinamen `main.html` besitzen. Es können beliebige andere
html-Dokumente, Stylesheets und Javascripts referenziert werden, es müssen sich aber alle im selben Ordner befinden. Unterordner werden nicht unterstützt!
</div>
### Vorbereitung
Baue deine Seite so um, dass sie auf [streaming.bbz.cloud](http://streaming.bbz.cloud) hochgeladen und richtig dargetsellt werden kann. Vermeide wenn
möglich das uploaden von Bildern - wechsel also alle Bilder-Quellen auf deiner Website zu Referenzen auf Webressourcen.
### Hintergrundfarbe
Ändere deine Website so, dass sich die Hintergrundfarbe abhängig von der Ausrichtung deines Smartphones ändert. Benutze die drei Accelerometer-Werte
als RGB-Werte (Beispiel: `$('body').css({'background-color': 'rgb(255, 0, 0)'})` setzt den Hintergrund auf rot).
Beachte, dass die Accelerometer-Werte im Bereich
zwischen `-9.81` und `9.81` liegen. Überlege dir, wie du damit Werte zwischen `0` und `255` erzeugen kannst.
## Lösungen
## Uhrzeit
```html
<body>
<div id='Time'></div>
<script>
var zeit = new Date()
$('#Time').text(zeit)
// oder schöner formatiert
$('#Time').text(zeit.getHours() + ':' + zeit.getMinutes())
// oder mit Erzeugung eines neuen Paragraphs im <div>
var p = $('<p>' + zeit.getHours() + ':' + zeit.getMinutes() + '</p>')
p.appendTo($('#Time'))
</script>
</body>
```
## Uhrzeit 2
```html
<body>
<div id='Time'></div>
<button id='updateTime'>Zeit aktualisieren</button>
<script>
var zeit = new Date()
$('#Time').text(zeit.getHours() + ':' + zeit.getMinutes())
$('#updateTime').on('click', function(e) {
var zeit = new Date()
$('#Time').text(zeit.getHours() + ':' + zeit.getMinutes())
})
</script>
</body>
```
## Wörter anstreichen
```js
$('h1, h2, h3, p').on('click', function(e) {
$(this).addClass('highlighted')
})
```
## Textlänge
```js
var texts = document.querySelectorAll('h1, h2, h3, p');
for(var i = 0; i < texts.length; i++) {
texts[i].addEventListener('click', laenge)
}
function laenge(e) {
var text = this.textContent
alert(text.length)
}
```
]]>