Investment Corporation Bangladesh — Assistant Programmer Written Test: 2017প্রশ্ন ও সমাধান

Key type	Definition	Example (table Student(RollNo, Email, NationalID, Name))
Candidate Key	Any minimal attribute (or set) that could by itself uniquely identify a row — a table can have several.	{RollNo}, {Email}, {NationalID} — each independently unique
Primary Key	The one candidate key chosen by the designer as the table's official, permanent identifier.	RollNo is chosen as the Primary Key
Foreign Key	An attribute in one table that references the Primary Key of another table, enforcing a link between the two.	Enrollment.RollNo referencing Student.RollNo

erDiagram
    STUDENT ||--o{ ENROLLMENT : has
    STUDENT {
        int RollNo PK
        string Email
        string NationalID
        string Name
    }
    ENROLLMENT {
        int RollNo FK
        string CourseID
    }

• All candidate keys are unique and minimal; only one is promoted to Primary Key, the rest remain "alternate keys."
• A Foreign Key does not need to be unique in its own table — many Enrollment rows can point to the same Student.RollNo (many enrollments per student), but it must match an existing Primary Key value in the referenced table (referential integrity).
• A Foreign Key can be NULL (if the relationship is optional), unlike a Primary Key which can never be NULL.

Exam takeaway: Candidate Key = any qualifying unique identifier; Primary Key = the chosen one; Foreign Key = a column that links to another table's Primary Key to enforce referential integrity.

HTML <canvas> is a blank rectangular container; all drawing (lines, shapes, text, images) is done procedurally with JavaScript at runtime — the canvas itself stores no memory of what was drawn, only the resulting pixels.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  const ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 150, 60);        // draws a filled rectangle
</script>

	SVG	HTML Canvas
Rendering model	Vector — shapes described declaratively as DOM elements	Raster/pixel — drawn imperatively via JS calls
Scalability	Scales to any resolution without quality loss (great for print)	Loses quality when scaled up (pixel-based)
Best for	Fewer objects on a large surface (icons, logos, charts)	Many objects on a smaller surface (games, real-time graphics)
Modify after drawing	Yes — each shape is a DOM node, editable via CSS/JS/event listeners	No direct object model — must redraw the whole scene to "change" something
Event handling	Native (each shape can have its own onclick, etc.)	Manual — must calculate hit-testing yourself
Typical use case	Data visualization, scalable icons, interactive diagrams	Games, image/video manipulation, animations with many moving parts

Exam takeaway: SVG = vector, DOM-based, scalable, good for fewer/interactive shapes; Canvas = raster, pixel-based, JS-drawn, good for many objects/real-time rendering — pick SVG for scalable graphics/print, Canvas for performance-heavy pixel work like games.

The HTML DOM (Document Object Model) represents an HTML page as a tree of objects; JavaScript can use DOM methods to read or change any element's attributes at runtime.

Method: element.setAttribute(name, value) sets (or updates) an attribute; element.getAttribute(name) reads it; element.removeAttribute(name) deletes it.

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight { color: red; font-weight: bold; }
</style>
</head>
<body>
  <h1 id="title">Hello World</h1>
  <button onclick="myFunction()">Try it</button>

  <script>
    function myFunction() {
      const heading = document.getElementById("title");
      heading.setAttribute("class", "highlight");   // change the class attribute
    }
  </script>
</body>
</html>

How it works: document.getElementById("title") locates the DOM node; .setAttribute("class", "highlight") then changes its class attribute at runtime, which immediately applies the CSS rule bound to .highlight — the page updates without a reload.

Other common attribute changes: img.setAttribute("src", "new.jpg"), link.setAttribute("href", "page2.html"), or directly via the property shortcut element.className = "highlight".

Exam takeaway: setAttribute()/getAttribute() are the general DOM API for any attribute; many common attributes (class, id, value, src) also have direct JavaScript property shortcuts.