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