ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-23 14:26:45 +02:00
parent 7c76b37a32
commit ae62a154b3
16 changed files with 166 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
01_grundlagen/uebungen/u19-u20-quiz-1.html Normal file
View File

@@ -0,0 +1,106 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 19 und 20: Die dunkle Seite von JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 19: Die dunkle Seite von JavaScript</h2>
<p>
Programmieren Sie nun Stück für Stück ein kleines Quiz, in dem ein Spieler Fragen zu JS beantworten muss und
damit gegen Fehler und schlechten Code — also die dunkle Seite von JS — antritt. Möge der Source mit Ihnen
sein.
</p>
<ol class="list">
<li>
<p>
Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und
begrüßen ihn mittels einer Alert-Box. Ergänzen Sie den folgenden Code:
</p>
<pre>
<code> 'use strict'; let username = … alert(…); </code></pre>
</li>
<li>
<p>
Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript
anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben. Die Antwort speichern Sie
in einer neuen Variable und erstellen als Nächstes eine
<code>if</code>-Verzweigung. Der Rumpf des <code>if</code> soll nur ausgewertet werden, wenn der Spieler
bestätigt, dass er sich stark genug fühlt, das Spiel zu beginnen. In den Rumpf schreiben wir ein
<code>alert</code>, das den Spielstart bestätigt und den Spieler anfeuert.
</p>
<p>
Für den Fall, dass der Spieler zu feige ist und einen mangelnden Fitness-Grad angegeben hat, schreiben
Sie eine weitere
<code>if</code>-Verzweigung, die den Fall abfängt und den Spieler mit Schimpf und Schande verabschiedet.
Natürlich dürfen Sie auch freundlich bleiben — ganz wie Sie mögen.
</p>
<blockquote>
<strong>Tipp:</strong> Schon während Sie das Programm entwickeln, sollten Sie es immer wieder testen.
Führen Sie nach jeder Änderung das Programm erneut aus!
</blockquote>
</li>
<li>
<p>
Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe. Deklarieren Sie nach dem alert
eine neue Variable, in der Sie die Antwort des Spielers zu folgender Frage speichern:<br />
<code>»Which Operator has the higher priority: * or + ?«</code>
</p>
<p>
Um auf die Antwort reagieren zu können, schreiben Sie eine weitere
<code>if</code>-Verzweigung, deren Rumpf nur ausgewertet wird, wenn die Antwort stimmt.
</p>
<p>
<code>alert</code> gratuliert hier zur korrekten Antwort. Wenn Sie mögen, können Sie noch weitere
Verzweigungen mit Fragen einbauen.
</p>
</li>
<li>
<p>
Fügen Sie ein weiteres <code>if</code> für die Variante ein, in der der Spieler eine falsche Antwort
gibt.
</p>
</li>
</ol>
</div>
<div class="alert alert-primary">
<h2>Übung 20: Die dunkle Seite von JavaScript</h2>
<p>
Für Ihr Spiel ist else ebenfalls hilfreich. Zum Beispiel bei der Frage, ob der Spieler bereit zum Spielen
ist. Statt hier ein zweites
<code>if</code> einzubauen, können Sie <code>else</code> verwenden.
</p>
<p>Ersetzen Sie die <code>if</code>-Anweisungen an den richtigen Stellen durch ein <code>else</code>:</p>
</div>
<div class="alert alert-primary">
<h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
<p>
Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
»Kampf-Sequenzen«:
</p>
<ul class="list">
<li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
<li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
</ul>
</div>
</div>
</main>
<script>
'use strict';
const QUESTION_1 = 'Which Operators has the higher priority: * or + ?';
const SOLUTION_1 = '*';
// 1.Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und begrüßen ihn mittels einer Alert-Box.
// 2.Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben.
// 3.Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe.
</script>
</body>
</html>