App Codex Version: 1.0.0

Class

QuizAnswersApi

QuizAnswersApi()

Quiz Answers Hooks. Instance name: quizAnswersApi

You can use this hook to customize answer components when answering a quiz such as adding an onPress function to a single choice answer or customizing how the answer text is displayed.

Constructor

# new QuizAnswersApi()

Example
externalCodeSetup.quizAnswersApi.METHOD_NAME

Methods

# setFreeAnswerComponent(FreeAnswerComponent)

You can use this hook to customize the text input component of free choice type of questions. This hook is also used to customize the text input component of "Essay / Open Answer" type of questions if the answer format is set to Text entry. If the answer format is set to File upload, use the setQuestionEssayComponent hook.

Parameters:
Name Type Description
FreeAnswerComponent React.ComponentType.<FreeAnswerComponentProps>
Example
...

import {View, Text, TextInput} from "react-native";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizAnswersApi.setFreeAnswerComponent(props => {
        const {
            Wrapper,
            wrapperOnPress,
            styles,
            t,
            defaultValue,
            onChangeText
        } = props;

        return (
            <Wrapper onPress={wrapperOnPress} style={styles.wrapperStyle}>
                <View style={styles.containerStyle}>
                    <Text>Add your answer below</Text>
                    <TextInput
                        placeholder={t("quiz:writeHere")}
                        autocomplete="off"
                        spellCheck={false}
                        autoCorrect={false}
                        autoGrow
                        multiline
                        defaultValue={defaultValue}
                        style={styles.inputStyle}
                        placeholderTextColor={styles.placeholderTextColor}
                        onChangeText={onChangeText}
                        underlineColorAndroid="transparent"
                    />
                </View>
            </Wrapper>
        );
    });
}

# setMatrixItemOnDragEndCallback(matrixItemOnDragEndCallback)

You can use this hook to modify the dragEnd event of the matrix sort item component.

Parameters:
Name Type Description
matrixItemOnDragEndCallback MatrixItemOnDragEndCallbackProps
Example
externalCodeSetup.quizAnswersApi.setMatrixItemOnDragEndCallback(props => {
  props.dragEnd()
})

# setMatrixItemOnDraggingCallback(matrixItemOnDraggingCallback)

You can use this hook to modify the dragging event of the matrix sort item component.

Parameters:
Name Type Description
matrixItemOnDraggingCallback MatrixItemOnDraggingCallbackProps
Example
externalCodeSetup.quizAnswersApi.setMatrixItemOnDraggingCallback(props => {
  props.dragging()
})

# setMatrixItemOnDragStartCallback(matrixItemOnDragStartCallback)

You can use this hook to modify the dragStart event of the matrix sort item component.

Parameters:
Name Type Description
matrixItemOnDragStartCallback MatrixItemOnDragStartCallbackProps
Example
externalCodeSetup.quizAnswersApi.setMatrixItemOnDragStartCallback(props => {
   props.dragStart()
})

# setQuestionAssessmentHTML(QuestionAssessmentHTML)

You can use this hook to customize the "Less true" or "More true" components in an "Assessment" type of question.

Parameters:
Name Type Description
QuestionAssessmentHTML QuestionAssessmentHTMLProps
Example
...

import HTML from "react-native-render-html";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizAnswersApi.setQuestionAssessmentHTML(
        ({item, index, styles, global, tagsStyles}) => (
            <View key={"html" + item.value + index.toString()}>
                <HTML
                    html={item.value}
                    containerStyle={styles.containerStyle}
                    baseFontStyle={global.content}
                    tagsStyles={tagsStyles}
                    onLinkPress={() => {}}
                />
            </View>
        )
    );
}

# setQuestionClosedComponent(QuestionClosedComponent)

You can use this hook to customize the component for answering "Fill in the blank" type of questions. By default, the component to input the answer is generated using a webview. See quizApi.setQuestionClosedRenderMode hook on how to change the render mode of the answer component.

Parameters:
Name Type Description
QuestionClosedComponent React.ComponentType.<QuestionClosedComponentProps>
Examples

Customize the webview component 

...

import WebViewInput from "@src/components/Questions/WebViewInput";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizAnswersApi.setQuestionClosedComponent(
        ({
            contentId,
            source,
            inputChange,
            typography,
            htmlStylesCss,
            htmlAdjustedCss
        }) => {
            return (
                <>
                    <Text>HTML generated in webview</Text>
                    <WebViewInput
                        contentId={contentId}
                        source={source}
                        inputChange={inputChange}
                        typography={typography}
                        htmlStylesCss={htmlStylesCss}
                        htmlAdjustedCss={htmlAdjustedCss}
                    />
                </>
            );
        }
    );
}

