Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ef_informatik:voci_rest [2022-05-24 09:58] – [Ein Web-Server mit C#] hof
+++ ef_informatik:voci_rest [2022-05-31 13:16] (aktuell) – sca
@@ Zeile 217: / Zeile 217: @@
 #### Aufgabe: Web-App
   * Verknüpfen von Website und dynamischen Inhalten mit Javascript (TBD).
+## JavaScript
+JavaScript einbinden:
+<code html index.html>
+<html>
+    <head>
+        <title>Voci Trainer</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="voci.css" />
+    </head>
+    <body>
+        <h1>Voci Trainer</h1>
+        <div class="words">
+            <span id="original"></span>
+            <input type="text" id="translation" name="translation" onkeyup="keyup(this, event);">
+            <div class="buttons">
+                <button type="button" id="submit" onclick="submit();">Eingabe</button>
+            </div>
+        </div>
+        <div class="status">
+            <p id="reply"></p>
+            <p id="stats"></p>
+        </div>
+    </body>
+    <script src="voci.js" async></script>
+</html>
+</code>
+JavaScript Code:
+<code javascript voci.js>
+/**
+ * Function called when the user clicks the submit button or presses Enter.
+ */
+async function submit() {
+    // Get the original and translated words, send them to the server.
+    original = document.getElementById("original").innerHTML;
+    translation = document.getElementById("translation").value;
+    uri = `/submit/${original}/${translation}`;
+    let response = await fetch(uri);
+    let response_text =  await response.text();
+    if (!response.ok) {
+        // something unexpected happened...
+        console.log(`Error: ${response_text} in response to '${uri}'`);
+        return;
+    }
+    // Update the status text.
+    document.getElementById("reply").innerText = response_text;
+    // And fetch the next word.
+    next();
+}
+/**
+ * Update the stats.
+ */
+async function updateStats() {
+    uri = '/stats';
+    let response = await fetch(uri);
+    let response_text =  await response.text();
+    document.getElementById("stats").innerText = response_text;
+}
+/**
+ * Fetches a new word to translate. Called automatically after submit(), and initially for the first
+ * word.
+ */
+async function next() {
+    // Ensure the stats are correctly displayed.
+    updateStats();
+    uri = `/random`;
+    let response = await fetch(uri);
+    let response_text =  await response.text();
+    if (!response.ok) {
+        console.log(`Error: ${response_text} in response to '${uri}'`);
+        return;
+    }
+    document.getElementById("original").innerText = response_text;
+    document.getElementById("translation").value = "";
+}
+/** Called when a key is released within input. */
+async function keyup(input, event) {
+    var code = event.code;
+    if (code == "Enter") {
+        submit();
+    }
+}
+// Initial call to fetch the first word.
+next();
+</code>