Components

QuizSingleScreen

<QuizSingleScreen />

Constructor

# <QuizSingleScreen />

You can use this component to display your Quiz single screen in your custom screen.

Properties:
Name Type Attributes Description
parent String <optional>

The immediate parent of the quiz. Choose whether it is course, lesson or topic

courseId Number <optional>

The id of the course where the quiz belongs

lessonId Number <optional>

The id of the lesson where the quiz belongs

topicId Number <optional>

The id of the topic where the quiz belongs

quizId Number <optional>

The id of the quiz to display

hidePrevNext Boolean <optional>

Use true to hide Prev and Next buttons

hideBackToCourse Boolean <optional>

Use true to hide back button

LoadingComponent ReactComponent <optional>

Use this to display your own loading component while the screen is loading

Examples

Display a quiz whose parent is a topic

//In custom_code/components/MyCustomScreen.js

import React from 'react';
import { View } from 'react-native';
import externalCodeDependencies from "@src/externalCode/externalRepo/externalCodeDependencies";
import QuizSingleScreen from "@src/containers/Custom/QuizSingleScreen";

const MyCustomScreen = (props) => {

 const courseId = 162;
 const lessonId = 164;
 const topicId = 226;
 const quizId = 185;

 return <View style={{ flex: 1, marginBottom: 80 }}>
   <QuizSingleScreen
     parent="topic"
     courseId={courseId}
     lessonId={lessonId}
     topicId={topicId}
     quizId={quizId}
   />
 </View>
}


export default MyCustomScreen;

//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "All"
 );
 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "Main"
 );
}

Display a quiz whose parent is a lesson

//In custom_code/components/MyCustomScreen.js
import React from 'react';
import { View } from 'react-native';
import externalCodeDependencies from "@src/externalCode/externalRepo/externalCodeDependencies";
import QuizSingleScreen from "@src/containers/Custom/QuizSingleScreen";

const MyCustomScreen = (props) => {

 const courseId = 41;
 const lessonId = 76;
 const quizId = 79;

 return <View style={{ flex: 1, marginBottom: 80 }}>
   <QuizSingleScreen
     parent="lesson"
     courseId={courseId}
     lessonId={lessonId}
     quizId={quizId}
   />
 </View>
}


export default MyCustomScreen;

//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "All"
 );
 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "Main"
 );
}

Display a quiz whose parent is a course

//In custom_code/components/MyCustomScreen.js

import React from 'react';
import { View } from 'react-native';
import QuizSingleScreen from "@src/containers/Custom/QuizSingleScreen";

const MyCustomScreen = (props) => {

 const courseId = 170;
 const quizId = 245;

 return <View style={{ flex: 1, marginBottom: 80 }}>
   <QuizSingleScreen
     parent="course"
     courseId={courseId}
     quizId={quizId}
   />
 </View>
}

export default MyCustomScreen;

//In custom_code/index.js...

...

import MyCustomScreen from "./components/MyCustomScreen";

export const applyCustomCode = externalCodeSetup => {

 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "All"
 );
 externalCodeSetup.navigationApi.addNavigationRoute(
   "book",
   "BookScreen",
   MyCustomScreen,
   "Main"
 );
}