diff --git a/js/components/portal-dashboard/feedback/feedback-legend.tsx b/js/components/portal-dashboard/feedback/feedback-legend.tsx index 8f601b22..005a6b2b 100644 --- a/js/components/portal-dashboard/feedback/feedback-legend.tsx +++ b/js/components/portal-dashboard/feedback/feedback-legend.tsx @@ -61,7 +61,7 @@ const FeedbackLegend: React.FC = (props) => { {feedbackLevel === "Activity" &&
- +
{showAvgScore &&
diff --git a/js/components/portal-dashboard/feedback/feedback-settings-modal.tsx b/js/components/portal-dashboard/feedback/feedback-settings-modal.tsx index b746d186..a32dd642 100644 --- a/js/components/portal-dashboard/feedback/feedback-settings-modal.tsx +++ b/js/components/portal-dashboard/feedback/feedback-settings-modal.tsx @@ -21,11 +21,13 @@ interface IProps { scoringSettings: ScoringSettings; updateActivityFeedbackSettings: (activityId: string, activityIndex: number, feedbackFlags: any) => void; rubric?: Rubric; + feedbacks: any; } interface IState { scoreType: string; maxScore: number; + confirmMaxScore: boolean; } class FeedbackSettingsModal extends PureComponent { @@ -33,15 +35,16 @@ class FeedbackSettingsModal extends PureComponent { constructor(props: IProps) { super(props); - this.initialSettings = props.scoringSettings; - this.state = {...props.scoringSettings}; + this.initialSettings = { + ...props.scoringSettings, + confirmMaxScore: false, + }; + this.state = {...this.initialSettings}; } render() { - const { scoreType, maxScore } = this.state; - const { show, rubric } = this.props; - const maxScoreDisabled = scoreType !== MANUAL_SCORE; - const hasScoredQuestions = getScoredQuestions(this.props.activity).size > 0; + const { confirmMaxScore } = this.state; + const { show } = this.props; return ( @@ -52,58 +55,92 @@ class FeedbackSettingsModal extends PureComponent {
-
- -
-
- - -
Max score
-
-
-
-

- All activities within this assignment can be scored up to your specified max score. -

-

- You may also choose not to score any student’s activities by not entering values in the entry fields. -

-
-
- {rubric && ( -
- -
-

- All activities within this assignment will receive a score based on the activity-level rubric scores you’ve selected. -

-
-
- )} - {hasScoredQuestions && ( -
- -
-

- All activities within this assignment will receive a score based on the total score of autoscored multiple-choice questions. -

-
-
- )} -
-
- Cancel -
-
- Save -
-
+ {!confirmMaxScore && this.renderOptions()} + {confirmMaxScore && this.renderConfirmMaxScore()}
); } + renderOptions() { + const { scoreType, maxScore } = this.state; + const { rubric } = this.props; + const maxScoreDisabled = scoreType !== MANUAL_SCORE; + const hasScoredQuestions = getScoredQuestions(this.props.activity).size > 0; + + return ( + <> +
+ +
+
+ + +
Max score
+
+
+
+

+ All activities within this assignment can be scored up to your specified max score. +

+

+ You may also choose not to score any student’s activities by not entering values in the entry fields. +

+
+
+ {rubric && ( +
+ +
+

+ All activities within this assignment will receive a score based on the activity-level rubric scores you’ve selected. +

+
+
+ )} + {hasScoredQuestions && ( +
+ +
+

+ All activities within this assignment will receive a score based on the total score of autoscored multiple-choice questions. +

+
+
+ )} +
+
+ Cancel +
+
+ Save +
+
+ + ); + } + + renderConfirmMaxScore() { + const { maxScore } = this.state; + + return ( + <> +

+ Some of the current student scores will be above the new max score of {maxScore}. +

+
+
+ Cancel +
+
+ Continue +
+
+ + ); + } + private handleScoreTypeChange = (scoreType: ScoreType) => { this.setState({ scoreType }); } @@ -113,20 +150,34 @@ class FeedbackSettingsModal extends PureComponent { } private handleCancel = () => { - // restore initial settings - this.setState(this.initialSettings); - this.close(); + if (this.state.confirmMaxScore) { + this.setState({ confirmMaxScore: false }); + } else { + // restore initial settings + this.setState(this.initialSettings); + this.close(); + } } private handleSave = () => { - const {scoreType, maxScore} = this.state; - const {updateActivityFeedbackSettings, activityId, activityIndex} = this.props; + const {scoreType, maxScore, confirmMaxScore} = this.state; + const {updateActivityFeedbackSettings, activityId, activityIndex, feedbacks} = this.props; if (!this.saveDisabled) { const updates: any = { scoreType }; if (maxScore !== undefined) { + // check if scores above max score and confirm if they are + const scoresAboveMax = feedbacks.scores.reduce((acc: boolean, cur: number) => { + return acc || cur > maxScore; + }, false); + if (scoresAboveMax && !confirmMaxScore) { + this.setState({ confirmMaxScore: true }); + return; + } + updates.maxScore = maxScore; } updateActivityFeedbackSettings(activityId, activityIndex, updates); + this.setState({ confirmMaxScore: false }); this.close(); } } @@ -157,7 +208,7 @@ function mapStateToProps() { }; } -const mapDispatchToProps = (dispatch: any, ownProps: any): Partial => { +const mapDispatchToProps = (dispatch: any): Partial => { return { updateActivityFeedbackSettings: (activityId, activityIndex, feedbackFlags) => dispatch(updateActivityFeedbackSettings(activityId, activityIndex, feedbackFlags)), }; diff --git a/js/components/portal-dashboard/feedback/feedback-settings-toggle.tsx b/js/components/portal-dashboard/feedback/feedback-settings-toggle.tsx index 26201a5c..dc14e788 100644 --- a/js/components/portal-dashboard/feedback/feedback-settings-toggle.tsx +++ b/js/components/portal-dashboard/feedback/feedback-settings-toggle.tsx @@ -8,10 +8,11 @@ import css from "../../../../css/portal-dashboard/feedback/feedback-settings-tog interface IProps { activity: Map; scoringSettings: ScoringSettings; + feedbacks: any; } export const FeedbackSettingsToggle: React.FC = (props) => { - const { activity, scoringSettings } = props; + const { activity, scoringSettings, feedbacks } = props; const [modalOpen, setModalOpen] = useState(false); const [buttonActive, setButtonActive] = useState(false); @@ -33,6 +34,7 @@ export const FeedbackSettingsToggle: React.FC = (props) => { onHide={handleShowModal(false)} show={true} scoringSettings={scoringSettings} + feedbacks={feedbacks} />}
);