diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/Hero.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/Hero.tsx index a3ab566e5..b18bb246b 100644 --- a/apps/nextjs/src/components/AppComponents/QuizDesigner/Hero.tsx +++ b/apps/nextjs/src/components/AppComponents/QuizDesigner/Hero.tsx @@ -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", + }); + } } }} > diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizContent.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizContent.tsx index 36233bdc0..4c0fba348 100644 --- a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizContent.tsx +++ b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizContent.tsx @@ -24,6 +24,8 @@ const QuizContent = ({ toggleExportMenu, }: Readonly) => { const questionsWrapperRef = useRef(null); + const questionRefs = useRef<(HTMLDivElement | null)[]>([]); + const { shareContent, shareId, shareLoading } = useShareContent({ state, }); @@ -63,6 +65,7 @@ const QuizContent = ({ return ( (questionRefs.current[questionIdx] = el)} questionRow={questionRow} questionIdx={questionIdx} state={state} @@ -81,6 +84,8 @@ const QuizContent = ({ dispatch={dispatch} suggestedQuestionsGeneration={suggestedQuestionsGeneration} setPotentialNewQuestions={setPotentialNewQuestion} + questionsWrapperRef={questionsWrapperRef} + questionRefs={questionRefs} /> {state.questions[0]?.answers !== undefined && diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizDesignerPageContent.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizDesignerPageContent.tsx index 7d82fa739..56f090582 100644 --- a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizDesignerPageContent.tsx +++ b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizDesignerPageContent.tsx @@ -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"; @@ -53,6 +53,8 @@ const QuizDesignerPageContent = ({ state, dispatch, }); + + const questionRefs = useRef<(HTMLDivElement | null)[]>([]); return ( <> { + questionRefs.current[questionIdx] = el; + }} suggestedQuestionsGeneration={suggestedQuestionsGeneration} /> ); @@ -99,6 +104,8 @@ const QuizDesignerPageContent = ({ dispatch={dispatch} setPotentialNewQuestions={setPotentialNewQuestion} suggestedQuestionsGeneration={suggestedQuestionsGeneration} + questionRefs={questionRefs} + questionsWrapperRef={questionsWrapperRef} /> {state.questions[0]?.answers !== undefined && diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/index.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/index.tsx index 17cdee374..3f2912fda 100644 --- a/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/index.tsx +++ b/apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/index.tsx @@ -30,6 +30,7 @@ type QuizQuestionRowProps = { dispatch: Dispatch; isLessonPlan?: boolean; suggestedQuestionsGeneration: () => void; + ref: React.RefCallback; }; function isOddOrEven(i: number) { @@ -69,6 +70,7 @@ export function QuizQuestionRow({ dispatch, isLessonPlan, suggestedQuestionsGeneration, + ref, }: Readonly) { const { trackEvent } = useAnalytics(); @@ -111,6 +113,7 @@ export function QuizQuestionRow({ return (
diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/Choose.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/Choose.tsx index 5f47c771e..f317d172e 100644 --- a/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/Choose.tsx +++ b/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/Choose.tsx @@ -35,14 +35,13 @@ export default function Choose({ useEffect(() => { setTopic(debouncedTopic); }, [debouncedTopic, setTopic]); + + useEffect(() => { + if (topic === "") { + setTempTopic(""); + } + }, [topic, setTempTopic]); return ( - // TODO reintroduce form submission - //
{ - // e.preventDefault(); - // setTopic(tempTopic); - // }} - // >

Choose your subject and key stage to get started. @@ -70,6 +69,5 @@ export default function Choose({ /> - //

); } diff --git a/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/index.tsx b/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/index.tsx index a55e9dd4a..3e95c1b16 100644 --- a/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/index.tsx +++ b/apps/nextjs/src/components/AppComponents/QuizDesigner/SubjectKeyStageSection/index.tsx @@ -15,7 +15,6 @@ interface SubjectKeyStageInputProps { setTopic: (topic: string) => void; hasStartedApp: boolean; direction?: "row" | "column"; - app?: "lesson-planner" | "quiz-designer"; } const SubjectKeyStageSection = ({ @@ -27,14 +26,11 @@ const SubjectKeyStageSection = ({ setTopic, hasStartedApp, direction, - app, }: Readonly) => { return (
{hasStartedApp ? ( - app !== "lesson-planner" && ( - - ) + ) : ( ; - + questionsWrapperRef: React.RefObject; potentialNewQuestions: PotentialQuestionsType; setPotentialNewQuestions: React.Dispatch; + questionRefs: React.MutableRefObject<(HTMLDivElement | null)[]>; }) => { const [showAnswers, setShowAnswers] = useState(false); return ( @@ -58,16 +60,30 @@ const SuggestedLessonCard = ({