feat: Flesh out score with rubric [PT-187021252]

This displays the rubric score when the question has been fully scored. This also only shows the rubric score value in the table if the score type is rubric. Finally this adds back code that was lost in a merge to check for a max score value of 999.
concord-consortium · Mar 5, 2024 · 060b191 · 060b191
1 parent fbbc06b
commit 060b191
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 50 deletions.
diff --git a/css/portal-dashboard/feedback/activity-feedback-score.less b/css/portal-dashboard/feedback/activity-feedback-score.less
@@ -0,0 +1,13 @@
+@import "../variables";
+
+.activityFeedbackScore {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-end;
+
+  .scoreLabel {
+    color: @cc-charcoal;
+    font-weight: bold;
+  }
+}
diff --git a/css/portal-dashboard/feedback/feedback-rows.less b/css/portal-dashboard/feedback/feedback-rows.less
@@ -68,45 +68,28 @@
         margin-top: 7.5px;
       }
 
-      .textAndScore {
-        display: flex;
-        gap: 35px;
-
-        textarea {
-          border: solid 1.5px @cc-charcoal-light2;
-          border-radius: 8px;
-          box-sizing: border-box;
-          font: 16px lato, arial, helvetica, sans-serif;
-          height: auto;
-          min-height: 50px;
-          outline: none;
-          padding: 5px 10px 13px;
-          resize: none;
-          width: 100%;
-          min-height: 80px;
-
-          &:focus {
-            border-color: @cc-charcoal-light1;
-          }
-        }
+      textarea {
+        border: solid 1.5px @cc-charcoal-light2;
+        border-radius: 8px;
+        box-sizing: border-box;
+        font: 16px lato, arial, helvetica, sans-serif;
+        height: auto;
+        min-height: 50px;
+        outline: none;
+        padding: 5px 10px 13px;
+        resize: none;
+        width: 100%;
+        min-height: 80px;
 
-        .score {
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-          align-items: flex-end;
-
-          &>div {
-            color: @cc-charcoal;
-            font-weight: bold;
-          }
-
-          input {
-            width: 40px;
-          }
+        &:focus {
+          border-color: @cc-charcoal-light1;
         }
       }
 
+      .textAndScore {
+        display: flex;
+        gap: 35px;
+      }
     }
   }
 }
diff --git a/js/components/portal-dashboard/feedback/activity-feedback-score.tsx b/js/components/portal-dashboard/feedback/activity-feedback-score.tsx
@@ -4,6 +4,9 @@ import { TrackEventFunction } from "../../../actions";
 import { ScoreInput } from "./score-input";
 import { ScoringSettings } from "../../../util/scoring";
 import { AUTOMATIC_SCORE, MANUAL_SCORE, NO_SCORE } from "../../../util/scoring-constants";
+import { Rubric } from "./rubric-utils";
+
+import css from "../../../../css/portal-dashboard/feedback/activity-feedback-score.less";
 
 interface IProps {
   activityId: string | null;
@@ -14,12 +17,13 @@ interface IProps {
   studentId: string;
   updateActivityFeedback?: (activityId: string, activityIndex: number, platformStudentId: string, feedback: any) => void;
   trackEvent: TrackEventFunction;
-  className: string;
   scoringSettings: ScoringSettings;
+  rubricFeedback: any;
+  rubric: Rubric;
 }
 
 export const ActivityFeedbackScore: React.FC<IProps> = (props) => {
-  const { activityId, activityIndex, activityStarted, score, studentId, updateActivityFeedback, trackEvent, className, scoringSettings } = props;
+  const { activityId, activityIndex, activityStarted, score, studentId, updateActivityFeedback, trackEvent, scoringSettings, rubricFeedback, rubric } = props;
   const scoreType = scoringSettings.scoreType ?? NO_SCORE;
   const [ scoreChanged, setScoreChanged ] = useState(false);
 
@@ -54,21 +58,28 @@ export const ActivityFeedbackScore: React.FC<IProps> = (props) => {
         score={score}
         minScore={0}
         disabled={false}
-        className={className}
+        className={css.activityFeedbackScore}
         onChange={handleScoreChange}
         onBlur={scoreChanged ? updateScoreLogged : undefined}
       >
-        <div>Score</div>
+        <div className={css.scoreLabel}>Score</div>
       </ScoreInput>
     );
   }
 
-  const displayScore = "TBD"; // TBD: compute this in PT #187021252
+  let displayScore = "N/A";
+  if (rubricFeedback) {
+    const scoredValues = Object.values(rubricFeedback).filter((v: any) => v.score > 0);
+    if (scoredValues.length === rubric.criteria.length) {
+      const totalScore = scoredValues.reduce((acc, cur: any) => acc + cur.score, 0);
+      displayScore = String(totalScore);
+    }
+  }
 
   return (
-    <div>
-      <div>Score</div>
-      <div style={{marginTop: 5}}>{displayScore}</div>
+    <div className={css.activityFeedbackScore}>
+      <div className={css.scoreLabel}>Score</div>
+      <div>{displayScore}</div>
     </div>
   );
 

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
@@ -70,6 +70,7 @@ export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
               rubricFeedback={rubricFeedback}
               setFeedbackSortRefreshEnabled={setFeedbackSortRefreshEnabled}
               updateActivityFeedback={updateActivityFeedback}
+              scoringSettings={scoringSettings}
             />
           }
           <div className={css.textAndScore} data-cy="feedback-text-and-score">
