Class

QuizDetailApi

QuizDetailApi()

Quiz Detail Screen Hooks. Instance name: quizDetailApi

You can use these hooks to customize the quiz detail screen components in your app such as customizing the result message, recap message and so on.

Constructor

# new QuizDetailApi()

Example
externalCodeSetup.quizDetailApi.METHOD_NAME

Methods

# setCategoryScoreComponent(CategoryScoreComponent)

You can use this to customize the category scores component.

Parameters:
Name Type Description
CategoryScoreComponent React.ComponentType.<CategoryScoreComponentProps>
Example
...

import { View, Text, StyleSheet } from "react-native"
import {
    FontWeights
} from "@src/styles/global";

export const applyCustomCode = (externalCodeSetup: any) => {

    externalCodeSetup.quizDetailApi.setCategoryScoreComponent(({
        result,
        quizVM,
        global,
        colors
    }) => {

        const firstC = 6;
        const secondC = 1.6;
        const thirdC = 2.4;

        return Array.isArray(result.cats) &&
            result.cats.length &&
            quizVM.showCategoryScore && (
                <View
                    style={[
                        {
                            marginTop: 15,
                            borderBottomWidth: StyleSheet.hairlineWidth,
                            borderBottomColor: colors.borderColor
                        }
                    ]}
                >
                    {result.cats.map((item, index) => {
                        return (
                            <View key={index} style={[global.row, { marginBottom: 15 }]}>
                                <Text
                                    style={{
                                        ...global.textAlt,
                                        fontWeight: FontWeights.medium,
                                        flex: firstC
                                    }}
                                >
                                    {item.name}
                                </Text>
                                <Text
                                    style={[
                                        global.textAlt,
                                        {
                                            fontWeight: FontWeights.medium,
                                            marginLeft: "auto",
                                            color: "#8D8F97",
                                            flex: secondC
                                        }
                                    ]}
                                >
                                    {item.result.toFixed(0)}%
                                </Text>
                                <Text
                                    style={[
                                        global.textAlt,
                                        {
                                            fontWeight: FontWeights.medium,
                                            marginLeft: "auto",
                                            color: "#8D8F97",
                                            flex: thirdC
                                        }
                                    ]}
                                />
                            </View>
                        );
                    })}
                </View>
            )
    })
}

# setDetailCategoryTitle(DetailCategoryTitle)

You can use this to customize the component that displays the "Category" title. For example, you can change the styling of the text component.

Parameters:
Name Type Description
DetailCategoryTitle React.ComponentType.<DetailCategoryTitleProps>
Example
externalCodeSetup.quizDetailApi.setDetailCategoryTitle(({
  result,
  quizVM,
  global,
  t
}) =>
    Array.isArray(result.cats) &&
    result.cats.length &&
    quizVM.showCategoryScore && (
        <Text style={global.resultsSubTitle}>
            {t("quiz:quizCategories")}
        </Text>
    )
)

# setRecapMessage(RecapMessage)

You can use this to customize the recap message text below the result message.

Parameters:
Name Type Description
RecapMessage React.ComponentType.<RecapMessageProps>
Example
...

externalCodeSetup.quizDetailApi.setRecapMessage(({ quizVM, global, colors, t }) => (
  !quizVM.btnViewQuestionHidden && (
      <Text
          style={[
              global.textAlt,
              {
                  marginHorizontal: 20,
                  color: colors.descTextColor,
                  textAlign: "center",
                  marginBottom: 36
              }
          ]}
      >
          {t("quiz:recap")}
      </Text>
  )
))

# setResultIconComponent(ResultIconComponent)

You can use this to change the icon displayed in the screen. For example, you can use your own image instead of the default success and fail images.

Parameters:
Name Type Description
ResultIconComponent React.ComponentType.<ResultIconComponentProps>
Example
...

import Icon from "@src/components/Icon";
import {SUCCESS_COLOR, WARNING_COLOR} from "@src/styles/global";

export const applyCustomCode = (externalCodeSetup: any) => {
    externalCodeSetup.quizDetailApi.setResultIconComponent(({result}) => (
        <View
            style={{
                marginTop: 15,
                justifyContent: "center",
                alignItems: "center"
            }}
        >
            <View
                style={{
                    paddingLeft: 40,
                    paddingRight: 40,
                    alignItems: "center"
                }}
            >
                {result.is_pass ? (
                    <Icon
                        icon={{fontIconName: "check", weight: 200}}
                        tintColor={SUCCESS_COLOR}
                        style={{
                            width: 50,
                            height: 50,
                            marginTop: 25
                        }}
                    />
                ) : (
                    <Icon
                        icon={{fontIconName: "times", weight: 200}}
                        tintColor={WARNING_COLOR}
                        style={{
                            width: 50,
                            height: 50,
                            marginTop: 25
                        }}
                    />
                )}
            </View>
        </View>
    ));
}

# setResultMessage(ResultMessage)

You can use this to customize the result message displayed.

Parameters:
Name Type Description
ResultMessage React.ComponentType.<ResultMessageProps>
Example

Implement deep linking to the result message

//In custom_code/ResultMessage.js...

import React from "react";
import {View} from "react-native";
import HTML from "react-native-render-html";
import {withNavigation} from "@src/components/hocs/withNavigation";
import withDeeplinkClickHandler from "../../src/components/hocs/withDeeplinkClickHandler";
import { compose } from "recompose";

