2.1.1 TILL 3.9.2 WITH SOLUTION

 

2. Computational Thinking and Algorithms

2.1 Understanding the Problem

SLO 2.1.1 — Define the concept of a problem in computing. Answer:

• A problem in computing is a clearly stated task that requires an algorithmic solution using inputs, processing, and outputs to meet specific constraints and goals.

SLO 2.1.2 — Describe the types of problems, including decision, searching, and counting. Answer:

• Decision problem: Output is a yes/no or true/false (e.g., “Is the number even?”).
• Searching problem: Find an item with desired property in a collection (e.g., find a name in a list).
• Counting problem: Determine how many items satisfy a condition (e.g., count numbers greater than 50).

SLO 2.1.3 — Describe the steps of the problem‑solving process: a. define the problem b. analyse the problem c. plan the solution of the problem d. find candid solutions to the problem e. select the best solution Answer:

• Define: State the goal, inputs, outputs, constraints.
• Analyse: Break into subproblems; identify data, edge cases, resources.
• Plan: Choose an approach; outline an algorithm; select data structures.
• Find candidates: Draft multiple feasible algorithms/approaches.
• Select best: Evaluate for correctness, time/space efficiency, simplicity, maintainability.

2.2 Algorithm

SLO 2.2.1 — Explain the algorithm and its essential components including inputs, processing, decision, and outputs, highlighting their roles in problem‑solving. Answer:

• Algorithm: A finite, ordered set of unambiguous steps that transforms inputs to outputs.
• Inputs: Data provided to the algorithm.
• Processing: Computations/transformations applied to the inputs.
• Decision: Conditional branching (if/else, switch) that changes flow based on conditions.
• Outputs: Final results produced after processing.

SLO 2.2.2 — Write algorithms to address the following types of problems:

a. Performing arithmetic Answer (pseudocode):

• Read a, b
• sum ← a + b
• diff ← a − b
• prod ← a × b
• if b ≠ 0 then quot ← a ÷ b else report “division by zero”
• Output sum, diff, prod, quot

b. Calculating the volume of geometrical shapes Answer (formulas and pseudocode):

• Cube: V = s³
• Cuboid: V = l × w × h
• Cylinder: V = π r² h
• Sphere: V = 4/3 π r³ Pseudocode (example: cylinder):
• Read r, h
• V ← 3.14159 × r × r × h
• Output V

c. Converting from one unit to another unit of physical quantities Answer (examples):

• Celsius to Fahrenheit: F = (9/5) C + 32
• Kilometers to miles: mi = km × 0.621371 Pseudocode (C→F):
• Read C
• F ← (9/5) × C + 32
• Output F

d. Applying the selection process Answer (largest of three numbers):

• Read x, y, z
• max ← x
• if y > max then max ← y
• if z > max then max ← z
• Output max

e. Finding the maximum and minimum from input values Answer:

• Read n
• Read first value → min ← value, max ← value
• Repeat for remaining n−1 values:
  • if value < min then min ← value
  • if value > max then max ← value
• Output min, max

f. Real‑life problems Answer (billing example with discount):

• Read amount
• if amount ≥ 10000 then discount ← 0.10 × amount else if amount ≥ 5000 then discount ← 0.05 × amount else discount ← 0
• net ← amount − discount
• Output discount, net

2.3 Flowchart

SLO 2.3.1 — Explain a flowchart and its importance in solving a computing problem. Answer:

• A flowchart is a diagrammatic representation of an algorithm using standardized symbols. It clarifies logic, reveals edge cases, helps debugging, and eases communication before coding.

SLO 2.3.2 — Draw flowcharts using the following symbols: input, process, decision, outputs, terminator/terminal point, connectors. Answer (symbol guide):

• Terminator (Start/End): rounded rectangle/oval
• Input/Output: parallelogram
• Process: rectangle
• Decision: diamond (yes/no branches)
• Connector: small circle or labeled connectors to continue flow

SLO 2.3.3 — Solve the trace table for a given flowchart. Answer:

• List variables as columns; list each step/decision as rows; update variable values row-by-row to track the algorithm’s state and final result.

3. Programming Fundamentals (JavaScript, HTML & CSS)

3.1 Introduction to the World Wide Web (WWW)

SLO 3.1.1 — Define: a. World Wide Web (WWW) b. web page c. website d. web application e. search engine f. web server g. web browser Answer:

• WWW: Interlinked hypertext documents and resources accessed over the internet via HTTP/HTTPS.
• Web page: A single document (HTML plus related assets) accessible via a URL.
• Website: A collection of related web pages under a common domain.
• Web application: Interactive website that performs tasks (e.g., email, banking).
• Search engine: Service that indexes and retrieves web content (e.g., Bing).
• Web server: Software/hardware that hosts and serves web resources (e.g., Apache, Nginx).
• Web browser: Client software to request, render, and interact with web content (e.g., Chrome).

SLO 3.1.2 — Differentiate: a. static vs dynamic websites b. front‑end development vs back‑end development Answer:

• Static: Fixed content, served as-is (HTML/CSS/JS only). Dynamic: Content generated at request time (server-side scripts, databases, APIs).
• Front‑end: User interface in the browser (HTML, CSS, JS). Back‑end: Server logic, databases, APIs, authentication.

3.2 Introduction to Hypertext Markup Language (HTML)

SLO 3.2.1 — Define HTML. Answer:

• HTML is the standard markup language for structuring web content using elements and tags.

