6CAI2/6CAI3/6CIT02/06CBD01

# Question Module C0 Level

1 Summarize the use of semantic elements in HTML5. 1 1 2
2 Explain HTML event Attributes with an example. 1 1 2
3 Discuss the steps to render the geomatical object in an HTML page using the Canvas tag. 1 1 2
4 Explain the role of Web Socket in client and server communication. 1 1 2
5 Summarize the concept of transformation in CSS. 1 1 2
6 Discuss the variety of web storage available in the context of front-end development. 1 1 2
7 Explain the key features of Web Form 2.0 and demonstrate 2 features with an example. 1 1 2
8 Distinguish the usage of Article, Section and Div tags in HTML 1 1 2
9 Illustrate Event Driven Programming in Java Script programming environment 2 2 3
10 Demonstrate the usage of the following DOM properties 2 2 3
a. .inner HTML
b. .value
11 Illustrate the following array methods with proper syntax and examples 2 2 3
a. Push
b. Pop
c. Sort
12 Illustrate the following string methods with proper syntax and examples 2 2 3
a. charAt,
b. charCodeAt
c. split
13 Explain in detail how JavaScript can manipulate various aspects of a web page's structure, appearance, and 2 2 3
behavior. Provide concrete examples for each of the following actions:
a. Changing HTML elements: Describe how JavaScript can dynamically modify the content of existing HTML
elements on a page or create entirely new elements. Provide code snippets illustrating both scenarios.
b. Adjusting CSS styles: Discuss how JavaScript can dynamically change the styling of HTML elements by
modifying their CSS properties. Provide examples showing the manipulation of styles like color, font size,
and position using JavaScript.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

14 Using the given JavaScript code snippet, create an HTML page that dynamically displays a list of fruits from an 2 2 3
array. Enhance the functionality by allowing users to input new fruit names through a text input field and a
button. Upon clicking the button, the new fruit name should be added to the array, and the updated list of fruits
should be displayed instantly on the webpage.
Requirements:
1. Include an HTML paragraph element (<p>) with the id "demo" for displaying the list of fruits.
2. Implement JavaScript code within <script> tags to achieve the following:
• Declare an array named "fruits" with initial fruit names: ["Banana", "Orange", "Apple", "Mango"].
• Use the forEach method to loop through the "fruits" array and generate list items (<li>) for each
fruit name.
• Update the innerHTML of the paragraph element with id "demo" to display the list of fruits within
an unordered list (<ul>).
3. Allow users to input new fruit names through a text input field and a button.
• Retrieve the value entered by the user in the text input field upon button click.
• Append the new fruit name to the "fruits" array.
• Update the displayed list of fruits to include the newly added fruit.
4. Test the functionality by entering different fruit names in the text input field and clicking the button to
ensure that the list updates dynamically with the added fruits.

15 Design a web page feature that calculates the Fibonacci series of a given number. The page should contain the 2 2 3
following elements:
1. An input field where users can enter a number for which they want to calculate the Fibonacci series.
2. A "Calculate Fibonacci" button that triggers the calculation process.
3. An output area to display the resulting Fibonacci series.
4. Ensure that the input provided by the user is valid (i.e., a non-negative integer).
Your task is to implement the JavaScript functionality for calculating the Fibonacci series based on the input
provided by the user. Use proper error handling to handle invalid input and ensure the accuracy of the calculation
algorithm. Test the functionality with various input values to verify its correctness.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

16 Design a web page feature that calculates the factorial of a given number. The page should include the following 2 2 3
components:
1. An input field where users can input a non-negative integer for which they want to calculate the factorial.
2. A "Calculate Factorial" button that triggers the calculation process.
3. An output area to display the resulting factorial.
4. Ensure proper error handling to validate the input provided by the user.
Your task is to implement the JavaScript functionality for calculating the factorial based on the input provided by
the user. Ensure that the algorithm handles edge cases, such as negative numbers or non-integer inputs,
gracefully and provides accurate results. Test the functionality with various input values to verify its correctness.

17 Design a web page feature that checks whether a given number is a prime number or not. The page should 2 2 3
include the following components:
1. An input field where users can input a positive integer to be checked for primality.
2. A "Check Prime" button that triggers the primality check process.
3. An output area to display the result indicating whether the input number is prime or not.
4. Ensure proper error handling to validate the input provided by the user.
Your task is to implement the JavaScript functionality for checking the primality of the input number. Use an
efficient algorithm to determine whether the number is prime or not and provide the result accordingly. Test the
functionality with various input values to verify its correctness.

