Coordinate and inner product Set types

Author: faisalnjs

index.html

@@ -115,6 +115,8 @@ <h1><span class="code" data-modal-view="settings/code">000</span></h1>
           <button aria-selected="true" data-value="brackets">&lcub; Brackets &rcub;</button>
           <button aria-selected="false" data-value="vector">&lt; Vector &gt;</button>
           <button aria-selected="false" data-value="array">&lbrack; Array &rbrack;</button>
+          <button aria-selected="false" data-value="coordinate">&lpar; Coordinate &rpar;</button>
+          <button aria-selected="false" data-value="inner">&lang; Inner Product &rang;</button>
         </div>
         <div class="button-grid">
           <input type="text" autocomplete="off" id="set-input" data-set-input="1" />

src/clicker/clicker.js

@@ -103,28 +103,37 @@ try {
         if (mode === "input") {
           return answerInput.value?.trim();
         } else if (mode === "math") {
-          return convertLatexToAsciiMath(mf.value);
+          return convertLatexToAsciiMath(mf.value?.trim());
         } else if (mode === "set") {
-          var values = [];
+          var values = "";
           var setInputs = document.querySelectorAll('[data-set-input]');
           setInputs.forEach(a => {
-            if ((a.value.length > 0) && (a.value != ' ')) values.push(a.value)
+            if ((a.value.length > 0) && (a.value != ' ')) values += a.value.replaceAll(',', '').trim() + ", ";
           });
-          var array = JSON.stringify(values);
+          values = values.slice(0, -2);
           switch (currentSetType) {
             case "brackets":
-              array = `{${array.slice(1, -1)}}`;
+              values = `{${values}}`;
               break;
             case "vector":
-              array = `<${array.slice(1, -1)}>`;
+              values = `<${values}>`;
+              break;
+            case "array":
+              values = `[${values}]`;
+              break;
+            case "coordinate":
+              values = `(${values})`;
+              break;
+            case "inner":
+              values = `⟨${values}⟩`;
               break;
             default:
               break;
           };
-          return array;
+          return values;
         } else if (mode === "frq") {
           if (part && document.querySelector(`[data-frq-part="${part}"]`)) {
-            return document.querySelector(`[data-frq-part="${part}"]`).value;
+            return document.querySelector(`[data-frq-part="${part}"]`).value?.trim();
           } else {
             return frqInput.value;
           };
@@ -591,11 +600,11 @@ try {
             ui.setButtonSelectValue(document.getElementById("answer-mode-selector"), "set");
             resetSetInput();
             var i = 0;
-            JSON.parse(`[${item.answer.slice(1, -1)}]`).forEach(a => {
+            item.answer.slice(1, -1).split(', ').forEach(a => {
               setInputs = document.querySelectorAll("[data-set-input]");
               setInputs[i].value = a;
               i++;
-              if (i < JSON.parse(`[${item.answer.slice(1, -1)}]`).length) addSet();
+              if (i < item.answer.slice(1, -1).split(', ').length) addSet();
             });
           } else if (frq) {
             answerMode("frq");

src/design.css

@@ -316,11 +316,12 @@ div.ML__keyboard {
 
 [data-button-select] {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.3rem 0.25rem;
   padding: 0.25rem;
   background-color: var(--surface-color);
   border-radius: 0.5rem;
   width: fit-content;
+  flex-wrap: wrap;
 }
 
 [data-button-select] > button {