TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

LIST OF FIGURES v
LIST OF TABLE vii

1 PROBLEM STATEMENT 4
2 PROJECT SCOPE 5
3 SOFTWARE REQUIREMENTS SPECIFICATION 6
4 SYSTEM ANALYSIS 13
4.1 ATTRIBUTE MATRIX 13
4.2 TRACEABILITY MATRIX 14
4.3 TRACEABILITY TREE 16
5 SYSTEM DESIGN 17
5.1 USE CASE DIAGRAM 17
5.2 ACTIVITY DIAGRAM 18
5.3 CLASS DIAGRAM 19
5.4 SEQUENCE DIAGRAM 20
5.5 COLLABORATION DIAGRAM 21
5.6 COMPONENT DIAGRAM 22
5.7 STATE CHART DIAGRAM 22
5.8 PACKAGE DIAGRAM 23
6 SYSTEM DEVELOPMENT 24
6.1 DEVELOPMENT METHODOLOGY 24
6.2 FRONT-END DEVELOPMENT 24
6.3 BACK-END DEVELOPMENT 24
6.4 DATABASE DESIGN AND INTEGRATION 25
6.5 SYSTEM ARCHITECTURE 25
6.6 VERSION CONTROL AND COLLABORATION 25
6.7 TESTING AND DEBUGGING 25
6.8 DEPLOYMENT 25

1
 7 SYSTEM IMPLEMENTATION 26
7.1 SYSTEM PRE-REQUISITE 26
7.2 STEPS TO INSTALL SOFTWARE 26
8 SYSTEM TESTING 27
8.1 TEST PLAN 27
8.1.1 PROJECT DESCRIPTION 27
8.1.2 RELATED DOCUMENTS 27
8.1.3 TESTING STRATEGY 27
8.1.4 TESTING LEVEL PLAN 27
8.1.5 UNIT TEST 28
8.1.6 MODULE TEST 28
8.1.7 INTEGRATION TEST 28
8.1.8 ALPHA TEST 28
8.1.9 BETA TEST 28
8.1.10 REGRESSION TEST 28
8.1.11 USABILITY TEST 28
9 CONCLUSION AND FUTURE ENHANCEMENT 29

APPENDIX 1 SAMPLE CODE 30

APPENDIX 2 SAMPLE SCREEN SHOTS 35

2
 LIST OF FIGURES

FIGURE NO TITLE PAGE NO

3.1 Introduction 7
3.2 Overall description 8
4.1 Attribute Matrix 13
4.1 Use Case Requirement Attribute Matrix 14
4.2 Stack Holder Vs Stack Holder Requirement 15
4.2 Use Case Vs Use Case Requirement 15
4.2 Use Case Vs Stack Holder Requirement 15
4.3 Stack Holder Requirement Traceability Tree 16
4.3 Use Case Requirement Traceability Tree 16
5.1 Use Case Diagram 17
5.2 Activity Diagram 18
5.3 Class Diagram 19
5.4 Sequence Diagram 20
5.5 Collaboration Diagram 21
5.6 Component Diagram 22
5.7 State chart Diagram 22
5.8 Package Diagram 23
A 2.1 Sign up/Login 35
A 2.2 Home 35
A 2.3 Mock interview 36
A 2.4 Resume Builder 36
A 2.5 Quiz Conductor 37

3
 CHAPTER-1
PROBLEM STATEMENT

The objective of the platform is to assist students in effectively

preparing for campus placements by providing a centralized solution for
interview readiness. This platform aims to offer features such as personalized
aptitude tests, mock interviews that simulate real-world scenarios, AI-powered
resume building with job-specific templates, and detailed progress tracking.
By integrating these tools into a single application, the platform ensures
structured preparation, helps students focus on their strengths and areas for
improvement, and significantly enhances their confidence and chances of
success in securing positions in MNCs and service-based firms.

4
 CHAPTER-2
PROJECT SCOPE

