Remove rank from contest voting (#1959)

* Remove rank from contest voting

* Rename relative_score to final_score

Co-authored-by: En Rong <53928333+chownces@users.noreply.github.com>
Co-authored-by: Chen Yanyu <39845424+YaleChen299@users.noreply.github.com>

Author: 3 people

src/commons/assessment/AssessmentTypes.ts

@@ -172,8 +172,8 @@ export type Testcase = {
 export type ContestEntry = {
   submission_id: number;
   answer: ContestEntryCodeAnswer; //contest entry program to be input into editor
-  rank?: number;
   score?: number;
+  final_score?: number;
   student_name?: string;
 };
 

src/commons/sideContent/SideContentContestEntryCard.tsx

@@ -16,7 +16,8 @@ type StateProps = {
   isValid: boolean;
   contestEntry: ContestEntry;
   entryNumber: number;
-  maxRank: number;
+  minScore: number;
+  maxScore: number;
 };
 
 /**
@@ -33,7 +34,8 @@ const SideContentContestEntryCard: React.FunctionComponent<SideContentConstestEn
       handleVotingSubmissionChange,
       contestEntry,
       entryNumber,
-      maxRank
+      minScore,
+      maxScore
     } = props;
 
     return (
@@ -49,13 +51,13 @@ const SideContentContestEntryCard: React.FunctionComponent<SideContentConstestEn
           <Pre className="contestentry-rank">
             <NumericInput
               disabled={!canSave}
-              value={contestEntry.rank}
-              onValueChange={(rank: number) =>
-                handleVotingSubmissionChange(contestEntry.submission_id, rank)
+              value={contestEntry.score}
+              onValueChange={(score: number) =>
+                handleVotingSubmissionChange(contestEntry.submission_id, score)
               }
-              placeholder={`Enter rank for entry ${entryNumber}`}
-              min={1}
-              max={maxRank}
+              placeholder={`Enter score for entry ${entryNumber}`}
+              min={minScore}
+              max={maxScore}
               allowNumericCharactersOnly
               fill
               minorStepSize={null} // limits input to integers

src/commons/sideContent/SideContentContestVoting.tsx

@@ -15,8 +15,10 @@ type DispatchProps = {
 type StateProps = {
   canSave: boolean;
   isValid: boolean;
-  handleVotingSubmissionChange: (entryId: number, rank: number) => void;
+  handleVotingSubmissionChange: (entryId: number, score: number) => void;
   contestEntries: ContestEntry[];
+  minScore: number;
+  maxScore: number;
 };
 
 /*
@@ -32,14 +34,10 @@ const columnHeader = (colClass: string, colTitle: string) => (
 const contestEntryHeader = (
   <div className="contestentries-header">
     {columnHeader('header-entryid', 'Entry Id')}
-    {columnHeader('header-entryrank', 'Rank')}
+    {columnHeader('header-entryrank', 'Score')}
   </div>
 );
 
-const contestEntryTooltipContent = (numOfEntries: number) => (
-  <span>Rank your favourite contest entries from 1 (best) to {numOfEntries} (worst)!</span>
-);
-
 /**
  * Main contest voting tab
  * @param props contestEntries for student to vote for : ContestEntry[],
@@ -51,7 +49,9 @@ const SideContentContestVoting: React.FunctionComponent<SideContentContestVoting
     canSave,
     isValid,
     handleContestEntryClick,
-    handleVotingSubmissionChange
+    handleVotingSubmissionChange,
+    maxScore,
+    minScore
   } = props;
   const [showContestEntries, setShowContestEntries] = useState<boolean>(true);
 
@@ -69,7 +69,8 @@ const SideContentContestVoting: React.FunctionComponent<SideContentContestVoting
               handleContestEntryClick={handleContestEntryClick}
               handleVotingSubmissionChange={handleVotingSubmissionChange}
               contestEntry={contestEntry}
-              maxRank={contestEntries.length}
+              minScore={minScore}
+              maxScore={maxScore}
             />
           ))
         ) : (
@@ -78,7 +79,15 @@ const SideContentContestVoting: React.FunctionComponent<SideContentContestVoting
       </div>
     ),
     // determines when to re-render
-    [isValid, canSave, contestEntries, handleContestEntryClick, handleVotingSubmissionChange]
+    [
+      isValid,
+      canSave,
+      contestEntries,
+      handleContestEntryClick,
+      handleVotingSubmissionChange,
+      maxScore,
+      minScore
+    ]
   );
 
   return (
@@ -90,7 +99,13 @@ const SideContentContestVoting: React.FunctionComponent<SideContentContestVoting
         onClick={() => setShowContestEntries(!showContestEntries)}
       >
         <span>Contest Voting</span>
-        <Tooltip2 content={contestEntryTooltipContent(contestEntries.length)}>
+        <Tooltip2
+          content={
+            <span>
+              Score your favourite contest entries from {minScore} (worst) to {maxScore} (best)!
+            </span>
+          }
+        >
           <Icon icon={IconNames.HELP} />
         </Tooltip2>
       </Button>

src/commons/sideContent/SideContentContestVotingContainer.tsx

@@ -25,6 +25,8 @@ const SideContentContestVotingContainer: React.FunctionComponent<SideContentCont
     const { canSave, contestEntries, handleSave, handleContestEntryClick } = props;
     const [isValid, setIsValid] = useState<boolean>(true);
     const [votingSubmission, setVotingSubmission] = useState<ContestEntry[]>([]);
+    const minScore = 11 - contestEntries.length;
+    const maxScore = 10;
 
     useEffect(() => {
       setVotingSubmission(contestEntries);
@@ -37,25 +39,25 @@ const SideContentContestVotingContainer: React.FunctionComponent<SideContentCont
      */
     const isSubmissionValid = (votingSubmission: ContestEntry[]) => {
       return votingSubmission.reduce((isValid, vote) => {
-        const rank = vote.rank!;
-        return isValid && rank >= 1 && rank <= contestEntries.length;
+        const score = vote.score!;
+        return isValid && score >= minScore && score <= maxScore;
       }, true);
     };
 
     const submissionHasNoNull = (votingSubmission: ContestEntry[]) => {
       return votingSubmission.reduce((noNull, vote) => {
-        return noNull && vote.rank !== undefined && vote.rank !== null;
+        return noNull && vote.score !== undefined && vote.score !== null;
       }, true);
     };
 
-    const handleVotingSubmissionChange = (submissionId: number, rank: number): void => {
+    const handleVotingSubmissionChange = (submissionId: number, score: number): void => {
       // update the votes
       const updatedSubmission = votingSubmission.map(vote =>
-        vote.submission_id === submissionId ? { ...vote, rank: rank } : vote
+        vote.submission_id === submissionId ? { ...vote, score: score } : vote
       );
       setVotingSubmission(updatedSubmission);
       const noDuplicates =
-        new Set(updatedSubmission.map(vote => vote.rank)).size === updatedSubmission.length;
+        new Set(updatedSubmission.map(vote => vote.score)).size === updatedSubmission.length;
       // validate that scores are unique
       const noNull = submissionHasNoNull(updatedSubmission);
       if (noDuplicates && noNull && isSubmissionValid(updatedSubmission)) {
@@ -64,7 +66,7 @@ const SideContentContestVotingContainer: React.FunctionComponent<SideContentCont
         setIsValid(true);
       } else if (noDuplicates && noNull) {
         showWarningMessage(
-          `Vote rankings invalid. Please input rankings between 1 - ${contestEntries.length}.`
+          `Vote rankings invalid. Please input scores between ${minScore} - ${maxScore}.`
         );
         setIsValid(false);
       } else if (!noDuplicates && noNull) {
@@ -82,6 +84,8 @@ const SideContentContestVotingContainer: React.FunctionComponent<SideContentCont
         handleContestEntryClick={handleContestEntryClick}
         handleVotingSubmissionChange={handleVotingSubmissionChange}
         contestEntries={votingSubmission}
+        minScore={minScore}
+        maxScore={maxScore}
       />
     );
   };

src/commons/sideContent/SideContentLeaderboardCard.tsx

@@ -30,7 +30,7 @@ const SideContentLeaderboardCard: React.FunctionComponent<SideContentLeaderboard
         >
           <Pre className="contestentry-entryid">{contestEntry.student_name}</Pre>
           <Pre className="contestentry-rank">{rank}</Pre>
-          <Pre className="contestentry-score">{contestEntry.score}</Pre>
+          <Pre className="contestentry-score">{contestEntry.final_score}</Pre>
         </Card>
       </div>
     );

src/commons/sideContent/__tests__/SideContentContestLeaderboard.tsx

@@ -8,19 +8,19 @@ const mockLeaderboardEntries = [
   {
     submission_id: 1,
     answer: { code: "display('hello world')" },
-    score: 100,
+    final_score: 100,
     student_name: 'student_1'
   },
   {
     submission_id: 2,
     answer: { code: 'function test() { return 1; }' },
-    score: 90,
+    final_score: 90,
     student_name: 'student_2'
   },
   {
     submission_id: 3,
     answer: { code: 'function test() { return 1; }' },
-    score: 80,
+    final_score: 80,
     student_name: 'student_3'
   }
 ];

src/commons/sideContent/__tests__/SideContentContestVoting.tsx

@@ -78,18 +78,20 @@ test('SideContentVotingContainer only updates when ranks assigned to entries are
   const contestVotingCard = contestVotingContainerRender.find('input');
 
   // simulate change to duplicate
-  contestVotingCard.map(card => card.simulate('change', { target: { value: 1 } }));
+  contestVotingCard.map(card => card.simulate('change', { target: { value: 10 } }));
   expect(mockedHandleSave).toHaveBeenCalledTimes(0);
 
   // to avoid warning messages from blueprint.js due to testing invalid input during tests
   const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
 
-  // simulate change to exceed rank limit (ie. if 2 entries can only rank [1, 2])
-  contestVotingCard.map(card => card.simulate('change', { target: { value: 3 } }));
+  // simulate change to exceed score limit (ie. if 2 entries can only rank [9, 10])
+  contestVotingCard.map(card => card.simulate('change', { target: { value: 11 } }));
   expect(mockedHandleSave).toHaveBeenCalledTimes(0);
 
   // simulate appropriate ranking for entries
-  contestVotingCard.map((card, index) => card.simulate('change', { target: { value: index + 1 } }));
+  contestVotingCard.map((card, index) =>
+    card.simulate('change', { target: { value: 10 - index } })
+  );
   expect(mockedHandleSave).toHaveBeenCalledTimes(1);
 
   consoleWarnSpy.mockRestore();