Writing evaluation form - Showing content

src/components/forms/writing-evaluation-form.module.css

@@ -0,0 +1,95 @@
+
+.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;
+}
+
+
+.menu {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.menu li {
+    cursor: pointer;
+    padding: 5px;
+}
+
+.menu li:hover {
+    background-color: #f0f0f0;
+}
+
+.submenu {
+    display: none;
+    list-style-type: none;
+    margin-left: 20px;
+    padding: 0;
+}
+
+.sentences {
+    display: none;
+}

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

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import './writing-evaluation-form.module.css';
 
 const WritingEvaluationForm = () => {
     const [essay, setEssay] = useState('');
@@ -13,40 +14,50 @@ const WritingEvaluationForm = () => {
 
         setLoading(true);
 
-        try {
+        console.log(essay, task)
 
-            const response = await fetch('https://Mayanktstprep-tstprep-writing.hf.space/get_passage_html', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: 'Bearer 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'
-                },
-                body: JSON.stringify({
-                    essay,
-                    task
-                })
-            });
+        const response = await fetch('https://Mayanktstprep-tstprep-writing.hf.space/get_passage_html', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: 'Bearer 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'
+            },
+            body: JSON.stringify({
+                essay,
+                task
+            })
+        });
+        if (!response.ok) throw new Error(response.statusText);
 
-            setResponse(response.data);
-            setLoading(false);
 
-            console.log(response.data);
+        const item = await response.json();
 
-        } catch (error) {
-            console.error(error);
-            setError(error.message);
-        } finally {
-            setLoading(false);
-        }
+        console.log(item);
 
+        setResponse(item.passage_html + item.indicator_html);
+        setLoading(false);
+
+        // } catch (error) {
+        //     console.error(error);
+        //     setError(error.message);
+        // } finally {
+        //     setLoading(false);
+        // }
+
+    }
+
+    const toggleSubmenu = (e) => {
+        console.log('clicked', e);
     }
 
     return (
 
         <>
             {loading && <p>Loading...</p>}
 
-            {response && <pre>{JSON.stringify(response, null, 2)}</pre>}
+            {response && <div
+                dangerouslySetInnerHTML={{__html: response}}
+            />}
 
             {error && <p>{error}</p>}
 
@@ -59,19 +70,21 @@ const WritingEvaluationForm = () => {
                         <label htmlFor="essay">Essay</label>
                         <textarea
                             name="essay"
-                            value={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"
-                            onChange={(e) => setEssay(e.target.value)}
+                            onBlur={(e) => setEssay(e.target.value)}
                         />
                     </div>
 
                     <div className="form-group">
                         <label htmlFor="task">Task</label>
                         <textarea
                             name="task"
-                            value={task}
+                            // value={task}
+                            // value="Everyone wants to get in better shape, but it usually takes a tremendous amount of time and effort. "
                             placeholder="Task"
-                            onChange={(e) => setTask(e.target.value)}
+                            onBlur={(e) => setTask(e.target.value)}
                         />
                     </div>