CSS Practice test 2 Answers
2 Marks
1. JavaScript to Design a Form to Accept Values for User ID & Password
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form name="loginForm">
<label for="userID">User ID:</label>
<input type="text" id="userID" name="userID"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2. Two Properties and Methods of location Object
• Properties:
1. location.href: The URL of the current page.
2. location.hostname: The domain name of the web host.
• Methods:
1. location.reload(): Reloads the current page.
2. location.assign(): Loads a new document.
3. Two Intrinsic JavaScript Functions
• parseInt(): Converts a string to an integer. Example:
let num = parseInt("123");
Use: To extract and convert a string representation of a number to an integer.
• isNaN(): Determines if a value is not a number. Example:
if (isNaN("Hello")) {
console.log("This is not a number.");
} Use: To check whether a given value is NaN.
CSS Practice test 2 Answers
4. Browser location Object
The location object contains information about the current URL and allows for navigation between
pages. It can be used to get the URL or parts of it, and to redirect the browser to another URL.
5. Four Mouse Events with Their Use
1. onclick: Triggers when a user clicks on an element.
2. onmouseover: Fires when the mouse pointer is moved over an element.
3. onmouseout: Fires when the mouse pointer is moved out of an element.
4. ondblclick: Triggers when a user double-clicks on an element.
6. Difference Between Session Cookies and Persistent Cookies
Feature Session Cookies Persistent Cookies
Active only for the duration of a
Lifespan Remain on the device until they expire
session
Storage Stored in memory Stored on the hard drive
For temporary data, like login
Use For long-term data like preferences
sessions
Deleted when the browser is Deleted only when the expiry date is met or manually
Deletion
closed removed
7. Form Events
• onmouseup: This event occurs when the mouse button is released over an element. It’s
typically used in combination with onmousedown.
• onblur: This event is triggered when an element loses focus, often used for validating input
fields when the user moves away from a form field.
8. JavaScript Program to Change the Contents of a Window
document.getElementById("content").innerHTML = "The content has been changed!";
9. Accessing Elements of Another Child Window
let childWindow = window.open("child.html");
childWindow.document.getElementById("elementID").value = "New Value";
10. Four Form Elements
1. <input type="text">: Used to input single-line text.
2. <textarea>: Used to input multi-line text.
3. <select>: Dropdown list for selecting an option.
4. <button>: A clickable button for submission or other actions.
CSS Practice test 2 Answers
11. Define Cookies
Cookies are small pieces of data stored by a website on a user's device to remember information
about the user’s visit, such as login state or user preferences.
12. Two Properties and Methods of location Object (Repetition)
• Properties: location.href, location.hostname
• Methods: location.reload(), location.assign()
13. Program to Open Multiple Windows
let window1 = window.open("page1.html");
let window2 = window.open("page2.html");
14. Timing Events Syntax and Explanation
• setTimeout(): Executes a function after a specified delay.
setTimeout(function() {
alert("Hello after 3 seconds!");
}, 3000);
Use: Executes code once after a delay.
• setInterval(): Repeats a function at a specified interval.
setInterval(function() {
console.log("Repeats every 2 seconds");
}, 2000);
Use: Repeats code at regular intervals.
15. Ways of Protecting Your Webpage
1. HTTPS Encryption
2. Input Validation
3. XSS Protection
4. Content Security Policy (CSP)
Explanation of CSP: CSP is a security feature that helps prevent cross-site scripting (XSS) attacks by
specifying which sources are allowed to load content on the webpage.
16. Program to Open a New Window
window.open("https://example.com", "_blank");
CSS Practice test 2 Answers
17. Windows Focus and Blur
• Focus: The event when a window or input field gains focus, meaning it's active and ready for
input.
• Blur: The event when a window or input field loses focus, indicating it is no longer the active
element.
4 Marks
1. What is a Cookie? Explain Its Need. State Characteristics of Persistent Cookies.
Cookie:
A cookie is a small piece of data sent from a website and stored in the user's browser to remember
information between sessions, like login credentials or user preferences.
Need for Cookies:
1. To maintain user sessions (e.g., keeping users logged in).
2. To store user preferences (e.g., language, theme).
3. To track user behavior for analytics or advertisements.
Characteristics of Persistent Cookies:
1. Longer Lifespan: They remain on the user’s device until a specified expiration date.
2. Stored on Disk: Persistent cookies are saved to the user's hard drive, unlike session cookies
stored in memory.
3. Multiple Sessions: They can track data across multiple sessions and browser restarts.
4. Custom Expiration: You can specify an expiration date after which the cookie will be deleted.
2. Create and Read Persistent Cookies in JavaScript
Create a Persistent Cookie:
function setCookie(name, value, days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // Set expiration in days
let expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
setCookie("username", "Vedant", 7); // Sets a cookie valid for 7 days
CSS Practice test 2 Answers
Read a Cookie:
function getCookie(name) {
let decodedCookie = decodeURIComponent(document.cookie);
let cookiesArray = decodedCookie.split(';');
for(let i = 0; i < cookiesArray.length; i++) {
let cookie = cookiesArray[i].trim();
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1);
return "";
console.log(getCookie("username")); // Outputs: Vedant
3. Ways of Protecting Your Webpage
1. HTTPS Encryption
2. Input Validation
3. Cross-Site Scripting (XSS) Protection
4. Content Security Policy (CSP)
5. Cross-Site Request Forgery (CSRF) Protection
Description of HTTPS Encryption:
HTTPS secures data exchanged between a browser and a website by encrypting it using SSL/TLS. This
prevents data like passwords and credit card numbers from being intercepted by malicious third
parties.
4. College Admission Form Using HTML Form Tag
<!DOCTYPE html>
<html>
<head>
<title>College Admission Form</title>
</head>
<body>
CSS Practice test 2 Answers
<form action="submit_form.php" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="Male"> Male
<input type="radio" id="female" name="gender" value="Female"> Female<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="course">Course Applied For:</label>
<select id="course" name="course">
<option value="BSc">B.Sc.</option>
<option value="BCom">B.Com</option>
<option value="BTech">B.Tech</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
5. JavaScript Program to Create, Read, Update, and Delete Cookies
// Create a Cookie
function createCookie(name, value, days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // Set expiration
CSS Practice test 2 Answers
let expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
// Read a Cookie
function readCookie(name) {
let decodedCookie = decodeURIComponent(document.cookie);
let cookiesArray = decodedCookie.split(';');
for (let i = 0; i < cookiesArray.length; i++) {
let cookie = cookiesArray[i].trim();
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1);
return "";
// Update a Cookie (just call createCookie again with same name)
function updateCookie(name, value, days) {
createCookie(name, value, days);
// Delete a Cookie
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// Usage
createCookie("user", "Vedant", 7);
console.log(readCookie("user")); // Vedant
updateCookie("user", "Vaishnavi", 7);
deleteCookie("user");
CSS Practice test 2 Answers
6. Different Properties of Form Tag
1. action: Specifies where to send the form data when the form is submitted (e.g., URL).
2. method: Specifies how to send form data. Can be either GET or POST.
3. enctype: Specifies how form data should be encoded when submitted (e.g., application/x-
www-form-urlencoded or multipart/form-data for file uploads).
4. target: Specifies where to display the response after form submission (e.g., _blank, _self).
7. Difference Between GET and POST Methods of Form Tag
Feature GET Method POST Method
Visibility Data is appended in URL and visible Data is sent in the body, hidden
Data Length Limited due to URL length restrictions No restrictions on data size
Usage Used for non-sensitive data Used for sensitive data (e.g., passwords)
Caching Can be cached Cannot be cached
Example:
• GET Method:
<form action="/submit" method="GET">
<input type="text" name="username">
<input type="submit">
</form>
• POST Method:
<form action="/submit" method="POST">
<input type="text" name="username">
<input type="submit">
</form>
CSS Practice test 2 Answers
6 Marks
1. Evaluating a Radio Button in JavaScript with Example
To evaluate a radio button in JavaScript, you need to determine which radio button has been selected
from a group of buttons with the same name. This can be done by looping through the group of radio
buttons and checking if any are checked.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Evaluation</title>
<script>
function evaluateRadioButton() {
// Get all radio buttons with the name 'gender'
let radios = document.getElementsByName('gender');
// Loop through the radio buttons to find the checked one
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
// Display the value of the selected radio button
alert("Selected gender: " + radios[i].value);
return;
alert("Please select a gender.");
</script>
</head>
<body>
<form>
<label>Gender:</label><br>
<input type="radio" name="gender" value="Male"> Male<br>
CSS Practice test 2 Answers
<input type="radio" name="gender" value="Female"> Female<br>
<input type="radio" name="gender" value="Other"> Other<br><br>
<button type="button" onclick="evaluateRadioButton()">Submit</button>
</form>
</body>
</html>
Explanation:
• The getElementsByName('gender') method is used to retrieve all radio buttons with the
name gender.
• The loop checks if any radio button is checked by evaluating radios[i].checked. If it finds one,
it displays its value.
• If none of the radio buttons are checked, it alerts the user to select one.
2. How to Read and Write Cookie Value in JavaScript
Writing a Cookie
To write a cookie in JavaScript, you use the document.cookie property. You can specify the name,
value, and other options like expiration date and path.
Example:
// Function to create a cookie
function setCookie(name, value, days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // Expiration in days
let expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
// Create a cookie named "username" with the value "Vedant", lasting 7 days
setCookie("username", "Vedant", 7);
CSS Practice test 2 Answers
Reading a Cookie
To read a cookie, you access document.cookie, which returns a string of all cookies. You can then
search for the desired cookie using its name.
Example:
// Function to read a cookie by name
function getCookie(name) {
let decodedCookie = decodeURIComponent(document.cookie); // Decodes the cookie string
let cookiesArray = decodedCookie.split(';'); // Split into individual cookies
for(let i = 0; i < cookiesArray.length; i++) {
let cookie = cookiesArray[i].trim();
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1); // Return the cookie value
return ""; // Return an empty string if the cookie is not found
// Read the cookie "username"
console.log(getCookie("username")); // Output: Vedant
Explanation:
• Writing a cookie: setCookie() function creates a cookie by setting its name, value, and
expiration (in days). It uses the document.cookie property.
• Reading a cookie: getCookie() searches for a cookie by its name by splitting the
document.cookie string, and if found, it returns the value of that cookie.
Complete Example (Writing and Reading Cookies)
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
<script> // Function to create a cookie
function setCookie(name, value, days) {
CSS Practice test 2 Answers
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
let expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
// Function to read a cookie
function getCookie(name) {
let decodedCookie = decodeURIComponent(document.cookie);
let cookiesArray = decodedCookie.split(';');
for(let i = 0; i < cookiesArray.length; i++) {
let cookie = cookiesArray[i].trim();
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1);
}}return "";
}// Write and Read Cookie
function handleCookies() {
// Set the cookie
setCookie("username", "Vedant", 7);
// Read the cookie and display it
let username = getCookie("username");
if (username != "") {
alert("Welcome back, " + username);
} else {
alert("No cookie found.");
}}
</script>
</head>
<body>
<button onclick="handleCookies()">Set and Read Cookie</button>
</body>
</html>
