10th Computer Unit 3: Programming Fundamentals
Ans: An example where back-end development may not be required is a personal portfolio website.
In a portfolio site all the content (like text, images, and layout) is displayed using HTML, CSS, and JavaScript. There is no need for a database or server-side logic.
Ans: The tags ‘td’, ‘th’ and ‘tr’ are HTML table elements used to define the structure of a table.
<td >: Defines a standard data cell in the table.
<th>: Defines a header cell (bold and cantered by default).
<tr>: Define a table row.
Example
<table border = “1”>
<tr>
<th> Name</th>
<th> Age</th>
</tr>
<tr>
<td>Ali</td>
<td>16</td>
</tr>
<tr>
<td>Ahmed</td>
<td>17</td>
</tr>
</table>
Explanation:
The first <tr› contains two <th> elements for the table headers: Name and Age.
The next two <tr> rows each contain <td> cells for data: names and ages of Students.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Bug in Arrays</title>
5 </head>
6 <body>
7 <h1>Find the Bug</h1>
8 <script>
9 const myArray = (“apple”, 3.14, true, “orange”);
10 document.write(`<p>My Array: $ {myArray [1]}</p>`);
11 </script>
12 </body>
13 </html>
Ans:
Error in line number 9, it should be
9 const myArray = [“apple”, 3.14, true, “orange”];
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Bug in Arrays</title>
5 </head>
6 <body>
7 <h1>Hunt the Bug</h1>
8 <script>
9 const myArray = “apple”, 3.14, true, “orange”;
10 document.write(`<p>My Array: $ {myArray}</p>`);
11 </script>
12 </body>
13 </html>
Ans:
Error in line number 9, it should be
9 const myArray = [“apple”, 3.14, true, “orange”];
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Bug in Arrays & Loop</title>
5 </head>
6 <body>
7 <h1>Numbers are Bugged</h1>
8 <script>
9 const numbers = [1, 2, 3, 4, 5];
10 let output = “”;
11 for (i = 0; i <= numbers.length; i++)
12 {
13 output += numbers [i] + ” ” ;
14 }
15 document.write(“<p>” + output +”</p>”);
16 </script>
17 </body>
18 </html>
Ans:
Error in line number 11, it should be
11 for (let i = 0; i < numbers.length; i++) {
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Bug in Arrays & Loop</title>
5 </head>
6 <body>
7 <h1>Bugs in Numbers</h1>
8 <script>
9 const numbers = [1, 2, 3, 4, 5];
10 let output = ” “;
11 for (i = numbers.length; i <=0; i++)
12 {
13 output += ‘<p>Numbers: $ {numbers [i]} </p>’;
14 }
15 document.write(output);
16 </script>
17 </body>
18 </html>
Ans:
Error in line number 11, it should be
11 for (let i = numbers.length – 1; i >= 0; i–) {
Ans: Unit testing is used to check that the new function works correctly and doesn’t break existing code. When adding a function to an already written program, developers:
This helps maintain the program’s reliability and ensures that the new code integrates smoothly.
Ans:
| Array | List |
| (i) Stores elements of the same data type | (i) Can store elements of different data types |
| (ii) Fixed size; cannot change after creation | (ii) Dynamic size; can grow or shrink |
| (iii) Uses less memory; more efficient | (iii) Uses more memory; less efficient |
Ans: Breakpoints are useful in debugging because they let you stop the program at specific lines to examine what the program is doing at that moment. This helps find and fix errors by checking variable values, control flow, and logic.
Example:
Consider this Python code:
def calculate_total (price, quantity):
total = price * quantity
return total
p = 50
q = None
print(calculate_total(p, q))
This will cause a TypeError.
To debug:
You place a breakpoint at total = price * quantity.
When the program pauses, you inspect the value of quantity and see it’s None.
This reveals the mistake and helps you fix it.
In summary, breakpoints allow you to pause and inspect your code during execution, making it easier to find bugs.
radio buttons for the option of home delivery or self-collection,
drop down list for 3 sizes of the cake,
check boxes for candles, balloons, etc.
Lastly, add a submit button which generates either an alert or redirects to another form; and responds with an order number.
Sample output is shown as follows:
Ans: Here is the HTML code to match the given requirements and replicate the output in your image:
<!DOCTYPE html>
<html>
<head>
<title>Order Your Delicious Cake</title>
<script>
function submitOrder(event) {
event.preventDefault(); // Prevent form from actually submitting
const orderNumber = Math.floor(10000 + Math.random() * 90000); //Random 5-digit number
alert(“Your order has been submitted!\nOrder number: ” + orderNumber);
}
</script>
</head>
<body>
<h2>Order Your Delicious Cake</h2>
<form onsubmit=”submitOrder(event)”>
<fieldset>
<legend>Delivery or Pickup?</legend>
<label><input type=”radio” name=”delivery” value=”home” required> Home
Delivery</label>
<label><input type=”radio” name=”delivery” value=”pickup”> Self Pickup</label>
</fieldset>
<p>
<label for=”size”>Choose Your Cake Size:</label>
<select id=”size” name=”cakeSize” required>
<option value=”small”>Small (Serves 4-6)</option>
<option value=”medium”>Medium (Serves 8-10) </option>
<option value=”large”> Large (Serves 12-16)</option>
</select>
</p>
<fieldset>
<legend>Extra Delight (Check all that apply) </legend>
<label> <input type=”checkbox” name=”extras” value=”chocolate”> Chocolate Chips</label><br>
<label> <input type=”checkbox” name=”extras” value=”strawberries”> Fresh
Strawberries</label><br>
<label><input type=”checkbox” name=”extras” value=”sprinkles”> Rainbow Sprinkles</label>
</fieldset>
<fieldset>
<legend>Extras: </legend>
<label> <input type=”checkbox” name=”extras” value=”candles”> Birthday Candles</label><br>
<label> <input type=”checkbox” name=”extras” value=”balloons”> Colorful Balloons</label>
</fieldset>
<p><button type=”submit”>Place Order</button></p>
</form>
</body>
</html>
Ans:
Here is the HTML code to design a simple website titled “My Weekly Evening Schedule” exactly like the sample shown in your image:
<!DOCTYPE html>
<html>
<head>
<title>My Weekly Evening Schedule</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
h1 {
font-size: 28px;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 50%;
}
th, td {
border: 2px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>My Weekly Evening Schedule</h1>
<table>
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Karate Class</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Calligraphy Lessons</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Math Test</td>
</tr>
<tr>
<td>Thursday</td>
<td>Gardening</td>
</tr>
<tr>
<td>Friday</td>
<td>Programming Practice</td>
</tr>
</table>
</body> </html>
Ans: Here is the HTML code to display the table titled “My Favorite Fruits” exactly as shown in your image:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Fruits</title>
<style>
body {
font-family: Arial, sans-serif; text-align: center; margin-top: 50px;
}
h1 {
font-size: 28px;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 40%;
}
th, td {
border: 2px solid black;
padding: 10px; text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>My Favorite Fruits</h1>
<table>
<tr>
<th>Fruit Name</th>
<th>Color</th>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
</body>
</html>
Ans:
To replicate the appearance of the table shown in the image, here is an example using HTML and CSS:
<DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
margin: auto; font-family: Arial, sans-serif;
}
caption {
font-size: 28px; font-weight: bold; margin-bottom: 10px;
th, td {
border: 3px solid black; padding: 10px 20px; text-align: center; font-size: 18px;
}
th {
background-color: black; color: white; font-weight: bold;
table-container {
border: 6px solid black;
display: inline-block;
padding: 10px;
}
body {
text-align: center; margin-top: 50px;
}
h3 {
font-size: 20px;
</style>
</head>
< body>
<h3> Now change the table appearance as follows: </h3>
<div class=”table-container”>
<table>
<caption>My Favorite Fruits</caption>
<tr>
<th>Fruit Name</th>
<th>Color</th>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
</div>
</body>
</html>
Sample output is as follows:
Here’s the HTML + CSS code that creates:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Blinking Text and Rotating Image</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
/* Blinking text */
.blinking-text {
color: blue;
font-size: 20px;
animation: blink 2s infinite;
}
@keyframes blink {
0%, 49% { visibility: hidden; }
50%, 100% { visibility: visible; }
}
/* Rotating image */
.rotating-image {
margin-top: 30px;
display: inline-block;
animation: rotateImage 4s linear infinite;
}
@keyframes rotateImage {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Image box styling */
.image-box {
background-color: #555;
color: white;
width: 250px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
border: 5px solid black;
padding: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class=”bordered”>
<h2>Blinking Text and Rotating Image</h2>
<p class=”blinking-text”>This text blinks blue!</p>
<div class=”rotating-image”>
<div class=”image-box”>
BLUE TEXT<br>IN AN IMAGE
</div>
</div>
</div>
</body>
</html>
Ans:
To change bullets (unordered list) into an ordered list for the program “Sum of first 10 integers”
“, here’s how we structure it in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Steps to Write a Program – Sum of First 10 Integers</title>
</head>
<body>
<h2>Program: Sum of First 10 Integers</h2>
<ol>
<li>Start</li>
<li>Initialize a variable <code>sum = 0</code></li>
<li>Set a counter variable <code>i = 1</code></li>
<li>Repeat the following steps while <code>i ≤ 10</code>:
<ol type=”a”>
<li>Add <code>i</code> to <code>sum</code></li>
<li>Increment <code>i</code> by 1</li>
</ol>
</li>
<li>Display the value of <code>sum</code></li>
<li>Stop</li>
</ol>
</body>
</html>
My_ Mix_Array: [apple, 3.14, true, Ali, 25]
Ans:
My_Mix_Array = [“apple”, 3.14, True, “Ali”, 25]
print(“My_Mix_Array:”, My_Mix_Array)
Output:
My_ Mix_Array: [‘apple’, 3.14, True, ‘Ali’, 25]
Ans:
Here’s Python code that searches for a particular value in a list of 10 entries and counts how many iterations (checks) it took:
def search_value(lst, target):
iterations = 0
for item in lst:
iterations += 1
if item == target:
print(f”Value found after {iterations} iterations.”)
return
print(f”Value not found after {iterations} iterations.”)
# Example list with 10 entries
my_list = [4, 8, 15, 16, 23, 42, 7, 9, 3, 11]
# Test case 1: value found
search_value(my_list, 23)
# Test case 2: value not found
search_value(my_list, 100)
If the target value is not found after checking all 10 entries, it prints that the value was not found and shows the total iterations (which will be 10).
1. Which of the following is primarily associated with front-end development?
a) Server management
b) Database design
c) User interface and design
d) Memory Management
2. Which of the following HTML attributes is required in the <input> element for email?
a) type=”urt”
b) type=”text”
c) type=”email”
d) type=”password”
3. In JavaScript, which method would you use to add a new item to the end of a list?
a) push()
b) add()
c) leftshift()
d) rightshift()
4. In JavaScript, how do you access the third element in an array called myArray?
a) myArray[3]
b) myArray[2]
C) myArray[1]
d) myArray[0]
5. To manually stop JavaScript code execution at a certain point, you can use:
a) console.log()
b) stop
c) break
d) debugger
6. What is the primary purpose of unit tests?
a) To validate code syntax
b) To test individual parts of the code for correctness
c) To style the user interface
d) To deploy code to production
7. Front end development is also called
a) Label
b) Client-side
c) Server
d) Database
8. Table is an easy way to organize information in___________
a) columns
b) rows
c) webpages
d) list
9. Table’s header cell and content is referred in _______________ tag.
a) <th>
b) <td>
c) <caption>
d) <tr>
10. Link between the borders of neighbouring table cell is determined by
a) Link border
b) border collapse
c) border separate
d) border
11. Distance between the cell’s border and its content is called
a) Cell
b) Output
c) Padding
d) Style
12. An element style during animation is specified by
a) @key frame
b) @style frame
c) @highlighted frame
d) @anchor frame
13. A single table cell is indicated by a _____________ tag.
a) <tc>
b) <tf>
c) <td>
d) < th>
14. Arrays and list can contain data types containing
a) Alphabets
b) Numbers
c) Alphanumeric
d) Checkboxes
15. ADT stands for
a) Abstract Data type
b) Abstract document type
c) All Data type
d) Any Data type
Unit 8: Entrepreneurship in Digital Age Write answers of the following short response questions. Q.1.…
Unit 7: Digital Literacy Write answers of the following short response questions. Q.1. Differentiate between…
Unit 6: Impacts of Computing Write answers to the following short response questions. Q1. List…
Unit 5: Applications of Computer Science Write answers of the following short response questions. Q1.…
10th Computer Science Unit 4 Data and Analysis Write answers of the following short response…
Unit 2: Computational Thinking & Algorithms Write answers of the following short response questions. 1.…