Levels 1–2 combined test

Why each option is right or wrong

• “The browser downloads the site's CSS file” (Incorrect): CSS is requested after the HTML names it.
• “The browser paints the page from its cache” (Incorrect): Painting needs the HTML first, which hasn't been requested yet.
• “The browser starts a secure HTTPS connection” (Incorrect): HTTPS comes next, but the browser needs the server's address first.
• “A DNS lookup to find the server's IP address” is correct.

  Before the browser can connect, it needs the server's IP address, so it asks DNS: "What's the address for prolearners.in?" Only then does it connect, request the HTML, and later fetch CSS and scripts and paint the page.

  • Order: DNS, connect (with HTTPS), request HTML, fetch resources, paint.
  • Cached: a recent DNS answer may skip the lookup.

📖 Revise: Module 6: How the Web Works

Why each option is right or wrong

• “The page loads, but without any of its colours and layout” (Incorrect): Styling comes from CSS, which is a separate file.
• “The browser shows a security warning” (Incorrect): A missing script gives a 404, not a security warning.
• “The page doesn't load at all” (Incorrect): The HTML loaded fine, so the page appears.
• “Interactive features like menus don't work” is correct.

  The HTML loaded, so text and layout appear, but app.js is missing. Anything that depends on it, like menus, tabs and form helpers, won't work. The page looks fine but doesn't respond.

  • Check: the file path and that it was deployed.
  • Design: key content should work without JavaScript.

📖 Revise: Module 6: How the Web Works

Why each option is right or wrong

• “New items need a page refresh before their buttons can be clicked” (Incorrect): Refreshing would wipe unsaved items; the real problem is the missing listener.
• “The delete buttons need type="submit" before they react to clicks” (Incorrect): The button type affects form submission, not whether a click listener runs.
• “Browsers allow only three click listeners on one list of items” (Incorrect): There's no such limit; a page can have many listeners.
• “The click listeners were attached before the new buttons existed” is correct.

  document.querySelectorAll('.delete').forEach(b => b.addEventListener('click', ...)) only reaches buttons that exist at that moment. Buttons created later didn't get one. One fix is to listen on the list itself and check which button was clicked (event delegation). Another is to add a listener each time a new item is made.

  • Delegation: list.addEventListener('click', e => { if (e.target.closest('.delete')) { ... } }).
  • Check: the browser's Elements panel shows which listeners an element has.

📖 Revise: Module 19: Browser Interactions

Why each option is right or wrong

• “Push the project to a public repository” (Incorrect): Pushing isn't needed for a restore point, and public isn't required.
• “Make a copy of the stylesheet in the same folder” (Incorrect): Better than nothing, but Git shows the exact changes and restores them cleanly.
• “Delete the old stylesheet so there's no confusion” (Incorrect): You'd lose the safe version.
• “Commit your current work” is correct.

  A commit is a safe point. If the AI rewrites the stylesheet badly, git diff shows exactly what changed and git restore takes you back in one step. Without a commit, the old version may be gone.

  • Message: like "Before AI stylesheet rewrite".
  • Then: review the diff before keeping changes.

📖 Revise: Module 9: Introduction to Git

Why each option is right or wrong

• “Merge it, since the title says it's only a small colour fix” (Incorrect): The title doesn't match the actual change.
• “Close the pull request without any comment and fix it yourself” (Incorrect): Closing without explanation helps no one; ask for a focused change.
• “Approve the CSS changes and merge the rest unseen” (Incorrect): Merging applies every change, reviewed or not.
• “Ask why unrelated files changed, and request a focused change” is correct.

  A PR should do what its title says. 30 changed files, including the contact form, for a colour fix is a warning sign: unrelated changes can hide bugs or mistakes. Ask why, and ask for the colour fix on its own.

  • Small PRs: are easier to review and undo.
  • Unrelated changes: go in their own PRs.

📖 Revise: Module 10: Working with GitHub

Why each option is right or wrong

• “Folder names can't contain numbers” (Incorrect): Numbers are fine in folder names.
• “Capital letters aren't allowed in folder names” (Incorrect): They're allowed, though lowercase avoids case mistakes.
• “The folder name is longer than the terminal allows” (Incorrect): The name isn't too long; spaces and brackets are the problem.
• “Spaces and brackets need quoting in the terminal” is correct.

  In the terminal, a space separates arguments, so cd My Website Final (2) looks like several words, and brackets have special meanings too. Names like my-website avoid quoting mistakes entirely.

  • If you must: wrap the name in quotes.
  • Convention: lowercase with hyphens.

📖 Revise: Module 8: Developer Workstation Basics

Why each option is right or wrong