Change the default renderer to htmlparser 

...

import HTML from "react-native-render-html";

export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.quizAnswersApi.setQuestionClosedComponent(
        ({
            tagsStyles,
            baseFontStyle,
            questionText,
            computedWidth,
            alterChildren,
            onLinkPress,
            ignoredTags,
            renderers
        }) => {
            return (
                <>
                    <Text>HTML generated using rn render-html</Text>
                    <HTML
                        tagsStyles={tagsStyles}
                        baseFontStyle={baseFontStyle}
                        html={questionText}
                        staticContentMaxWidth={computedWidth}
                        alterChildren={alterChildren}
                        onLinkPress={onLinkPress}
                        ignoredTags={ignoredTags}
                        renderers={renderers}
                    />
                </>
            );
        }
    );
}

# setQuestionEssayComponent(QuestionEssayComponent)

You can use this hook to customize the component for answering an "Essay / Open Answer" type of questions with a file upload answer format. To customize a text entry answer format, use setFreeAnswerComponent hook.

Parameters:
Name Type Description
QuestionEssayComponent React.ComponentType.<QuestionEssayComponentProps>
Example
...

import QuizButton from "@src/components/QuizButton";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizAnswersApi.setQuestionEssayComponent(
        ({
            styles,
            error,
            t,
            global,
            onPress,
            showIcon,
            showLoading,
            icon,
            colors,
            title
        }) => {
            return (
                <View style={styles.container}>
                    <View style={styles.innerContainer}>
                        {error && <Text style={styles.errorText}>{error}</Text>}

                        <Text>Please use the required font for the document</Text>
                        <Text style={styles.title}>{t("quiz:uploadFile")}</Text>

                        <QuizButton
                            global={global}
                            onPress={onPress}
                            showIcon={showIcon}
                            showLoading={showLoading}
                            icon={icon}
                            tintColor={colors.secondaryButtonColor}
                            title={title}
                        />
                    </View>
                </View>
            );
        }
    );
}

# setQuestionSortItemComponent(QuestionSortItemComponent)

You can use this hook to customize the sort item component which is rendered when answering a "sorting" choice question type. For example, you can change the component's color, icon, or text display.

Parameters:
Name Type Description
QuestionSortItemComponent React.ComponentType.<QuestionSortItemComponentProps>
Example

Change the text color of the item component when dragging 

...

import Icon from "@src/components/Icon";

export const applyCustomCode = externalCodeSetup => {
    externalCodeSetup.quizAnswersApi.setQuestionSortItemComponent(
        ({Component, styles, data, icon, active}) => {
            let titleStyle = styles.title;
            if (active) {
                titleStyle = {
                    ...styles.title,
                    color: "red"
                };
            }
            return (
                <Component style={styles.containerStyle}>
                    <Text style={titleStyle}>{data.title}</Text>
                    <Icon
                        tintColor={styles.iconColor}
                        styles={styles.image}
                        icon={{fontIconName: icon, weight: 400}}
                    />
                </Component>
            );
        }
    );
}

# setRadioContainer(RadioContainer)

You can use this hook to customize the container in a radio component. Questions that use radio components as an answer include: "Single choice", "Multiple choice", and "Assessment" type of questions.

Parameters:
Name Type Description
RadioContainer React.ComponentType.<RadioContainerProps>
Example

Add a border to the component when selected 

externalCodeSetup.quizAnswersApi.setRadioContainer(props => {
  const {Component, key, onPress, styles, selected, children} = props;

        const borderSelectedStyle = {
            borderWidth: 1,
            borderColor: "#007cff"
        };

        return (
            <Component
                activeOpacity={0.9}
                key={key}
                onPress={onPress}
                style={[styles.container, selected && borderSelectedStyle]}
            >
                <View
                    style={[
                        styles.container,
                        selected && borderSelectedStyle,
                        {

                            marginLeft: -17,
                            marginRight: -17,
                            marginBottom: 3,
                            marginTop: 3
                        }
                    ]}
                >
                    {children}
                </View>
            </Component>
        );
    });
}

# setRadioDescription(RadioDescription)

