Merge pull request #171 from danielemery/112-support-entering-of-results-by-individual-question

Support entering of results by individual question

Author: danielemery

package-lock.json

@@ -23,6 +23,7 @@
     "@sentry/browser": "^9.6.0",
     "classnames": "^2.3.1",
     "date-fns": "^4.1.0",
+    "dexie": "^4.0.11",
     "docker-react": "^0.0.3",
     "graphql": "^16.8.1",
     "joi": "^17.6.0",

package.json

@@ -1,4 +1,4 @@
-import { Link, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { useMutation, useQuery } from '@apollo/client';
 import { useState } from 'preact/hooks';
@@ -9,12 +9,15 @@ import Loader from './components/Loader';
 import LoaderOverlay from './components/LoaderOverlay';
 import { UserSelector } from './components/UserSelector';
 import { formatDate, userIdentifier } from './helpers';
+import useAssertParams from './hooks/useAssertParams';
+import { useUnsubmittedAnswers } from './hooks/useUnsubmittedAnswers';
 import { COMPLETE_QUIZ, QUIZ, QUIZ_AND_AVAILABLE_USERS, QUIZZES } from './queries/quiz';
+import { UnsubmittedAnswer } from './services/db';
 import { Quiz } from './types/quiz';
 import { User } from './types/user';
 
 export default function EnterQuizResults() {
-  const { id } = useParams();
+  const { id } = useAssertParams();
   const { loading, data } = useQuery<{
     quiz: Quiz;
     users: { edges: { node: User }[] };
@@ -32,18 +35,33 @@ export default function EnterQuizResults() {
 
   const { user: authenticatedUser } = useQuizlord();
 
-  async function handleSubmit(score: number, participants: string[]) {
+  const { unsubmittedAnswers, currentTotalScore, handleScoresDeleted } = useUnsubmittedAnswers(id);
+
+  async function handleSubmit(score: number, unsubmittedAnswers: UnsubmittedAnswer[], participants: string[]) {
     const participantsWithAuthenticatedUser = [authenticatedUser?.email, ...participants];
+    const questionResults = unsubmittedAnswers.map((answer) => ({
+      questionNum: answer.questionNumber,
+      score: answer.score,
+    }));
     await completeQuiz({
-      variables: { quizId: id, completedBy: participantsWithAuthenticatedUser, score },
+      variables: {
+        quizId: id,
+        completedBy: participantsWithAuthenticatedUser,
+        score,
+        questionResults,
+      },
     });
+    handleScoresDeleted();
     setComplete(true);
   }
 
-  const [score, setScore] = useState<number>(0);
+  const [manuallyEnteredScore, setManuallyEnteredTotalScore] = useState<number>(0);
   const [participants, setParticipants] = useState<string[]>([]);
   const [complete, setComplete] = useState(false);
 
+  const missingAnswers =
+    unsubmittedAnswers.length > 0 && unsubmittedAnswers.length < (data?.quiz?.questions?.length || 0);
+
   if (!data || loading) {
     return <Loader message='Loading your quiz...' />;
   }
@@ -69,14 +87,31 @@ export default function EnterQuizResults() {
                 Score
               </label>
               <div className='mt-1'>
-                <input
-                  type='number'
-                  name='score'
-                  autoComplete='quiz-score'
-                  value={score}
-                  onChange={(e) => setScore(parseFloat((e.target as HTMLInputElement).value))}
-                  className='shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md'
-                />
+                {unsubmittedAnswers.length > 0 ? (
+                  <div>
+                    <div>Calculated: {currentTotalScore}</div>
+                    <Link to={`/quiz/${id}/question/1`}>
+                      <Button>Edit</Button>
+                    </Link>
+                    <Button warning onClick={() => handleScoresDeleted()}>
+                      Delete & Override
+                    </Button>
+                  </div>
+                ) : (
+                  <div>
+                    <input
+                      type='number'
+                      name='score'
+                      autoComplete='quiz-score'
+                      value={manuallyEnteredScore}
+                      onChange={(e) => setManuallyEnteredTotalScore(parseFloat((e.target as HTMLInputElement).value))}
+                      className='shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md'
+                    />
+                    <Link to={`/quiz/${id}/question/1`}>
+                      <Button>Individual Entry</Button>
+                    </Link>
+                  </div>
+                )}
               </div>
             </div>
             <div>
@@ -119,9 +154,26 @@ export default function EnterQuizResults() {
               Cancel
             </Button>
           </Link>
-          <Button onClick={() => handleSubmit(score, participants)} disabled={isCompletingQuiz}>
+          <Button
+            onClick={() =>
+              handleSubmit(
+                unsubmittedAnswers.length > 0 ? currentTotalScore : manuallyEnteredScore,
+                unsubmittedAnswers,
+                participants,
+              )
+            }
+            disabled={isCompletingQuiz || missingAnswers}
+          >
             Submit Results
           </Button>
+          {missingAnswers && (
+            <p className='mt-2 text-sm text-red-600 font-medium'>
+              Questions results have been only partially entered.
+              <br />
+              Please either press &quot;Edit&quot; above and complete the remaining questions, or press &quot;Delete &
+              Override&quot; above and manually enter your score.
+            </p>
+          )}
         </div>
       )}
     </div>

src/EnterQuizResults.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+
+import { QuestionCube } from './components/QuestionCube';
+import { LocalQuestion } from './hooks/useQuizQuestions';
+
+interface QuestionOverviewProps {
+  quizId: string;
+  questions: LocalQuestion[];
+  selectedNumber?: number;
+}
+
+export default function QuestionOverview({ questions, quizId, selectedNumber }: QuestionOverviewProps) {
+  return (
+    <div className='grid grid-cols-5 gap-4'>
+      {questions.map((q) => (
+        <Link key={q.questionNum} to={`/quiz/${quizId}/question/${q.questionNum}`}>
+          <QuestionCube
+            questionNum={q.questionNum}
+            score={q.unsubmittedScore}
+            selected={selectedNumber === q.questionNum}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+}

src/QuestionOverview.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQuery } from '@apollo/client';
 import { Fragment } from 'preact';
 
 import QuizImageComponent from './QuizImage';
-import QuizQuestions from './QuizQuestions';
+import QuizQuestions, { QuizQuestionWithResults } from './QuizQuestions';
 import { useQuizlord } from './QuizlordProvider';
 import Button from './components/Button';
 import Loader from './components/Loader';
@@ -18,7 +18,7 @@ import {
 } from './helpers';
 import { AI_PROCESS_QUIZ_IMAGES, MARK_INACCURATE_OCR, MARK_QUIZ_ILLEGIBLE, QUIZ, QUIZZES } from './queries/quiz';
 import { userCanPerformAction } from './services/authorization';
-import { Quiz as QuizType } from './types/quiz';
+import { QuizCompletion, QuizQuestion, Quiz as QuizType } from './types/quiz';
 
 const imageTypeSortValues: {
   [imageType: string]: number;
@@ -81,7 +81,10 @@ export default function Quiz() {
             )}
           </dl>
           {data.quiz.questions.length > 0 ? (
-            <QuizQuestions questions={data.quiz.questions} reportedInaccurateOCR={data.quiz.reportedInaccurateOCR} />
+            <QuizQuestions
+              questions={packAnswersIntoQuestions(data.quiz.questions, data.quiz.completions, user?.email)}
+              reportedInaccurateOCR={data.quiz.reportedInaccurateOCR}
+            />
           ) : null}
           {[...data.quiz.images]
             .sort((a, b) => {
@@ -166,3 +169,42 @@ export default function Quiz() {
     </div>
   );
 }
+
+function packAnswersIntoQuestions(
+  questions: QuizQuestion[],
+  completions: QuizCompletion[],
+  currentUserEmail?: string,
+): QuizQuestionWithResults[] {
+  return questions.map((question) => {
+    const resultsForQuestion = completions
+      .filter((completion) => completion.questionResults?.length)
+      .map((completion) => {
+        const questionResult = completion.questionResults.find((result) => result.questionId === question.id);
+        return {
+          users: completion.completedBy,
+          score: questionResult ? questionResult.score : 'INCORRECT',
+        };
+      });
+    const myScore = currentUserEmail
+      ? resultsForQuestion.find((result) => result.users.some((user) => user.email === currentUserEmail))?.score
+      : undefined;
+    const averageScore =
+      resultsForQuestion.length > 0
+        ? resultsForQuestion.reduce((acc, result) => {
+            if (result.score === 'CORRECT') return acc + 1;
+            if (result.score === 'HALF_CORRECT') return acc + 0.5;
+            return acc;
+          }, 0) / resultsForQuestion.length
+        : undefined;
+    const userResults = resultsForQuestion.map((result) => ({
+      users: result.users.map((user) => userIdentifier(user)),
+      score: result.score,
+    }));
+    return {
+      ...question,
+      userResults,
+      myScore,
+      averageScore,
+    };
+  });
+}