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
2. 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 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 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.

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

     // 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

     // 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/>
       - <ToDoList/>
           - <Todo/>
               - <Checkbox/>
               - <TodoName/>
               - <RemoveIcon/>
           - <MarkAllDone/>

2. How do you manage state?

3. What all do you store in the state?

   ** Sample unrelated state: **

   {
       tasks: [{
           created_at: Date
           order: Number
           isDone: Boolean
           title: String
           type: "checklist" | "notes"
       }]
   }

4. 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