App Codex Version: 1.0.0

Class

QuestionApiHooks

QuestionApiHooks()

Question Screen Hooks. Instance name: questionApiHooks

If you have courses in your app, you can use this hook to customize the way the questions are displayed. For example, you can change the image width in LearnDash questions and more.

Constructor

# new QuestionApiHooks()

Example
externalCodeSetup.questionApiHooks.METHOD_NAME

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
                        )
                }}
            />
        )
    );
}

# 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;
})

# 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>
        )
    );
}

# 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}
            />
        )
    );
}

# 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>
    )
);

# 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}
            />
        )
    );
}

# 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}
            />
        )
    );
}