App Codex Version: 1.0.0

Class

QuizReviewApi

QuizReviewApi()

Quiz Review Hooks. Instance name: quizReviewApi

You can use this hook to customize the components available when reviewing a quiz or an answer to a quiz. This includes the components in the modal if "Custom Answer Feedback" is enabled and the Quiz Review Screen (this screen shows up when "Review Quiz" button is pressed while in the Quiz Details screen).

Constructor

# new QuizReviewApi()

Example
externalCodeSetup.quizReviewApi.METHOD_NAME

Methods

# setAnswerResultMessage(AnswerResultMessage)

You can use this hook to customize the "correct" or "incorrect" message that is displayed in the Quiz Review screen.

Parameters:
Name Type Description
AnswerResultMessage AnswerResultMessageProps
Example
...

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

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizReviewApi.setAnswerResultMessage(({
        hideSummaryMessage,
        global,
        colors,
        answer
    }) => {
        return hideSummaryMessage !== true ? (
            <View>
                <QuestionSummaryMessage
                    global={global}
                    colors={colors}
                    message={answer.message}
                />
            </View>
        ) : null;
    });
}

# setAnswerResultModalMessage(AnswerResultModalMessage)

You can use this hook to customize the "correct" or "incorrect" message that is displayed in the Quiz Review modal.

Parameters:
Name Type Description
AnswerResultModalMessage AnswerResultModalMessageProps
Example
...

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

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizReviewApi.setAnswerResultModalMessage(
        ({
            global,
            colors,
            styles,
            answerResult,
            t,
            showSummaryMessage,
            correctIcon,
            inCorrectIcon
        }) => {
            return (
                <View style={styles.container}>
                    <Image
                        style={styles.image}
                        source={answerResult.isCorrect ? correctIcon : inCorrectIcon}
                    />
                    <Text style={styles.status}>
                        {answerResult.isCorrect ? t("quiz:correct") : t("quiz:incorrect")}
                    </Text>
                    {showSummaryMessage && (
                        <View style={styles.summaryMessageContainer}>
                            <QuestionSummaryMessage
                                message={answerResult.message}
                                global={global}
                                colors={colors}
                            />
                        </View>
                    )}
                </View>
            );
        }
    );
}

# setFreeAnswerComponent(FreeAnswerComponent)

You can use this hook to customize the displayed answer of free choice type of questions in a quiz review screen or modal. This hook is also used to customize the label 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.<QuizReviewFreeAnswerComponentProps>
Example
externalCodeSetup.quizReviewApi.setFreeAnswerComponent(
    ({styles, global, answer, icon, tintColor}) => (
        <View style={styles.container}>
            <Text style={[global.text]}>{answer.sentItems[0]}</Text>
            <Icon icon={icon} tintColor={tintColor} styles={styles.icon} />
        </View>
    )
);

# setHTMLQuestionTitle(HTMLQuestionTitle)

You can use this hook to customize the question title components (if they are rendered as HTML tags instead of Blocks) in the Quiz Review screen and modal.

Parameters:
Name Type Description
HTMLQuestionTitle QuizReviewHTMLQuestionTitleProps
Example
...

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

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizReviewApi.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
                        )
                }}
            />
        )
    );
}

# setQuestionAssessmentHTML(QuestionAssessmentHTML)

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

Parameters:
Name Type Description
QuestionAssessmentHTML QuizReviewQuestionAssessmentHTMLProps
Example
...

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

export const applyCustomCode = (externalCodeSetup) => {
  externalCodeSetup.quizReviewApi.setQuestionAssessmentHTML(
      ({item, index, styles, global, tagsStyles}) => (
          <View key={index}>
              <HTML
                  html={item.value}
                  containerStyle={styles.container}
                  baseFontStyle={global.text}
                  tagsStyles={tagsStyles}
                  onLinkPress={() => {}}
              />
          </View>
      )
  );
}

# setQuestionClosedComponent(QuestionClosedComponent)

You can use this hook to customize the displayed answer for "Fill in the blank" type of questions.

Parameters:
Name Type Description
QuestionClosedComponent React.ComponentType.<QuizReviewQuestionClosedComponentProps>
Example
...

import HTML from "react-native-render-html";
export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.quizReviewApi.setQuestionClosedComponent(
        ({global, styles, questionText, tagsStyles}) => (
            <View style={[global.courseRoundBox, styles.container]}>
                <HTML
                    html={questionText}
                    baseFontStyle={global.text}
                    tagsStyles={tagsStyles}
                    onLinkPress={() => {}}
                />
            </View>
        )
    );
}

# setQuestionCountComponent(QuestionCountComponent)

You can use this hook to customize the question count component ("Question 1 of 10" text) in the Quiz Review screen.

Parameters:
Name Type Description
QuestionCountComponent QuestionCountComponentProps
Example
externalCodeSetup.quizReviewApi.setQuestionCountComponent(
  ({hideTitle, styles, t, labels, questionNumber, total}) => {
      return !hideTitle ? (
          <Text style={styles.text}>
              {t("quiz:questionCount", {
                  question: labels.question,
                  current: questionNumber + 1,
                  total: total || ""
              })}
          </Text>
      ) : null;
  }
);

# setQuestionEssayComponent(QuestionEssayComponent)

You can use this hook to customize the file uploaded message when 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.<QuizReviewQuestionEssayComponentProps>
Example
externalCodeSetup.quizReviewApi.setQuestionEssayComponent(
   ({global, styles, t}) => (
       <Text style={[global.text, styles.text]}>{t("quiz:essayUploaded")}</Text>
   )
);

# setQuestionSortItemComponent(QuestionSortItemComponent)

You can use this hook to customize the displayed answer 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.<QuizReviewQuestionSortItemComponentProps>
Example

Change the text color of the item component when dragging 

...

export const applyCustomCode = (externalCodeSetup) => {
  externalCodeSetup.quizReviewApi.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>
              <Image style={styles.icon} source={icon} />
          </Component>
      );
  });
}

# setRadioDescription(RadioDescription)

You can use this hook to customize the label in a radio component when reviewing the answer. 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.<QuizReviewRadioDescriptionProps>
Example
...

import HTML from "react-native-render-html";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.quizReviewApi.setRadioDescription(
        ({index, color, styles, baseFontStyle, description}) => (
            <HTML
                key={index + color}
                containerStyle={styles.containerStyle}
                baseFontStyle={baseFontStyle}
                html={description}
            />
        )
    );
}

# 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.<QuizReviewRadioIconProps>
Example
externalCodeSetup.quizReviewApi.setRadioIcon(props => {
  const {styles, isWrong, isRight, multiselect, multipleChoiceIcon} = props;
  return multiselect ? (
      <Image
          style={[
              styles.iconStyle,
              styles.selectedStyleMultiple,
              isWrong === true ? {tintColor: styles.wrongColor} : {},
              isRight === true ? {tintColor: styles.rightColor} : {}
          ]}
          resizeMode={"contain"}
          source={multipleChoiceIcon}
      />
  ) : (
      <View
          style={[
              styles.radio,
              {borderColor: styles.borderColor},
              styles.uncheckedColor && {borderColor: styles.uncheckedColor},
              styles.selectedStyleSingle,
              isWrong === true ? {borderColor: styles.wrongColor} : {},
              isRight === true ? {borderColor: styles.rightColor} : {}
          ]}
      />
  );
});