• “The phone needs a domain name, not an IP address” (Incorrect): An IP address is enough on a local network.
• “Phones can't open websites by IP address” (Incorrect): They can.
• “Port numbers in addresses don't work on phones” (Incorrect): Ports work on every device.
• “The dev server only listens on localhost” is correct.

  Many development servers only accept connections from the same computer (localhost) by default, for safety. Your phone is a different device, so it can't connect. Starting the server with a host option, such as --host, lets other devices on your network reach it.

  • Vite: npm run dev -- --host.
  • Also check: the laptop's firewall.

📖 Revise: Module 5: IP Addresses and Ports

Why each option is right or wrong

• “<p>Call <strong>today</p></strong>” (Incorrect): Closes in the wrong order.
• “<p><h2>Call</h2></p>” (Incorrect): A heading can't sit inside a paragraph.
• “<strong><p>Call</strong></p>” (Incorrect): Overlapping elements, closed in the wrong order.
• “<p>Call <strong>today</strong>.</p>” is correct.

  HTML elements must close in reverse order of opening, like nested boxes. <strong> opens inside <p>, so it must close before </p>. The other options overlap or put a heading inside a paragraph, which isn't allowed.

  • Validator: validator.w3.org flags nesting errors.
  • Editors: often auto-close tags correctly.

📖 Revise: Module 11: Introduction to HTML

Why each option is right or wrong

• “Nothing; the visual size is what matters” (Incorrect): Screen readers and search engines rely on the structure.
• “Use bold paragraphs instead of a heading” (Incorrect): Then there's no heading at all for assistive technology.
• “Use the <title> element instead” (Incorrect): The title is for the tab, not the page heading.
• “Use <h1> and size it with CSS” is correct.

  Heading levels describe the page's structure for screen readers and search engines; the main heading should be <h1>. How big it looks is a job for CSS, so you can make an <h1> any size you like.

  • Order: h1, then h2 for sections, h3 for sub-sections.
  • Style: h1 { font-size: 1.5rem; }.

📖 Revise: Module 12: Webpage Content

Why each option is right or wrong

• “<input type="text">” (Incorrect): Shows the full keyboard.
• “<input type="password">” (Incorrect): Hides the digits and shows the full keyboard.
• “<input type="email">” (Incorrect): Shows a keyboard with @ and . keys, made for email addresses, not numbers.
• “<input inputmode="numeric"> (or type="tel")” is correct.

  inputmode="numeric" tells phones to show a number keypad while keeping the value as text, which suits PIN codes with leading zeros. type="tel" also shows a keypad.

  • Add: pattern="[0-9]{6}" for a 6-digit PIN code.
  • Avoid type="number": it can drop leading zeros and adds spinner arrows.

📖 Revise: Module 13: Forms and Inputs

Why each option is right or wrong

• “Inline style attributes on each element that uses it” (Incorrect): That's how you end up with 40 places to edit.
• “The colour name green instead of the hex code” (Incorrect): A name is still repeated in 40 places, and won't match the brand exactly.
• “A search-and-replace in the editor whenever it changes” (Incorrect): It works, but it's easy to miss variations like #24594B; a variable avoids the hunt.
• “A CSS variable like --brand used everywhere” is correct.

  A CSS custom property, like --brand: #24594b; set once on :root and used as var(--brand), keeps the colour in one place. When the brand changes, you edit one line and every button, heading and border updates.

  • Also good for: spacing, fonts and dark mode.
  • Name by purpose: --brand, not --green.

📖 Revise: Module 14: Introduction to CSS

Why each option is right or wrong

• “position: absolute; on the logo and the links” (Incorrect): Absolute positioning breaks on different screen sizes and overlaps content.
• “display: grid; grid-template-rows: 1fr 1fr;” (Incorrect): That makes two rows, not one row split left and right.
• “text-align: justify; on the navigation bar” (Incorrect): Justify spreads words across lines of text; it doesn't place blocks at each end.
• “display: flex; justify-content: space-between;” is correct.

  Flexbox arranges items along one row. display: flex puts the logo and the links group side by side, and justify-content: space-between pushes them to opposite ends. Add align-items: center to line them up vertically.

  • On phones: a media query can stack them or show a menu button.
  • Grid: also works, but flex is simplest for one row.

📖 Revise: Module 15: Page Layouts

Why each option is right or wrong

• “Show the button only when the pointer hovers over it” (Incorrect): Phones have no hover, so it might not appear at all.
• “Make the × thinner so it looks more elegant” (Incorrect): A thinner symbol is even harder to see and hit.
• “Give the × a lighter colour so it stands out less” (Incorrect): Colour doesn't change the size of the area you can tap.
• “Make the tap target at least about 44px” is correct.

  Fingers are much less precise than a mouse pointer. A tap target of about 44 by 44 pixels, which can include invisible padding around a small icon, makes buttons easy to hit without accidental taps on nearby items.

  • Add padding: the icon can stay small while the target grows.
  • Spacing: keep targets apart, too.

📖 Revise: Module 16: Responsive Websites

Why each option is right or wrong

