10th Class Computer Science Notes 2026 — Chapter 3 – Federal Board

Download PDF
 

Class 10 Computer Science — Chapter 3: Programming Fundamentals

Board: Federal Board

Q1. Multiple Choice Questions (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="url"
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. A table is an easy way to organize information in ______.

a) Columns
b) Rows
c) Webpages
d) Lists

9. A table’s header cell and content are referred to using the ______ tags.

a) <tr>
b) <th>
c) <td>
d) <table>

10. The link between the borders of neighboring table cells is determined by ______.

a) Link border
b) border-collapse
c) border-separate
d) Border

11. The distance between a cell’s border and its content is called ______.

a) Cell
b) Output
c) Padding
d) Style

12. An element’s style during animation is specified by ______.

a) @keyframes
b) @style
c) @highlighted frame
d) @anchor frame

13. A single table cell is indicated by a ______ tag.

a) <table>
b) <tr>
c) <td>
d) <th>

14. Arrays and lists can contain data types containing ______.

a) Alphabets
b) Numbers
c) Alphanumeric values
d) Checkboxes

15. ADT stands for ______.

a) Abstract Data Type
b) Abstract Document Type
c) All Data Type
d) Any Data Type

Q2. Short Response Questions (SRQs)

1. Give an example where back-end development may not be required and all of the functionalities are handled by front-end.

Answer: A personal portfolio website, a static informational blog, or a client-side calculator web app. In these cases, all functionalities (such as form validation, UI styling, dynamic animations, and data processing) are completely handled in the browser using HTML, CSS, and JavaScript without needing a server-side database.

2. What are the <tr>, <th>, and <td> tags used for? Explain with the help of an example.

Answer:

  • <tr>: Defines a table row.

  • <th>: Defines a table header cell (bold and centered by default).

  • <td>: Defines a table data cell (holds regular content).

Example:

<table border="1">
    <tr>
        <th>Item</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Cake</td>
        <td>$15</td>
    </tr>
</table>

3. Find error(s) in the given codes:

Answer:

Code (a):

– Line 9 uses incorrect array syntax and quotes. The incorrect syntax is:

const myArray = ("apple", 3.14, true, "orange");

The corrected syntax is:

const myArray = ["apple", 3.14, true, "orange"];

– Line 10 uses single quotes instead of backticks for template literals containing ${...}.

Code (b):

  • Line 7 has a spelling error in the heading. It should be Hunt the Bug instead of unt the Bug.

  • Line 10 uses single quotes instead of backticks for template literals.

Code (c):

  • Line 9 has a syntax typo (5]i' instead of 5];).

  • Line 11 uses i <= numbers.length in the loop condition, which leads to an out-of-bounds error. It should be i < numbers.length.

Code (d):

  • Line 11 initializes a decrement loop starting at numbers.length (i = numbers.length), which tries to access numbers[5] (undefined on the first iteration).

  • It should start at numbers.length - 1.

4. How is unit testing used when adding a function to an already written program?

Answer: Unit testing is used to test individual functions or components of a program in isolation. When adding a new function, unit tests verify that the new code functions correctly on its own and integrates smoothly without breaking existing program logic.

5. Enlist 3 key differences between array and list.

Answer:

  1. Memory Allocation: Arrays are stored in contiguous memory locations, whereas lists use pointers/references where elements may not be contiguous.

  2. Size Flexibility: Arrays have a fixed size determined at creation, whereas lists are dynamic and can grow or shrink.

  3. Insertion/Deletion: Inserting or deleting elements in an array requires shifting elements, whereas lists handle insertions and deletions more efficiently via pointer adjustments.

6. How are breakpoints useful in debugging? Elaborate with the help of an example.

Answer: Breakpoints pause code execution at a specific line so developers can inspect variables, trace execution flow, and find logic errors.

Example: If a calculation loop gives an incorrect final result, setting a breakpoint inside the loop allows you to inspect variable values iteration by iteration to catch where the logic goes wrong.

Q3. Extended Response Questions (Code)

