refactor(worksheet): refactored the QuestionBox component:

* added interfaces wherever applicable
* created a new component HTMLPrint, that renders the given HTML in a div and returns it, shifted it from outside index.tsx to make it easier to use in other components(if required)
* extracted one component 'QuestionOption' from QuestionBox to increase readibility

packages/worksheet/src/components/HTMLPrint.tsx

@@ -0,0 +1,18 @@
+// Lib
+import * as React from "react";
+
+// Interface
+export interface IHtmlPrint {
+  html: string;
+}
+
+// Utility Component that returns a div using a markup
+// TODO: find an alternate way to avoid using innerHTML
+const HtmlPrint: React.FC<IHtmlPrint> = ({ html }) => {
+  const createMarkup = (markup) => {
+    return { __html: markup };
+  };
+  return <div dangerouslySetInnerHTML={createMarkup(html)} />;
+};
+
+export default HtmlPrint;

packages/worksheet/src/components/QuestionBox/QuestionOption.tsx

@@ -0,0 +1,42 @@
+// Lib
+import * as React from "react";
+import { HStack } from "native-base";
+import { BodyMedium, overrideColorTheme } from "@shiksha/common-lib";
+
+// Components
+import HtmlPrint from "components/HTMLPrint";
+
+// Constants
+import colorTheme from "../../colorTheme";
+const alphabet = ["a", "b", "c", "d", "e", "f"];
+const colors = overrideColorTheme(colorTheme);
+
+// Interface
+export interface IQuestionOption {
+  item: any;
+  isAnswerHide: boolean;
+  index: number;
+}
+
+// Returns a single option for a Question
+const QuestionOption: React.FC<IQuestionOption> = ({
+  item,
+  isAnswerHide,
+  index,
+}) => {
+  return (
+    <HStack space="1" alignItems="baseline">
+      <BodyMedium
+        textTransform="inherit"
+        color={item.answer && !isAnswerHide ? colors.success : ""}
+      >
+        {alphabet[index] + ". "}
+      </BodyMedium>
+      <BodyMedium color={item.answer && !isAnswerHide ? colors.success : ""}>
+        <HtmlPrint html={item?.value?.body} />
+      </BodyMedium>
+    </HStack>
+  );
+};
+
+export default QuestionOption;

packages/worksheet/src/components/QuestionBox/index.tsx

@@ -0,0 +1,79 @@
+// Lib
+import React from "react";
+import { Box, HStack, VStack } from "native-base";
+
+// Styles
+import "../../App.css";
+
+// Constants
+import { colourPalette } from "constants/colours";
+import colorTheme from "colorTheme";
+
+// Components
+import HtmlPrint from "components/HTMLPrint";
+import QuestionOption from "./QuestionOption";
+
+const styles = { questionDiv: { display: "flex" } };
+
+// Interface
+export interface IQuestionBox {
+  questionObject: any;
+  isAnswerHide: boolean;
+  infoIcon: Object;
+  _box: Object;
+}
+
+// Renders a box for a question using an object
+const QuestionBox: React.FC<IQuestionBox> = ({
+  questionObject,
+  isAnswerHide,
+  infoIcon,
+  _box,
+}) => {
+  return (
+    <Box shadow={2} rounded="xl">
+      <Box
+        bg={colourPalette.secondary}
+        p="5"
+        {...(questionObject?.options ||
+        (!questionObject?.options && questionObject?.answer)
+          ? { roundedTop: "xl" }
+          : { rounded: "xl" })}
+        {..._box}
+      >
+        <HStack
+          justifyContent="space-between"
+          space={1}
+          alignItems="flex-start"
+        >
+          <div style={styles.questionDiv}>
+            <HtmlPrint html={questionObject?.question} />
+          </div>
+          {infoIcon}
+        </HStack>
+      </Box>
+      {!questionObject?.options && questionObject?.answer ? (
+        <Box bg={colorTheme.primaryLight1} p="4" roundedBottom={"xl"}>
+          <HtmlPrint html={questionObject.answer} />
+        </Box>
+      ) : questionObject?.options ? (
+        <Box bg={colorTheme.primaryLight1} p="4" roundedBottom={"xl"}>
+          <VStack space="2">
+            {questionObject.options?.map((item, index) => (
+              <QuestionOption
+                item={item}
+                isAnswerHide={isAnswerHide}
+                index={index}
+                key={`qo${index}`}
+              />
+            ))}
+          </VStack>
+        </Box>
+      ) : (
+        <React.Fragment />
+      )}
+    </Box>
+  );
+};
+
+export default QuestionBox;