This system enables users to efficiently prepare for mock interviews,

aptitude tests, and resume building. Consequently, this project primarily
supports students and professionals in enhancing their job prospects within
multinational corporations (MNCs) and service-based companies.

5
 CHAPTER-3
SOFTWARE REQUIREMENT SPECIFICATION

3.1 INTRODUCTION
PURPOSE
The CAMPUS INTERVIEW CRACKER is a comprehensive, web-based
application designed to aid students in preparing for campus placements and job interviews,
especially for roles in multinational corporations (MNCs) and service-based companies.
This SRS document outlines the complete system's requirements, with a focus on the core
modules necessary to address the challenges faced by students during their preparation.

DOCUMENT CONVENTION
The document is typed using “TIMES NEW ROMAN” as the font, with headings
capitalized in font size 16 and the text in font size 14. Each and every statement has its own
priority.

INTENDED AUDIENCE & READING SUGGESTION

The document is intended for different types of readers, such as developers, project
managers, users, marketing staff, testers, and document writers. The SRS briefly describes
the functional requirements of the system. We can develop the product for users who are
aiming for placements.

PROJECT SCOPE
This system enables users to efficiently prepare for mock interviews, aptitude tests,
and resume building. Consequently, this project primarily supports students and
professionals in enhancing their job prospects within multinational corporations (MNCs)
and service-based companies.

6
REFERENCE

 [Link]

 [Link]

3.2 OVERALL DESCRIPTION

3.2.1 PRODUCT PERSPECTIVE

Figure 1: Architecture diagram of the system

3.2.2 PRODUCT FEATURES

 Interview mock tests
 Customizable aptitude tests
 Resume builder
 Interview preparation guides
 Instant feedback
 Progress reports
 User feedback

7
3.2.3 OPERATING ENVIRONMENT
OPERATING SYSTEM - WINDOWS 10
PROCESSOR - Intel Core I3
RAM - 4 GB
HARD DISK SPACE - 64 GB

3.2.4 DESIGN AND IMPLEMENTATION CONSTRAINTS

FRONT END - HTML, CSS, JAVA SCRIPT
BACKEND - NODE JS
DATABASE - MONGO DB
PROTOCOL - HTTP, TCP/IP
3.2.5 USER DOCUMENTATION
 A comprehensive user manual will be provided alongside the Campus Interview
Cracker platform to assist users in understanding the functionality and operation
of the system.
 The user manual will adhere to standard documentation practices, outlining the
product’s purpose, scope, key features, and system operations.
 It will include detailed, step-by-step instructions for utilizing the platform, along
with explanations of system conventions, message structures, quick reference
guides, troubleshooting tips, and solutions for common errors and malfunctions.
3.2.6 ASSUMPTION AND DEPENDENCIES
Full working of simulation of campus interview cracker is depending on the
availability of the internet connection. The user details are updated immediately
through internet.

3.2.7SYSTEM FEATURES
[Link] SYSTEM FEATURES 1 – INTERVIEW MOCK TESTS

[Link].1 DESCRIPTION AND PRIORITY

The application provides a variety of interview mock tests that simulate real
interview scenarios. These tests help students practice commonly asked questions, improve
their confidence, and get familiar with the interview process. This is a high-priority feature.

8
[Link].2 STIMULUS / RESPONSE SEQUENCES
 Users navigate to the interview mock test section.
 Select a test category and difficulty level.
 Start the test and answer questions.
 Receive immediate feedback with explanations.
[Link].3 FUNCTIONAL REQUIREMENTS
 TEST CATEGORY SELECTION
 DIFFICULTY LEVEL SELECTION
 START TEST BUTTON
 VIEW FEEDBACK BUTTON
[Link] SYSTEM FEATURES 2 - CUSTOMIZABLE APTITUDE TESTS

[Link].1 DESCRIPTION AND PRIORITY