• “Numbers can't be added together in JavaScript” (Incorrect): They can; the problem is reassigning a const.
• “The value must be a string to be changed” (Incorrect): Type doesn't matter; const can't be reassigned whatever it holds.
• “score is a reserved word in JavaScript” (Incorrect): It isn't reserved; any non-reserved name works.
• “const can't be reassigned; use let” is correct.

  const means the name can't be pointed at a new value. score = score + 10 tries to reassign it, so JavaScript throws a TypeError. Use let for values that change, and const for those that don't.

  • Default: const, switching to let only when needed.
  • Avoid var: its scoping rules are confusing.

📖 Revise: Module 17: JavaScript Basics

Why each option is right or wrong

• “5, because missing numbers count as 0” (Incorrect): b isn't treated as 0; it's undefined.
• “10, because a is used for both” (Incorrect): a isn't used twice.
• “An error before the function runs” (Incorrect): JavaScript allows missing arguments.
• “NaN, because b is undefined” is correct.

  A missing argument becomes undefined. 5 + undefined can't produce a number, so the result is NaN (not a number). JavaScript doesn't stop you calling a function with fewer arguments.

  • Defaults: function add(a, b = 0) makes b zero when missing.
  • TypeScript: would flag the missing argument.

📖 Revise: Module 18: Decisions and Functions

Why each option is right or wrong

• “Their ticks, synced automatically by the browser” (Incorrect): localStorage doesn't sync between devices.
• “The ticks, but only after they refresh the page” (Incorrect): Refreshing doesn't fetch another device's data.
• “An error saying the storage is missing” (Incorrect): The laptop just has its own empty storage.
• “No ticks, because localStorage is per browser and device” is correct.

  localStorage lives in one browser on one device. The laptop's browser has its own, empty storage, so the learner sees no ticks. To follow someone across devices, progress has to be saved on a server linked to their account.

  • Also lost when: they clear browser data.
  • Good for: small preferences on one device.

📖 Revise: Module 19: Browser Interactions

Why each option is right or wrong

• “Move all the buttons onto a different page” (Incorrect): The same broken script would still fail there.
• “Rewrite every button's click code from scratch” (Incorrect): The buttons are fine; the file didn't run at all.
• “Clear the browser's history and cookies” (Incorrect): History doesn't fix code.
• “Read the error's file and line, and fix that syntax mistake” is correct.

  A syntax error stops the browser running the whole file, so every feature in it fails, which is why all the buttons are dead. The console message names the file and line. Fix that one mistake, often a missing bracket or quote, and the rest usually starts working.

  • Open: the browser console (F12).
  • Editors: often underline syntax errors in red.

📖 Revise: Module 20: Your First Interactive Website

Why each option is right or wrong

• “Ignore it, since the warning is only advice” (Incorrect): The build may fail or behave strangely on an older runtime.
• “Rename the project files to end in .ts” (Incorrect): Renaming files doesn't change the runtime.
• “Update your web browser to the newest version” (Incorrect): The browser isn't the runtime here; Node.js is.
• “Install a supported Node.js version” is correct.

  The build tool needs features that only Node.js 20 or newer provides. On v18 it may fail or behave strangely. Install a supported version, for example with a version manager like nvm, so you can switch between projects.

  • nvm: nvm install 20 then nvm use 20.
  • Pin it: with a .nvmrc file in the project.

📖 Revise: Module 3: Software and Applications

Why each option is right or wrong

• “Open it once to check whether it's a real PDF” (Incorrect): Opening it runs the program.
• “Rename it to end in .pdf, then open it” (Incorrect): Renaming doesn't change what the file is.
• “Scan it, then run it as administrator if it's clean” (Incorrect): A scan can miss new malware, and admin rights give it full control.
• “Delete it without opening it” is correct.

  setup.pdf.exe ends in .exe, so it's a program, not a PDF. Disguising programs as documents is a common malware trick, especially on sites offering free downloads. Delete it without opening it, and get fonts from trusted sources.

  • Turn on: "show file extensions" so tricks like this are visible.
  • If opened: disconnect and run a full security scan.

📖 Revise: Module 2: Operating Systems

Why each option is right or wrong

• “The browser saves every tab to the disk constantly” (Incorrect): Open tabs live mostly in RAM; slowdown comes when RAM runs out.
• “The processor is too new for the browser” (Incorrect): CPU age isn't the cause.
• “The disk is too empty to work efficiently” (Incorrect): Free space doesn't cause slowness.
• “The tabs fill RAM, and free disk space can't replace it” is correct.

  Open tabs live in RAM. With 80 tabs, 16 GB fills up, so the computer moves some data to the disk (swapping), which is far slower than RAM. Lots of free disk space doesn't help, because disk can't do RAM's job at RAM's speed.

  • Fix: close or suspend unused tabs.
  • Check: memory use in Task Manager or Activity Monitor.

📖 Revise: Module 1: How Computers Work