Merge pull request #1396 from isaacphysics/feature/quiz-view

Create `/test/view` pages

Author: jacbn

src/IsaacApiTypes.tsx

@@ -420,6 +420,10 @@ export interface QuizSummaryDTO extends ContentSummaryDTO {
     hiddenFromRoles?: UserRole[];
 }
 
+export interface DetailedQuizSummaryDTO extends QuizSummaryDTO {
+    rubric?: ContentDTO;
+}
+
 export interface EmailTemplateDTO extends ContentDTO {
     subject?: string;
     plainTextContent?: string;

src/app/components/elements/quiz/QuizAttemptFooter.tsx

@@ -1,4 +1,4 @@
-import {QuizAttemptProps, QuizPagination} from "./QuizAttemptComponent";
+import {QuizAttemptProps, QuizPagination} from "./QuizContentsComponent";
 import {
     mutationSucceeded,
     showSuccessToast,
@@ -37,7 +37,6 @@ export function QuizAttemptFooter(props: QuizAttemptProps & {feedbackLink: strin
     const sectionCount = Object.keys(sections).length;
 
     let controls;
-    let prequel = null;
     if (page === null) {
         let anyAnswered = false;
         const completedSections = Object.keys(sections).reduce((map, sectionId) => {
@@ -55,17 +54,14 @@ export function QuizAttemptFooter(props: QuizAttemptProps & {feedbackLink: strin
         const totalCompleted = Object.values(completedSections).reduce((sum, complete) => sum + (complete ? 1 : 0), 0);
         const firstIncomplete = Object.values(completedSections).indexOf(false);
         const allCompleted = totalCompleted === sectionCount;
-
-        const primaryButton = anyAnswered ? "Continue" : "Start";
-        const primaryDescription = anyAnswered ? "resume" : "begin";
         const submitButton = submitting ? <IsaacSpinner /> : allCompleted ? "Submit" : "Submit anyway";
 
         if (allCompleted) {
             controls = <>
                 {
                     siteSpecific(
-                        <Button color="tertiary" tag={Link} replace to={pageLink(1)}>Review answers</Button>,
-                        <Button outline color="secondary" tag={Link} replace to={pageLink(1)}>Review answers</Button>
+                        <Button color="tertiary" tag={Link} to={pageLink(1)}>Review answers</Button>,
+                        <Button outline color="secondary" tag={Link} to={pageLink(1)}>Review answers</Button>
                     )
                 }
                 <Spacer/>
@@ -74,7 +70,6 @@ export function QuizAttemptFooter(props: QuizAttemptProps & {feedbackLink: strin
                 <Button color={siteSpecific("secondary", "primary")} onClick={submitQuiz}>{submitButton}</Button>
             </>;
         } else {
-            prequel = <p>Click &lsquo;{primaryButton}&rsquo; when you are ready to {primaryDescription} the test.</p>;
             if (anyAnswered) {
                 controls = <>
                     <div className="text-center">
@@ -83,12 +78,12 @@ export function QuizAttemptFooter(props: QuizAttemptProps & {feedbackLink: strin
                     <Spacer/>
                     {totalCompleted} / {sectionCount} sections complete<br/>
                     <Spacer/>
-                    <Button color={siteSpecific("secondary", "primary")} tag={Link} replace to={pageLink(firstIncomplete + 1)}>{primaryButton}</Button>
+                    <Button color={siteSpecific("secondary", "primary")} tag={Link} to={pageLink(firstIncomplete + 1)}>Continue</Button>
                 </>;
             } else {
                 controls = <>
                     <Spacer/>
-                    <Button color={siteSpecific("secondary", "primary")} tag={Link} replace to={pageLink(1)}>{primaryButton}</Button>
+                    <Button color={siteSpecific("secondary", "primary")} tag={Link} to={pageLink(1)}>Continue</Button>
                 </>;
             }
         }
@@ -97,7 +92,6 @@ export function QuizAttemptFooter(props: QuizAttemptProps & {feedbackLink: strin
     }
 
     return <>
-        {prequel}
         <div className="d-flex border-top pt-2 my-2 align-items-center">
             {controls}
         </div>

…s/elements/quiz/QuizAttemptComponent.tsx …/elements/quiz/QuizContentsComponent.tsxsrc/app/components/elements/quiz/QuizAttemptComponent.tsx renamed to src/app/components/elements/quiz/QuizContentsComponent.tsx src/app/components/elements/quiz/QuizAttemptComponent.tsx renamed to src/app/components/elements/quiz/QuizContentsComponent.tsx

@@ -1,5 +1,5 @@
 import {
-    IsaacQuizDTO,
+    DetailedQuizSummaryDTO,
     IsaacQuizSectionDTO,
     QuestionDTO,
     QuizAttemptDTO,
@@ -16,6 +16,8 @@ import {
     isTeacherOrAbove,
     QUIZ_VIEW_STUDENT_ANSWERS_RELEASE_TIMESTAMP,
     siteSpecific,
+    SUBJECTS,
+    TAG_ID,
     useDeviceSize
 } from "../../../services";
 import {Spacer} from "../Spacer";
@@ -33,25 +35,38 @@ import {Markup} from "../markup";
 import classNames from "classnames";
 
 type PageLinkCreator = (page?: number) => string;
+type QuizView = { quiz?: DetailedQuizSummaryDTO & { subjectId: SUBJECTS | TAG_ID }, quizId: string | undefined };
 
-export interface QuizAttemptProps {
-    attempt: QuizAttemptDTO;
+interface QuizProps {
     user: RegisteredUserDTO;
-    page: number | null;
-    questions: QuestionDTO[];
-    sections: { [id: string]: IsaacQuizSectionDTO };
-    pageLink: PageLinkCreator;
     pageHelp: React.ReactElement;
-    preview?: boolean;
     studentUser?: UserSummaryDTO;
     quizAssignmentId?: string;
 }
+export interface QuizAttemptProps extends QuizProps {
+    attempt: QuizAttemptDTO
+    view?: undefined;
+    preview?: boolean;
+    page: number | null;
+    pageLink: PageLinkCreator;
+    questions: QuestionDTO[];
+    sections: { [id: string]: IsaacQuizSectionDTO };
+}
+interface QuizViewProps extends QuizProps {
+    attempt?: undefined;
+    view: QuizView;
+    preview?: undefined;
+    page?: undefined;
+    pageLink?: undefined;
+    questions?: undefined;
+    sections?: undefined;
+}
 
 function inSection(section: IsaacQuizSectionDTO, questions: QuestionDTO[]) {
     return questions.filter(q => q.id?.startsWith(section.id as string + "|"));
 }
 
-function QuizContents({attempt, sections, questions, pageLink}: QuizAttemptProps) {
+function QuizDetails({attempt, sections, questions, pageLink}: QuizAttemptProps) {
     if (isDefined(attempt.completedDate)) {
         return attempt.feedbackMode === "NONE" ?
             <h4>No feedback available</h4>
@@ -71,7 +86,7 @@ function QuizContents({attempt, sections, questions, pageLink}: QuizAttemptProps
                             const section = sections[k];
                             return <tr key={k}>
                                 {attempt.feedbackMode === 'DETAILED_FEEDBACK' ?
-                                    <td><Link replace to={pageLink(index + 1)}>{section.title}</Link></td> :
+                                    <td><Link to={pageLink(index + 1)}>{section.title}</Link></td> :
                                     <td>{section.title}</td>
                                 }
                                 <td>
@@ -94,7 +109,7 @@ function QuizContents({attempt, sections, questions, pageLink}: QuizAttemptProps
                     const answerCount = questionsInSection.filter(q => q.bestAttempt !== undefined).length;
                     const completed = questionsInSection.length === answerCount;
                     return <li key={k}>
-                        <Link replace to={pageLink(index + 1)}>{section.title}</Link>
+                        <Link to={pageLink(index + 1)}>{section.title}</Link>
                         {" "}
                         <small className="text-muted">{completed ? "Completed" : anyStarted ? `${answerCount} / ${questionsInSection.length}` : ""}</small>
                     </li>;
@@ -104,19 +119,20 @@ function QuizContents({attempt, sections, questions, pageLink}: QuizAttemptProps
     }
 }
 
-function QuizHeader({attempt, preview, user}: QuizAttemptProps) {
+function QuizHeader({attempt, preview, view, user}: QuizAttemptProps | QuizViewProps) {
     const dispatch = useAppDispatch();
-    const assignment = attempt.quizAssignment;
-    if (preview) {
+    if (preview || view) {
+        const quiz = view ? view.quiz : attempt.quiz;
         return <>
-            <EditContentButton doc={attempt.quiz} />
-            <div className="d-flex">
-                <span>You are previewing this test.</span>
+            {preview && <EditContentButton doc={attempt.quiz} />}
+            <div data-testid="quiz-action" className="d-flex">
+                <p>{ preview ? "You are previewing this test." : "You are viewing the rubric for this test."}</p>
                 <Spacer />
-                {isTeacherOrAbove(user) && <Button onClick={() => dispatch(showQuizSettingModal(attempt.quiz as IsaacQuizDTO))}>Set Test</Button>}
+                {isTeacherOrAbove(user) && <Button onClick={() => dispatch(showQuizSettingModal(quiz!))}>Set Test</Button>}
             </div>
         </>;
-    } else if (isDefined(assignment)) {
+    } else if (isDefined(attempt.quizAssignment)) {
+        const assignment = attempt.quizAssignment;
         return <>
             <p className="d-flex">
                 <span>
@@ -139,12 +155,12 @@ function QuizHeader({attempt, preview, user}: QuizAttemptProps) {
             </Alert>}
         </>;
     } else {
-        return <p>You {attempt.completedDate ? "freely attempted" : "are freely attempting"} this test.</p>;
+        return <p data-testid="quiz-action">You {attempt.completedDate ? "freely attempted" : "are freely attempting"} this test.</p>;
     }
 }
 
-function QuizRubric({attempt}: {attempt: QuizAttemptDTO}) {
-    const rubric = attempt.quiz?.rubric;
+function QuizRubric({attempt, view}: Pick<QuizAttemptProps | QuizViewProps, "attempt" | "view">) {
+    const rubric = attempt ? attempt.quiz?.rubric : view?.quiz?.rubric;
     const renderRubric = (rubric?.children || []).length > 0;
     return <div>
         {rubric && renderRubric && <div>
@@ -207,9 +223,20 @@ function QuizSection({attempt, page, studentUser, user, quizAssignmentId}: QuizA
 
 export const myQuizzesCrumbs = [{title: siteSpecific("My Tests", "My tests"), to: `/tests`}];
 export const teacherQuizzesCrumbs = [{title: siteSpecific("Set / Manage Tests", "Set tests"), to: `/set_tests`}];
-const QuizTitle = ({attempt, page, pageLink, pageHelp, preview, studentUser, user}: QuizAttemptProps) => {
-    let quizTitle = attempt.quiz?.title || attempt.quiz?.id || "Test";
-    if (isDefined(attempt.completedDate)) {
+export const rubricCrumbs = [{title: siteSpecific("Practice Tests", "Practice tests"), to: "/practice_tests"}];
+const getCrumbs = (preview: boolean | undefined, view: boolean | undefined, user: RegisteredUserDTO) => {
+    if (preview && isTeacherOrAbove(user)) {
+        return teacherQuizzesCrumbs;
+    } if (view) {
+        return rubricCrumbs;
+    }
+    return myQuizzesCrumbs;
+};
+
+const QuizTitle = ({attempt, view, page, pageLink, pageHelp, preview, studentUser, user}: QuizAttemptProps | QuizViewProps) => {
+    const quiz = attempt ? attempt.quiz : view.quiz;
+    let quizTitle = quiz?.title || quiz?.id || "Test";
+    if (isDefined(attempt?.completedDate)) {
         quizTitle += " Feedback";
     }
     if (isDefined(studentUser)) {
@@ -218,8 +245,9 @@ const QuizTitle = ({attempt, page, pageLink, pageHelp, preview, studentUser, use
     if (preview) {
         quizTitle += " Preview";
     }
-    const crumbs = preview && isTeacherOrAbove(user) ? teacherQuizzesCrumbs : myQuizzesCrumbs;
-    if (page === null) {
+
+    const crumbs = getCrumbs(preview, !!view, user);
+    if (page === null || page === undefined) {
         return <TitleAndBreadcrumb currentPageTitle={quizTitle} help={pageHelp}
             intermediateCrumbs={crumbs}
         />;
@@ -246,31 +274,38 @@ export function QuizPagination({page, sections, pageLink, finalLabel}: QuizAttem
     const nextLink = pageLink(!finalSection ? page + 1 : undefined);
 
     return <div className="d-flex w-100 justify-content-between align-items-center">
-        <Button color="primary" outline size={below["sm"](deviceSize) ? "sm" : ""} tag={Link} replace to={backLink}>Back</Button>
+        <Button color="primary" outline size={below["sm"](deviceSize) ? "sm" : ""} tag={Link} to={backLink}>Back</Button>
         <div className="d-none d-md-block">Section {page} / {sectionCount}</div>
-        <Button color="secondary" size={below["sm"](deviceSize) ? "sm" : ""} tag={Link} replace to={nextLink}>{finalSection ? finalLabel : "Next"}</Button>
+        <Button color="secondary" size={below["sm"](deviceSize) ? "sm" : ""} tag={Link} to={nextLink}>{finalSection ? finalLabel : "Next"}</Button>
+    </div>;
+}
+
+function QuizOverview(props: QuizAttemptProps | QuizViewProps) {
+    const {studentUser, user, quizAssignmentId} = props;
+    const viewingAsSomeoneElse = isDefined(studentUser) && studentUser?.id !== user?.id;
+    return <div className="mt-4">
+        {!isDefined(studentUser?.id) && <QuizHeader {...props} />}
+        {viewingAsSomeoneElse && <div className="mb-2">
+            You are viewing this test as <b>{studentUser?.givenName} {studentUser?.familyName}</b>.{quizAssignmentId && <> <Link to={`/test/assignment/${quizAssignmentId}/feedback`}>Click here</Link> to return to the teacher test feedback page.</>}
+        </div>}
+        <QuizRubric {...props}/>
+        { props.attempt && <QuizDetails {...props} /> }
     </div>;
 }
 
-export function QuizAttemptComponent(props: QuizAttemptProps) {
-    const {page, questions, studentUser, user, quizAssignmentId} = props;
+function QuizQuestions(props: Omit<QuizAttemptProps, 'page'> & {page: number}) {
     // Assumes that ids of questions are defined - I don't know why this is not enforced in the editor/backend, because
     // we do unchecked casts of "possibly undefined" content ids to strings almost everywhere
-    const questionNumbers = Object.assign({}, ...questions.map((q, i) => ({[q.id as string]: i + 1})));
-    const viewingAsSomeoneElse = isDefined(studentUser) && studentUser?.id !== user?.id;
+    const questionNumbers = Object.assign({}, ...props.questions.map((q, i) => ({[q.id as string]: i + 1})));
+    
     return <QuizAttemptContext.Provider value={{quizAttempt: props.attempt, questionNumbers}}>
-        <QuizTitle {...props} />
-        {page === null ?
-            <div className="mt-4">
-                {!isDefined(studentUser?.id) && <QuizHeader {...props} />}
-                {viewingAsSomeoneElse && <div className="mb-2">
-                    You are viewing this test as <b>{studentUser?.givenName} {studentUser?.familyName}</b>.{quizAssignmentId && <> <Link to={`/test/assignment/${quizAssignmentId}/feedback`}>Click here</Link> to return to the teacher test feedback page.</>}
-                </div>}
-                <QuizRubric {...props}/>
-                <QuizContents {...props} />
-            </div>
-            :
-            <QuizSection {...props} page={page}/>
-        }
+        <QuizSection {...props} page={props.page}/>
     </QuizAttemptContext.Provider>;
 }
+
+export function QuizContentsComponent(props: QuizAttemptProps | QuizViewProps) {
+    return <>
+        <QuizTitle {...props} />
+        {props.page === null || props.page === undefined ? <QuizOverview {...props}/> : <QuizQuestions {...props} page={props.page} />}
+    </>;
+}

src/app/components/elements/quiz/buildErrorComponent.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import {TitleAndBreadcrumb} from "../TitleAndBreadcrumb";
+import {Alert} from "reactstrap";
+import { getRTKQueryErrorMessage } from "../../../state";
+import type {FetchBaseQueryError} from "@reduxjs/toolkit/query";
+import type {SerializedError} from "@reduxjs/toolkit";
+import { LinkInfo } from "../../../services";
+
+type Error = FetchBaseQueryError | SerializedError | undefined;
+
+export const buildErrorComponent = (title: string, heading: string, breadcrumbs: LinkInfo[]) => function ErrorComponent(error: Error){
+    return <>
+        <TitleAndBreadcrumb currentPageTitle={title} intermediateCrumbs={breadcrumbs} />
+        <Alert color="danger">
+            <h4 className="alert-heading">{heading}</h4>
+            <p data-testid="error-message">{getRTKQueryErrorMessage(error).message}</p>
+        </Alert>
+    </>;
+};

src/app/components/pages/quizzes/PracticeQuizzes.tsx

@@ -70,13 +70,8 @@ const PracticeQuizzesComponent = ({user}: QuizzesPageProps) => {
                                 {quiz.summary && <div className="small text-muted d-none d-md-block">{quiz.summary}</div>}
                             </div>
                             <Spacer />
-                            {isTutorOrAbove(user) && <div className="d-none d-md-flex align-items-center me-4">
-                                <Link to={{pathname: `/test/preview/${quiz.id}`}}>
-                                    <span>Preview</span>
-                                </Link>
-                            </div>}
-                            <Button tag={Link} to={{pathname: `/test/attempt/${quiz.id}`}}>
-                                {siteSpecific("Take Test", "Take test")}
+                            <Button tag={Link} to={{pathname: `/test/view/${quiz.id}`}}>
+                                {siteSpecific("View Test", "View test")}
                             </Button>
                         </div>
                     </ListGroupItem>)}

src/app/components/pages/quizzes/QuizAttemptFeedback.tsx

@@ -4,10 +4,10 @@ import {ShowLoading} from "../../handlers/ShowLoading";
 import {isDefined, useQuizAttemptFeedback} from "../../../services";
 import {
     myQuizzesCrumbs,
-    QuizAttemptComponent,
+    QuizContentsComponent,
     QuizAttemptProps,
     QuizPagination
-} from "../../elements/quiz/QuizAttemptComponent";
+} from "../../elements/quiz/QuizContentsComponent";
 import {QuizAttemptDTO, RegisteredUserDTO} from "../../../../IsaacApiTypes";
 import {Spacer} from "../../elements/Spacer";
 import {TitleAndBreadcrumb} from "../../elements/TitleAndBreadcrumb";
@@ -22,7 +22,7 @@ function QuizFooter(props: QuizAttemptProps) {
         prequel = <p className="mt-3">Click on a section title or click &lsquo;Next&rsquo; to look at {isDefined(studentUser) ? "their" : "your"} detailed feedback.</p>;
         controls = <>
             <Spacer/>
-            <Button tag={Link} replace to={pageLink(1)}>Next</Button>
+            <Button tag={Link} to={pageLink(1)}>Next</Button>
         </>;
     } else {
         controls = <QuizPagination {...props} page={page} finalLabel="Back to Overview" />;
@@ -65,7 +65,7 @@ export const QuizAttemptFeedback = ({user}: {user: RegisteredUserDTO}) => {
     return <Container className={`mb-5 ${attempt?.quiz?.subjectId}`}>
         <ShowLoading until={attempt || error}>
             {isDefined(attempt) && <>
-                <QuizAttemptComponent {...subProps} />
+                <QuizContentsComponent {...subProps} />
                 {attempt.feedbackMode === 'DETAILED_FEEDBACK' && <QuizFooter {...subProps} />}
             </>}
             {isDefined(error) && <>

src/app/components/pages/quizzes/QuizDoAssignment.tsx

@@ -3,7 +3,7 @@ import {clearQuizAttempt, loadQuizAssignmentAttempt, useAppDispatch} from "../..
 import {useParams} from "react-router-dom";
 import {ShowLoading} from "../../handlers/ShowLoading";
 import {isDefined, useCurrentQuizAttempt} from "../../../services";
-import {myQuizzesCrumbs, QuizAttemptComponent, QuizAttemptProps} from "../../elements/quiz/QuizAttemptComponent";
+import {myQuizzesCrumbs, QuizContentsComponent, QuizAttemptProps} from "../../elements/quiz/QuizContentsComponent";
 import {QuizAttemptDTO, RegisteredUserDTO} from "../../../../IsaacApiTypes";
 import {TitleAndBreadcrumb} from "../../elements/TitleAndBreadcrumb";
 import {QuizAttemptFooter} from "../../elements/quiz/QuizAttemptFooter";
@@ -41,7 +41,7 @@ export const QuizDoAssignment = ({user}: {user: RegisteredUserDTO}) => {
     return <Container className={`mb-5 ${attempt?.quiz?.subjectId}`}>
         <ShowLoading until={attempt || error}>
             {attempt && <>
-                <QuizAttemptComponent {...subProps} />
+                <QuizContentsComponent {...subProps} />
                 <QuizAttemptFooter {...subProps} />
             </>}
             {error && <>