Coding Challenge: Student Details Filtering and Sorting
Problem Statement:
You are required to build a web application that displays a list of students and their scores
across four subjects: English, Maths, Science, and Social Science. The application should
have the following features:
1. Dropdown to select a subject: The user can filter the list by selecting a subject
(English, Maths, Science, or Social Science).
2. Filtering Options: After selecting a subject, the user should be able to filter the
students’ marks in that subject using one of the following conditions:
○ Above: Show students whose marks are greater than a specified value.
○ Below: Show students whose marks are less than a specified value.
○ Between: Show students whose marks lie between two specified values.
3. Filter Button: A button to apply the filter.
4. Clear Button: A button to clear the filter and show all students.
5. Sorting: The list of students should be displayed in a table with sortable columns. The
user can sort the list by [Link], Name, or marks in any subject (English, Maths, Science,
Social Science).
Functional Requirements:
● The list of students should be displayed in a table with the following columns:
○ [Link]
○ Name
○ English
○ Maths
○ Science
○ Social Science
● When a subject is selected from the dropdown, the user should be able to input a filter
condition (above, below, between) and filter the table.
● The user should be able to click on the column headers to sort the list by [Link], Name,
or any subject score in ascending or descending order.
● The table should dynamically update based on the filter and sorting criteria.
Data:
Here is the list of students and their marks:
[Link] Name English Maths Science Social Science
1 Janu 50 86 77 89
2 Tanu 75 96 67 91
3 Tara 90 35 86 100
4 Glen 79 68 77 68
5 Zara 80 85 96 68
UI Requirements:
● The application should have a subject dropdown with the following options:
○ English
○ Maths
○ Science
○ Social Science
● Below the subject dropdown, include three filter radio buttons:
○ Above
○ Below
○ Between (If "Between" is selected, the user should input two numbers)
● Provide a text box (or two text boxes for "Between") to input the filter value(s).
● Below the filter options, provide two buttons:
○ Filter: Applies the filtering.
○ Clear: Clears the filter and displays all students.
● The table should be sortable by clicking the column headers ([Link], Name, English,
Maths, Science, Social Science).
Example Scenarios:
1. If the user selects "Maths" as the subject and filters "Above 80", the table should show
the students who scored more than 80 in Maths.
2. If the user selects "Science" and filters "Between 70 and 90", the table should show the
students whose Science marks are between 70 and 90.
3. The user can clear the filter to reset the table and display all students.
Constraints:
● You must use JavaScript to handle filtering and sorting.
● CSS can be used to style the table and UI elements.
● The solution can be implemented with plain JavaScript, HTML or using frameworks like
Angular or React based on your preference.
Bonus:
● Highlight the rows of students who match the filter criteria.
● Add pagination if the list of students becomes long.
Sample Data
var data = [
{
id: 0,
name: "Janu",
English: 50,
Maths: 86,
Science: 77,
SocialScience: 88
},
{
id: 1,
name: "Thanu",
English: 75,
Maths: 96,
Science: 67,
SocialScience: 91
},
{
id: 2,
name: "Tara",
English: 90,
Maths: 35,
Science: 86,
SocialScience: 100
},
{
id: 3,
name: "Glen",
English: 79,
Maths: 68,
Science: 77,
SocialScience: 78
},
{
id: 4,
name: "Zara",
English: 80,
Maths: 85,
Science: 96,
SocialScience: 68
}
]
FizzBuzz
Scenario: A common problem to test simple logic and loops. You need to print numbers from 1
to 100, but for multiples of 3, print "Fizz", for multiples of 5, print "Buzz", and for multiples of both
3 and 5, print "FizzBuzz".
Challenge: Write a Java program that implements the FizzBuzz logic.
Example:
● Output: 1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13,
14, FizzBuzz, ...
Find Employees Who Joined in the Last Month
Scenario: You want to find all employees who joined the company in the last month from the
current date.
Challenge: Write a MySQL query to retrieve employees who joined in the past month.
Example:
● Input:
ID Name JoinDate
1 John 2024-08-01
2 Jane 2024-07-20
3 Steve 2024-09-10
Output:
Name JoinDate
Steve 2024-09-10