Methods
# setHTMLQuestionTitle(HTMLQuestionTitle)
You can use this hook to customize the question title components (if they are rendered as HTML tags instead of Blocks) which are shown when a quiz has started.
Parameters:
| Name | Type | Description |
|---|---|---|
HTMLQuestionTitle |
HTMLQuestionTitleProps |
Example
...
import {sourceRenderer} from "@src/utils/htmlRender";
import HTML from "react-native-render-html";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.questionApiHooks.setHTMLQuestionTitle(
({
tagsStyles,
baseFontStyle,
html,
imageMaxWidth,
classesStyles,
onLinkPress,
ignoredTags,
colors,
navigation
}) => (
<HTML
tagsStyles={tagsStyles}
baseFontStyle={baseFontStyle}
html={html}
imagesMaxWidth={imageMaxWidth}
onLinkPress={onLinkPress}
ignoredTags={ignoredTags}
classesStyles={classesStyles}
alterChildren={node => {
// removing <a/> if the parent node is audio
if (node.name === "a" && node.parent?.name === "audio") {
return [];
}
}}
renderers={{
source: (htmlAttribs, children, convertedCSSStyles, passProps) =>
sourceRenderer(
htmlAttribs,
children,
convertedCSSStyles,
passProps,
colors,
navigation
)
}}
/>
)
);
}# setImageSizeForMaxWidth(imageSizeFunction)
It is used to set the maximum width of images that are displayed in the LearnDash LMS questions.
Parameters:
| Name | Type | Description |
|---|---|---|
imageSizeFunction |
OverrideQuestionImageSizeCallback |
Example
externalCodeSetup.questionApiHooks.setImageSizeForMaxWidth( (isPopup, defaultMaxWidth) => {
return defaultMaxWidth + 100;
})# setQuestionHintComponent(QuestionHintComponent)
You can use this hook to customize the QuestionHint component. The QuestionHint component will be visible when a hint is added to a question.
Parameters:
| Name | Type | Description |
|---|---|---|
QuestionHintComponent |
QuestionHintComponentProps |
Example
...
import QuestionHint from "@src/components/Questions/QuestionHint";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.questionApiHooks.setQuestionHintComponent(
({
showFooter,
global,
question,
htmlStylesCss,
htmlAdjustedCss,
typography,
t,
styles
}) => (
<View style={styles.container}>
{showFooter && (
<QuestionHint
global={global}
hint={question.hint}
htmlStylesCss={htmlStylesCss}
htmlAdjustedCss={htmlAdjustedCss}
typography={typography}
t={t}
style={styles.hintComponent}
/>
)}
</View>
)
);
}# setQuestionNumberComponent(QuestionNumberComponent)
You can use this hook to customize the QuestionNumber components. These components are displayed above the question title component when a quiz has started.
Parameters:
| Name | Type | Description |
|---|---|---|
QuestionNumberComponent |
QuestionNumberProps |
Example
...
import QuestionNumber from "@src/components/QuestionOverview/QuestionNumber";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.questionApiHooks.setQuestionNumberComponent(
({
onPress,
title,
markItemSize,
isMarked,
titleColor,
itemSize,
backgroundColor,
markColor
}) => (
<QuestionNumber
onPress={onPress}
title={title}
markItemSize={markItemSize}
isMarked={isMarked}
titleColor={titleColor}
itemSize={itemSize}
backgroundColor={backgroundColor}
markColor={markColor}
/>
)
);
}# setQuestionNumberIndicators(QuestionNumberIndicators)
You can use this hook to customize the QuestionNumberIndicators component. These components represent the status of a question whether it's "Current", "Review" or "Answered".
Parameters:
| Name | Type | Description |
|---|---|---|
QuestionNumberIndicators |
QuestionNumberIndicatorsProps |
Example
externalCodeSetup.questionApiHooks.setQuestionNumberIndicators(
({styles, colors, t}) => (
<View style={styles.indicatorContainer}>
<View style={styles.row}>
<View style={styles.indicator}>
<View
style={[styles.dot, {backgroundColor: colors.primaryColor}]}
/>
<Text>{t("quiz:currentLabel")}</Text>
</View>
<View style={styles.indicator}>
<View
style={[styles.dot, {backgroundColor: colors.warningColor}]}
/>
<Text>{t("quiz:reviewLabel")}</Text>
</View>
<View style={styles.indicator}>
<View
style={[styles.dot, {backgroundColor: colors.successColor}]}
/>
<Text>{t("quiz:answeredLabel")}</Text>
</View>
</View>
</View>
)
);# setQuestionSubmitButton(QuestionSubmitButton)
You can use this hook to customize the "Submit" buttons for each question in a quiz. This hook can also be used to customize the button to submit a quiz or show its summary.
Parameters:
| Name | Type | Description |
|---|---|---|
QuestionSubmitButton |
QuestionSubmitButtonProps |
Example
...
import AppButton from "@src/components/AppButton";
export const applyCustomCode = (externalCodeSetup) => {
externalCodeSetup.questionApiHooks.setQuestionSubmitButton(
({
styles,
global,
quiz,
hasAnswer,
hasBackButton,
showNoAnswerAlert,
isLastQuestion,
completing,
onQuestionOverviewSummaryPress,
submitQuiz,
onQuestionSubmitClick,
label,
submitting
}) => (
<AppButton
style={[
styles.button,
hasBackButton ? styles.buttonRight : styles.defaultButtonStyle,
global.quizSubmitButton
]}
onPress={() => {
if (quiz.forcingQuestionSolve && !hasAnswer) {
showNoAnswerAlert();
} else if (isLastQuestion) {
if (!completing) {
if (quiz.showReviewQuestion && !quiz.quizSummaryHide) {
onQuestionOverviewSummaryPress();
} else {
submitQuiz();
}
}
} else {
onQuestionSubmitClick();
}
}}
label={label}
labelStyle={global.quizSubmitButtonLabel}
global={global}
loading={submitting}
loadingStyle={global.quizSubmitButtonLoading}
/>
)
);
}