Class 10 Chapter 3: Extended Response Questions (Computer Science)
1. For a Bakery, design a simple HTML form to take order online, which includes:
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Bakery Online Order</title>
</head>
<body>
<h2>Bakery Online Order Form</h2>
<form action="#" method="post">
<label for="customerName">Name:</label><br>
<input type="text" id="customerName" name="customerName" required><br><br>
<label for="cakeType">Select Cake Type:</label><br>
<select id="cakeType" name="cakeType" required>
<option value="chocolate">Chocolate Cake</option>
<option value="vanilla">Vanilla Cake</option>
<option value="redvelvet">Red Velvet Cake</option>
</select><br><br>
<label for="quantity">Quantity:</label><br>
<input type="number" id="quantity" name="quantity" min="1" required><br><br>
<label for="pickupDate">Pickup Date:</label><br>
<input type="date" id="pickupDate" name="pickupDate" required><br><br>
<input type="submit" value="Place Order">
</form>
</body>
</html>
2. Design a website titled “My Weekly Evening Schedule”, as follows:
Answer:
<!DOCTYPE html>
<html>
<head>
<title>My Weekly Evening Schedule</title>
<style>
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
th {
background-color: #f2a365;
}
caption {
font-size: 1.5em;
margin: 10px;
}
</style>
</head>
<body>
<table>
<caption>My Weekly Evening Schedule</caption>
<tr>
<th>Day</th>
<th>Evening Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Study</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Basketball Practice</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Music Class</td>
</tr>
<tr>
<td>Thursday</td>
<td>Swimming</td>
</tr>
<tr>
<td>Friday</td>
<td>Movie Night</td>
</tr>
<tr>
<td>Saturday</td>
<td>Family Time</td>
</tr>
<tr>
<td>Sunday</td>
<td>Rest</td>
</tr>
</table>
</body>
</html>
3(a). Write code to display the following table.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Roll No.</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Emma</td>
<td>90</td>
</tr>
</table>
</body>
</html>
3(b). Now change the table appearance as follows:
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Styled Table</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
}
th, td {
border: 2px solid #4CAF50;
padding: 12px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Roll No.</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Emma</td>
<td>90</td>
</tr>
</table>
</body>
</html>
4. Write code for: Blinking Text and Rotating Image.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Blinking Text and Rotating Image</title>
<style>
/* Blinking Text */
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.blinking-text {
animation: blink 1s infinite;
font-size: 24px;
color: red;
text-align: center;
margin: 20px;
}
/* Rotating Image */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotating-img {
animation: rotate 4s linear infinite;
display: block;
margin: 20px auto;
width: 150px;
}
</style>
</head>
<body>
<div class="blinking-text">This text is blinking!</div>
<img class="rotating-img" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="Rotating Logo">
</body>
</html>
5. Write code to change the bullets into ordered list for the program “Sum of first 10 integers.”
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Sum of first 10 integers</title>
</head>
<body>
<h3>Sum of first 10 integers</h3>
<ol>
<li>Start with 0</li>
<li>Add 1</li>
<li>Add 2</li>
<li>Add 3</li>
<li>Add 4</li>
<li>Add 5</li>
<li>Add 6</li>
<li>Add 7</li>
<li>Add 8</li>
<li>Add 9</li>
<li>Add 10</li>
</ol>
</body>
</html>
6. Create an array with the following values and print it as follows:
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Array Example</title>
</head>
<body>
<h3>Array Values:</h3>
<p id="output"></p>
<script>
// Create array with values
let numbers = [10, 20, 30, 40, 50];
// Print the array values as comma separated
document.getElementById('output').innerText = numbers.join(', ');
</script>
</body>
</html>
7. A list contains 10 entries and we want to search a particular value in the list. Write code, to determine how many iterations it took:
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Search in List</title>
</head>
<body>
<h3>Search for a Value in List</h3>
<p id="result"></p>
<script>
let list = [5, 8, 12, 19, 25, 33, 42, 50, 67, 75];
let target = 42;
let iterations = 0;
let found = false;
for(let i = 0; i < list.length; i++) {
iterations++;
if(list[i] === target) {
found = true;
break;
}
}
if(found) {
document.getElementById('result').innerText =
`Value ${target} found after ${iterations} iterations.`;
} else {
document.getElementById('result').innerText =
`Value ${target} not found after ${iterations} iterations.`;
}
</script>
</body>
</html>