Just experimenting with an example quiz. (for #10)

hchiam · Jun 22, 2023 · a1c8111 · a1c8111
1 parent cecc029
commit a1c8111
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 18 deletions.
diff --git a/index.js b/index.js
@@ -1,25 +1,51 @@
-function getSimilarityOfInput() {
-  document.getElementById("get-similarity").style.display = "none";
-  document.getElementById("spinner").style.visibility = "visible";
-  document.getElementById("input").setAttribute("disabled", true);
-  document.getElementById("input").classList.add("disabled");
-  const sentence1 = document.getElementById("sentence1").value;
-  const sentence2 = document.getElementById("input").value;
-  useModel(sentence1, sentence2, showOutput);
+function $(selectorString, scope = document) {
+  return scope.querySelector(selectorString);
 }
 
-function showOutput(similarity) {
+function getSimilarityOfInput(scope = document, callback) {
+  if ($("#get-similarity, .get-similarity", scope)) {
+    $("#get-similarity, .get-similarity", scope).style.display = "none";
+  }
+  if ($("#spinner, .spinner", scope)) {
+    $("#spinner, .spinner", scope).style.visibility = "visible";
+  }
+  $("#input, .input", scope)?.setAttribute("disabled", true);
+  $("#input, .input", scope)?.classList.add("disabled");
+  const sentence1 = $("#sentence1, .sentence1", scope)?.value;
+  const sentence2 = $("#input, .input, .sentence2", scope)?.value;
+  if (sentence1 && sentence2) {
+    useModel(sentence1, sentence2, (similarity) => {
+      showOutput(similarity, scope);
+      if (callback) callback();
+    });
+  }
+}
+
+function showOutput(similarity, scope = document) {
   const percent = similarity * 100;
-  document.getElementById("similarity").innerText = get2Decimals(percent) + "%";
-  document.getElementById("output").style.visibility = "visible";
-  document.getElementById("get-similarity").style.display = "block";
-  document.getElementById("spinner").style.visibility = "hidden";
-  document.getElementById("input").removeAttribute("disabled");
-  document.getElementById("input").classList.remove("disabled");
+  if ($("#similarity, .similarity", scope)) {
+    $("#similarity, .similarity", scope).innerText =
+      getNDecimals(percent, 0) + "%";
+  }
+  if ($("#output, .output", scope)) {
+    $("#output, .output", scope).style.visibility = "visible";
+  }
+  if ($("#get-similarity, .get-similarity", scope)) {
+    $("#get-similarity, .get-similarity", scope).style.display = "block";
+  }
+  if ($("#spinner, .spinner", scope)) {
+    $("#spinner, .spinner", scope).style.visibility = "hidden";
+  }
+  if ($("#input, .input", scope)) {
+    $("#input, .input", scope).removeAttribute("disabled");
+  }
+  if ($("#input, .input", scope)) {
+    $("#input, .input", scope).classList.remove("disabled");
+  }
 }
 
-function get2Decimals(number) {
-  return Math.round(number * 100) / 100;
+function getNDecimals(number, n) {
+  return Math.round(number * 10 ** n) / 10 ** n;
 }
 
 // /**

diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
   "devDependencies": {},
   "scripts": {
     "dev": "npm run start",
-    "start": "open index.html"
+    "start": "open index.html",
+    "quiz": "open quiz_test/index.html"
   },
   "author": "hchiam",
   "license": "MIT",

diff --git a/quiz_test/README.md b/quiz_test/README.md
@@ -0,0 +1,7 @@
+# Just experimenting with an example quiz
+
+In the text-similarity-test folder:
+
+```sh
+npm run quiz
+```
diff --git a/quiz_test/index.html b/quiz_test/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TensorFlow.js Text Similarity Example</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/universal-sentence-encoder"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/gh/hchiam/[email protected]/tfjs-stuff.js"></script> -->
+    <script src="../tfjs-stuff.js"></script>
+    <script src="../index.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/hchiam/[email protected]/style.css"
+    />
+    <link rel="stylesheet" href="../style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <style>
+      .similarity {
+        background: lime;
+        color: black;
+      }
+    </style>
+  </head>
+  <body>
+    <section id="q1">
+      <p>
+        Q1: What is red plus blue? Respond with a one-word sentence with full
+        punctuation.
+      </p>
+      <b>Your answer:</b>
+      <input class="sentence1" type="text" value="A colour." />
+      <i class="spinner fa fa-spinner fa-spin" style="visibility: hidden"></i>
+      <span class="output" style="visibility: hidden">
+        <b>Official answer:</b>
+        <input class="sentence2" type="text" value="Purple." disabled />
+        <br />
+        <span>
+          &nbsp;&nbsp;&nbsp;&nbsp;&rarr; <b>Similarity score:</b>
+          <span class="similarity"></span>
+        </span>
+      </span>
+    </section>
+
+    <section id="q2">
+      <p>Q2: What's one plus one? Just provide the numerical value.</p>
+      <b>Your answer:</b>
+      <input class="sentence1" type="number" value="-42" />
+      <i class="spinner fa fa-spinner fa-spin" style="visibility: hidden"></i>
+      <span class="output" style="visibility: hidden">
+        <b>Official answer:</b>
+        <input class="sentence2" type="number" value="2" disabled />
+        <br />
+        <span>
+          &nbsp;&nbsp;&nbsp;&nbsp;&rarr; <b>Similarity score:</b>
+          <span class="similarity"></span>
+        </span>
+      </span>
+    </section>
+
+    <section id="q3">
+      <p>
+        Q3: In "Avatar the Last Airbender", there are 4 elements mentioned in
+        the intro. What are they? Answer with one sentence with full
+        punctuation, and each element separated by a comma, in the order spoken
+        in the intro.
+      </p>
+      <b>Your answer:</b>
+      <textarea
+        class="sentence1"
+        type="text"
+        placeholder="Element 1, element 2, element 3, element 4."
+        style="display: block"
+      ></textarea>
+      <i class="spinner fa fa-spinner fa-spin" style="visibility: hidden"></i>
+      <span class="output" style="visibility: hidden">
+        <b>Official answer:</b>
+        <textarea
+          class="sentence2"
+          type="text"
+          placeholder="Water, earth, fire, air."
+          disabled
+          style="display: block"
+        >
+Water, earth, fire, air.</textarea
+        >
+        <br />
+        <span>
+          &nbsp;&nbsp;&nbsp;&nbsp;&rarr; <b>Similarity score:</b>
+          <span class="similarity"></span>
+        </span>
+      </span>
+    </section>
+
+    <button
+      class="get-similarity disabled"
+      onclick="getSimilarityOfAllInputs()"
+    >
+      Check answers
+    </button>
+
+    <script>
+      const userInputs = [...document.querySelectorAll(".sentence1")];
+      userInputs.forEach((x) => {
+        x.addEventListener("change", () => {
+          if (!x.value) {
+            $(".get-similarity").classList.add("disabled");
+          } else {
+            const anyUnfilled = userInputs.filter((s) => !s.value).length;
+            if (anyUnfilled) {
+              $(".get-similarity").classList.add("disabled");
+            } else {
+              $(".get-similarity").classList.remove("disabled");
+            }
+          }
+        });
+      });
+
+      function getSimilarityOfAllInputs() {
+        const missingValue =
+          !$("#q1 .sentence1").value ||
+          !$("#q2 .sentence1").value ||
+          !$("#q3 .sentence1").value;
+        if (missingValue) return;
+
+        $(".get-similarity").classList.add("disabled");
+        $(".get-similarity").style.visibility = "hidden";
+
+        // getSimilarityOfInput($("#q1"), () => {
+        //   getSimilarityOfInput($("#q2"), () => {
+        //     getSimilarityOfInput($("#q3"));
+        //   });
+        // });
+        getSimilarityOfInput($("#q1"));
+        getSimilarityOfInput($("#q2"));
+        getSimilarityOfInput($("#q3"));
+      }
+    </script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -1,3 +1,4 @@
+.disabled:focus,
 .disabled:hover {
   background: rgb(32, 32, 32);
   color: whitesmoke;