Republic of Tunisia

Ministry of Higher Education and

Scientific Research
University of Tunis
Tunis Business School
ACADEMIC YEAR: 2023/2024
SESSION: Final Schedule Autumn Session. DATE: January 6th, 2024. TIME: 09:00 AM -11:00 AM

Level: Sophomore Group: ………………………………………………………

Candidate’s Full Name: …………………………………………………………………………………………………….

Identity Card Number: ………………………………………………………………………………………………………

Registration number: ……………………………………………………………………………………………………….

Room: ……………………………………………………………………………………………………………………………….

CS200: Web Development

Reminders:
● Duration: 120 minutes.
● There are 18 pages in this exam set. Please check the page numbers before you start to
solve questions.
● This is a closed book exam. You are not allowed to use your own papers, documents,
scripts, etc., nor any electronic equipment (notebook computers, calculators, cell
phones, etc.)
● Note that only answers in page 16 will be evaluated.

1
Select the correct answer (ONLY ONE answer is correct):

HTML

1. Which statement about the given HTML form is correct?

<form action="/submit" method="post">

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
</form>

A. This form is missing the action attribute.

B. The required attribute is not supported for the username field.
C. The form should use method="get" for better security.
D. The form is using the correct method and attributes.

2. How is the colspan attribute in this code snippet used?

<table>
<tr> <td colspan="3">Cell 1</td> </tr>
<tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr>
</table>

A. It creates a table row.

B. It defines the number of columns the entire table should span.
C. It defines the number of columns a cell should span.
D. It controls the column layout of the table.

3. What is the primary purpose of the <div> and <span> elements?

A. They define separate sections of a webpage for header and footer content.
B. <div> is used for styling multiple elements, while <span> is used for styling single element.
C. <div> is used for styling single element, while <span> is used for styling multiple elements.
D. <div> is used to group block-level elements, while <span> is used to group inline elements.

4. What does the <hr> element represent?

A. It defines a hyperlink.
B. It represents a horizontal rule or line.
C. It specifies a header for a document or section.
D. It creates a new paragraph.

2
5. Given the desired form structure shown below, which code snippet correctly represents the
form?

A <form action="/submit_form" C <form action="/submit_form"

. method="post"> . method="post">
<label <label
for="name">Name:</label> for="name">Name:</label>
<input type="text" <input type="email"
id="name" name="name" id="user_email"
required> name="user_email" required>
<button <input type="submit"
type="submit">Submit</button value="Submit Form">
> </form>
</form>
B <form action="/submit_form" D <form action="/submit_form"
. method="post"> . method="post">
<input type="text" <label
id="name" name="name" for="name">Name:</label>
required> <input type="text"
<label id="name" name="name"
for="name">Name:</label> required>
<button <input type="text"
type="submit">Submit</button id="name" name="name">
> <button
</form> type="submit">Submit</button
>
</form>

6. Given the following output, what is the corresponding code snippet?

Create a website using HTML, CSS, and Javascript.

A. <p>Create a website using <b>HTML</b>, <b>CSS</b>, and

<b>Javascript</b>.</p>
B. <p>Create a website using <del>HTML</del>, <del>CSS</del>,
and <del>Javascript</del>.</p>
C. <p>Create a website using <ins>HTML</ins>, <ins>CSS</ins>,
and <ins>Javascript</ins>.</p>
D. <p>Create a website using <em>HTML</em>, <em>CSS</em>, and
<em>Javascript</em>.</p>

7. What does the placeholder attribute in the following HTML code snippet do?

<input type="text" placeholder="Enter your email">

A. Sets a default value for the input field.

B. Triggers an event when the user clicks the input field.
C. Specifies the maximum length of the input.
D. Provides a hint or example text to guide the user.

3
8. How to define a table row with two cells, where the first cell spans two columns?

A. <tr><td colspan="2">Cell 1</td><td>Cell 2</td></tr>

B. <tr><td>Cell 1</td><td>Cell 2</td></tr>
C. <tr><td rowspan="2">Cell 1</td><td>Cell 2</td></tr>
D. <tr><td>Cell 1</td></tr><tr><td>Cell 2</td></tr>

9. What does the following HTML code snippet do?

<a href="https://www.example.com" target="_blank">Visit

