Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: quiz designer snags #113

Merged
merged 3 commits into from
Sep 11, 2024
Merged

fix: quiz designer snags #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d3671bb
chore: New quiz actions + Number of answers for manual questions
tomwisecodes Sep 10, 2024
d436d77
feat: scroll to new quiz question
tomwisecodes Sep 11, 2024
e09856a
fix: add missing refs
tomwisecodes Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions apps/nextjs/src/components/AppComponents/QuizDesigner/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,9 +129,14 @@ const Hero = ({
trackEvent("quiz_designer:begin");
dispatch({ type: QuizAppActions.Begin });
}
questionsWrapperRef.current?.scrollIntoView({
behavior: "smooth",
});
const questionsWrapper = questionsWrapperRef.current;
if (questionsWrapper) {
const { top } = questionsWrapper.getBoundingClientRect();
window.scrollTo({
top: top + window.pageYOffset - 200,
behavior: "smooth",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can add <html class="scroll-smooth"> so we don't need to re-specify smooth scrolling everywhere

});
}
}
}}
>
Expand Down
5 changes: 5 additions & 0 deletions apps/nextjs/src/components/AppComponents/QuizDesigner/QuizContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ const QuizContent = ({
toggleExportMenu,
}: Readonly<QuizContentProps>) => {
const questionsWrapperRef = useRef<HTMLDivElement>(null);
const questionRefs = useRef<(HTMLDivElement | null)[]>([]);

const { shareContent, shareId, shareLoading } = useShareContent({
state,
});
Expand Down Expand Up @@ -63,6 +65,7 @@ const QuizContent = ({
return (
<QuizQuestionRow
key={`QuizContent-QuestionRow-${questionIdx}`}
ref={(el) => (questionRefs.current[questionIdx] = el)}
questionRow={questionRow}
questionIdx={questionIdx}
state={state}
Expand All @@ -81,6 +84,8 @@ const QuizContent = ({
dispatch={dispatch}
suggestedQuestionsGeneration={suggestedQuestionsGeneration}
setPotentialNewQuestions={setPotentialNewQuestion}
questionsWrapperRef={questionsWrapperRef}
questionRefs={questionRefs}
/>

{state.questions[0]?.answers !== undefined &&
Expand Down
9 changes: 8 additions & 1 deletion apps/nextjs/src/components/AppComponents/QuizDesigner/QuizDesignerPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Dispatch } from "react";
import { Dispatch, useRef } from "react";

import { Box, Container } from "@radix-ui/themes";
import useSuggestedQuestions from "hooks/useSuggestedQuestions";
Expand Down Expand Up @@ -53,6 +53,8 @@ const QuizDesignerPageContent = ({
state,
dispatch,
});

const questionRefs = useRef<(HTMLDivElement | null)[]>([]);
return (
<>
<ExportMenu
Expand Down Expand Up @@ -85,6 +87,9 @@ const QuizDesignerPageContent = ({
questionIdx={questionIdx}
state={state}
dispatch={dispatch}
ref={(el) => {
questionRefs.current[questionIdx] = el;
}}
suggestedQuestionsGeneration={suggestedQuestionsGeneration}
/>
);
Expand All @@ -99,6 +104,8 @@ const QuizDesignerPageContent = ({
dispatch={dispatch}
setPotentialNewQuestions={setPotentialNewQuestion}
suggestedQuestionsGeneration={suggestedQuestionsGeneration}
questionRefs={questionRefs}
questionsWrapperRef={questionsWrapperRef}
/>

{state.questions[0]?.answers !== undefined &&
Expand Down
3 changes: 3 additions & 0 deletions apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ type QuizQuestionRowProps = {
dispatch: Dispatch<QuizAppAction>;
isLessonPlan?: boolean;
suggestedQuestionsGeneration: () => void;
ref: React.RefCallback<HTMLDivElement>;
};

function isOddOrEven(i: number) {
Expand Down Expand Up @@ -69,6 +70,7 @@ export function QuizQuestionRow({
dispatch,
isLessonPlan,
suggestedQuestionsGeneration,
ref,
}: Readonly<QuizQuestionRowProps>) {
const { trackEvent } = useAnalytics();

Expand Down Expand Up @@ -111,6 +113,7 @@ export function QuizQuestionRow({

return (
<div
ref={ref}
key={questionIdx}
className={quizQuestionRows({ oddOrEven: isRowOddOrEvenOrLessonPlan })}
>
Expand Down
14 changes: 6 additions & 8 deletions apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/Choose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,13 @@ export default function Choose({
useEffect(() => {
setTopic(debouncedTopic);
}, [debouncedTopic, setTopic]);

useEffect(() => {
if (topic === "") {
setTempTopic("");
}
}, [topic, setTempTopic]);
return (
// TODO reintroduce form submission
// <form
// onSubmit={(e) => {
// e.preventDefault();
// setTopic(tempTopic);
// }}
// >
<Flex gap="0" direction="column" mt="9" className="w-full">
<p className="font-bold">
Choose your subject and key stage to get started.
Expand Down Expand Up @@ -70,6 +69,5 @@ export default function Choose({
/>
</Box>
</Flex>
// </form>
);
}
6 changes: 1 addition & 5 deletions apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ interface SubjectKeyStageInputProps {
setTopic: (topic: string) => void;
hasStartedApp: boolean;
direction?: "row" | "column";
app?: "lesson-planner" | "quiz-designer";
}

const SubjectKeyStageSection = ({
Expand All @@ -27,14 +26,11 @@ const SubjectKeyStageSection = ({
setTopic,
hasStartedApp,
direction,
app,
}: Readonly<SubjectKeyStageInputProps>) => {
return (
<div className="w-full">
{hasStartedApp ? (
app !== "lesson-planner" && (
<Confirmed subject={subject} keyStage={keyStage} topic={topic} />
)
<Confirmed subject={subject} keyStage={keyStage} topic={topic} />
) : (
<Choose
keyStage={keyStage}
Expand Down
28 changes: 22 additions & 6 deletions apps/nextjs/src/components/AppComponents/QuizDesigner/SuggestedQuestionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,17 @@ import { Icon } from "@/components/Icon";
const SuggestedLessonCard = ({
answer: question,
dispatch,

questionsWrapperRef,
potentialNewQuestions,
setPotentialNewQuestions,
questionRefs,
}: {
answer: PotentialQuestionsType[0];
dispatch: Dispatch<QuizAppAction>;

questionsWrapperRef: React.RefObject<HTMLDivElement>;
potentialNewQuestions: PotentialQuestionsType;
setPotentialNewQuestions: React.Dispatch<PotentialQuestionsType>;
questionRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
}) => {
const [showAnswers, setShowAnswers] = useState(false);
return (
Expand Down Expand Up @@ -58,16 +60,30 @@ const SuggestedLessonCard = ({
</Flex>
</button>
<button
onClick={() => {
onClick={async () => {
dispatch({
type: QuizAppActions.AddPopulatedQuestion,
question: question,
});
removeQuestionFromArray(
await removeQuestionFromArray(
question,
potentialNewQuestions,
setPotentialNewQuestions,
);
).then(() => {
const questionsWrapper = questionsWrapperRef.current;
if (questionsWrapper) {
const questionRef = questionRefs.current.find(
(q) => q?.id === question.question,
);
if (questionRef) {
const { top } = questionRef.getBoundingClientRect();
window.scrollTo({
top: top + window.pageYOffset - 200,
behavior: "smooth",
});
}
}
});
}}
className="font-bold"
>
Expand Down Expand Up @@ -102,7 +118,7 @@ const SuggestedLessonCard = ({
);
};

function removeQuestionFromArray(
async function removeQuestionFromArray(
question: PotentialQuestionsType[0],
potentialNewQuestions: PotentialQuestionsType,
setPotentialNewQuestions: React.Dispatch<PotentialQuestionsType>,
Expand Down
6 changes: 6 additions & 0 deletions apps/nextjs/src/components/AppComponents/QuizDesigner/SuggestedQuestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ type SuggestedQuestionsProps = {
dispatch: Dispatch<QuizAppAction>;
suggestedQuestionsGeneration: () => void;
setPotentialNewQuestions: React.Dispatch<PotentialQuestionsType>;
questionsWrapperRef: React.RefObject<HTMLDivElement>;
questionRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
};

const SuggestedQuestions = ({
Expand All @@ -29,6 +31,8 @@ const SuggestedQuestions = ({
potentialNewQuestions,
setPotentialNewQuestions,
dispatch,
questionsWrapperRef,
questionRefs,
}: SuggestedQuestionsProps) => {
return (
<>
Expand Down Expand Up @@ -62,6 +66,8 @@ const SuggestedQuestions = ({
key={answer.question}
potentialNewQuestions={potentialNewQuestions}
setPotentialNewQuestions={setPotentialNewQuestions}
questionsWrapperRef={questionsWrapperRef}
questionRefs={questionRefs}
/>
);
})}
Expand Down
14 changes: 12 additions & 2 deletions apps/nextjs/src/hooks/useSuggestedQuestions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";

import { extraQuizPromptInfo } from "ai-apps/quiz-designer/extraQuizPromptInfo";
import {
QuizAppAction,
QuizAppActions,
} from "ai-apps/quiz-designer/state/actions";
import { QuizAppState } from "ai-apps/quiz-designer/state/types";
import { QuizAppState, QuizAppStatus } from "ai-apps/quiz-designer/state/types";
import { z } from "zod";

import { answersAndDistractorOutputSchema } from "@/components/AppComponents/QuizDesigner/QuizQuestionRow";
Expand Down Expand Up @@ -35,6 +35,15 @@ const useSuggestedQuestions = ({
const [potentialNewQuestions, setPotentialNewQuestion] =
useState<PotentialQuestionsType>([]);

useEffect(() => {
if (
state.status === QuizAppStatus.EditingSubjectAndKS ||
state.status === QuizAppStatus.Initial
) {
setPotentialNewQuestion([]);
}
}, [state]);

const {
requestGeneration: requestSuggestedQuestionsGeneration,
status,
Expand Down Expand Up @@ -81,6 +90,7 @@ const useSuggestedQuestions = ({
otherQuestions,
subject: state.subject,
keyStage: state.keyStage,
numberOfDistractors: 2,
ageRange: getAgesFromKeyStage(state.keyStage),
topic: state.topic,
},
Expand Down
Loading