Users can customize aptitude tests based on difficulty level, topics, and time
duration. This feature helps students focus on their weaker areas, practice different types of
aptitude questions, and build problem-solving skills relevant to campus interviews. This is
a high-priority feature.
[Link].2 STIMULUS / RESPONSE SYSTEM
 Navigate to the aptitude test customization section.
 Select topics, difficulty level, and time duration.
 Start the test and answer questions.
 Receive instant feedback and explanations.
[Link] SYSTEM FEATURES 3 – RESUME BUILDER

[Link].1 DESCRIPTION AND PRIORITY

The resume builder tool guides users through the process of creating a professional
and ATS-friendly resume. With customizable templates and pre-filled content suggestions,
users can showcase their skills, projects, and achievements effectively. This is a medium-
priority feature.
[Link].2 STIMULUS/RESPONSE SEQUENCES
 Navigate to the resume builder.
 Enter required information.

9
  Generate and download the resume.
[Link].3 FUNCTIONAL REQUIREMENT
 INPUT FIELDS FOR PERSONAL INFORMATION
 DOWNLOAD BUTTON
[Link] SYSTEM FEATURES 4 - INTERVIEW PREPARATION GUIDES

[Link].1 DESCRIPTION AND PRIORITY

Comprehensive guides are available to assist users in preparing for interviews.
These guides cover technical, HR, and behavioral interview questions, along with tips on
effective communication, body language, and common interview etiquette. This is a high-
priority feature.
[Link].2 STIMULUS / RESPONSE SEQUENCES
 Navigate to the interview preparation section.
 Select a guide category.
 Read through the material.
[Link].3 FUNCTIONAL REQUIREMENTS
 GUIDE CATEGORY SELECTION
 VIEW GUIDE BUTTON
[Link] SYSTEM FEATURES 6 – INSTANT FEEDBACK

[Link].1 DESCRIPTION AND PRIORITY

After completing tests, users receive immediate feedback, including correct
answers, explanations, and performance analysis. This is a high-priority feature.
[Link].2 STIMULUS / RESPONSE SEQUENCES
 Complete a test.
 View feedback with explanations.
[Link].3 FUNCTIONAL REQUIREMENTS
 VIEW FEEDBACK BUTTON
 DETAILED EXPLANATION DISPLAY
[Link] SYSTEM FEATURES 7 – PROGRESS REPORTS
[Link].1 DESCRIPTION AND PRIORITY

10
 The application generates detailed progress reports that track the user's
performance over time. These reports highlight strengths, weaknesses, and overall
improvement. This is a medium-priority feature.
[Link].2 STIMULUS / RESPONSE SEQUENCES
 Navigate to the progress reports section.
 Select a time range.
 View report.
[Link].3 FUNCTIONAL REQUIREMENTS
 TIME RANGE SELECTION
 VIEW REPORT BUTTON

3.2.8 EXTERNAL INTERFACE REQUIREMENTS

[Link] USER INTERFACE
The web application offers an intuitive and user-friendly interface, accessible through
web browsers on both desktop and mobile devices. It includes clear navigation menus,
interactive test modules, and responsive feedback sections to enhance the user experience.

[Link] HARDWARE INTERFACES

The application requires standard hardware components such as a computer, tablet, or
smartphone with internet access. Minimum requirements include a 2 GHz processor, 4 GB
RAM, and an active network connection.

[Link] SOFTWARE INTERFACES

The web application is compatible with major web browsers like Google Chrome,
Mozilla Firefox, and Microsoft Edge. It interfaces with an external quiz API for generating
aptitude questions and uses PDF generation libraries for the resume builder.

[Link] COMMUNICATIONS INTERFACES

The application communicates with external services through secure HTTPS
protocols. It also supports API integration for dynamic quiz content and real-time

11
feedback mechanisms.

3.2.9 OTHER NON FUNCTIONAL REQUIREMENTS

[Link] PERFORMANCE REQUIREMENTS

The application should handle simultaneous access by multiple users without
performance degradation. Response time for quiz loading should not exceed 2 seconds
under normal usage conditions.

