Dev area

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = crlf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.prettierrc

@@ -0,0 +1,16 @@
+{
+    "useTabs": false,
+    "printWidth": 90,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "quoteProps": "as-needed",
+    "arrowParens": "avoid",
+    "requirePragma": false,
+    "insertPragma": false,
+    "trailingComma": "es5",
+    "semi": true,
+    "braceStyle": "1tbs",
+    "editorconfig": true
+}

next.config.js

@@ -7,7 +7,7 @@ const nextConfig = {
    * Added for GitHub Pages deployment.
    */
   basePath: "/react-learndash",
-  output: "export",
+  ...(!process.env.DEPLOY_TO_GITHUB_PAGES ? {output: 'export'} : {})
 }
 
 module.exports = nextConfig

package.json

@@ -4,6 +4,7 @@
     "private": true,
     "scripts": {
         "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 next dev",
+        "dev2": "set NODE_TLS_REJECT_UNAUTHORIZED=0 && next dev",
         "build": "next build",
         "start": "next start",
         "export": "next build && next export",

public/assets/scss/components/_writing-evaluation-form.scss

@@ -1,121 +1,229 @@
-
 .content-box {
-  background: #eaeaea;
-  padding: 100px 100px;
-  margin: -5px 0px 25px -15px;
+    background: #eaeaea;
+    padding: 100px 100px;
+    margin: -5px 0px 25px -15px;
 }
 
+.incorrect,
+.delete {
+    text-decoration: line-through;
+    border-bottom: 1px solid #c38181;
+    color: #d5bbbb !important;
+    padding: 0 3px;
+}
 
-.incorrect, .delete {
-  text-decoration: line-through;
-  border-bottom: 2px solid #c38181;
-  color: #d5bbbb !important;
-  padding: 0 3px;
+.garbled {
+    // text-decoration: underline;
+    // text-decoration-style: wavy !important;
+    // text-decoration-thickness: 1px;
+    text-decoration-line: grammar-error;
+    color: #d5baba;
 }
 
 .corrected {
-  border-bottom: 2px solid #9ec59e;
-  padding-left: 3px;
-  font-weight: 600;
+    border-bottom: 1px solid #9ec59e;
+    padding-left: 3px;
+    font-weight: 600;
 }
 
 .space {
-  background: pink;
-  border: 1px solid pink;
-  padding-left: 3px;
+    background: pink;
+    border: 1px solid pink;
+    padding-left: 3px;
 }
 
 .addition {
-  color: #ff6700;
-  background: #ffd7b5;
-  border: 1px solid #ff6700;
-  padding: 0 3px;
+    color: #ff6700;
+    background: #ffd7b5;
+    border: 1px solid #ff6700;
+    padding: 0 3px;
 }
 
 .hovertextp {
-  position: relative;
-  display: inline-block;
-
-  .hovertext {
-    &:before {
-      content: "Feedback: " attr(data-hover);
-      visibility: hidden;
-      background-color: rgba(0, 0, 0, 0.8);
-      color: #fff;
-      text-align: center;
-      border-radius: 6px;
-      padding: 5px 0; /* Position the tooltip */
-      position: absolute;
-      display: block;
-      z-index: 9999;
-      top: auto; /* Reset the top property */
-      overflow: visible;
-      width: max-content;
-      max-width: 200px;
-    }
-
-    &:hover:before {
-      opacity: 1;
-      visibility: visible;
+    position: relative;
+    display: inline-block;
+
+    .hovertext {
+        &:before {
+            content: 'Feedback: ' attr(data-hover);
+            visibility: hidden;
+            background-color: rgba(0, 0, 0, 0.8);
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px 0; /* Position the tooltip */
+            position: absolute;
+            display: block;
+            z-index: 9999;
+            top: auto; /* Reset the top property */
+            overflow: visible;
+            width: max-content;
+            max-width: 200px;
+        }
+
+        &:hover:before {
+            opacity: 1;
+            visibility: visible;
+        }
     }
-  }
 }
 
-
 .nopaque {
-  opacity: 0.2;
+    opacity: 0.2;
 }
 
 .opaque {
-  opacity: 1.0;
-  background: #fff;
+    opacity: 1;
+    background: #fff;
 }
 
-
 .waf-menu.waf-menu {
+    li {
+        padding-top: 10px;
+
+        &:after {
+            content: '';
+        }
 
-  li {
-    padding-top: 10px;
+        &:hover {
+            background-color: #f0f0f0;
+        }
 
-    &:after {
-      content: '';
+        li {
+            padding-top: 0;
+            margin-top: 0;
+        }
     }
 
-    &:hover {
-      background-color: #f0f0f0;
+    a {
+        display: block;
+        cursor: pointer;
+        padding: 5px;
     }
 
-    li {
-      padding-top: 0;
-      margin-top: 0;
+    ul {
+        display: none;
+        list-style-type: none;
+        padding: 0 0 15px;
+        margin: 0;
+
+        ul {
+            padding: 0 0 5px;
+        }
+
+        &.active {
+            display: block;
+        }
     }
-  }
+}
 
-  a {
-    display: block;
-    cursor: pointer;
-    padding: 5px;
-  }
+.waf-textarea {
+    textarea {
+        background: #f5f4f4;
+    }
+}
 
-  ul {
-    display: none;
-    list-style-type: none;
-    padding: 0 0 15px;
-    margin: 0;
+/*----------- clear theme elements for Writing AI evaluation -------------*/
 
-    ul {
-      padding: 0 0 5px;
+.course-details-content {
+    max-width: 900px;
+    margin: 0 auto;
+    border: 1px solid #eaeaea;
+    border-radius: 5px;
+    padding: 0 50px 50px 50px;
+    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.05);
+}
+
+.waf-textarea textarea {
+    border: 1px solid #eaeaea !important;
+    border-radius: 5px;
+    height: 300px;
+    background-color: #fff;
+}
+
+.edu-btn {
+    margin-top: 30px;
+}
+
+label {
+    padding-left: 25px;
+}
+
+/* ----------------------------- */
+
+.writing-evaluation-form {
+    textarea[disabled] {
+        background-color: rgb(240, 240, 240);
+        cursor: not-allowed;
     }
 
-    &.active {
-      display: block;
+    button[disabled] {
+        filter: saturate(30%);
+        pointer-events: none;
     }
-  }
-}
 
+    .incorrect,
+    .deletion {
+        text-decoration: line-through;
+        border-bottom: 2px solid #c38181;
+        color: #d5bbbb !important;
+        padding: 0 3px 0 0;
+        display: inline;
+    }
+    .correct {
+        border-bottom: 2px solid #9ec59e;
+        padding: 0 3px 0 0;
+        font-weight: 600;
+        display: inline;
+    }
+    .addition {
+        color: #ff6700;
+        background: #ffd7b5;
+        border: 1px solid #ff6700;
+        padding: 0 3px 0 0;
+        display: inline;
+    }
+    .nochange {
+        display: inline;
+        padding: 0 3px 0 0;
+    }
 
-.waf-textarea {
-  textarea {
-    background: #f5f4f4;
-  }
+    .feedback {
+        .tab-wrapper {
+            display: flex;
+            margin: 0;
+        }
+
+        .tabs {
+            flex-grow: 0;
+            min-width: 210px;
+            width: 330px;
+            border-right: 1px solid #ddd;
+        }
+
+        .tab-link {
+            display: block;
+            padding: 10px;
+            background-color: #f0f0f0;
+            border: none;
+            text-align: left;
+            cursor: pointer;
+            width: 100%;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .tab-link.active,
+        .tab-link:hover {
+            background-color: #ccc;
+        }
+
+        .tab-content {
+            flex-grow: 1;
+            padding: 20px;
+        }
+
+        .tab:not(.active) {
+            display: none;
+        }
+    }
 }

public/assets/scss/template/_course.scss

@@ -1252,7 +1252,7 @@
                     height: 100%;
                     width: 100%;
                     background: rgb(255,255,255);
-                    background: linear-gradient(top, rgba(51, 51, 51, 0.01) 25%, rgba(51, 51, 51, 0.7) 100%);
+                    background: linear-gradient(to bottom, rgba(51, 51, 51, 0.01) 25%, rgba(51, 51, 51, 0.7) 100%);
                     position: absolute;
                     top: 0;
                     bottom: 0;