example.com</a>

A. Embeds an image from "https://www.example.com".

B. Creates a hyperlink to "https://www.example.com" that opens in a new tab.
C. Sets the background color of the webpage to “https://www.example.com”.
D. Defines a navigation menu with a link to “https://www.example.com”.

10. Which of these options are all valid HTML form tags?

A. <form><header><input>
B. <form><select><meta><option>
C. <form action=... method=...><label><input type=...></form>
D. <label><input><output><button>

11. What is the purpose of the HTML <mark> element?

A. It defines a highlighted text.

B. It defines a strong text.
C. It represents a user's input.
D. It specifies a block of code.

12. What is the purpose of the action attribute in HTML forms?

A. It defines the layout of the form fields.

B. It indicates the server-side script or URL that will handle form submissions.
C. It determines the method for sending form data.
D. It controls the visibility of the form.

13. What is the output of the following HTML code?

<form action="/process" method="post">

<label for="inputField">User Input:</label>
<input type="text" id="inputField" name="userInput" required>
<br>
<label for="dynamicOption">Options:</label>
<select id="dynamicOption" name="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>

4
 </select> <br>
<input type="submit" value="Submit">
</form>

A. Create a registration form with a submit button.

B. Implement a dynamic selection feature.
C. Display user information without any form functionality.
D. Create a login form with username and password fields.

14. What is the output of this code snippet?

<p>This is an_example of text.</p>

A. This is an example of text.

B. This is an example of text.
C. This is an example of text.
D. This is an example of text.

15. What is the output of this code snippet?

<input type="submit" value="Hello World">

A. Sends the value " Hello World " through a form.

B. Displays an input field with " Hello World " as the default value.
C. Displays a button labelled " Hello World " that submits a form.
D. Assigns the value " Hello World " to a variable.

16. What is the correct structure for an HTML page?

A <!DOCTYPE html> C <!DOCTYPE html>

. <head> . <head>
<meta charset="utf- <meta charset="utf-
8"> 8">
<title> Page Title <title> Page Title
</title> </title>
</head> </head>
<html lang="en"> <body>
<body> <html lang="en">
Page Content Page Content
</body> </html>
</html> </body>
B <!DOCTYPE html> D <!DOCTYPE html>
. <html lang="en"> . <html lang="en">
<head> <head>
<meta charset="utf- <meta charset="utf-
8"> 8">
<title> Page Title <title> Page Title
</title> </title>
</head> </head>
<body> <body>

5
 Page Content Page Content
</body> </html>
</html> </body>

6
 CSS

17. Select the rule set to make all the text in your web page blue and centered.

A. p {color: blue;}
B. body {text-align: left; color: blue;}
C. p {text-align: center; color: blue;}
D. body {text-align: center; color: blue;}

18. CSS to make text of all <p> tags red.

A. p { color: red; }
B. p { colour: red; }
C. p-style { color: red }
D. p { color style: red }

19. Consider the following CSS:

@media screen and (max-width: 600px) {

.container {
display: flex;
flex-direction: column;
}
}

What does this CSS code accomplish?

A. It applies Flexbox layout to .container elements regardless of screen width.

B. It applies Flexbox layout to .container elements only when the screen width is greater than
600px.
C. It changes the direction of Flexbox layout to a column for .container elements when the
screen width is 600px or less.
D. It doesn't affect the layout of .container elements.

20. What is the main difference between flexbox and grid layout in CSS?

A. Flexbox is only used for text-based layouts, while grid layout is for image-based layouts.
B. Flexbox is for one-dimensional layouts, while grid layout is for two-dimensional layouts.
C. Flexbox and grid layout are the same thing.
D. Flexbox is for two-dimensional layouts, while grid layout is for one-dimensional layouts.

21. How can you create a responsive grid layout using CSS grid?

A. Define the grid container and its columns and rows using the 'grid-template-columns' and
'grid-template-rows' properties and use media queries to adjust the layout based on
different screen sizes.
B. Use the 'flexbox' property to create a grid layout.
C. Set the width of each column and row using fixed pixel values.

7
 D. Use the 'table-layout' property to define the grid layout.

22. How can you make an image responsive in CSS?

A. Apply the 'overflow: hidden;' property in CSS.