@@ -94,8 +95,9 @@ export const ActivityLevelFeedbackStudentRows: React.FC<IProps> = (props) => {
               setFeedbackSortRefreshEnabled={setFeedbackSortRefreshEnabled}
               updateActivityFeedback={updateActivityFeedback}
               trackEvent={trackEvent}
-              className={css.score}
               scoringSettings={scoringSettings}
+              rubricFeedback={rubricFeedback}
+              rubric={rubric}
             />
           </div>
         </div>

diff --git a/js/components/portal-dashboard/feedback/rubric-table.tsx b/js/components/portal-dashboard/feedback/rubric-table.tsx
@@ -4,6 +4,8 @@ import Markdown from "markdown-to-jsx";
 import LaunchIcon from "../../../../img/svg-icons/launch-icon.svg";
 import { hasRubricFeedback } from "../../../util/activity-feedback-helper";
 import { Rubric, getFeedbackColor } from "./rubric-utils";
+import { ScoringSettings } from "../../../util/scoring";
+import { RUBRIC_SCORE } from "../../../util/scoring-constants";
 
 import css from "../../../../css/portal-dashboard/feedback/rubric-table.less";
 
@@ -15,15 +17,16 @@ interface IProps {
   activityIndex: number;
   setFeedbackSortRefreshEnabled: (value: boolean) => void;
   updateActivityFeedback: (activityId: string, activityIndex: number, platformStudentId: string, feedback: any) => void;
+  scoringSettings: ScoringSettings;
 }
 export class RubricTableContainer extends React.PureComponent<IProps> {
   render() {
-    const { rubric } = this.props;
+    const { rubric, scoringSettings } = this.props;
     const { criteria } = rubric;
 
     return (
       <div className={css.rubricContainer} data-cy="rubric-table">
-        {this.renderColumnHeaders(rubric)}
+        {this.renderColumnHeaders(rubric, scoringSettings)}
         <div className={css.rubricTable}>
           {criteria.map((crit: any) =>
             <div className={css.rubricTableRow} key={crit.id} id={crit.id}>
@@ -38,8 +41,9 @@ export class RubricTableContainer extends React.PureComponent<IProps> {
     );
   }
 
-  private renderColumnHeaders = (rubric: Rubric) => {
+  private renderColumnHeaders = (rubric: Rubric, scoringSettings: ScoringSettings) => {
     const { referenceURL } = rubric;
+    const showScore = scoringSettings.scoreType === RUBRIC_SCORE;
     return (
       <div className={css.columnHeaders}>
         <div className={css.rubricDescriptionHeader}>
@@ -54,7 +58,7 @@ export class RubricTableContainer extends React.PureComponent<IProps> {
         {rubric.ratings.map((rating: any) =>
           <div className={css.rubricScoreHeader} key={rating.id}>
             <div className={css.rubricScoreLevel}>{rating.label}</div>
-            {rubric.scoreUsingPoints && <div className={css.rubricScoreNumber}>({rating.score})</div>}
+            {rubric.scoreUsingPoints && showScore && <div className={css.rubricScoreNumber}>({rating.score})</div>}
           </div>
         )}
       </div>

diff --git a/js/components/portal-dashboard/feedback/score-input.tsx b/js/components/portal-dashboard/feedback/score-input.tsx
@@ -13,6 +13,8 @@ interface IProps {
   onBlur?: (score: number) => void;
 }
 
+const maxScore = 999;
+
 export class ScoreInput extends PureComponent<IProps> {
 
   render() {
@@ -21,7 +23,7 @@ export class ScoreInput extends PureComponent<IProps> {
     return (
       <div className={classNames(css.scoreInput, className, {[css.disabled]: disabled})}>
         {children}
-        <input type="number" disabled={disabled} value={score} min={minScore} onChange={this.handleChange} onKeyDown={this.handleKeyDown} onBlur={this.handleBlur} />
+        <input type="number" disabled={disabled} value={score} min={minScore} max={maxScore} onChange={this.handleChange} onKeyDown={this.handleKeyDown} onBlur={this.handleBlur} />
       </div>
     );
   }
@@ -35,7 +37,7 @@ export class ScoreInput extends PureComponent<IProps> {
   private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const {minScore, onChange} = this.props;
     const score = parseInt(e.target.value, 10);
-    if (score >= minScore) {
+    if ((score >= minScore) && (score <= maxScore)) {
       onChange(score);
     }
   }