18 Develop a web page feature that checks whether a given string is a palindrome or not. The page should contain 2 2 3
the following elements:
1. An input field where users can input a string to be checked for palindrome property.
2. A "Check Palindrome" button that triggers the palindrome check process.
3. An output area to display the result indicating whether the input string is a palindrome or not.
4. Ensure proper error handling to validate the input provided by the user.

19 Create a web page feature that checks whether a given number is an Armstrong number or not. The page should 2 2 3
include the following components:
1. An input field where users can input a positive integer to be checked for Armstrong property.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

2. A "Check Armstrong" button that triggers the Armstrong number check process.
3. An output area to display the result indicating whether the input number is an Armstrong number or not.
4. Ensure proper error handling to validate the input provided by the user.
Your task is to implement the JavaScript functionality for checking whether the input number is an Armstrong
number. Use an efficient algorithm to determine the Armstrong property of the input number and provide the
result accordingly. Test the functionality with various input values to verify its correctness.

20 Provide examples of scenarios that describe the benefits of using AJAX (Asynchronous JavaScript and XML) in web 2 2 3
development
21 Discuss the drawbacks and limitations of AJAX in web development by analysing potential challenges such as 2 2 3
browser compatibility issues, security concerns, and accessibility considerations
22 Demonstrate the prototype of Ajax Post request 2 2 3
23 Demonstrate the prototype of Ajax get request 2 2 3
24 You have been tasked with creating a web page feature that retrieves user data from an external API and displays 2 2 3
it on the page upon clicking a button. The provided code snippet outlines the implementation using AJAX
(Asynchronous JavaScript and XML) with XMLHttpRequest.
Your task is to design a problem statement based on the given code snippet, focusing on the following aspects:
1. Description of the Task: Provide a clear overview of the task, explaining that the goal is to fetch user data
from an API and display it on the webpage upon user interaction.
2. Required Functionality: Describe the required functionality, including the creation of an XMLHttpRequest
object, configuration of the request to the specified API endpoint, and handling of the response data to
update the HTML content dynamically.
3. Implementation Steps: Outline the necessary steps to implement the functionality, such as creating event
listeners, defining XMLHttpRequest properties, and updating the HTML content with the fetched data.
4. Expected Output: Specify the expected outcome of the task, stating that upon clicking the designated
button, the webpage should display the retrieved user data in the specified HTML element.
5. Additional Instructions: Provide any additional instructions or constraints, such as ensuring proper error
handling, adhering to best practices for asynchronous requests, and maintaining compatibility with
different browsers

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

Part -B
Statement 1
You are tasked with developing an online student registration system for Presidency University in San Rio, a vibrant coastal city known for its
blend of cultures and bustling student life. The university wants to streamline the registration process for incoming students by creating a user-
friendly online form. As the lead developer, you need to design the registration page and implement JavaScript validation to ensure that all
submitted data meets the necessary criteria.
Requirements:
1. The registration form should include the following fields: a) First Name b) Last Name c) Email Address d) Password e) Address f) Mobile
Number g) Gender
2. The form should have "Submit" and "Cancel" buttons.
3. Validation rules for each field: a) First Name: Must not be left empty and should consist only of alphabets. The length should be at least 6
characters. b) Last Name: Accepts only alphabets. c) Email Address: Must follow the standard pattern of [email protected] and must
not contain any invalid characters. d) Password: Should be at least 6 characters long and accept only numbers and letters. e) Address:
Must not be left empty. f) Mobile Number: Must contain exactly 10 digits and accept only numbers. g) Gender: Selection required.
4. Upon successful submission of all fields meeting the validation criteria, display an alert message saying "Registration done successfully."
5. If any field fails to meet the validation criteria, display an appropriate alert message indicating the error.
Your task is to design the user interface for the registration form and implement the JavaScript validation code to ensure that all requirements
are met. Additionally, consider the user experience and provide clear instructions and feedback throughout the registration process.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

Statement 2
You are a web developer working on a project for a fitness center called "FitZone." As part of the project, you are tasked with designing a
membership registration form that caters to different types of users and their fitness goals. The form needs to collect relevant information from
users while providing a user-friendly experience.
Requirements:
1. The membership registration form should include the following fields: a) Name: A text input field for the user's name. b) Email: An email
input field for the user's email address. c) Age: A number input field for the user's age. d) Gender: Radio buttons for selecting gender
(Male, Female, Other). e) Fitness Goal: A dropdown menu for selecting fitness goals (Weight Loss, Muscle Gain, General Fitness, Flexibility,
Endurance). f) Membership Type: Radio buttons for selecting membership type (Regular, Premium, VIP). g) Fitness Level: A range input
field for indicating fitness level on a scale of 1 to 10. h) Preferred Workout Time: Checkboxes for selecting preferred workout time
(Morning, Afternoon, Evening). i) Comments: A textarea for additional comments or feedback.
2. The form should have a "Submit" button for submitting the form data.
3. Implement JavaScript functionalities to enhance the user experience: a) Inline validation for required fields. Display error messages if any
required field is left blank upon submission. b) Dynamic field visibility based on user selection:
• If the user selects "Weight Loss" or "Muscle Gain" as their fitness goal, show an additional field for selecting preferred workout
intensity (Low, Medium, High).
• If the user selects "VIP" as their membership type, show an additional field for entering a referral code. c) Calculate the estimated
monthly fee based on the selected membership type and fitness level. Display the result to the user upon submission.
Your task is to design the membership registration form, implement the JavaScript functionalities as described, and ensure that the form provides
a smooth and intuitive experience for users

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

