Boilerplate for Chanakya Testing Frontend

This frontend will be used by the potential students to write our entrance exam. This will be on similar lines to the interface which opens up from the SMS (which you can get calling up our helpline at 011-39595141).

Every test attempt needs a valid enrolment key (eg. ABC12, PQR78) which is generated by the backend. The test attempt link will look something like this: http://chanakya.navgurukul.org/attempt_test/ABC12. ABC12 is the enrolment key here. Backend will validate the enrolment key and only then render the page.

There are two ways to validate the enrolment key:

The page can be rendered on the server side and if the enrolment key is invalid then an error can be returned.
Frontend can ping an API to validate the enrolment key.

First one is better as there would be lesser requests on frontend.

The test flow will look like this:

Student opens the test attempt page and sees a bit of instructions telling him about what can he expect next.
She enters some basic details (Mobile, Name, Gender etc.) [GPS coordinates are also captured here.]
She attempts a test comprising of 18 randomly generated questions.
She fills in more details (optional).
She gets a Thank You! screen.

Documenting the API endpoints for every step.

Step 1

No API endpoints are pinged. Only the instructions are rendered. The instructions are plain text. Will write it again.

Step 2

A form with these basic details is entered. After she fills the form POST /on_assessment/details/<enrolment_key>

POST body would look something like this.

{
  "name": "Sheila Dixit",
  "gender": "Female",
  "mobile": "8130378965",
  "latLong": ["2.341", "4.231"]
}

The enrolment key parameter should be the same as in the URL.

Step 3

The test is rendered. To render the test a request to POST /on_assessment/questions/{enrolmentKey} will be made.

The response of this request would look something like this:

{
  "questions": [
    {
        "commonText": "<link to image>",
        "enText": "Solve the above question and write the answer in the text box.",
        "hiText": "Upar dia hua question solve karein.",
        "type": "mcq",
        "options": [
          {
            "text": "option 1"
          },
          {
            "text": "option 2"
          },
          {
            "text": "option 3"
          },
          {
            "text": "option 4"
          }
        ],
    },
    {
        "commonText": null,
        "hiText": "Hindi mein text",
        "enText": "English mein text",
        "type": "integer_answer",
    }
  ]
}

There are two types of questions:

mcq: these questions have multiple (generally 4 to 6) options to choose from.
integer_answer: these type of questions don't have any options. student has to input an integer and backend will check if that is the right answer.

Every question object in the questions array has a type specified.

Student will be given 60 minutes to attempt the test. After she has attempted the test (or time has elapsed), she can submit the test (or will auto submit in case of time limit). POST /test/end_test/<enrolment_key> will be pinged with the answers of every question. The POST body would look something like this:

{
  "answers": [
    1,
    2,
    3,
    19,
    3,
    4
  ]
}

The answers array will contain as many integers as number of questions returned by POST /test/start_test/<enrolment_key> In case the student has not attempted any questions, add a null in the list for that one.

Step 4

A form with more details will be rendered. Most of the fields (barring one or two) will be optional in this form. POST /test/personal_details/<enrolment_key> will be pinged for the student to fill in the personal details. The POST body will look similar to POST /test/personal_details/<enrolment_key>**

Step 5

A static Thank You screen will be rendered.

Every API call can return some error (in case of expiry of enrolment keys, already used enrolment keys etc.). Some kind of error handling which renders a different HTML would need to be enabled.

@abhishekgupta92 You can create an orphan branch to start working on this issue and add your boilerplate there. I will merge it in the main code manually. Create an orphan branch using git checkout --orphan orphan_branch_name

navgurukul / chanakya