const ResultMessage =  ({
    result,
    global,
    colors,
    attemptDeepLink
}) => <View
    style={{
      width: "100%",
      marginTop: 16,
      paddingHorizontal: 16
    }}
  >
    {!!result.message && (
      <HTML
        onLinkPress={attemptDeepLink(false)}
        contentStyle={{marginHorizontal: 20}}
        html={`<center>${result.message}</center>`}
        baseFontStyle={global.text}
        tagsStyles={{
          center: {
            alignItems: "center"
          },
          h1: {
            marginBottom: 10
          },
          h2: {
            marginBottom: 10
          },
          h3: {
            marginBottom: 10
          },
          h4: {
            marginBottom: 10
          },
          h5: {
            marginBottom: 10
          },
          h6: {
            marginBottom: 10
          },
          p: {
            marginTop: 0,
            marginBottom: 10
          },
          a: {
            color: colors.linkColor,
            textDecorationLine: "none"
          }
        }}
      />
    )}
  </View>

export default compose(
    withNavigation,
    withDeeplinkClickHandler
)(ResultMessage)

 //In custom_code/index.js...

import ResultMessage from "./components/ResultMessage";
export const applyCustomCode = (externalCodeSetup: any) => {
  externalCodeSetup.quizDetailApi.setResultMessage(props => <ResultMessage {...props} /> );
}

# setResultPointsComponent(ResultPointsComponent)

You can use this to customize the points component.

Parameters:
Name Type Description
ResultPointsComponent React.ComponentType.<ResultPointsComponentProps>
Example
...

import { View, Text } from "react-native"
import {
   FontWeights
} from "@src/styles/global";

export const applyCustomCode = (externalCodeSetup: any) => {

   externalCodeSetup.quizDetailApi.setResultPointsComponent(({
       quizVM,
       global,
       colors,
       t,
       result
   }) => {

       const firstC = 6;
       const secondC = 1.6;
       const thirdC = 2.4;

       return !quizVM.hideResultPoints && (
           <View style={[{ marginTop: 25 }]}>
               <View style={[global.row, { marginBottom: 15 }]}>
                   <Text
                       style={{
                           ...global.text,
                           fontWeight: FontWeights.medium,
                           flex: firstC
                       }}
                   >
                       {t("quiz:quizYourScore")}
                   </Text>
                   <Text
                       style={[
                           global.textAlt,
                           {
                               color: colors.descTextColor,
                               flex: secondC,
                               fontSize: 16,
                               fontWeight: FontWeights.medium
                           }
                       ]}
                   >
                       {Math.round((result.result || 0) * 100) / 100}%
                   </Text>
                   <Text
                       style={[
                           global.textAlt,
                           {
                               color: colors.descTextColor,
                               flex: thirdC,
                               textAlign: "right",
                               fontSize: 16,
                               fontWeight: FontWeights.medium
                           }
                       ]}
                   >
                       {t("quiz:pointsCount", {
                           count: parseInt(result.awarded_points) || 0
                       })}
                   </Text>
               </View>
               <View style={[global.row, {marginBottom: 15}]}>
                   <Text
                       style={{
                           ...global.text,
                           fontWeight: FontWeights.medium,
                           flex: firstC
                       }}
                   >
                       {t("quiz:passingScore")}
                   </Text>
                   <Text
                       style={[
                           global.textAlt,
                           {
                               color: colors.descTextColor,
                               flex: secondC,
                               fontSize: 16,
                               fontWeight: FontWeights.medium
                           }
                       ]}
                   >
                       {Math.round(result.passing_percentage * 100) / 100}%
                   </Text>
                   <Text
                       style={[
                           global.textAlt,
                           {
                               color: colors.descTextColor,
                               flex: thirdC,
                               textAlign: "right",
                               fontSize: 16,
                               fontWeight: FontWeights.medium
                           }
                       ]}
                    >
                        {t("quiz:pointsCount", {
                            count:
                                parseInt(
                                    Math.round(
                                        result.possible_points * result.passing_percentage
                                    ) / 100
                                ) || 0
                        })}
                    </Text>
                </View>
            </View>
        )
    })
}

# setReviewQuizButton(ReviewQuizButton)

You can use this to customize the ReviewQuizButton component which by default, navigates you to the QuizReview screen.

Parameters:
Name Type Description
ReviewQuizButton React.ComponentType.<ReviewQuizButtonProps>
Example
...

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

export const applyCustomCode = (externalCodeSetup: any) => {
    externalCodeSetup.quizDetailApi.setReviewQuizButton(({
        quizVM,
        global,
        colors,
        t,
        labels,
        onReviewClick,
        bottomSafeArea
    }) => !quizVM.btnViewQuestionHidden && (
        <View
            style={[
                {
                    paddingTop: 16,
                    paddingHorizontal: 20,
                    backgroundColor: "#fff",
                    borderTopWidth: StyleSheet.hairlineWidth,
                    borderTopColor: "#C6C6C8",
                    paddingBottom: bottomSafeArea
                }
            ]}
        >
            <AppButton
                style={[
                    { backgroundColor: colors.secondaryButtonBg, height: 40 }
                ]}
                onPress={onReviewClick}
                labelStyle={{
                    ...global.quizReviewButtonLabel,
                    color: colors.secondaryButtonColor
                }}
                label={t("quiz:reviewQuiz", { quiz: labels.quiz })}
                global={global}
                loading={false}
            />
        </View>
    ))
}