Statement 3

You're developing an event registration platform for a local community center named "CommunityConnect." The center hosts various events
ranging from workshops to fitness classes and cultural events. Your task is to design a versatile registration form that accommodates different
types of events and gathers necessary information from participants.
Requirements:
1. The event registration form should include the following fields: a) Name: A text input field for the participant's name. b) Email: An email
input field for the participant's email address. c) Phone Number: A number input field for the participant's phone number. d) Age: A
number input field for the participant's age. e) Gender: Radio buttons for selecting gender (Male, Female, Other). f) Event Type: A
dropdown menu for selecting the type of event (Workshop, Fitness Class, Cultural Event). g) Event Date: A date input field for selecting
the event date. h) Dietary Restrictions: Checkboxes for selecting dietary restrictions (Vegetarian, Vegan, Gluten-free, None). i) Emergency
Contact Name: A text input field for the participant's emergency contact name. j) Emergency Contact Number: A number input field for
the participant's emergency contact number. k) Comments: A textarea for additional comments or special requests.
2. The form should have a "Submit" button for submitting the registration information.
3. Implement JavaScript functionalities to enhance the user experience: a) Inline validation for required fields. Display error messages if any
required field is left blank upon submission. b) Dynamic field visibility based on the selected event type:
• If the participant selects a "Workshop" or "Cultural Event," show an additional field for selecting workshop or event topic.
• If the participant selects a "Fitness Class," show an additional field for selecting preferred fitness level (Beginner, Intermediate,
Advanced). c) Calculate the estimated event fee based on the selected event type and any additional selections (e.g., dietary
restrictions). Display the result to the user upon submission.
Your goal is to create a seamless registration experience for participants of various events at CommunityConnect, ensuring that the form is user-
friendly and captures all necessary information for event coordination and participant accommodation.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

Statement 4
You're developing an online survey platform for a market research company named "Insightful Surveys." The company conducts surveys on
various topics to gather valuable insights for their clients. Your task is to design a dynamic survey form that can adapt to different survey types
and gather responses efficiently.
Requirements:
1. The survey form should include the following components: a) Name: A text input field for the respondent's name. b) Email: An email input
field for the respondent's email address. c) Age: A number input field for the respondent's age. d) Gender: Radio buttons for selecting
gender (Male, Female, Other). e) Survey Type: A dropdown menu for selecting the type of survey (Product Feedback, Market Trends,
Customer Satisfaction, Opinion Poll). f) Survey Questions: Dynamically generated based on the selected survey type. Each survey type has
its set of questions. g) Comments: A textarea for additional comments or feedback.
2. The form should have a "Submit" button for submitting the survey responses.
3. Implement JavaScript functionalities to enhance the user experience: a) Inline validation for required fields. Display error messages if any
required field is left blank upon submission. b) Dynamic generation of survey questions based on the selected survey type. c) Validation
for survey responses to ensure that all questions are answered before submission. d) Calculate an overall satisfaction score for "Customer
Satisfaction" surveys based on responses to specific questions. e) Provide real-time feedback to respondents on the completion status of
the survey.
Your objective is to create an interactive and user-friendly survey form that accommodates different survey types and ensures accurate data
collection for Insightful Surveys' market research endeavors.

Statement 5
You've been assigned to develop an online booking system for a travel agency named "Wanderlust Travels." The agency offers a variety of travel
packages, including tours, flights, and accommodation bookings. Your task is to create a comprehensive booking form that caters to different
travel preferences and efficiently manages reservations.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

