added change highlight mode

public/index.html

@@ -2164,6 +2164,30 @@
                 </div>
               </div>
             </div>
+            <div class="section highlightMode" section="">
+              <h1>highlight mode</h1>
+              <div class="text">
+                Change what is highlighted during the test.
+              </div>
+              <div class="buttons">
+                <div
+                  class="button"
+                  highlightMode="letter"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  letter
+                </div>
+                <div
+                  class="button"
+                  highlightMode="word"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  word
+                </div>
+              </div>
+            </div>
             <div class="section smoothLineScroll">
               <h1>smooth line scroll</h1>
               <div class="text">

public/js/commandline.js

@@ -372,6 +372,15 @@ let commands = {
         showCommandLine();
       },
     },
+    {
+      id: "changeHighlightMode",
+      display: "Change highlight mode...",
+      subgroup: true,
+      exec: () => {
+        currentCommands.push(commandsHighlightMode);
+        showCommandLine();
+      },
+    },
     {
       id: "changeTheme",
       display: "Change theme...",
@@ -925,6 +934,26 @@ let commandsKeymapStyle = {
   ],
 };
 
+let commandsHighlightMode = {
+  title: "Change highlight mode...",
+  list: [
+    {
+      id: "setHighlightModeLetter",
+      display: "letter",
+      exec: () => {
+        setHighlightMode("letter");
+      },
+    },
+    {
+      id: "setHighlightModeWord",
+      display: "word",
+      exec: () => {
+        setHighlightMode("word");
+      },
+    },
+  ],
+};
+
 let commandsTimerStyle = {
   title: "Change timer/progress style...",
   list: [

public/js/script.js

@@ -889,6 +889,11 @@ function showWords() {
 function updateActiveElement() {
   let active = document.querySelector("#words .active");
   if (active !== null) {
+    if (config.highlightMode == "word") {
+      active.querySelectorAll("letter").forEach((e) => {
+        e.classList.remove("correct");
+      });
+    }
     active.classList.remove("active");
   }
   // $("#words .word").removeClass("active");
@@ -904,6 +909,11 @@ function updateActiveElement() {
 
     // activeWordTop = $("#words .word.active").position().top;
     activeWordTop = document.querySelector("#words .active").offsetTop;
+    if (config.highlightMode == "word") {
+      activeWord.querySelectorAll("letter").forEach((e) => {
+        e.classList.add("correct");
+      });
+    }
     // updateHighlightedKeymapKey();
   } catch (e) {}
   toggleScriptFunbox(wordsList[currentWordIndex]);
@@ -921,72 +931,83 @@ function compareInput(showError) {
   // }
   let ret = "";
 
-  for (let i = 0; i < input.length; i++) {
-    let charCorrect;
-    if (currentWord[i] == input[i]) {
-      charCorrect = true;
-    } else {
-      charCorrect = false;
+  if (config.highlightMode == "word") {
+    let correctSoFar = false;
+    if (currentWord.slice(0, input.length) == input) {
+      // this is when input so far is correct
+      correctSoFar = true;
     }
-
-    try {
-      if (config.language === "russian" && charCorrect === false) {
-        if (
-          (currentWord[i].toLowerCase() === "е" &&
-            input[i].toLowerCase() === "ё") ||
-          (currentWord[i].toLowerCase() === "ё" &&
-            input[i].toLowerCase() === "е")
-        ) {
-          charCorrect = true;
-        }
-      }
-    } catch (e) {}
-
-    if (charCorrect) {
-      ret += '<letter class="correct">' + currentWord[i] + "</letter>";
-      // $(letterElems[i]).removeClass('incorrect').addClass('correct');
-    } else {
-      if (config.difficulty == "master") {
-        if (!resultVisible) {
-          inputHistory.push(currentInput);
-          correctedHistory.push(currentCorrected);
-          document
-            .querySelector("#words .word.active")
-            .setAttribute("input", currentInput.replace(/'/g, "'"));
-          lastSecondNotRound = true;
-          showResult(true);
-        }
-        let testNow = Date.now();
-        let testSeconds = roundTo2((testNow - testStart) / 1000);
-        incompleteTestSeconds += testSeconds;
-        restartCount++;
-      }
-      if (!showError) {
-        if (currentWord[i] == undefined) {
-          // ret += '<letter class="correct">' + input[i] + "</letter>";
-        } else {
-          ret += '<letter class="correct">' + currentWord[i] + "</letter>";
-        }
+    let classString = correctSoFar ? "correct" : "incorrect";
+    for (let i = 0; i < currentWord.length; i++) {
+      ret += `<letter class="${classString}">` + currentWord[i] + `</letter>`;
+    }
+  } else {
+    for (let i = 0; i < input.length; i++) {
+      let charCorrect;
+      if (currentWord[i] == input[i]) {
+        charCorrect = true;
       } else {
-        if (currentWord[i] == undefined) {
-          ret += '<letter class="incorrect extra">' + input[i] + "</letter>";
+        charCorrect = false;
+      }
+
+      try {
+        if (config.language === "russian" && charCorrect === false) {
+          if (
+            (currentWord[i].toLowerCase() === "е" &&
+              input[i].toLowerCase() === "ё") ||
+            (currentWord[i].toLowerCase() === "ё" &&
+              input[i].toLowerCase() === "е")
+          ) {
+            charCorrect = true;
+          }
+        }
+      } catch (e) {}
+
+      if (charCorrect) {
+        ret += '<letter class="correct">' + currentWord[i] + "</letter>";
+        // $(letterElems[i]).removeClass('incorrect').addClass('correct');
+      } else {
+        if (config.difficulty == "master") {
+          if (!resultVisible) {
+            inputHistory.push(currentInput);
+            correctedHistory.push(currentCorrected);
+            document
+              .querySelector("#words .word.active")
+              .setAttribute("input", currentInput.replace(/'/g, "'"));
+            lastSecondNotRound = true;
+            showResult(true);
+          }
+          let testNow = Date.now();
+          let testSeconds = roundTo2((testNow - testStart) / 1000);
+          incompleteTestSeconds += testSeconds;
+          restartCount++;
+        }
+        if (!showError) {
+          if (currentWord[i] == undefined) {
+            // ret += '<letter class="correct">' + input[i] + "</letter>";
+          } else {
+            ret += '<letter class="correct">' + currentWord[i] + "</letter>";
+          }
         } else {
-          ret +=
-            '<letter class="incorrect">' +
-            currentWord[i] +
-            (config.indicateTypos ? `<hint>${input[i]}</hint>` : "") +
-            "</letter>";
+          if (currentWord[i] == undefined) {
+            ret += '<letter class="incorrect extra">' + input[i] + "</letter>";
+          } else {
+            ret +=
+              '<letter class="incorrect">' +
+              currentWord[i] +
+              (config.indicateTypos ? `<hint>${input[i]}</hint>` : "") +
+              "</letter>";
+          }
         }
       }
     }
-  }
 
-  if (input.length < currentWord.length) {
-    for (let i = input.length; i < currentWord.length; i++) {
-      ret += "<letter>" + currentWord[i] + "</letter>";
+    if (input.length < currentWord.length) {
+      for (let i = input.length; i < currentWord.length; i++) {
+        ret += "<letter>" + currentWord[i] + "</letter>";
+      }
     }
   }
-
   wordAtIndex.innerHTML = ret;
 
   let lastindex = currentWordIndex;

public/js/settings.js

@@ -239,6 +239,10 @@ settingsGroups.paceCaretStyle = new SettingsGroup(
   setPaceCaretStyle
 );
 settingsGroups.timerStyle = new SettingsGroup("timerStyle", setTimerStyle);
+settingsGroups.highlighteMode = new SettingsGroup(
+  "highlightMode",
+  setHighlightMode
+);
 settingsGroups.timerOpacity = new SettingsGroup(
   "timerOpacity",
   setTimerOpacity

public/js/userconfig.js

@@ -67,6 +67,7 @@ let defaultConfig = {
   chartStyle: "line",
   minWpm: "off",
   minWpmCustomSpeed: 100,
+  highlightMode: "letter",
 };
 
 let cookieConfig = null;
@@ -212,6 +213,7 @@ function applyConfig(configObj) {
     setNumbers(configObj.numbers, true);
     setPunctuation(configObj.punctuation, true);
     changeMode(configObj.mode, true);
+    setHighlightMode(configObj.highlightMode, true);
     config.startGraphsAtZero = configObj.startGraphsAtZero;
     // if (
     //   configObj.resultFilters !== null &&
@@ -689,6 +691,14 @@ function toggleShowLiveWpm() {
   saveConfigToCookie();
 }
 
+function setHighlightMode(mode, nosave) {
+  if (mode == null || mode == undefined) {
+    mode = "letter";
+  }
+  config.highlightMode = mode;
+  if (!nosave) saveConfigToCookie();
+}
+
 function setTimerStyle(style, nosave) {
   if (style == null || style == undefined) {
     style = "bar";