Merge pull request #447 from concord-consortium/187021149-show-studen…

…t-answers-in-feedback feat: Show student answers in feedback [PT-187021149]
concord-consortium · Mar 7, 2024 · ea958e8 · ea958e8
2 parents 1c26af9 + 8caa373
commit ea958e8
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 1 deletion.
diff --git a/css/portal-dashboard/feedback/show-student-answers.less b/css/portal-dashboard/feedback/show-student-answers.less
@@ -0,0 +1,104 @@
+@import "../variables";
+
+.showStudentAnswers {
+  margin-top: 10px;
+
+  .showToggle {
+    font-family: lato;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 6px 9px 7px 35px;
+    border-radius: 8px;
+    border: solid 1.5px @cc-charcoal-light1;
+    background-color: @feedback-green-light5;
+    position: relative;
+    cursor: pointer;
+
+    &.showing {
+      color: #fff;
+      background-color: @feedback-green;
+
+      &:before {
+        background-color: #fff;
+        transform: rotate(180deg);
+      }
+      &:hover::before {
+        background-color: @feedback-green-light5;
+      }
+    }
+
+    &:hover {
+      background-color: #bddfc2;
+      border: solid 1.5px #fff;
+      box-shadow:0 0 0 2px @feedback-green-light4;
+    }
+
+    &:before {
+      background-color: @feedback-green;
+      content: "";
+      display: block;
+      height: 24px;
+      left: 2px;
+      -webkit-mask-image: url("../../../img/svg-icons/expand-more-icon.svg");
+      mask-image: url("../../../img/svg-icons/expand-more-icon.svg");
+      position: absolute;
+      top: 2px;
+      width: 24px;
+    }
+  }
+
+  .answers {
+    border-radius: 8px;
+    border: solid 1.5px @cc-charcoal-light1;
+    margin-top: -16px;
+    overflow: hidden;
+
+    .row {
+      background-color: #fff;
+      display: flex;
+      flex-direction: row;
+      font-weight: 400;
+      min-height: 55px;
+
+      &:first-child {
+        padding-top: 10px;
+      }
+
+      &:nth-child(even) {
+        .questionWrapper {
+          background-color: @cc-teal-light6;
+        }
+        .studentResponse {
+          background-color: @cc-teal-light6;
+        }
+      }
+
+      .questionWrapper {
+        border-bottom: 1.5px solid @cc-charcoal-light2;
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+        font-weight: normal;
+        margin-right: 3px;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        width: 240px;
+
+        .questionName {
+          justify-content: center;
+          margin: 2.5px 20px 0 10px;
+        }
+      }
+
+      .studentResponse {
+        background-color: #fff;
+        border-bottom: 1.5px solid @cc-charcoal-light2;
+        flex: 1 1 50%;
+        font-weight: normal;
+        margin-right: 3px;
+        min-width: 349px;
+        padding: 15px 20px;
+      }
+    }
+  }
+}
diff --git a/img/svg-icons/expand-more-icon.svg b/img/svg-icons/expand-more-icon.svg
diff --git a/js/components/portal-dashboard/feedback/activity-level-feedback-student-rows.tsx b/js/components/portal-dashboard/feedback/activity-level-feedback-student-rows.tsx
@@ -11,10 +11,12 @@ import { TrackEventFunction } from "../../../actions";
 import { hasRubricFeedback } from "../../../util/activity-feedback-helper";
 import { Rubric } from "./rubric-utils";
 import { ScoringSettings } from "../../../util/scoring";
+import { ShowStudentAnswers } from "./show-student-answers";
 
 import css from "../../../../css/portal-dashboard/feedback/feedback-rows.less";
 
 interface IProps {
+  activity: Map<any, any>;
   activityId: string;
   activityIndex: number;
   feedbacks: Map<any, any>;
@@ -31,7 +33,7 @@ interface IProps {
 
 export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
   const { activityId, activityIndex, feedbacks, feedbackSortByMethod, isAnonymous, rubric, setFeedbackSortRefreshEnabled,
-    students, trackEvent, updateActivityFeedback, scoringSettings } = props;
+    students, trackEvent, updateActivityFeedback, scoringSettings, activity } = props;
   const displayedFeedbacks = feedbackSortByMethod !== SORT_BY_FEEDBACK_PROGRESS
     ? feedbacks
     : students.map((student: any) => {
@@ -100,6 +102,11 @@ export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
               rubric={rubric}
             />
           </div>
+          <ShowStudentAnswers
+            student={student}
+            activity={activity}
+            activityStarted={activityStarted}
+          />
         </div>
       </div>
     );

diff --git a/js/components/portal-dashboard/feedback/show-student-answers.tsx b/js/components/portal-dashboard/feedback/show-student-answers.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import striptags from "striptags";
+import { Map } from "immutable";
+import Answer from "../../../containers/portal-dashboard/answer";
+import { renderHTML } from "../../../util/render-html";
+
+import css from "../../../../css/portal-dashboard/feedback/show-student-answers.less";
+
+interface IProps {
+  activityStarted: boolean;
+  activity: Map<string, any>;
+  student: any;
+}
+
+export const ShowStudentAnswers: React.FC<IProps> = (props) => {
+  const {activityStarted, activity, student} = props;
+  const [showing, setShowing] = useState(false);
+
+  if (!activityStarted) {
+    return null;
+  }
+
+  const handleToggleShowing = () => setShowing(prev => !prev);
+
+  const renderStudentAnswers = () => {
+    const questions = activity.get("questions");
+    const rows = questions.map((question: Map<any, any>) => {
+      const currentQuestionId = question.get("id");
+      const blankRegEx = /\[([^)]+)\]/g;
+      const promptText = question?.get("prompt")?.replace(blankRegEx, '__________');
+
+      return (
+        <div className={css.row} key={currentQuestionId} data-cy="question-row">
+          <div className={css.questionWrapper} data-cy="question-wrapper">
+            <div className={css.questionName} data-cy="student-name">
+              Q{question.get("questionNumber")}: {renderHTML(striptags(promptText))}
+            </div>
+          </div>
+          <div className={css.studentResponse} data-cy="student-response">
+            <Answer question={question} student={student} responsive={false} />
+          </div>
+        </div>
+      );
+    });
+
+    return (
+      <div className={css.answers}>
+        {rows}
+      </div>
+    );
+  };
+
+  return (
+    <div className={css.showStudentAnswers}>
+      <button className={classNames(css.showToggle, {[css.showing]: showing})} onClick={handleToggleShowing}>{showing ? "Hide Student Answers" : "Show Student Answers"}</button>
+      {showing && renderStudentAnswers()}
+    </div>
+  );
+};
+
diff --git a/js/containers/portal-dashboard/feedback/activity-feedback-panel.tsx b/js/containers/portal-dashboard/feedback/activity-feedback-panel.tsx
@@ -58,6 +58,7 @@ class ActivityFeedbackPanel extends React.PureComponent<IProps> {
     return (
       <div>
         <ActivityLevelFeedbackStudentRows
+          activity={activity}
           activityId={currentActivityId}
           activityIndex={activityIndex}
           feedbacks={feedbacks}