DIGITAL AUDIO PROCESSING LAB
IIT BOMBAY
Full-Stack Web Development Coding Task
Background
The Digital Audio Processing Lab at IIT Bombay has developed technology for automatic
assessment of reading skills of school students. This technology is deployed via an App,
TARA (Teacher’s Assistant for Reading Assessment) where a story is presented to a student
and the student’s attempt of the story is recorded. Using the audio recording and the
passage/story read by the student, a report of the student’s reading skill is generated via an
API. The report contains a breakup of 2 scores:
1) Phrasing - Is the student grouping/chunking words appropriately in the story.
2) Prominence - Is the student emphasizing the right words in the story.
To know if the student is phrasing well and making the right words prominent, we need to
have a model representation of the story text.
For example, for the text given below:
No other animals use silk in as many ways as do the spiders.
the model representation would be as follows with the | denoting phrasing boundaries
(groups of words) and bold words indicating prominent words.
No other animals | use silk | in as many ways | as do the spiders. |
Task Description
The story texts' model markings (phrasing boundary and prominent words) in a csv format
for different stories has been uploaded by an admin to a cloud storage service (AWS S3).
The task is to create a webpage which will allow a user to:
Part 1 (Compulsory)
a) Enter story id for which they would like to edit the model markings as per wireframes
given here. A list of stories for testing has been provided to you here. Please use
only the story ids assigned to you.
b) The api to fetch each of the csvs in a json format has been made available to you
here. Call the api to get the initial markings Get API Method.
c) Display the response and results of the API in paragraphs words to be separated by
space.
d) The phrasing boundaries can be inserted between 2 words and prominence can be
added for a particular word.
e) Allow the user to mark phrasing boundaries by clicking between any 2 words.
Clicking once should show || between the words indicating a phrase boundary and
clicking again will remove the || between the words.
DIGITAL AUDIO PROCESSING LAB
IIT BOMBAY
f) Allow the user to mark prominent words by clicking on a word. Clicking once should
highlight that particular word and clicking on it again will remove the highlight on the
word.
Part 2 (Optional if time permits)
g) Allow the user to mark different categories of phrasing boundaries & prominent words
by giving them a dropdown to select the category.
A) Phrasing boundary
Category Marking
Compulsory ||
Comma |
Optional /
B) Prominent Word
Category Marking
Compulsory Word
Optional Word
Based on the option chosen from the dropdown appropriate marking of phrasing
boundary and prominent word should appear.
h) After clicking on save changes, call the same api with put method and in the body
pass the updated json elements.
Wireframes for the webpage can be accessed here. Note: These are just wireframes. You
are free to choose design elements of your choice while maintaining functionality.
Submission Details:
1) Submission Time : 2 hours
2) Code the frontend in React using functional components and jsx.
3) Avoid using UI and CSS libraries if not comfortable.