Roll Number: ________________
Thapar Institute of Engineering and Technology, Patiala
Department of Computer Science and Engineering
Mid Semester Examination (MST)
B.E (5th Semester) Course Code:UCS542
5th October, 2024 Course Name: UI & UX Specialist
Maximum Marks: 30 Faculty: Dr. Mandeep Kaur, Dr. Vibha Jain
Note: All questions are mandatory. Attempt all the questions in sequence. Assume any missing data.
[Link]. Questions Marks CO BL
Q1. a) Write a JavaScript function that takes an array of numbers and returns the sum 3 CO2 L3
of all even numbers in the array. Demonstrate this function with an example. Do
not use any in-built method such as map() and reduce().
b) What is the difference between margin and padding in the CSS box model? 2 CO1 L2
Explain different ways to apply them in a HTML element.
Q2. How do CSS combinator selectors work? Explain any four types of combinator 4 CO1 L1
selectors with examples.
Q3. a) How can the programmer know the type of a variable in JavaScript since it is not 1 CO1 L1
specified as part of the declaration?
b) What is the cascading order of various types of style sheets in CSS. 1
c) What is the difference between “for…in” and “for…of” loop in JavaScript. 1
Q4. Write a JavaScript program to manipulate the DOM. Your program should: CO2 L3
1. Select an HTML element with a specific id.
2. Change its background color using JavaScript. 4
3. Update its text content based on user input.
4. Find all the elements that matches a particular class.
Q5. Design a registration form to collect the following data: Full Name, Email Address, CO1, L3,L4
Phone Number, Password, Confirm Password, Gender, Country, Terms and CO2
Conditions. The requirement of each input control is as follows:
1. The Full Name field must not be empty and should contain at least 3 0.5
characters.
2. The Email Address field must follow a proper email format (e.g., 0.5
user@[Link]).
3. The Phone Number field should follow the correct format (xxx-xxx-xxxx), x 1
is any number.
4. Password should be at least 8 and at most 15 characters long and contain at 1
least one uppercase letter, one lowercase letter, and one number.
5. The Confirm Password field must match the Password field. 1
6. The Gender field should allow only one selection. 0.5
7. Country field should be represented by drop down with at least five options. 0.5
8. The Terms and Conditions checkbox must be checked before the form can be 1
submitted.
9. All fields are required and prevent users from submitting it until all fields pass 2
validation and on form submission, display a summary of the user’s input if
all validations pass.
Q6. Explain the map(), reduce(), and join() methods in JavaScript. Provide one practical 6 CO1, L2
example for each. CO2
Bloom's Level Wise Marks Distribution
3
7
10
Level 1 Level 2 Level 3 Level 4
Course Outcome Wise Marks Distribution
16
16 15
14
12
10
0
CO1 CO2
Roll Number:
Thapar Institute of Engineering and Technology, Patiala
Department of Computer Science and Engineering
MST EXAMINATION
Course Code: UCS542 Time: 2 Hours, M. Marks: 35
Course Name: UI & UX Specialist 27 Sep 2023, 15:00 hrs.
Note: Assume missing data, if any, suitably and mention the same. Ignore extra spaces, typing mistakes etc. All the
answers should be attempted sequentially. If not, then it won't be considered for marking. Leave sufficient blank
space if you want to attempt it later. Although there is step marking, but the questions requiring only code will have
no step marking unless mentioned explicitly.
Q.1 Explain with the help of an example about different ways to insert CSS in HTML 6 Marks
Q.2 What are the different HTML core attributes and their significance? 5 Marks
Q.3 a. Explain hsl and hsla. 2 Marks
b. Create a sample HTML page illustrating the use of hsl, hsla 1+1 Mark
4 What are HTML lists? Give examples of the same. 3.5 Marks
u.5 Only with the help of a working example highlight the difference between following CSS selectors 5 Mark
div > p and div + p.
Q.6 Give one word/ short answers for the following: •
a. Classify the following tags as 'Block' or `Inline:
div, li, h1-h6, p, table, form, hr, section, a, span, br, img 3 Mark
b. In HTML 4.01, the class attribute cannot be used with which tags? 2 Mark
c. In the context of CSS, Property = Declaration + Value. TRUE or FALSE? 0.5 Mark
d. What is the correct order of the following applicable style?
padding: 10px 8px 20px 12px 1 Mark
[Link] Padding will be 10 px, Right will be 8 px, Top will be 20 px and bottom as 12 px
[Link] Padding will be 10 px, left will be 8 px, Bottom will be 20 px and Top as 12 px
[Link] Padding will be 10 px, Bottom will be 8 px, Left will be 20 px and Right as 12 px
[Link] Padding will be 10 px, Top will be 8 px, Right will be 20 px and Left as 12 px
[Link] Padding will be 10 px, left will be 8 px, Bottom will be 20 px and Right as 12 px
[Link] Padding will be 10 px, right will be 8 px, Bottom will be 20 px and Left as 12 px
[Link] Padding will be 10 px, Left will be 8 px, Top will be 20 px and Right as 12 px
[Link] Padding will be 10 px, Right will be 8 px, Top will be 20 px and Left as 12 px
Q.7 Create a sample HTML form satisfying the condition** mentioned in the last, having 5 radio 2 Mark
button car choices as: Tesla, Audi, BMW, Porsche, Ferrari (for correct HTML)
**The condition is that, as an end user, I should be able to select any one of the first 3 car chcices and 3 Mark
(for correct
any one out of the last 2 car choices. functioning)
Roll Number: Name:
ti
Max. Marks: 100
Thapar Institute of Engineering & Technology, Patiala
Department of Computer Science and Engineering
Auxiliary Examination
Course Name: Ul & UX Specialist (UCS542)
Time: 03 Hours B.E- 3rd Year
Date: - 23 Aug 2024, 5:30 to 8:30 PM Name of Faculty: Dr. Mandeep Kaur
Note: *Assume missing data, if any, suitably and mention the same. Ignore extra spaces, typing mistakes etc.
**All the answer should be attempted sequentially. Although there is step marking, the question requiring only
code will have no step marking unless mentioned explicitly.
***Attempt all the questions.
Q1 a) Discuss the importance of semantic HTML markup in web development. How does it (10+5+5)
differ from non-semantic markup? Provide examples.
b) Explain different types of list in HTML with example.
c) Explain the box model in CSS and how "padding", "border" and "margin" affect the
layout of an element.
Q2 a) Write a JavaScript function that manipulates DOM elements to dynamically change the
content and style of a webpage based on user interaction. For instance, create a button (10)
that, when clicked, changes the background color and text of a div.
b) Consider the following JavaScript code. What will be the output of the above code?
Explain the difference between the " = = " and " = = = " operators in JavaScript.
let x = 10;
let y = "10";
if (x == y) {
[Link]("Equal");
} else {
[Link]("Not Equal"); (4+6)
}
if (x === y) {
[Link]("Strictly Equal");
} else {
[Link]("Not strictly Equal");
}
Q3 a) Describe the MVC (Model-View-Controller) architecture pattern. How is it different from (10)
the MVVM (Model-View-View Model) architecture? Discuss their relevance in modem
web development.
b) Describe the different types of CSS selectors and their specific use cases. Provide (10)
examples for each type.
Q4 a) Discuss the architecture of Nodejs and how it differs from traditional server-side (10)
environments like Apache. Why is Nodejs considered non-blocking?
b) Consider the following Nodejs code:
(5+5)
const fs = require('fs');
[Link]', 'utf8', (err, data) => f
if (err) 1
[Link]('Error:', err);
return;
}
[Link]('File Content:', data);
});
[Link]('Reading file...');
What will be the output of the above [Link] code if the file [Link] contains the text
"Hello World"? Explain the asynchronous nature of [Link] and its impact on the output.
Q5 a) Explain the role of JSX in React and how it differs from traditional HTML. Provide an (10)
example that includes embedding JavaScript expressions within JSX to conditionally
render elements.
b) Develop a simple React application that displays a list of items. Implement a feature to ( 1 0)
add and remove items from the list.
********** All the Best **********
Roll Number: Name:
Thapar Institute of Engineering & Technology, Patiala
Department of Computer Science and Engineering
Auxiliary Examination
Max. Marks: 100 Course Name: UI & UX Specialist (UCS542)
Time: 03 Hours B.E- 3rd Year
Date: 17 Feb 2025, 5:30 to 8:30 PM Name of Faculty: Dr. Vibha Jain
Note: *Assume missing data, if any, suitably and mention the same. Ignore extra spaces, typing mistakes etc.
**All the answer should be attempted sequentially.
***Attempt all the questions.
[Link]. Questions Marks CO BL
Q1 a) Differentiate between External style sheets and Internal style sheet with the 5
help of a suitable example.
b) What is the difference between inline and block-level elements in HTML? 5
c) Design a HTML webpage to display your weekly class timetable in tabular
format. 10 COI LI
i) Create a HTML table to display Course Name, Course Code, Professor
Name, Days, and Time.
ii) Use rowspan, colspan to indicate labs/lectures spanning multiple slots.
iii)Apply table attributes such as border, width, and alignment.
Q2 a) Explain any five data types and five operators available in JavaScript with 10
examples.
b) Design travel website that allows users to book flight tickets online. The
booking form includes following fields: 10
i) Full Name: the name cannot be empty and must contain only alphabets
and spaces. CO2 L2
ii) Email: must be in a valid email format.
iii) Phone Number: must contain exactly 10 digits.
iv) Departure Date: must selected from a calendar.
Also prevent form submission if there is any empty or invalid field. If all
fields are valid, display a success message on submission.
Q3 a) Explain the role of MVC (Model-View-Controller) architecture in detail. 10
How does it help in developing complex web applications? Provide a suitable
example to illustrate it's working. CO2
L2
b) Write a JS function fibonacci(n) that returns the first n numbers in the CO3
10
Fibonacci sequence. Also convert the regular function into an arrow function.
Q4 a) Differentiate between Real DOM and Virtual DOM. Also explain how the 6
Virtual DOM works in React and its benefits.
b) Explain the purpose of the spread operator (...) in JavaScript using an 4
example. CO3 L3
c) Create a React component named App that renders multiple instances of a 10
child component StudentCard. The App component should pass student
details (name, course, and age) as props to StudentCard.
Q5 a) How the single threaded non-blocking I0 model works in NodeJS? If Nodejs 6
is single-threaded, then how does it handle concurrency?
b) How can JavaScript expressions be embedded in JSX? Explain with example. 4
C04 L3
c) Explain the working of [Link] Modules. Create a local module named
mathOperationsjs that exports functions for addition and subtraction. 10
Demonstrate how to import and use this module in another file.
*******""-"All the best**************
Roll Number:
Thapar Institute of Engineering and Technology, Patiala
Department of Computer Science and Engineering
End Semester Examination (EST)
B.E (5t% Semester) Course Code:UCS542
14th December, 2024 Course Name: UI & UX Specialist
Maximum Marks: 40 Faculty: Dr. Mandeep Kaur, Dr. Vibha Jain
Note: Attempt any 5 questions in sequence. Assume any missing data.
[Link]. Questions Marks CO BL
Qi • a) How "state" and "props" are different from each other in React? Explain with 2+2+4 CO3 L3
an example.
b) Write a JSX example that renders a simple list of items.
c) Create a React component named Counter that uses state to manage a counter
value. Include buttons to increment, decrement, and reset the counter and
display the value of counter.
Q2. a) Describe how audio and video are embedded in a webpage using HTML5. 4+4 CO1 L3
Explain all attributes of these tags with examples.
b) Create a webpage for a local event, which should include a header displaying
the event name, followed by a section that provides essential event details
such as the time, location, and a brief description. The webpage must also
feature a registration form with fields for the user's name, email, and contact
number. To enhance the design, you should use CSS to add a background
image to the header, center-align the registration form on the page, and
change the button color when hovered over, creating an engaging and visually
appealing experience for the user.
Q3. a) Explain the concept of modules in [Link]. Write a [Link] program that 4+4 C04 L3
uses the fs module to create a file called [Link]. Use asynchronous write
and read functions on [Link].
b) Explain how to create a basic [Link] server and define routes. Provide
an example of handling two routes: a GET request and a POST request.
Q4. a) Explain the concept of REST API. Write a basic example of how all the 5+3 C04 LI
CRUD operations can be implemented using HTTP methods.
b) Discuss the importance of HTTP/2 in modern web applications and how it
improves upon HTTP 1.1.
Q5. a) Explain the difference between var, let, and const in JavaScript with 3+5 CO2 L2
examples.
b) Design a HTML webpage with 3 elements:
i. Input text element,
ii. A button
iii. An unordered list.
Use JavaScript to add a new <Ii> item to the unordered list when button is
clicked. The item text should come from an input field.
Q6. a) Define MVC, MVP, and MVVM architectures and briefly discuss their 3+5 CO3 L2
importance in front-end development.
2
b ) Examine the following code snippet and identify the problem. Suggest an
alternative implementation to improve its readability and structure while
ensuring that the tasks still execute in the same order:
function firstTask(callback) {
setTimeout(() .> (
[Link]("First Task Done");
callback();
1, 1000);
}
function secondTask(callback) {
setTimeout(() .) {
[Link]("Second Task Done");
callback();
}, 1000);
}
function thirdTask(callback) {
setTimeout(() -> {
[Link]("Third Task Done");
callback();
}, 1000);
1
firstTask(() => {
secondTask(() .> {
thirdTask(() .> {
[Link]("All Tasks Done!");
});
1);
1);
Pc?e .2 ctp