Requirements:
1. The booking form should include the following sections: a) Personal Information: Name, Email, Phone Number. b) Travel Preferences:
Type of Booking (Tour, Flight, Accommodation), Destination, Departure Date, Return Date (if applicable). c) Additional Options: Travel
Insurance, Airport Transfers, Special Requests. d) Payment Information: Credit Card Number, Expiry Date, CVV.
2. The form should have a "Submit" button for confirming the booking.
3. Implement JavaScript functionalities to enhance the user experience: a) Inline validation for required fields. Display error messages if any
required field is left blank upon submission. b) Dynamic field visibility based on the selected type of booking. c) Calculation of the total
booking cost based on selected options and destination. d) Integration with a payment gateway to process credit card payments securely.
e) Confirmation message displaying the booking details upon successful submission.
Your goal is to design a user-friendly booking form that simplifies the reservation process for customers of Wanderlust Travels while ensuring
accuracy and security in handling sensitive payment information.

Statement 6
You're working on a project for an e-commerce platform called "ShopSmart." As part of the project, you're tasked with creating an order form
for customers to purchase products online. The order form should accommodate various product types and provide a seamless checkout
experience.
Requirements:
1. The order form should include the following sections: a) Customer Information: Name, Email, Shipping Address, Phone Number. b) Product
Selection: Dropdown menus or checkboxes for selecting products, with options for size, color, quantity, etc. c) Payment Information: Credit
Card Number, Expiry Date, CVV. d) Shipping Options: Standard Shipping, Express Shipping. e) Order Summary: Display selected products,
quantities, prices, and total cost.
2. The form should have an "Add to Cart" button for adding products to the cart and a "Checkout" button for completing the order.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

3. Implement JavaScript functionalities to enhance the user experience: a) Inline validation for required fields. Display error messages if any
required field is left blank upon submission. b) Dynamic updating of the order summary based on selected products, quantities, and
shipping options. c) Integration with a payment gateway to process credit card payments securely. d) Confirmation message displaying
the order details upon successful checkout.
Your objective is to design an intuitive and efficient order form for ShopSmart that meets the needs of customers shopping for various products
while ensuring a smooth checkout process from start to finish.

Statement 7

1. Our client, an educational institution, requires the development of a web-based application to streamline the process of collecting and
calculating students' academic performance. The primary goal of this application is to efficiently gather essential student information and
compute their Semester Grade Point Average (SGPA) based on the marks obtained in specific courses.

a. The application must have a user-friendly interface accessible through a web browser. It should consist of a form where students can
input their details, including their full name and roll number, along with their respective marks for each of the following courses:
CSE3051, CSE3052, CSE3053, CSE3054, CSE3055, and CSE3056.
b. Once the student submits this information, the application will process the data to calculate their SGPA. The calculation of SGPA
typically involves converting the marks obtained in each course to corresponding grade points based on a predefined grading system.
These grade points are then weighted according to the credit hours assigned to each course. Finally, the SGPA is computed by averaging
the weighted grade points.
c. To ensure an engaging and visually appealing user experience, the web page and form layout should be designed using Cascading
Style Sheets (CSS). The design should prioritize clarity, ease of navigation, and readability to facilitate seamless interaction for users.
d. Upon calculation, the SGPA should be displayed prominently on the screen, providing students with immediate feedback on their
academic performance for the semester.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP

 6CAI2/6CAI3/6CIT02/06CBD01

Furthermore, the application should incorporate features for data validation to ensure that only accurate and valid information is accepted. This
includes verifying that the entered marks fall within acceptable ranges and that all required fields are properly filled out.

Statement 8

"We are tasked with developing a web application to manage employee data, particularly focusing on salary-related information. The application
should feature a user-friendly interface accessible through a web browser.The web application should allow users to input employee details,
including their employee number, name, and basic salary. Additionally, the application should provide functionality to calculate various
allowances based on the basic salary entered by the user. The formulas for calculating allowances are as follows:
• All Allowances = 123% of Basic Salary
• Once the user inputs the necessary data, the web application should compute the net salary for each employee. This calculation involves
determining the gross salary by adding the basic salary and allowances, then deducting the income tax (IT) based on a predefined
percentage. The formulas for calculating net salary are as follows:
Gross Salary = Basic Salary + All Allowances
Income Tax (IT) = 30% of Gross Salary
Net Salary = Gross Salary - Income Tax (IT)
• The web application should also offer features for viewing and printing the details of each employee, including their employee number,
name, basic salary, allowances, income tax, and net salary.
• To ensure a seamless user experience, the web application's interface should be designed using modern web development technologies
such as HTML, CSS, and JavaScript. The design should prioritize usability, accessibility, and responsiveness across different devices and
screen sizes.
• Data validation should be implemented to verify the accuracy and integrity of the inputted employee details. This includes ensuring that
numeric fields contain valid numerical values and that calculations are performed accurately.

6CAI2/6CAI3/6CIT02/06CBD01 PAVAN KUMAR SP