[Link] SAFETY REQUIREMENTS

The application ensures that user data is not lost during unexpected shutdowns by
implementing auto-save features and regular backups.

[Link] SOFTWARE QUALITY ATTRIBUTES

The application prioritizes reliability, usability, and performance. Regular testing is
conducted to ensure smooth functionality and minimal bugs.

[Link] SECURITY REQUIREMENTS

User credentials and sensitive information are encrypted. The application uses HTTPS for
secure communication and follows OWASP guidelines to prevent vulnerabilities like SQL
Injection and Cross-Site Scripting.

[Link] BUSINESS RULES

Users must complete a test before accessing feedback. Resumes generated via
the application must include the application watermark.

12
 CHAPTER-4
SYSTEM ANALYSIS
The next workflow in the RUP is the Analysis of the requirements which have been
specified in the SRS. The Analysis is done with the help of Rational Requisite Pro. The
three views or reports which form the basis for analysis are
1. Attribute Matrix
2. Traceability Matrix
3. Traceability Tree
4.1 ATTRIBUTE MATRIX
The Attribute Matrix view is a spreadsheet like display that lists the requirements of
a specific requirements type and their attributes. Requirements are arranged in rows, listed
by tag number and followed by requirement name. Attributes are arranged in columns.
Requirement Matrix

Use Case Requirement Matrix

13
4.2 TRACEABILITY MATRIX
Traceability Matrix is a view that illustrated the relationships between requirements
of the same or different types. We can use this matrix to create, modify and delete
traceability relationships and view indirect relationships and view direct relationships and
traceability relationships with a suspect state. We can also use the traceability matrix to
filter and sort the requirements and columns requirements separately.
Stack Holder Vs Stack Holder Requirement

Use Case Vs Use Case Requirement

14
Use Case Vs Stack Holder Requirement

15
4.3 TRACEABILITY TREE

A view that displays all internal and external requirements traced to or from a
requirement. The traceability tree only displays the first level project traceability.
Stack Holder Requirement Use Case Requirement Traceability
Traceability Tree Tree
IN IN

OUT

OUT

16
 CHAPTER-5
SYSTEM DESIGN

5.1 USECASE DIAGRAM

A Use Case Diagram is a graph of actors, a set of use cases enclosed by a
system boundary, communication association between the actors and the use cases and
generalization among the use cases. A use case corresponds to a sequence of
transactions, in which each transaction is invoked from outside the system and engages
internal objects to interact with each other. An actor is anything that interacts with the
use case.

Figure 5.1 Campus Interview Cracker Use Case Diagram

17
5.2 ACTIVITY DIAGRAM
Activity Diagrams illustrate the dynamic nature of a system by modeling the
flow of control from activity to activity. An activity represents an operation on some
class in the system that results in a change in the state of the system. Typically,
activity diagrams are used to model workflow or business processes and internal
operation.

Figure 5. 2 Campus Interview Cracker Activity Diagram

18
5.3 CLASS DIAGRAM
A Class Diagram is a collection of static modeling elements such as classes and
their relationships, connected as a graph to each other and to their contents. These
diagrams show the static structures of the model.

Figure 5.3 Campus Interview Cracker Class Diagram

5.4 SEQUENCE DIAGRAM

Sequence Diagrams are easy and intuitive way of describing the behavior of a
system by viewing the interaction between the system and its environment. A sequence
diagram shows the interaction arranged in a time sequence. It shows the object
participating by their life lines and the messages they exchange, arranged in a time
sequence

19
 Figure 5.4 Campus Interview Cracker Sequence Diagram

5.5 COLLABORATION DIAGRAM

A collaboration diagram represents a collaboration, which is a set of objects

related in a particular context, and interaction, which is a set of messages
exchanged among the objects within the collaboration to achieve a desire

20
 outcome.

Figure 5.5 Campus Interview Cracker Collaboration Diagram

