added a restart counter

added a stat on how many times the user restarted the test before completion, on average
added a stat on the percentage of completed tests

Author: Miodec

public/css/style.scss

@@ -907,7 +907,7 @@ key {
   }
   .triplegroup{
     display: grid;
-    grid-auto-flow: column;
+    grid-template-columns: 1fr 1fr 2fr;
     gap: 1rem;
   }
   .group{

public/index.html

@@ -287,6 +287,15 @@ <h1>theme</h1>
               <div class="title">favourite test</div>
               <div class="val">words 10</div>
             </div>
+            <div class="group testCompletion">
+              <div class="title">test completion</div>
+              <div class="val">-</div>
+            </div>
+            <div></div>
+            <div class="group avgRestart">
+              <div class="title">avg restarts per completed test</div>
+              <div class="val">-</div>
+            </div>
           </div>
           <div class="group history">
             <!-- <div class="title">result history</div> -->

public/js/account.js

@@ -320,13 +320,16 @@ function refreshAccountPage() {
       custom: []
     }
 
-
     let topWpm = 0;
     let topMode = '';
+    let testRestarts = 0;
 
     let testCount = dbSnapshot.length;
     $(".pageAccount .history table tbody").empty();
     dbSnapshot.forEach(result => {
+      if (result.restartCount != undefined) {
+        testRestarts += result.restartCount;
+      }
       let withpunc = '';
       if (result.punctuation) {
         withpunc = ', with punctuation';
@@ -397,9 +400,16 @@ function refreshAccountPage() {
 
     $(".pageAccount .highestWpm .val").text(topWpm);
     $(".pageAccount .highestWpm .mode").html(topMode);
-
     $(".pageAccount .testsTaken .val").text(testCount);
 
+    $(".pageAccount .testCompletion .val").text(
+      Math.floor((testCount / (testCount + testRestarts) * 100)) + "%"
+    );
+
+    $(".pageAccount .avgRestart .val").text(
+      ((testCount + testRestarts) / testCount).toFixed(1)
+    );
+
     let favMode = testModes.words10;
     let favModeName = 'words10';
     $.each(testModes, (key, mode) => {

public/js/script.js

@@ -8,6 +8,7 @@ let testActive = false;
 let testStart, testEnd;
 let wpmHistory = [];
 let currentCommands = commands;
+let restartCount = 0;
 
 let accuracyStats = {
   correct: 0,
@@ -432,14 +433,12 @@ function showCrown() {
 }
 
 function showResult() {
-  //TODO: #2 Sometimes the caret jumps to the top left corner when showing results
   testEnd = Date.now();
   let stats = calculateStats();
   clearIntervals();
   $("#result .stats .wpm .bottom").text(stats.wpm);
   $("#result .stats .acc .bottom").text(stats.acc + "%");
   $("#result .stats .key .bottom").text(stats.correctChars + "/" + stats.incorrectChars);
-
   let mode2 = "";
   if (config.mode == "time") {
     mode2 = config.time;
@@ -456,8 +455,11 @@ function showResult() {
     mode2: mode2,
     punctuation: config.punctuation,
     timestamp: Date.now(),
-    language: config.language
+    language: config.language,
+    restartCount: restartCount
   };
+  console.log(restartCount);
+  restartCount = 0;
   if (stats.wpm > 0 && stats.wpm < 250 && stats.acc > 50 && stats.acc <= 100) {
     if (firebase.auth().currentUser != null) {
       db_getUserHighestWpm(config.mode, mode2).then(data => {
@@ -538,7 +540,6 @@ function restartTest() {
   hideCaret();
   testActive = false;
   hideLiveWpm();
-
   $("#words").stop(true, true).animate({ opacity: 0 }, 125);
   $("#result").stop(true, true).animate({
     opacity: 0
@@ -633,6 +634,7 @@ function changePage(page) {
     history.pushState('/', null, '/');
     showTestConfig();
     hideSignOutButton();
+    restartCount = 0;
   } else if (page == "about") {
     $(".page.pageAbout").addClass('active');
     swapElements(activePage, $(".page.pageAbout"), 250);
@@ -838,6 +840,9 @@ $(window).on('popstate', (e) => {
 
 $(document).on("keypress", "#restartTestButton", (event) => {
   if (event.keyCode == 32 || event.keyCode == 13) {
+    if (testActive) {
+      restartCount++;
+    }
     restartTest();
   }
 });
@@ -936,6 +941,9 @@ $(document).keydown((event) => {
   if (event["keyCode"] == 9) {
     if (config.quickTab && $(".pageTest").hasClass("active")) {
       event.preventDefault();
+      if (testActive) {
+        restartCount++;
+      }
       restartTest();
     }
   }

public/js/userconfig.js

@@ -14,8 +14,9 @@ let config = {
 //cookies
 function saveConfigToCookie() {
     let d = new Date();
-    d.setFullYear(d.getFullYear() + 1)
-    $.cookie("config", JSON.stringify(config), { expires: d })
+    d.setFullYear(d.getFullYear() + 1);
+    $.cookie("config", JSON.stringify(config), { expires: d });
+    restartCount = 0;
 }
 
 function loadConfigFromCookie() {