1. Bakery Online Order Form

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Bakery Online Order Form</title>
</head>
<body>

    <h2>Order Your Delicious Cake</h2>

    <form>
        <p><strong>Delivery or Pickup?</strong></p>
        <input type="radio" name="delivery" value="home">
        Home Delivery

        <input type="radio" name="delivery" value="pickup">
        Self Collection

        <p><strong>Choose Your Cake Size:</strong></p>
        <input type="radio" name="size" value="small">
        Small (Serves 4-6)

        <input type="radio" name="size" value="medium">
        Medium (Serves 8-10)

        <input type="radio" name="size" value="large">
        Large (Serves 12-15)

        <p><strong>Extra Delight (Check all that apply):</strong></p>
        <input type="checkbox" name="extras" value="chocolate">
        Chocolate Chips<br>

        <input type="checkbox" name="extras" value="strawberries">
        Fresh Strawberries<br>

        <input type="checkbox" name="extras" value="sprinkles">
        Rainbow Sprinkles

        <p><strong>Extras:</strong></p>
        <input type="checkbox" name="extras" value="candles">
        Birthday Candles<br>

        <input type="checkbox" name="extras" value="balloons">
        Colorful Balloons<br><br>

        <button type="submit">Place Order</button>
    </form>

</body>
</html>

2. “My Weekly Evening Schedule” Website

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>My Weekly Evening Schedule</title>
</head>
<body>

    <h2>My Weekly Evening Schedule</h2>

    <table border="1">
        <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>

3. “My Favorite Fruits” Table

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Fruits</title>
</head>
<body>

    <h2>My Favorite Fruits</h2>

    <table border="1">
        <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>

3(b). Change the Table Appearance

HTML & CSS Code:

<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Fruits</title>

    <style>
        table {
            border-collapse: collapse;
            width: 50%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: lightgray;
        }
    </style>
</head>
<body>

    <h2>My Favorite Fruits</h2>

    <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>

4. Code for Blinking Text & Rotating Image

HTML, CSS & JavaScript Code:

<!DOCTYPE html>
<html>
<head>
    <title>Blinking Text and Rotating Image</title>

    <style>
        .blinking-text {
            color: blue;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 50% {
                opacity: 1;
            }
            51%, 100% {
                opacity: 0;
            }
        }

        .rotating-image {
            width: 200px;
            animation: rotate 5s linear infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>

    <h2 class="blinking-text">BLUE TEXT</h2>

    <img
        src="image.jpg"
        alt="Rotating Image"
        class="rotating-image"
    >

</body>
</html>

5. Write Code to Change Bullets into Ordered List for “Sum of First 10 Integers”

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Sum of First 10 Integers</title>
</head>
<body>

    <h3>Sum of First 10 Integers</h3>

    <ol>
        <li>Initialize sum = 0</li>
        <li>Loop i from 1 to 10</li>
        <li>Add i to sum</li>
        <li>Print sum</li>
    </ol>

</body>
</html>

6. Create an Array with the Given Values and Print It

JavaScript Code:

// Define the array with mixed data types
let My_Mix_Array = ["apple", 3.14, true, "Ali", 25];

// Print the array in the required format
console.log("My_Mix_Array : [" + My_Mix_Array.join(", ") + "]");

Output:

My_Mix_Array : [apple, 3.14, true, Ali, 25]

7. Linear Search in a List of 10 Entries (Iteration Count)

Python Code:

def search_item(lst, target):    iterations = 0    found = False    for i in range(len(lst)):        iterations += 1        if lst[i] == target:            found = True            break    if found:        print(f"Item found! Number of iterations: {iterations}")    else:        print(f"Item not found! Number of iterations: {iterations}")# Example List with 10 elementsmy_list = [12, 45, 67, 23, 89, 34, 90, 11, 56, 78]# i) If the value is found in the list (e.g., searching for 23)search_item(my_list, 23)# ii) If the value is not found in the list (e.g., searching for 99)search_item(my_list, 99)
 

Output:

Item found! Number of iterations: 4
Item not found! Number of iterations: 10

Notes by Sir Dilawar
For more notes, visit QuranEducationPoint.com