Testing CSS

public/assets/scss/app.scss

@@ -1,22 +1,22 @@
 /*---------------------------------------------
 Template Name: EduBlink - Online Learning React Education Template
-Template URL: 
+Template URL:
 Description: This template is built with React NextJS.
 Author: DevsBlink
 Author URL: https://1.envato.market/YgGJbj
 Version: 1.0.0
 
-===============================================   
+===============================================
 STYLESHEET INDEXING
 |
 |___ Default Styles
 |	|___ Variables
-|	|___ Shortcode 
+|	|___ Shortcode
 |	|___ Reset Styels
 |	|___ Typography
 |	|___ Forms Styles
-|	|___ Common 
-|	|___ Animation 
+|	|___ Common
+|	|___ Animation
 |
 |___ Elements Styles
 |	|___ Accordion Style
@@ -25,11 +25,11 @@ STYLESHEET INDEXING
 |	|___ Button
 |	|___ Countdown
 |	|___ Course Widget
-|	|___ Pagination Styles 
-|	|___ Sal Styels 
+|	|___ Pagination Styles
+|	|___ Sal Styels
 |	|___ Section Title
-|	|___ Slick Styles 
-|	|___ Social Share Style 
+|	|___ Slick Styles
+|	|___ Social Share Style
 |
 |___Template Styles
 |	|___ About Styles
@@ -132,7 +132,7 @@ STYLESHEET INDEXING
 
 
 /*=======================================================================
-4.Blocks Styles 
+4.Blocks Styles
 =========================================================================*/
 @import 'header/header';
 @import 'header/nav';
@@ -143,7 +143,7 @@ STYLESHEET INDEXING
 @import "footer/footer";
 
 /*=======================================================================
-5.Blog Styles 
+5.Blog Styles
 =========================================================================*/
 @import "blog/blog";
 @import "blog/blog-details";
@@ -156,4 +156,7 @@ STYLESHEET INDEXING
 @import "default/spacing";
 @import "default/react_specific";
 @import "default/dark";
-@import "default/rtl";
+@import "default/rtl";
+
+
+@import "components/writing-evaluation-form";

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

@@ -0,0 +1,106 @@
+
+.content-box {
+  background: #eaeaea;
+  padding: 100px 100px;
+  margin: -5px 0px 25px -15px;
+}
+
+
+.incorrect, .delete {
+  text-decoration: line-through;
+  border-bottom: 2px solid #c38181;
+  color: #d5bbbb !important;
+  padding: 0 3px;
+}
+
+.corrected {
+  border-bottom: 2px solid #9ec59e;
+  padding-left: 3px;
+  font-weight: 600;
+}
+
+.space {
+  background: pink;
+  border: 1px solid pink;
+  padding-left: 3px;
+}
+
+.addition {
+  color: #ff6700;
+  background: #ffd7b5;
+  border: 1px solid #ff6700;
+  padding: 0 3px;
+}
+
+.hovertextp {
+  position: relative;
+  display: inline-block;
+}
+
+.hovertextp .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;
+}
+
+.hovertextp .hovertext:hover:before {
+  opacity: 1;
+  visibility: visible;
+}
+
+.nopaque {
+  opacity: 0.2;
+}
+
+.opaque {
+  opacity: 1.0;
+}
+
+
+.waf-menu.waf-menu {
+
+  li {
+    &:hover {
+      background-color: #f0f0f0;
+    }
+  }
+
+  a {
+    display: block;
+    cursor: pointer;
+    padding: 5px;
+  }
+
+  .waf-submenu {
+    display: none;
+    list-style-type: none;
+    padding: 0 0 20px 20px;
+
+    &.active {
+      display: block;
+    }
+  }
+}
+
+
+
+.sentences {
+  display: none;
+}
+
+.waf-textarea {
+  textarea {
+    background: #f5f4f4;
+  }
+}

src/components/course-details/course-details-area.jsx

@@ -3,7 +3,7 @@ import CourseDetailsSidebar from '../common/sidebar/course-details-sidebar';
 import CommentFormCourse from '../forms/comment-form-course';
 import SingleComment from './single-comment';
 import SingleProgressbar from './single-progressbar';
-import WritingEvaluationForm from "../forms/writing-evalution-form";
+import WritingEvaluationForm from "../forms/writing-evaluation-form";
 
 const CourseDetailsArea = ({course}) => {
     const {

src/components/forms/writing-evalution-form.jsx → src/components/forms/writing-evaluation-form.jsx

@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import './writing-evaluation-form.module.css';
 
 const WritingEvaluationForm = () => {
     const [essay, setEssay] = useState('');
@@ -14,17 +13,17 @@ const WritingEvaluationForm = () => {
 
         setLoading(true);
 
-        console.log(essay, task)
 
-        const response = await fetch('https://Mayanktstprep-tstprep-writing.hf.space/get_passage_html', {
+        const response = await fetch('https://TSTPrep-tstprep-writing.hf.space/get_passage_html', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
-                Authorization: 'Bearer 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'
+                Authorization: 'Bearer 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'
             },
             body: JSON.stringify({
                 essay,
-                task
+                task,
+                demo: true
             })
         });
         if (!response.ok) throw new Error(response.statusText);
@@ -47,7 +46,19 @@ const WritingEvaluationForm = () => {
     }
 
     const toggleSubmenu = (e) => {
-        console.log('clicked', e);
+        e.preventDefault();
+        let el = e.target;
+
+        while (el && el !== e.currentTarget && el.tagName !== "A") {
+            el = el.parentNode;
+        }
+        if (el && el.tagName === "A") {
+            // ...do your state change...
+
+            console.log(el.nextSibling.classList.toggle('active'));
+
+
+        }
     }
 
     return (
@@ -57,6 +68,7 @@ const WritingEvaluationForm = () => {
 
             {response && <div
                 dangerouslySetInnerHTML={{__html: response}}
+                onClick={(e) => toggleSubmenu(e)}
             />}
 
             {error && <p>{error}</p>}
@@ -66,25 +78,31 @@ const WritingEvaluationForm = () => {
                 <form onSubmit={handleSubmit}>
 
 
-                    <div className="form-group">
+                    <div className="form-group waf-textarea">
                         <label htmlFor="essay">Essay</label>
                         <textarea
                             name="essay"
                             // value={essay}
                             // value="Recently there has been a debate as to the PEDs. More specifically, in regard to the passages, the author puts forth the idea that this drug should be prohibited."
                             placeholder="Essay"
                             onBlur={(e) => setEssay(e.target.value)}
+                            data-gramm="false"
+                            data-gramm_editor="false"
+                            data-enable-grammarly="false"
                         />
                     </div>
 
-                    <div className="form-group">
+                    <div className="form-group waf-textarea">
                         <label htmlFor="task">Task</label>
                         <textarea
                             name="task"
                             // value={task}
                             // value="Everyone wants to get in better shape, but it usually takes a tremendous amount of time and effort. "
                             placeholder="Task"
                             onBlur={(e) => setTask(e.target.value)}
+                            data-gramm="false"
+                            data-gramm_editor="false"
+                            data-enable-grammarly="false"
                         />
                     </div>