B. Use the 'min-width: 100%;' property in CSS.
C. Use the 'max-width: 100%;' property in CSS.
D. Set the image width to a fixed pixel value.

23. Which CSS selector targets an element when you hover over it?

A. .hover
B. #hover
C. hover()
D. :hover

24. Using Responsive Web Design (RWD) ensures that the site will display correctly in all desktop
browsers and mobile devices. You used a grid-based layout and resize-able images, which is
another RWD technique that you can use in responsive design?

A. Use smaller fonts for all body text, to ensure it will appear correctly on smaller screens.
B. Use static pixels for all content positioning.
C. Use relative units, such as percentages, for positioning page elements.
D. Use standard page structure elements, including <header>, <footer> and <article>, because
older devices will display content in the structure elements correctly.

25. Consider the following HTML and CSS. Which element will have a red border?

HTML CSS
<div class="box"></div> .box { border: 2px solid red; }
<span class="box"></span>

A. The <div> element

B. The <span> element
C. Both elements
D. Neither element

26. Consider the following HTML code:

<h2>Title</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

<p>Paragraph 3</p>

What does this selector target?

h2 ~ p { color: blue; }

A. The <h2> element

B. The first <p> element

8
 C. All <p> elements following an <h2>
D. Only the second and third <p> elements

27. Which CSS selector targets the <input> element with the attribute "type" set to "text" inside a
<form> element?

A. form input[type="text"]
B. form > input[type="text"]
C. form input:text
D. form input.text

28. Consider the following HTML and CSS:

HTML CSS
.container {
display: flex;
justify-content: space-
<div class="container"> between;
<div class="box"></div> }
<div class="box"></div> .box {
</div> width: 100px;
height: 100px;
background-color: #3498db;
}

What will be the layout outcome of the above code?

A. Two blue boxes stacked on top of each other with equal space between them.
B. Two blue boxes placed side by side with equal space between them.
C. Two blue boxes placed side by side without space between them.
D. Two blue boxes stacked on top of each other without space between them.

29. Consider the following CSS code:

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-gap: 20px;
}

What does this CSS code do?

A. Creates a grid layout with a single column and a gap of 20 pixels.

B. Creates a grid layout with three rows of equal height and a gap of 20 pixels between the
rows.
C. Creates a grid layout with three columns and three rows, each with a width and height of
1fr.
D. Creates a grid layout with three columns of equal width and a gap of 20 pixels between the
columns.

30. Which CSS selector targets the first <p> element inside a <div> element?

9
 A. div p:first-child
B. div p:first-of-type
C. div > p:first-of-type
D. div > p:first-child

31. Which CSS selector targets elements with the class "highlight" that are descendants of a <div>
element?

A. div.highlight
B. div .highlight
C. .highlight div
D. div > .highlight

32. Consider the following HTML code:

<div>
<p>Paragraph 1</p>
<span>Some other element</span>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

</div>

Which element will be selected by the following selector: div p + p

A. <p>Paragraph 1</p>
B. <p>Paragraph 2</p>
C. <p>Paragraph 3</p>
D. All the <p> elements

33. Which CSS selector targets the <span> elements directly following an <h2> element within a
<div>?

A. div + h2 > span

B. div h2 + span
C. div > h2 + span
D. div > h2 ~ span

10
 JavaScript

34. Complete the code to add an event listener that triggers a function named "handleClick" when
a button with the ID "myButton" is clicked:

document.getElementById("myButton").addEventListener("______",
handleClick);

A. "onClick"
B. "onButtonClicked"
C. "mouseClick"
D. "click"

35. Consider the code snippet below:

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {

if (i % 2 === 0) {
array[i] *= 2;
} else {
array[i] += 1;
}
}

console.log(array);

What will be the output of the code?

A. [2, 3, 6, 5, 10]
B. [1, 4, 3, 6, 5]
C. [2, 3, 6, 5, 12]
D. [1, 3, 5, 7, 9]

36. Complete the code to hide an element with the ID "elementToHide":

var element = document.getElementById("elementToHide");

element.______ = ________;

A. style.display = "none"
B. hideElement = "none"
C. visibility = "hidden"
D. display = "none"

37. Which is the object on which the event occurred or with which the event is associated?

