diff --git a/src/components/quiz-question/multi-choice/multi-choice.tsx b/src/components/quiz-question/multi-choice/multi-choice.tsx index e6898b2..3d9918f 100644 --- a/src/components/quiz-question/multi-choice/multi-choice.tsx +++ b/src/components/quiz-question/multi-choice/multi-choice.tsx @@ -35,12 +35,11 @@ export const MultiChoice = withText(translates)( }: QuestionProps & MultiChoiceProps & QuizTranslates) => { const selectedArray = selected ? selected.split(',') : []; const disabled = !onSelect; - const quizQuestionRef = useRef(null); let answersOptionsRefMap: Map = new Map(); useEffect(() => { if (!disabled) { - quizQuestionRef.current?.focus(); + answersOptionsRefMap.get(0)?.focus(); } }, [question]); @@ -83,7 +82,7 @@ export const MultiChoice = withText(translates)( return (
- + {`${otherProps.questionLabel} #${questionIndex}:`}
diff --git a/src/components/quiz-question/open-question/open-question.tsx b/src/components/quiz-question/open-question/open-question.tsx index 75741aa..6ec0ab4 100644 --- a/src/components/quiz-question/open-question/open-question.tsx +++ b/src/components/quiz-question/open-question/open-question.tsx @@ -19,6 +19,7 @@ const translates = (): QuizTranslates => { export const OpenQuestion = withText(translates)( ({question, selected, onSelect, hint, questionIndex, ...otherProps}: QuestionProps & QuizTranslates) => { const disabled = !onSelect; + const textareaRef = useRef(null); const handleChange = useCallback( (e: any) => { @@ -27,16 +28,15 @@ export const OpenQuestion = withText(translates)( [onSelect] ); - const quizQuestionRef = useRef(null); useEffect(() => { if (!disabled) { - quizQuestionRef.current?.focus(); + textareaRef.current?.focus(); } }, [question]); return (
- + {`${otherProps.questionLabel} #${questionIndex}:`}
@@ -52,6 +52,7 @@ export const OpenQuestion = withText(translates)( onChange={handleChange} disabled={disabled} data-testid="openQuestionAnswerInput" + ref={textareaRef} />
{`${selected.length}/${MAX_LENGTH}`}
diff --git a/src/components/quiz-question/quiz-question-wrapper.tsx b/src/components/quiz-question/quiz-question-wrapper.tsx index ea8aad3..298d9d2 100644 --- a/src/components/quiz-question/quiz-question-wrapper.tsx +++ b/src/components/quiz-question/quiz-question-wrapper.tsx @@ -63,17 +63,18 @@ export const QuizQuestionWrapper = withText(translates)((props: QuizQuestionWrap if (!playerNav) { return; } - if (qui.a) { - continueButtonRef.current?.focus(); - } }); }, [qui]); useEffect(() => { setSelected(getSelected(qui)); setIsLoading(false); + if(qui.a || qui.q.questionType === KalturaQuizQuestionTypes.Reflection){ + continueButtonRef.current?.focus(); + } }, [qui]); + const handleContinue = useCallback(() => { if (!selected) { return; @@ -134,7 +135,7 @@ export const QuizQuestionWrapper = withText(translates)((props: QuizQuestionWrap case KalturaQuizQuestionTypes.MultiChoice: return ; case KalturaQuizQuestionTypes.Reflection: - return ; + return ; case KalturaQuizQuestionTypes.OpenQuestion: return ; case KalturaQuizQuestionTypes.MultiAnswer: diff --git a/src/components/quiz-question/reflection-point/reflection-point.tsx b/src/components/quiz-question/reflection-point/reflection-point.tsx index 87ccc8c..aa5286a 100644 --- a/src/components/quiz-question/reflection-point/reflection-point.tsx +++ b/src/components/quiz-question/reflection-point/reflection-point.tsx @@ -14,14 +14,10 @@ const translates = (): QuizTranslates => { }; export const ReflectionPoint = withText(translates)(({question, questionIndex, ...otherProps}: QuestionProps & QuizTranslates) => { - const quizQuestionRef = useRef(null); - useEffect(() => { - quizQuestionRef.current?.focus(); - }, [question]); return (
- + {`${otherProps.questionLabel}# ${questionIndex}, ${otherProps.reflectionPoint}:`}
diff --git a/src/components/quiz-question/true-false/true-false.tsx b/src/components/quiz-question/true-false/true-false.tsx index ebf0697..776ee5f 100644 --- a/src/components/quiz-question/true-false/true-false.tsx +++ b/src/components/quiz-question/true-false/true-false.tsx @@ -24,10 +24,9 @@ export const TrueFalse = withText(translates)( }, [onSelect] ); - const quizQuestionRef = useRef(null); useEffect(() => { if (!disabled) { - quizQuestionRef.current?.focus(); + answersOptionsRefMap.get(0)?.focus(); } }, [question]); @@ -56,7 +55,7 @@ export const TrueFalse = withText(translates)( return (
- + {`${otherProps.questionLabel} #${questionIndex}:`}