akashraj9828 · August 4, 2023 09:41 · Aug 4, 2023 · Jul 31, 2023 · Aug 22, 2022 · Aug 22, 2022
diff --git a/question.md b/question.md
@@ -68,8 +68,8 @@ A *smart* api is available at your disposal details of which are also mentioned
 
 ### How would you build this?
 1. How would you design the component tree for this application?
-	```jsx
     ** **Sample unrelated component tree:** **
+	```jsx
     - <App/>
         - <ToDoList/>
             - <Todo/>

diff --git a/question.md b/question.md
@@ -68,7 +68,7 @@ A *smart* api is available at your disposal details of which are also mentioned
 
 ### How would you build this?
 1. How would you design the component tree for this application?
-
+	```jsx
     ** **Sample unrelated component tree:** **
     - <App/>
         - <ToDoList/>
@@ -77,6 +77,7 @@ A *smart* api is available at your disposal details of which are also mentioned
                 - <TodoName/>
                 - <RemoveIcon/>
             - <MarkAllDone/>
+	```
 3. How do you manage state?
 4. What all do you store in the state?
 
@@ -93,12 +94,13 @@ A *smart* api is available at your disposal details of which are also mentioned
     }
     ```
 5. How do you use useEffect, useState or any other method to handle and states and events/callbacks in the application.
-
+```
     ** **Sample unrelated answer:** **
     - Use effect to load the tasks from the api
     - Use state to update the task list
     - Callback to add new task
     - Callback to update a task
     - Callback to remove a task
     - Callback to order the task list
-    - Callback to mark all the task as done
+    - Callback to mark all the task as done
+```
diff --git a/question.md b/question.md
@@ -20,18 +20,17 @@ A *smart* api is available at your disposal details of which are also mentioned
 - As a recruiter, I want the user to answer only one question at a time.
 - As a recruiter, I want the time limit to be enforced for each question.
 - As a recruiter, when a question times out, I want the answer to be submitted anyway.
-- As a user if I reload the page/ open the quiz in a new tab,
-  I want to be able to continue with the answer that I had written/selected before the reload.
+- As a user if I restart the app, I want to be able to continue with the answer that I had written/selected before the restart.
 - As a user, I would like to see a finish message when the quiz is over.
 
 
 ### Acceptance Criteria:
 - The question is displayed.
 - Answer input is displayed.
 - A timer is displayed.
-- On reload, the timer should be restored.
-- On reload, the application should the answer be repopulated.
-- On reload, the application should start from where the user left off.
+- On restart, the timer should be restored.
+- On restart, the application should the answer be repopulated.
+- On restart, the application should start from where the user left off.
 - The user doesn't exceed the time limit for the question.
 
 
@@ -71,15 +70,13 @@ A *smart* api is available at your disposal details of which are also mentioned
 1. How would you design the component tree for this application?
 
     ** **Sample unrelated component tree:** **
-    - App
-        - ToDo List
-            - Todo
-                - Drag Handle
-                - Checkbox
-                - Todo type
-                - Todo name
-                - Remove
-            - Mark all as done
+    - <App/>
+        - <ToDoList/>
+            - <Todo/>
+                - <Checkbox/>
+                - <TodoName/>
+                - <RemoveIcon/>
+            - <MarkAllDone/>
 3. How do you manage state?
 4. What all do you store in the state?
 

diff --git a/question.md b/question.md
@@ -0,0 +1,107 @@
+
+
+
+# Technical discussion
+*Questions are welcome.*
+
+
+### Problem statement:
+An IT company wants to screen the candidates that come through for the interview process.
+The company would like the application flexible and allow candidates from various domains are able to take a test.
+As a developer, your task is to create a react quiz application that:
+1. Takes user inputs of different types for timed question
+1. Submits the answers using the available API be stored to a backend database.
+
+A *smart* api is available at your disposal details of which are also mentioned below.
+
+
+
+### User story:
+- As a recruiter, I want the user to answer only one question at a time.
+- As a recruiter, I want the time limit to be enforced for each question.
+- As a recruiter, when a question times out, I want the answer to be submitted anyway.
+- As a user if I reload the page/ open the quiz in a new tab,
+  I want to be able to continue with the answer that I had written/selected before the reload.
+- As a user, I would like to see a finish message when the quiz is over.
+
+
+### Acceptance Criteria:
+- The question is displayed.
+- Answer input is displayed.
+- A timer is displayed.
+- On reload, the timer should be restored.
+- On reload, the application should the answer be repopulated.
+- On reload, the application should start from where the user left off.
+- The user doesn't exceed the time limit for the question.
+
+
+
+### Available Backend API:
+- The following backend endpoints for the UI to consume:
+    1. Gets all question ids;
+        The questions that are already answered will not be available in the api
+        - Returns String[]      // Array of ids of question
+    2. Gets a question by id; has all the information to render the question
+        ``` ts
+        // Returns
+        {
+            time_limit_in_seconds: Number,
+            question_type: "text" | "multiple_choice" | "code" | "multiple_select",
+            options?: String[],  // available only for "multiple_choice" | "multiple_select" questions
+            question: String,   // The question text string to be rendered.
+            hints?: String,     // An optional multiline help text string.
+        }
+        ```
+    3. Submit one answer by id
+
+        ``` ts
+		// Request body 
+        {
+            question_id: String
+            answer: any
+        }
+		// Returns - HTTP success/failure
+        ```
+
+
+
+
+
+### How would you build this?
+1. How would you design the component tree for this application?
+
+    ** **Sample unrelated component tree:** **
+    - App
+        - ToDo List
+            - Todo
+                - Drag Handle
+                - Checkbox
+                - Todo type
+                - Todo name
+                - Remove
+            - Mark all as done
+3. How do you manage state?
+4. What all do you store in the state?
+
+    ** **Sample unrelated state:** **
+    ```ts
+    {
+        tasks: [{
+            created_at: Date
+            order: Number
+            isDone: Boolean
+            title: String
+            type: "checklist" | "notes"
+        }]
+    }
+    ```
+5. How do you use useEffect, useState or any other method to handle and states and events/callbacks in the application.
+
+    ** **Sample unrelated answer:** **
+    - Use effect to load the tasks from the api
+    - Use state to update the task list
+    - Callback to add new task
+    - Callback to update a task
+    - Callback to remove a task
+    - Callback to order the task list
+    - Callback to mark all the task as done