Interactive Recruitment Test Dashboard Design -- 3
Budget: $250 – $750 USD
We need a designer (programmer) to program, upload and deploy a dashboard using MERN STACK , to use it for adding interactive (online) recruitment tests. Questions and answers are available with us. The dashboard also should be hosted on AWS hosting on our own website so that each test is added later with a separate subdomain on the same hosting according to the following specifications:
- The tests should be for different job titles (positions) and the content of the questions is different
- The dashboard should support languages (English, Arbaic, Spanish, French, German, and Kurdish(Kurmanci)), as we can add questions within a single test in more than one language, and sometimes there will be two languages in the same question due to the presence of English terms that cannot be translated.
- Instructions (window/ panel): ability to create and modify Test Instructions panel from dashboard, the window appears when the applicant enters, showing the applicants the information related to the test.(similar to the photo below) with following features:
1- The ability to enter and modify instructions text according to each test requirements.
2- The ability to design the instructions window/Pannel, such as adding company logo, text type and size, color and other effects.
3- The ability to add instructions in multiple languages, the ability for test applicant to choose the language for the instruction panel, the ability to add those languages spelling check (English, Arbaic, Spanish, French, German, and Kurdish(Kurmanci))
4- The ability to add call buttons to Instruction panel, such as OK or X, also A feature for applicants to press on OK button or X button to close the instructions panel.
5- The ability to have a preview of the instruction panel design.
6- Display an instruction pop-up at start with "I Agree"
- Applicant's data entry (Form/panel):
The ability to design applicants’ data form from dashboard, should contain the following features:
1- The ability to add as many fields as we wish (dynamic label and field), chose the way applicants fill those fields (Text, numbers, dropdown list, single choice, etc..), fields could be such as :
a- First name (text field, letters only, numbers not accepted, other characters not accepted)
b- Family name (text field, numbers not accepted, other characters not accepted)
c- mobile number (country code from dropdown list , only numbers accepted other characters must be rejected, system send validation code through WhatsApp API to mobile number)
d- Email address (system send to it a verification code through email)
e- gender (dropdown list ^male-female)
f- nationality (dropdown list-All 195 World Nationalities)
g- academic specialization (text field)
h- country of residence (dropdown list- All 195 World countries)
i- city of residence (Text Field, only alphabet letters accepted, auto correction of city name )
j- years of experience in the field (dropdown list 0 to 40)
k- education level (dropdown list as below)
o Preparatory school - إعدادي
o Secondary school - ثانوي
o Diploma - دبلوم
o Bachelor’s degree - درجة بكالوريوس
o Master’s Degree - درجة ماجستير
o Doctorate Degree – درجة الدكتوراه
l- language of the exam (dropdown list such as English, Arabic, etc..)
m- upload file (such as cv upload, or any other file as we decide) with max size 5MB
2- The ability to choose and change the language for the fields names of data entry panel.
3- Ability to add a captcha field with regenerated code in the data entry form to assure that the applicant is not a robot.
4- The ability to design Applicant's data entry (Form/panel) such as adding company logo, Quiz title, text type and size, color and other effects.
5- Add a preview option of Applicant's data entry (Form/panel) , to check the final design before confirming it.
6- Allow column drag-and-drop to reorder the questions view
7- Only Admins can add/edit/delete questions and assign them to tests.
8- The design of entry panel could be something similar to design in following screenshot:
9- All data entered should be saved into data dashboard for all users and make them searchable, sortable and filterable for all fields .
10- After filling in the data entry (Form/panel) and making email confirmation, the applicant will be enabled to start the test by clicking a (start test) button, then sign in by entering his email in the username field and the password he created.
11- Provide a (show instruction) button on the data entry (Form/panel) to enable applicant to preview instructions anytime he/she needs to.
- Test Management
1. Admins can add questions through a dedicated 'Add Question' interface in the dashboard.
2. Admins can also upload questions in bulk using an Excel import tool
3. Select the question level (e.g., Junior, Senior).
4. Choose language(s) for the question (English, Arabic, etc.).
5. Define question type: Multiple Choice, True/False, Short Answer, Code Snippet, etc.
6. Input question title, description, and any attachments (images, video, audio).
7. Set language direction (LTR/RTL).
8. Each question can be assigned a level tag such as Junior, Mid-Level, Senior, or Expert.
9. Admins can configure tests to pull only questions from a selected level or mix of levels.
10. Each uploaded question can be modified in the question editor after import.
11. Supports multi-language input and metadata tagging from Excel columns.
12. Preview question before saving.
- Test Execution
1. The test consists of multiple-choice questions and answers, with the possibility of multiple answers being 3–6 choices for each question.
2. Applicants can skip any question, but cannot submit the test unless all questions are answered.
3. Applicants can navigate freely and revise their answers at any time during the test duration.
4. Equal marks are assigned to each question, and the total score is out of 100.
5. When time runs out, unanswered questions are scored as zero.
6. Tests may include one or more breaks with custom durations; the timer pauses during breaks and resumes after.
7. Break countdown appears in a pop-up; test countdown is paused during this period.
8. The timer is positioned top right or left, depending on the selected language.
9. Each test is available only once per applicant.
10. Allow skipping a question, but require answering all before submission
11. Popups if fewer answers than required
12. Support breaks and pause/resume the timer
13. Questions navigation with language toggle
- Result & Grading
1. Grade calculated out of 100
2. Each question is scored equally (e.g., for 20 questions, each is worth 5 points)
3. Applicant’s score is calculated as: (Correct Answers / Total Questions) × 100
4. Questions not answered receive 0 points
5. If a question has multiple correct answers, the applicant must select all correct options to get full credit; partial selection results in zero for that question
6. Store result with timestamp, time taken, pass/fail
7. Don’t Show applicant his result at end
- Applicant Result Display in Dashboard
1. For each applicant:
1.1.1. Select and configure which form fields to display in the table (e.g., name, email, nationality, etc.)
1.1.2. Show test taken, grade, time taken etc..
1.1.3. Added button to show all Applicant data in model
1.1.4. Can switch table data per test
1.1.5. Only users with the Admin role can access the dashboard and test management features.
2. Filtering options:
2.1. Filter applicants by name, email, mobile, job title, date, score range etc…
2.2. Filter by country, gender, education level, and years of experience
2.3. Sorting and searching for any column
2.4. Export filtered list to Excel
3. Send:
3.1. Email (via SMTP/SendGrid) with test result, feedback, links, next steps, etc.
3.2. Adding a feature to send group WhatsApp messages or emails to a group of selected applicants with one click
4. Statistics:
4.1. Number of passed/failed applicants per test
4.2. Average score, min/max score
4.3. Country-wise, gender-wise, and education-wise breakdown
4.4. Total number of applicants tested/in progress
4.5. Real-time notification system: Notify applicants immediately on test status updates (e.g., “Test Started”, “Paused”, “Break Begins”, “Results Available”). Notifications appear as toast/popups or within their profile dashboard.
_ Admins can configure tests to pull only questions from a selected level or mix of levels.
Tech Stack
• Frontend: React + Tailwind
• Backend: Node.js + Express
• Database: MongoDB
• Hosting: AWS EC2 + subdomain routing
• Messaging: WhatsApp API, Email (SendGrid / SMTP)
Security & Compliance
• Data validation
• One-time test enforcement
• OTP/Verification for identity
• CAPTCHA, password rules
• Audit log for admin actions
project handover within 2 weeks.
for more details kindly check attached PDF
- The tests should be for different job titles (positions) and the content of the questions is different
- The dashboard should support languages (English, Arbaic, Spanish, French, German, and Kurdish(Kurmanci)), as we can add questions within a single test in more than one language, and sometimes there will be two languages in the same question due to the presence of English terms that cannot be translated.
- Instructions (window/ panel): ability to create and modify Test Instructions panel from dashboard, the window appears when the applicant enters, showing the applicants the information related to the test.(similar to the photo below) with following features:
1- The ability to enter and modify instructions text according to each test requirements.
2- The ability to design the instructions window/Pannel, such as adding company logo, text type and size, color and other effects.
3- The ability to add instructions in multiple languages, the ability for test applicant to choose the language for the instruction panel, the ability to add those languages spelling check (English, Arbaic, Spanish, French, German, and Kurdish(Kurmanci))
4- The ability to add call buttons to Instruction panel, such as OK or X, also A feature for applicants to press on OK button or X button to close the instructions panel.
5- The ability to have a preview of the instruction panel design.
6- Display an instruction pop-up at start with "I Agree"
- Applicant's data entry (Form/panel):
The ability to design applicants’ data form from dashboard, should contain the following features:
1- The ability to add as many fields as we wish (dynamic label and field), chose the way applicants fill those fields (Text, numbers, dropdown list, single choice, etc..), fields could be such as :
a- First name (text field, letters only, numbers not accepted, other characters not accepted)
b- Family name (text field, numbers not accepted, other characters not accepted)
c- mobile number (country code from dropdown list , only numbers accepted other characters must be rejected, system send validation code through WhatsApp API to mobile number)
d- Email address (system send to it a verification code through email)
e- gender (dropdown list ^male-female)
f- nationality (dropdown list-All 195 World Nationalities)
g- academic specialization (text field)
h- country of residence (dropdown list- All 195 World countries)
i- city of residence (Text Field, only alphabet letters accepted, auto correction of city name )
j- years of experience in the field (dropdown list 0 to 40)
k- education level (dropdown list as below)
o Preparatory school - إعدادي
o Secondary school - ثانوي
o Diploma - دبلوم
o Bachelor’s degree - درجة بكالوريوس
o Master’s Degree - درجة ماجستير
o Doctorate Degree – درجة الدكتوراه
l- language of the exam (dropdown list such as English, Arabic, etc..)
m- upload file (such as cv upload, or any other file as we decide) with max size 5MB
2- The ability to choose and change the language for the fields names of data entry panel.
3- Ability to add a captcha field with regenerated code in the data entry form to assure that the applicant is not a robot.
4- The ability to design Applicant's data entry (Form/panel) such as adding company logo, Quiz title, text type and size, color and other effects.
5- Add a preview option of Applicant's data entry (Form/panel) , to check the final design before confirming it.
6- Allow column drag-and-drop to reorder the questions view
7- Only Admins can add/edit/delete questions and assign them to tests.
8- The design of entry panel could be something similar to design in following screenshot:
9- All data entered should be saved into data dashboard for all users and make them searchable, sortable and filterable for all fields .
10- After filling in the data entry (Form/panel) and making email confirmation, the applicant will be enabled to start the test by clicking a (start test) button, then sign in by entering his email in the username field and the password he created.
11- Provide a (show instruction) button on the data entry (Form/panel) to enable applicant to preview instructions anytime he/she needs to.
- Test Management
1. Admins can add questions through a dedicated 'Add Question' interface in the dashboard.
2. Admins can also upload questions in bulk using an Excel import tool
3. Select the question level (e.g., Junior, Senior).
4. Choose language(s) for the question (English, Arabic, etc.).
5. Define question type: Multiple Choice, True/False, Short Answer, Code Snippet, etc.
6. Input question title, description, and any attachments (images, video, audio).
7. Set language direction (LTR/RTL).
8. Each question can be assigned a level tag such as Junior, Mid-Level, Senior, or Expert.
9. Admins can configure tests to pull only questions from a selected level or mix of levels.
10. Each uploaded question can be modified in the question editor after import.
11. Supports multi-language input and metadata tagging from Excel columns.
12. Preview question before saving.
- Test Execution
1. The test consists of multiple-choice questions and answers, with the possibility of multiple answers being 3–6 choices for each question.
2. Applicants can skip any question, but cannot submit the test unless all questions are answered.
3. Applicants can navigate freely and revise their answers at any time during the test duration.
4. Equal marks are assigned to each question, and the total score is out of 100.
5. When time runs out, unanswered questions are scored as zero.
6. Tests may include one or more breaks with custom durations; the timer pauses during breaks and resumes after.
7. Break countdown appears in a pop-up; test countdown is paused during this period.
8. The timer is positioned top right or left, depending on the selected language.
9. Each test is available only once per applicant.
10. Allow skipping a question, but require answering all before submission
11. Popups if fewer answers than required
12. Support breaks and pause/resume the timer
13. Questions navigation with language toggle
- Result & Grading
1. Grade calculated out of 100
2. Each question is scored equally (e.g., for 20 questions, each is worth 5 points)
3. Applicant’s score is calculated as: (Correct Answers / Total Questions) × 100
4. Questions not answered receive 0 points
5. If a question has multiple correct answers, the applicant must select all correct options to get full credit; partial selection results in zero for that question
6. Store result with timestamp, time taken, pass/fail
7. Don’t Show applicant his result at end
- Applicant Result Display in Dashboard
1. For each applicant:
1.1.1. Select and configure which form fields to display in the table (e.g., name, email, nationality, etc.)
1.1.2. Show test taken, grade, time taken etc..
1.1.3. Added button to show all Applicant data in model
1.1.4. Can switch table data per test
1.1.5. Only users with the Admin role can access the dashboard and test management features.
2. Filtering options:
2.1. Filter applicants by name, email, mobile, job title, date, score range etc…
2.2. Filter by country, gender, education level, and years of experience
2.3. Sorting and searching for any column
2.4. Export filtered list to Excel
3. Send:
3.1. Email (via SMTP/SendGrid) with test result, feedback, links, next steps, etc.
3.2. Adding a feature to send group WhatsApp messages or emails to a group of selected applicants with one click
4. Statistics:
4.1. Number of passed/failed applicants per test
4.2. Average score, min/max score
4.3. Country-wise, gender-wise, and education-wise breakdown
4.4. Total number of applicants tested/in progress
4.5. Real-time notification system: Notify applicants immediately on test status updates (e.g., “Test Started”, “Paused”, “Break Begins”, “Results Available”). Notifications appear as toast/popups or within their profile dashboard.
_ Admins can configure tests to pull only questions from a selected level or mix of levels.
Tech Stack
• Frontend: React + Tailwind
• Backend: Node.js + Express
• Database: MongoDB
• Hosting: AWS EC2 + subdomain routing
• Messaging: WhatsApp API, Email (SendGrid / SMTP)
Security & Compliance
• Data validation
• One-time test enforcement
• OTP/Verification for identity
• CAPTCHA, password rules
• Audit log for admin actions
project handover within 2 weeks.
for more details kindly check attached PDF