10th Computer Unit 3: Programming Fundamentals
Unit 3: Programming Fundamentals
Write answers of the following short response questions.
Q.1. Give an example where back-end development may not be required and all of the functionalities are handled by front-end.
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.
Q.2 What are the ‘td’, ‘th’ and ‘tr’ tags used for? Explain with the help of an example.
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.
Q.3 Find error(s) in the following codes.
(a)
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”];
b)
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”];
(c)
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++) {
(d)
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–) {
Q.4 How is unit testing used when adding a function to an already written program?
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:
- Write unit tests specifically for the new function to test its inputs, outputs, and behavior.
- Run all existing unit tests to ensure that the new function hasn’t unintentionally affected other parts of the program.
- Fix any issues that arise from the tests before finalizing the addition.
This helps maintain the program’s reliability and ensures that the new code integrates smoothly.
Q.5. Enlist 3 key differences between array and list.
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 |
Q.6 How are breakpoints useful in debugging? Elaborate with help of an example.
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.
Write answers of the following extended response questions.
Q.1. For a Bakery, design a simple HTML form to take order online, which includes:
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>
Q.2 Design a website titled “My Weekly Evening Schedule”, as follows:
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>
Q.3 (a) Write code to display the following table:
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>
Q.3 (b) Now change the table appearance as follows:
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>
Q.4 Write code for:
- A colored text which repeatedly vanishes for a second and appears in the next second, giving the impression of a “blinking text”
- An image, which spins a whole circle, waits for one second and spins again, in an iterative manner.
Sample output is as follows:
Ans:
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>
Q.5 Write code to change the bullets into ordered list for the program ‘Sum of first 10 integers’.
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>
Q. 6 Create an array with the following values and print it as follows:
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]
Q. 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:
- If the list is found in the list
- If the list is not found in the list
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)
Explanation:
- The function search_value iterates through the list.
- It counts each iteration with the variable iterations.
- If the target value is found, it prints how many iterations it took and stops searching.
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).
Select the best answer for the following MCQs.
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