SLO 3.2.2 — Write HTML code to: a) create and save an HTML file; b) display a webpage. Answer (minimal page):

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my webpage.</p>
</body>
</html>

• Save as mypage.html and open in a browser.

3.3 Designing Webpage I: Text Formatting

SLO 3.3.1 — Write HTML code to: specify a page title; create a paragraph; insert line breaks; insert spaces; add headings/sub‑headings. Answer:

html
<head><title>Text Formatting</title></head>
<body>
  <h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>This is a paragraph.</p>
  Line one<br>Line two<br>
  Word&nbsp;&nbsp;&nbsp;with extra spaces
</body>

SLO 3.3.2 — Apply appropriate text formatting tags: bold, underline, italic, strikethrough, superscript, subscript, centre, font size, font colour and font face. Answer:

html
<p>
  <b>Bold</b> <u>Underline</u> <i>Italic</i> <s>Strike</s>
  H<sub>2</sub>O, E = mc<sup>2</sup>
</p>
<!-- Using CSS for modern, valid styling -->
<p style="text-align:center; color:#0066cc; font-size:20px; font-family:Verdana;">
  Centered blue text, 20px, Verdana
</p>

3.4 Designing Webpage II: Creating Lists

SLO 3.4.1 — Write HTML code to create: ordered, unordered, definition lists. Answer:

html
<ol>
  <li>First</li><li>Second</li>
</ol>
<ul>
  <li>Apple</li><li>Banana</li>
</ul>
<dl>
  <dt>HTML</dt><dd>Markup language for web pages.</dd>
  <dt>CSS</dt><dd>Styles web pages.</dd>
</dl>

3.5 Designing Webpage III: Images and Backgrounds

SLO 3.5.1 — Write HTML code to: insert an image; apply a border to an image; select width/height; set alternate text. Answer:

html
<img src="logo.png" alt="Site logo" width="200" height="100" style="border:2px solid #333;">

SLO 3.5.2 — Write HTML code to: apply background colour; apply foreground colour; assign a background image to the web page. Answer:

html
<body style="background-color:#f0f4ff; color:#222;">
  ...
</body>

<body style="background-image:url('bg.jpg'); background-size:cover; background-repeat:no-repeat;">
  ...
</body>

3.6 Designing Webpage IV: Hyperlinks

SLO 3.6.1 — Write HTML code to: a. create a hyperlink to a web page b. create an ‘anchor’ in the context of hyperlinks c. create an anchor to hyperlink within a web page d. create a graphical hyperlink Answer:

html
<!-- a -->
<a href="https://example.com">Visit Example</a>

<!-- b: anchor target -->
<h2 id="contact">Contact</h2>

<!-- c: link to internal anchor -->
<a href="#contact">Go to Contact</a>

<!-- d: image as link -->
<a href="https://example.com">
  <img src="btn.png" alt="Go" width="120">
</a>

3.7 Designing Webpage V: Forms

SLO 3.7.1 — Write HTML code to: create form; insert label; textbox; password; radio button; checkbox; button. Answer:

html
<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"><br>

  Gender:
  <label><input type="radio" name="gender" value="M"> Male</label>
  <label><input type="radio" name="gender" value="F"> Female</label><br>

  <label><input type="checkbox" name="terms"> I agree</label><br>

  <button type="submit">Submit</button>
</form>

3.8 Designing Webpage VI: Creating Tables

SLO 3.8.1 — Write HTML code to create a table with attributes: table border, border colour, background colour, table width, table height, table row <tr>, standard data cell <td>, header cell <th>. Answer:

html
<table style="width:600px; height:200px; border:2px solid #333; border-collapse:collapse; background-color:#f9fbff;">
  <tr style="background-color:#e6f0ff; color:#222;">
    <th>Roll No</th><th>Name</th><th>Marks</th>
  </tr>
  <tr>
    <td style="border:1px solid #333;">01</td>
    <td style="border:1px solid #333;">Ayesha</td>
    <td style="border:1px solid #333;">92</td>
  </tr>
</table>

3.9 Cascading Style Sheet (CSS)

SLO 3.9.1 — Describe the cascading style sheet (CSS) and its syntax. Answer:

• CSS styles HTML by selecting elements and applying property: value; rules. Syntax: selector { property: value; property2: value2; }
• Cascading means styles combine and are resolved by origin, specificity, and order.

SLO 3.9.2 — Apply code using inline/internal CSS: a. background (color and image) b. font (colour, style and size) c. tables (border, size, alignment) Answer:

html
<!-- Internal CSS -->
<style>
  body { background:#fafafa url('bg.png') no-repeat center/cover; }
  p.note { color:#555; font-style:italic; font-size:18px; }
  table.grade {
    width:80%; margin:auto; /* centers table */
    border:2px solid #444; border-collapse:collapse;
  }
  .grade th, .grade td { border:1px solid #888; padding:8px; text-align:center; }
</style>

Quick Reference: Standard Flowchart Symbols

• Start/End: Oval
• Input/Output: Parallelogram
• Process: Rectangle
• Decision: Diamond (Yes/No)
• Connector: Small circle or labeled connector

Tips and Best Practices

• Prefer CSS for styling (avoid deprecated tags like <center> and <font> in new code).
• Always include alt text for images for accessibility.
• Validate HTML structure with <!DOCTYPE html>, proper <head> and <body>.
• Keep algorithms finite and unambiguous; test with trace tables and edge cases.

If you want, I can convert any section above into printable worksheets, MCQs, or practical lab tasks with expected outputs.