You can use this hook to customize the answer in a radio component. Questions that use radio components as an answer include: "Single choice", "Multiple choice", and "Assessment" type of questions.

Parameters:
Name Type Description
RadioDescription React.ComponentType.<RadioDescriptionProps>
Example
...

import HTML from "react-native-render-html";
import {imgRenderer, sourceRenderer} from "@src/utils/htmlRender";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizAnswersApi.setRadioDescription(
        ({index, styles, baseFontStyle, description, ignoredTags, navigation}) => (
            <HTML
                key={index}
                containerStyle={styles.containerStyle}
                alterChildren={node => {
                    if (
                        node.name === "a" &&
                        (node.parent?.name === "audio" || node.parent?.name === "video")
                    ) {
                        return [];
                    }
                }}
                ignoredTags={ignoredTags}
                baseFontStyle={baseFontStyle}
                html={description}
                renderers={{
                    img: imgRenderer({height: 150}),
                    source: (htmlAttribs, children, convertedCSSStyles, passProps) =>
                        sourceRenderer(
                            htmlAttribs,
                            children,
                            convertedCSSStyles,
                            passProps,
                            styles.colors,
                            navigation,
                            styles.sourceRenderer
                        )
                }}
            />
        )
    );
}

# setRadioIcon(RadioIcon)

You can use this hook to change the radio icon component used in a single, multiple choice, or assessment question. For example, you can change the "correct" or "wrong" icon, change the component's color etc.

Parameters:
Name Type Description
RadioIcon React.ComponentType.<RadioIconProps>
Example
...

import Icon from "@src/components/Icon";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizAnswersApi.setRadioIcon(props => {
        const {styles, isWrong, isRight, multiselect, multipleChoiceIcon} = props;
        return multiselect ? (
            <Icon
                icon={multipleChoiceIcon}
                tintColor={styles.iconColor}
                styles={styles.iconStyle}
            />
        ) : (
            <View
                style={[
                    styles.radio,
                    {borderColor: styles.borderColor},
                    styles.uncheckedColor && {borderColor: styles.uncheckedColor},
                    styles.selectedStyleSingle,
                    isWrong === true ? {borderColor: styles.wrongColor} : {},
                    isRight === true ? {borderColor: styles.rightColor} : {}
                ]}
            />
        );
    });
}

# setRadioOnPressCallback(radioOnPressCallback)

You can use this hook to customize the behavior of selecting a radio component when answering a single, multiple choice, or assessment question. For example, you can do an API request before selecting the radio component.

Parameters:
Name Type Description
radioOnPressCallback RadioOnPressCallbackProps
Example

Call an API before selecting the answer 

externalCodeSetup.quizAnswersApi.setRadioOnPressCallback(
  ({setRadioState, multiselect, radios, selected, index}) => {
      fetch("https://buddyboss.com")
          .then(res => res.json())
          .then(json => {
              if (json.id === 1) {
                  setRadioState();
              }
          })
          .catch(e => {
              console.log("Error", e);
              setRadioState();
          });
  }
);

# setSortItemOnDragEndCallback(sortItemOnDragEndCallback)

You can use this hook to modify the dragEnd event of the sort item component.

Parameters:
Name Type Description
sortItemOnDragEndCallback SortItemOnDragEndCallbackProps
Example
externalCodeSetup.quizAnswersApi.setSortItemOnDragEndCallback(
  ({index, data, dragEnd}) => {
      if (index === 0) {
          console.log(`Drag end on ${data[0].title}`);
      }
      dragEnd();
  }
);

# setSortItemOnDraggingCallback(sortItemOnDraggingCallback)

You can use this hook to modify the dragging event of the sort item component.

Parameters:
Name Type Description
sortItemOnDraggingCallback SortItemOnDraggingCallbackProps
Example
externalCodeSetup.quizAnswersApi.setSortItemOnDraggingCallback(
  ({dragging}) => {
      dragging();
  }
);

# setSortItemOnDragStartCallback(sortItemOnDragStartCallback)

You can use this hook to modify the dragStart event of the sort item component.

Parameters:
Name Type Description
sortItemOnDragStartCallback SortItemOnDragStartCallbackProps
Example
externalCodeSetup.quizAnswersApi.setSortItemOnDragStartCallback(
  ({index, data, dragStart}) => {
      if (index === 0) {
          console.log(`Drag start on ${data[0].title}`);
      }
      dragStart();
  }
);