Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ef_informatik:voci_rest [2022-05-31 13:12] – [JavaScript] sca
+++ ef_informatik:voci_rest [2022-05-31 13:16] (aktuell) – sca
@@ Zeile 222: / Zeile 222: @@
 JavaScript einbinden:
-<code html>
+<code html index.html>
 <html>
     <head>
@@ Zeile 245: / Zeile 245: @@
     <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>