A. event type

11
 B. event target
C. both event type and even target
D. interface

38. Given the following object:

const student = {
name: 'Emma',
age: 25,
grade: 'A'
};

student['grade'] = 'B';

console.log(student.grade);

What will be logged to the console?

A. A
B. B
C. undefined
D. This code will throw an error.

39. Consider the following JavaScript function:

function mysteryFunction(w) {
let s = 0;
let e = w.length - 1;

while (s < e) {
if (w[s] !== w[e]) {
return false;
}
s++;
e--;
}
return true;
}

What does the function mysteryFunction likely do?

A. Capitalizes the first letter of each word in the input string.

B. Reverses the order of the characters in the input string.
C. Determines whether the input word is a palindrome or not.
D. Counts the occurrences of each letter in the input word.

40. Which are the events that have default actions that can be canceled by event handlers?

A. Submit and form-related events.

B. Reset and form-related events.

12
 C. Submit and reset events.
D. form-related events

41. Consider the following JavaScript function:

function mysteryFunction (n) {

if (nr <= 1) {
return false;
} else {
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i === 0) {
return false;
}
}
return true;
}
}
What is the purpose of the mysteryFunction function?

A. Checks if the input number is a perfect square.

B. Determines if the input number is a prime number.
C. Validates whether the input number is an even number.
D. Calculates the factorial of the input number.

42. Fill in the blanks to set the background color of all elements with the class "section" to yellow:

let sections = document.querySelectorAll(".section");

for (let i = 0; i < sections.length; i++) {
sections[i].style.______ = "yellow";
}

A. background = "yellow"
B. backgroundColor = "yellow"
C. setStyle("background-color", "yellow")
D. setBackground("yellow")

43. Fill in the blanks to create a new <li> element, set its text content to "Item 1", and append it to
an unordered list with the ID "myList":

var newListElement = document.___________("_______");

newListElement.___________ = "Item 1";
document.getElementById("myList").______(newListElement);

A. createElement("li"), innerHTML, append

B. addElement("li"), textContent, appendChild
C. createElement("li"), textContent, appendChild
D. getElementById("li"), textContent, addChild

13
44. When is the mouseout event fired?

A. When mouse is no longer over an element

B. When mouse is over an element
C. When mouse is hovered
D. When mouse is clicked

45. What will be the output of the following JavaScript code?

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>
<script>
function myFunction()
{
let str = "a,b,c,d,e,f";
let arr = str.split(",");
document.getElementById("demo").innerHTML = arr[3];
}
</script>

A. d
B. a
C. b
D. c

46. What is the output?

const person = {
name: 'Lydia',
age: 21,
};

let city = person.city;

city = 'Amsterdam';

console.log(person);

A. { name: "Lydia", age: 21, city: "Amsterdam" }

B. { name: "Lydia", age: 21, city: undefined }
C. "Amsterdam"
D. { name: "Lydia", age: 21 }

47. Given the code below:

const element = document.getElementById('myElement');

element.innerHTML = '<p>Hello, World!</p>';

What will this code do?

A. Replaces the content of the element with the ID 'myElement' with the text 'Hello, World!'.
B. Inserts the text 'Hello, World!' as a child node of the element with the ID 'myElement'.

14
 C. Creates a new paragraph element with the text 'Hello, World!' and stores it in a variable.
D. Appends a new paragraph element inside the element with the ID 'myElement'.

48. What is the output?

function checkAge(age) {
if (age < 18) {
const message = "Sorry, you're too young.";
} else {
const message = "Yay! You're old enough!";
}

return message;
}

console.log(checkAge(21));

A. "Sorry, you're too young."

B. "Yay! You're old enough!"
C. ReferenceError
D. Undefined

49. What is the output on the console for the following JavaScript code.

<script>
let x = 'Web Dev';
console.log(typeof x);
x=1;
console.log(typeof x);
</script>

A. string string
B. string number
C. null null
D. string integer

50. Complete the code to attach a "mouseover" event listener to an HTML element with the id
"hoverElement" that triggers a function named "handleHover":

document.getElementById("hoverElement").addEventListener("______",
handleHover);

A. hover
B. mouseover
C. onHover

15
D. mouseEnter

16
17
18