5.6 COMPONENT DIAGRAM

Component diagram models the physical components such as source codes,

executable programs, user interface in a design. These high level physical components
may or may not be equivalent to many smaller components we use in creation of
application.

21
 Figure 5.6 Campus Interview Cracker Component Diagram

5.7 STATE CHART DIAGRAM

A Statechart Diagram is a visual representation of the different states an object
can be in, as well as the transitions between these states. It's widely used in software
engineering, to model the behavior of objects in response to events.

Figure 5.7 Campus Interview Cracker State chart Diagram

22
5.8 PACKAGE DIAGRAM
Package Diagram is a type of UML (Unified Modeling Language) diagram used
to represent the organization of elements within a system into logical groups called
packages. These diagrams help visualize dependencies and organize classes or
components effectively.

Figure 5.7 Campus Interview Cracker Package Diagram

23
 CHAPTER-6
SYSTEM DEVELOPMENT

System development is the process of creating and implementing a functional and user-
friendly web application that meets the specified requirements. For the Campus
Interview Cracker system, the development phase follows a structured methodology
that includes front-end, back-end, database integration, and testing components.

6.1 Development Methodology

The Agile Development Model was adopted for this project. Agile methodology
supports iterative development, encourages user feedback at every stage, and allows
continuous improvement. Each feature of the application was broken into smaller user
stories and developed in sprints for better tracking and flexibility.

6.2 Front-End Development

The front-end was developed using HTML, CSS, JavaScript, and [Link] for dynamic
rendering. The user interface (UI) is designed to be intuitive, responsive, and accessible.
Key components developed include:
 Dashboard – Displays student progress and statistics.
 Interview Tracker – Allows students to log interviews and track outcomes.
 Preparation Modules – Provides access to study materials and quizzes.
 Profile Management – Enables users to manage personal and academic details.

6.3 Back-End Development

The back-end was implemented using [Link] and [Link] for handling server-side
logic. RESTful APIs were developed for communication between the client and the
server. Security protocols such as JWT (JSON Web Tokens) were used for user
authentication and authorization.

24
6.4 Database Design and Integration
The system uses MongoDB as the primary database due to its flexibility and scalability.
Collections were created to store user data, interview logs, feedback, and resource
materials. Mongoose ORM was used to simplify interactions with the database.

6.5 System Architecture

The system follows a three-tier architecture:
1. Presentation Layer – Front-end user interface.
2. Application Layer – Business logic and API management.
3. Data Layer – Storage and retrieval of data via MongoDB.

6.6 Version Control and Collaboration

Development was managed using Git and GitHub for version control, ensuring that all
changes were tracked and managed effectively. Branching strategies were used to
separate feature development, bug fixes, and deployment stages.

6.7 Testing and Debugging

The system was tested using:
 Unit Testing – Verifying individual functions.
 Integration Testing – Ensuring modules work together.
 User Acceptance Testing (UAT) – Getting feedback from potential users
(students).
Tools like Postman were used to test API endpoints, and Chrome DevTools helped in
debugging front-end issues.

6.8 Deployment
The application was deployed on Render/ Vercel (or any other platform you used). The
database is hosted on MongoDB Atlas for secure and reliable data access.

25
 CHATER-7
SYSTEM IMPLEMENTATION

7.1 SYSTEM PREREQUISITE

 HARDWARE REQUIREMENT
 Processor: Intel Core I3 or above
 RAM: 4 GB or above
 Hard Disk: 64 GB or above

 SOFTWARE REQUIREMENT
 Operating System: Windows 10
 Frontend Technologies: HTML, CSS, JavaScript
 Backend Technology: [Link]
 Database: MongoDB
 Protocols: HTTP, TCP/IP

7.2 STEPS TO INSTALL SOFTWARE

