Merge branch 'master' of https://github.com/UniversityOfHelsinkiCS/mo…

…bvita

client/components/GecView/index.js

@@ -1,55 +1,148 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch, useSelector } from 'react-redux'
 import { checkGrammar, updateEssay } from 'Utilities/redux/gecReducer'
 
-const Word = ({ word, isError }) => {
-  return (
-    <span style={{ color: isError ? 'red' : 'black', fontWeight: isError ? 'bold' : 'normal' }}>
-      {word + ' '}
+const Word = ({ word, isError, edit, index }) => {
+  const [hovered, setHovered] = useState(false)
+
+  return isError ? (
+    <span
+      key={index}
+      style={{ position: 'relative', display: 'inline-block' }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <input
+        type="text"
+        defaultValue={edit.o_str}
+        placeholder={edit.o_str}
+        style={{
+          color: 'red',
+          fontWeight: 'bold',
+          border: '1px solid red',
+          padding: '2px',
+          margin: '0 2px',
+        }}
+      />
+      {hovered && (
+        <span
+          style={{
+            position: 'absolute',
+            top: '-25px',
+            left: '0',
+            backgroundColor: '#333',
+            color: '#fff',
+            padding: '5px',
+            borderRadius: '3px',
+            fontSize: '12px',
+            zIndex: '10',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {edit.type}
+        </span>
+      )}
+    </span>
+  ) : (
+    <span key={index} style={{ marginRight: '5px' }}>
+      {word}{' '}
     </span>
   )
 }
 
 const GrammarCheck = () => {
   const dispatch = useDispatch()
   const { essay, edits, pending } = useSelector(state => state.gec)
+  const [submitted, setSubmitted] = useState(false)
 
-  const handleEssayChange = (event) => {
+  const handleEssayChange = event => {
     const newValue = event.target.value
     dispatch(updateEssay(newValue))
   }
 
   const handleGrammarCheck = () => {
-    if (essay.trim() !== "") {
+    if (essay.trim() !== '') {
       dispatch(checkGrammar(essay))
+      setSubmitted(true)
     }
   }
 
   const renderTextWithHighlights = (text, edits) => {
     const words = text.split(' ')
-    return words.map((word, index) => {
-      const isError = edits && edits.some(edit => edit.word === word)
-      return <Word key={index} word={word} isError={isError} />
-    })
+    let modifiedText = []
+    let currentEditIndex = 0
+    let currentWordIndex = 0
+
+    // Iterate through each word in the essay
+    while (currentWordIndex < words.length) {
+      const word = words[currentWordIndex]
+      const currentEdit = edits[currentEditIndex]
+      const o_start = currentEdit ? currentEdit.o_start : null
+      const o_end = currentEdit ? currentEdit.o_end : null
+
+      // If the current word falls under an edit's range
+      if (currentEdit && currentWordIndex >= o_start && currentWordIndex < o_end) {
+        modifiedText.push(
+          <Word
+            key={currentWordIndex}
+            word={word}
+            isError={true}
+            edit={currentEdit}
+            index={currentWordIndex}
+          />
+        )
+
+        // Move to the next edit once we've processed all the words for the current edit
+        if (currentWordIndex + 1 === o_end) {
+          currentEditIndex++
+        }
+      } else {
+        // Render a regular word (without edit)
+        modifiedText.push(
+          <span key={currentWordIndex} style={{ marginRight: '5px' }}>
+            {word}{' '}
+          </span>
+        )
+      }
+
+      currentWordIndex++
+    }
+
+    return modifiedText
   }
 
   return (
     <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', height: '100vh' }}>
-      <textarea
-        style={{
-          height: '150px',
-          borderColor: '#ccc',
-          borderWidth: '1px',
-          padding: '10px',
-          fontSize: '16px',
-          marginBottom: '20px',
-          width: '100%',
-          resize: 'vertical',
-        }}
-        value={essay}
-        onChange={handleEssayChange}
-      />
+      {!submitted ? (
+        <textarea
+          style={{
+            height: '150px',
+            borderColor: '#ccc',
+            borderWidth: '1px',
+            padding: '10px',
+            fontSize: '16px',
+            marginBottom: '20px',
+            width: '100%',
+            resize: 'vertical',
+          }}
+          value={essay}
+          onChange={handleEssayChange}
+        />
+      ) : (
+        <div
+          style={{
+            marginTop: '20px',
+            padding: '10px',
+            border: '1px solid #ccc',
+            height: '200px',
+            overflowY: 'auto',
+          }}
+        >
+          <span>{renderTextWithHighlights(essay, edits)}</span>
+        </div>
+      )}
+
       <button
         style={{
           backgroundColor: '#007BFF',
@@ -61,20 +154,10 @@ const GrammarCheck = () => {
           cursor: 'pointer',
         }}
         onClick={handleGrammarCheck}
-        disabled={pending}  // Disable button when pending
+        disabled={pending}
       >
         {pending ? '...' : <FormattedMessage id="check-gec-grammar" />}
       </button>
-
-      {/* <div style={{ marginTop: '20px', borderColor: '#ccc', borderWidth: '1px', padding: '10px', height: '200px', overflowY: 'auto' }}>
-        {pending ? (
-          <span>Checking...</span>
-        ) : (
-          <span>
-            {renderTextWithHighlights(essay, edits)}
-          </span>
-        )}
-      </div> */}
     </div>
   )
 }

client/components/Tests/ReadingTest/ReadingTest.js

@@ -13,6 +13,7 @@ import {
     markAnsweredChoice,
     sendReadingTestQuestionnaireResponses,
 } from 'Utilities/redux/testReducer'
+import { getGroups } from 'Utilities/redux/groupsReducer'
 import { 
   learningLanguageSelector, 
   confettiRain, 
@@ -45,7 +46,7 @@ const ReadingTest = () => {
   const [showFeedbacks, setShowFeedbacks] = useState(false)
 
   const [currentReadingSetLength, setCurrentReadingSetLength] = useState(0)
-  const [firstMediationSelfReflectionDone, setFirstMediationSelfReflectionDone] = useState(false)
+  // const [firstMediationSelfReflectionDone, setFirstMediationSelfReflectionDone] = useState(false)
   const [showSelfReflect, setShowSelfReflect] = useState(false)
 
   const [showElicitDialog, setShowElicitDialog] = useState(false)
@@ -60,6 +61,10 @@ const ReadingTest = () => {
   const [timeSpent, setTimeSpent] = useState(0)
   const [showStats, setShowStats] = useState(false)
 
+  // State for experimental and control groups
+  const [in_experimental_grp, setInExperimentalGrp] = useState(false);
+  const [in_control_grp, setInControlGrp] = useState(false);
+
   const {
     feedbacks,
     currentReadingTestQuestion,
@@ -73,29 +78,13 @@ const ReadingTest = () => {
     answerPending,
     answerFailure,
     resumedTest,
+    readingTestSetDict,
   } = useSelector(({ tests }) => tests)
   const learningLanguage = useSelector(learningLanguageSelector)
   const { groups } = useSelector(({ groups }) => groups)
 
   const history = useHistory()
 
-  let in_experimental_grp = false;
-  let in_control_grp = false;
-
-
-  groups.forEach(group => {
-    if (group.group_type === "experimental") {
-      in_experimental_grp = true;
-    }
-    if (group.group_type === "control") {
-      in_control_grp = true;
-    }
-  });
-
-  if (in_control_grp == true) {
-    in_experimental_grp = false;
-  }
-
   const dispatch = useDispatch()
 
   const nextQuestion = () => {
@@ -129,16 +118,16 @@ const ReadingTest = () => {
 
   const submitSelfReflectionResponse = (response_json) => {
     dispatch(sendReadingTestQuestionnaireResponses(response_json, learningLanguage))
-    if (response_json.is_end_set_questionair !== true){
-      setFirstMediationSelfReflectionDone(true)
-    }
-    else {
+    if (response_json.is_end_set_questionair == true){
       if (currentReadingQuestionIndex === readingTestQuestions.length - 1){
         goToHomePage()
       } else {
         setShowNextSetDialog(true)
       }
     }
+    // else {
+    //   setFirstMediationSelfReflectionDone(true)
+    // }
     setShowSelfReflect(false)
     if (currentReadingSet !== prevReadingSet && prevReadingSet !== null && currentReadingSet !== null) {
       setReceivedFeedback(0)
@@ -283,11 +272,39 @@ const ReadingTest = () => {
     if (in_control_grp) {
       if (attempts >= 1) {
         setQuestionDone(true)
+        setShowCorrect(true)
         return
       }
     }
   }
 
+  useEffect(() => {
+    dispatch(getGroups());
+  }, []);
+
+  useEffect(() => {
+    let experimental = false;
+    let control = false;
+
+    if (groups && groups.length) {
+      groups.forEach((group) => {
+        if (group.group_type === 'experimental') {
+          experimental = true;
+        }
+        if (group.group_type === 'control') {
+          control = true;
+        }
+      });
+
+      // If in control group, don't set experimental group
+      if (control) {
+        experimental = false;
+      }
+    }
+
+    setInExperimentalGrp(experimental);
+    setInControlGrp(control);
+  }, [groups]);
 
   useEffect(() => {
     if (currentReadingQuestionIndex === readingTestQuestions.length - 1) {
@@ -309,14 +326,17 @@ const ReadingTest = () => {
   useEffect(() => {
     setShowFeedbacks(false)
     if (currentReadingSet !== null && prevReadingSet !== null && currentReadingSet !== prevReadingSet) {
-      if (in_experimental_grp && receivedFeedback > 0) {
-        setShowSelfReflect(!resumedTest)
-      }
-      if (in_control_grp && receivedFeedback == 0) {
-        setShowSelfReflect(!resumedTest)
+      const currentSet = readingTestSetDict[currentReadingSet]
+      if (currentSet && currentSet.collect_final_reflection) {
+        if (in_experimental_grp && receivedFeedback > 0) {
+          setShowSelfReflect(!resumedTest)
+        }
+        if (in_control_grp && receivedFeedback == 0) {
+          setShowSelfReflect(!resumedTest)
+        }
       }
     }
-    setFirstMediationSelfReflectionDone(resumedTest)
+    // setFirstMediationSelfReflectionDone(resumedTest)
   }, [currentReadingSet])
 
   useEffect(() => {
@@ -370,9 +390,9 @@ const ReadingTest = () => {
               showFeedbacks={showFeedbacks}
               closeFeedbacks={() => {
                 setShowFeedbacks(false)
-                if (firstMediationSelfReflectionDone === false && receivedFeedback > 0 && in_experimental_grp && currentQuestionIdxinSet < currentReadingSetLength && questionDone) {
-                  setShowSelfReflect(true)
-                }
+                // if (firstMediationSelfReflectionDone === false && receivedFeedback > 0 && in_experimental_grp && currentQuestionIdxinSet < currentReadingSetLength && questionDone) {
+                //   setShowSelfReflect(true)
+                // }
               }}
             />
             <ReadingTestSelfReflect 

client/util/redux/gecReducer.js

@@ -15,7 +15,7 @@ export const updateEssay = (text) => ({
 
 const initialState = {
   essay: "",           // Essay input by the user
-  edits: null,         // Grammar corrections received
+  edits: {},         // Grammar corrections received
   pending: false,      // Loading state
   error: null,         // Error message if request fails
 }

client/util/redux/testReducer.js

@@ -13,6 +13,7 @@ const initialState = {
   prevReadingSet: null,
   readingSetLength: 0,
   readingTestQuestions: [],
+  readingTestSetDict: {},
 
   exhaustiveTestSessionId: null,
   currentExhaustiveQuestionIndex: 0,
@@ -208,7 +209,7 @@ export default (state = initialState, action) => {
         language: action.language,
       }
     case 'GET_READING_TEST_QUESTIONS_SUCCESS':
-      const { question_list, session_id } = response;
+      const { question_list, session_id, question_set_dict } = response;
 
       // Split questions by set
       const questionsBySet = question_list.reduce((acc, question) => {
@@ -263,6 +264,7 @@ export default (state = initialState, action) => {
 
       return {
         ...state,
+        readingTestSetDict: question_set_dict,
         readingTestQuestions: tempreadingTestQuestions,
         currentReadingTestQuestion: tmpcurrentReadingTestQuestion,
         currentReadingSet: currentSet,