1. Ensure the system has Windows 10 OS; if not, install the OS on the
corresponding system.
2. Install [Link] if it is not already installed on the system.
3. Ensure MongoDB is installed; if not, install it on the corresponding system.
4. Load the Campus Interview Cracker application on the device.
5. Set the path of the application to the path where the prerequisite software is
installed.
6. Open a command prompt and navigate to the application directory.
7. Run the application using the appropriate command (e.g., node [Link]).
8. Access the application through a web browser.

26
 CHAPTER-8
SYSTEM TESTING

8.1 TEST PLAN :

8.1.1 PROJECT DESCRIPTION

 The Campus Interview Cracker project involves the following steps:

1. Extract user requirements for interview preparation.

2. Classify features into functional and non-functional requirements.

3. Develop the application modules.

4. Implement and test each module for functionality.

8.1.2 RELATED DOCUMENTS

 The related documents for the project include:

 Project proposal and plan

 Software Requirements Specification (SRS)

 Software Design Specification

 Test plan

8.1.3 TESTING STRATEGY

 Unit testing and functional testing will be employed in each phase of

development.

8.1.4 TESTING LEVEL PLAN

 White Box Testing will be prioritized over Black Box Testing.

27
8.1.5 UNIT TEST

 Unit tests will be conducted by the developers who wrote the code, focusing on
individual components and logic paths.

8.1.6 MODULE TEST

 Module testing will be performed by a small group of developers to ensure that

integrated components work together as expected.

8.1.7 INTEGRATION TEST

 The development team will handle integration testing, adding one module at a
time to isolate and identify errors.

8.1.8 ALPHA TEST

 Internal testers will run live data through the system to identify bugs not found
during integration testing. Customers may observe this phase.

8.1.9 BETA TEST

 The application will be released to a select group of users for beta testing,
allowing them to provide feedback and report any issues.

8.1.10 REGRESSION TEST

 After updates or bug fixes, regression testing will ensure that existing
functionalities remain unaffected.

8.1.11 USABILITY TEST

 Usability testing will focus on the user interface and experience, ensuring that
the application is intuitive and user-friendly.

28
 CHAPTER-9
CONCLUSION AND FUTURE ENHANCEMENTS

In conclusion, the Campus Interview Cracker is a comprehensive web-based application

designed to assist students in preparing for campus placements and job interviews. The

system is user-friendly, providing easy navigation and functionality, which reduces the

complexity of usage and maintenance. It offers features such as mock interviews,

customizable aptitude tests, and a resume builder, all aimed at enhancing the user's job

prospects.

Future enhancements may include:

 Integration of additional test categories and advanced analytics.

 Development of a mobile application version for broader accessibility.

 Implementation of multi-language support to cater to a diverse user base.

 Continuous updates based on user feedback to improve functionality and user

experience.

29
 APPENDIX 1
SAMPLE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="description" content="Campus Interview Cracker -
Prepare for interviews with mock tests, aptitude tests, and a resume
builder.">
<meta name="keywords" content="Campus Interview, Mock Test,
Aptitude Test, Resume Builder, Job Preparation">
<meta name="author" content="Jaisree Ragavi">

<title>Campus Interview Cracker</title>

<!-- Google Fonts -->

<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link
href="[Link]
&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">

<!-- Link to External CSS -->

<link rel="stylesheet" href="[Link]">

<!-- Font Awesome for Icons -->

<link rel="stylesheet" href="[Link]
awesome/6.4.0/css/[Link]">
</head>
<body>
<!-- Skip Link for Accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Header -->

<header class="header">
<div class="logo">Campus Interview Cracker</div>
<nav class="nav-menu">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Companies</a>

30
 <a href="#" class="nav-link">Resources</a>
<a href="[Link]" class="nav-link">
<i class="fas fa-user"></i>
<span class="sr-only">Profile</span>
</a>
<a href="[Link]" class="nav-link">
<i class="fas fa-sign-out-alt"></i>
<span class="sr-only">Logout</span>
</a>
</nav>
<button class="mobile-menu" aria-label="Toggle menu">
<i class="fas fa-bars"></i>
</button>
</header>

<!-- Main Content -->

<main id="main-content" class="container">
<h1>Welcome to Campus Interview Cracker</h1>
<p class="subtitle">From Resume to Recruiters, We've Got You
Covered</p>

<!-- Company Section -->

<section class="company-section">
<!-- Product-based Companies -->
<div class="company-category">
<h2>Product-Based Companies</h2>
<div class="companies">
<article class="company">
<div class="company-logo">
<img src="[Link]" alt="Company 1 Logo">
</div>
<div class="company-content">
<h3>Company 1</h3>
<p>Prepare for interviews at one of the world's leading
tech companies.</p>
<div class="company-actions">
<button onclick="navigateTo('Mock Interview/mock-
[Link]')">
<i class="fas fa-video"></i>
Mock Interview
</button>

31
 <button onclick="navigateTo('Aptitude Test/aptitude-
[Link]')">
<i class="fas fa-brain"></i>
Aptitude Test
</button>
<button onclick="navigateTo('Resume Builder/resume-
[Link]')">
<i class="fas fa-file-alt"></i>
Resume Builder
</button>
</div>
</div>
</article>

<article class="company">
<div class="company-logo">
<img src="[Link]" alt="Company 2 Logo">
</div>
<div class="company-content">
<h3>Company 2</h3>
<p>Get ready for your dream role at this innovative tech
giant.</p>
<div class="company-actions">
<button onclick="navigateTo('Mock Interview/mock-
[Link]')">
<i class="fas fa-video"></i>
Mock Interview
</button>
<button onclick="navigateTo('Aptitude Test/aptitude-
[Link]')">
<i class="fas fa-brain"></i>
Aptitude Test
</button>
<button onclick="navigateTo('Resume Builder/resume-
[Link]')">
<i class="fas fa-file-alt"></i>
Resume Builder
</button>
</div>
</div>
</article>
</div>

32
 </div>

<!-- Service-based Companies -->

<div class="company-category">
<h2>Service-Based Companies</h2>
<div class="companies">
<article class="company">
<div class="company-logo">
<img src="[Link]" alt="Company 3 Logo">
</div>
<div class="company-content">
<h3>Company 3</h3>
<p>Excel in your interviews at this leading IT services
company.</p>
<div class="company-actions">
<button onclick="navigateTo('Mock Interview/mock-
[Link]')">
<i class="fas fa-video"></i>
Mock Interview
</button>
<button onclick="navigateTo('Aptitude Test/aptitude-
[Link]')">
<i class="fas fa-brain"></i>
Aptitude Test
</button>
<button onclick="navigateTo('Resume Builder/resume-
[Link]')">
<i class="fas fa-file-alt"></i>
Resume Builder
</button>
</div>
</div>
</article>
</div>
</div>
</section>
</main>

<!-- JavaScript -->

<script src="[Link]"></script>
<script>
// Navigation Function

33
 function navigateTo(page) {
[Link] = page;
}

// Header Scroll Effect

[Link]('scroll', () => {
const header = [Link]('.header');
if ([Link] > 0) {
[Link]('scrolled');
} else {
[Link]('scrolled');
}
});

// Mobile Menu Toggle

const mobileMenuBtn = [Link]('.mobile-menu');
const navMenu = [Link]('.nav-menu');

[Link]('click', () => {
[Link]('active');
});

// Add Loading State to Buttons

[Link]('button').forEach(button => {
[Link]('click', function() {
[Link]('loading');
// Remove loading state after navigation (or error)
setTimeout(() => [Link]('loading'), 1000);
});
});
</script>
</body>
</html>

34
 APPENDIX 2
SAMPLE SCREEN SHOTS

A2.1 SIGN UP/LOGIN

A2.2 HOME

35
A2.3 MOCK INTERVIEW

36
A2.4 RESUME BUILDER

A2.5 QUIZ CONDUCTOR

37