Additional notes PDF
A website should help its intended reader
A school-transport report may contain detailed methods and tables. Its website can give classmates a short overview. The page should help them find the main result, inspect the method and reach the approved full report.
These separate notes add practical GAC011 work. Preserve the original handout beside them. Follow your current centre brief for required tools, depth and submission evidence.
Original practice brief. Build one readable page for classmates using invented transport counts. Add navigation, a table and a category filter. Plan how the page supports a report and a short talk. No real responses are collected. Local preview is practice; it is not public publication.
Draw a wireframe with a title, introduction, section links, findings, method and footer. Give each area a clear purpose. Visitors should not have to guess whether a button changes the page or opens another document. Use meaningful text such as “Method and limits”, rather than “Click here”.
Build a complete HTML page
Character encoding 字符编码 tells the browser how to read the file's text. UTF-8 supports many writing systems. The viewport setting helps mobile browsers use the device width. A descriptive title helps people identify the page in a tab.
Save the following complete example as transport.html. Open that file in a browser. It works without a library, account or network request. The built-in style block keeps this first exercise in one file. A later project can move those styles into a separate CSS file and link it from the head.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>School transport: practice report</title>
<style>
:root { --page: #ffffff; --text: #172033; --line: #637083; --link: #164db2; }
body.dark { --page: #080d17; --text: #e9eef7; --line: #8392a8; --link: #a8d2ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); font: 1.1rem/1.6 sans-serif; }
header, main, footer { max-width: 48rem; margin: auto; padding: 1rem; }
a { color: var(--link); }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
section { margin-block: 2rem; padding-block: 1rem; border-top: 1px solid var(--line); }
button, select { font: inherit; padding: .4rem; background: var(--page); color: var(--text); border: 1px solid var(--line); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; margin-block: .5rem; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); }
[hidden] { display: none !important; }
</style>
</head>
<body>
<header>
<h1>School transport</h1>
<p>An original practice example. All counts are invented.</p>
<nav aria-label="Report sections">
<a href="#findings">Findings</a>
<a href="#method">Method and limits</a>
</nav>
<div id="controls" hidden>
<button id="theme" type="button">Use dark theme</button>
<label for="mode">Show transport category</label>
<select id="mode">
<option value="all">All categories</option>
<option value="walk">Walking</option>
<option value="bus">Bus</option>
<option value="cycle">Cycling</option>
</select>
</div>
</header>
<main>
<section id="findings" aria-labelledby="findings-title">
<h2 id="findings-title">Findings</h2>
<p>In this invented group of 36 responses, bus travel has the largest count.</p>
<table>
<caption>Practice counts, not research findings</caption>
<thead><tr><th scope="col">Main mode</th><th scope="col">Responses</th></tr></thead>
<tbody>
<tr data-mode="walk"><th scope="row">Walking</th><td>12</td></tr>
<tr data-mode="bus"><th scope="row">Bus</th><td>18</td></tr>
<tr data-mode="cycle"><th scope="row">Cycling</th><td>6</td></tr>
</tbody>
</table>
<p id="status" role="status">3 transport categories shown.</p>
</section>
<section id="method" aria-labelledby="method-title">
<h2 id="method-title">Method and limits</h2>
<p>Each invented response has one main mode. The counts sum to 36.</p>
<p>The table does not explain choices, travel distance or the whole school's habits.</p>
<p>This page is a short companion to a report and oral presentation. An actual project should link its approved report and sources here.</p>
</section>
</main>
<footer><p>GAC011 practice: no responses are collected or sent.</p></footer>
<script>
const controls = document.querySelector("#controls");
const mode = document.querySelector("#mode");
const rows = [...document.querySelectorAll("tbody tr")];
const status = document.querySelector("#status");
const theme = document.querySelector("#theme");
mode.addEventListener("change", () => {
let shown = 0;
rows.forEach(row => {
row.hidden = mode.value !== "all" && row.dataset.mode !== mode.value;
if (!row.hidden) shown += 1;
});
status.textContent = `${shown} transport ${shown === 1 ? "category" : "categories"} shown.`;
});
theme.addEventListener("click", () => {
const dark = document.body.classList.toggle("dark");
theme.textContent = dark ? "Use light theme" : "Use dark theme";
});
controls.hidden = false;
</script>
</body>
</html>
The HTML provides readable content before JavaScript runs. The href="#method" link points to the element with id="method". IDs must be unique on the page. A wrong ID breaks that link even if the label looks correct.
The table's caption states what its numbers mean. Column and row headings describe the cells. The invented values are 12, 18 and 6, giving 36 responses. Bus has the largest count. Those counts do not tell us why people choose a mode.
Explain and adapt the CSS
A CSS custom property 自定义属性 stores a reusable value, such as a colour. The example uses shared page, text, border and link colours. The dark class changes those values together. Text areas and controls use the same page colour in dark mode. Borders and space separate sections.
The universal box-sizing rule makes specified sizes include padding and borders. The reading area grows with the window but stops at 48rem. The navigation can wrap when space is limited. A flexible width often solves the first layout problem without a media query.
The :focus-visible outline helps keyboard users find the current control. Do not remove it just because it is visible. Links retain underlines. Table headings and sufficient contrast help readers understand the data. An actual image needs text suited to its purpose: meaningful information needs a useful description; a purely decorative image can use empty alt text.
Adaptation. Change the page title and introduction for another approved academic topic. Keep a clear heading order. Try a narrow window and enlarged text. If you later add two columns, decide where they should stack and test a suitable media query. Do not add a fixed width that makes the phone scroll sideways.
Trace the JavaScript interaction
An event listener 事件监听器 runs code when its event occurs. The example listens for a changed selection. mode.value gives the selected value. Each row's data-mode attribute becomes row.dataset.mode in JavaScript.
A row is hidden when a specific category is selected and the row does not match. Selecting all makes every row visible. The counter starts at zero for each change. It increases once for each visible category, not once per response. Therefore selecting Bus shows one category, not eighteen categories.
Trace. Select Bus. Walking and Cycling become hidden. Bus remains visible and the status says “1 transport category shown.” Select All categories. The hidden condition is false for every row, so the status returns to three categories.
The theme button adds or removes the dark class. Its label describes the next action. Updating textContent changes text; it does not treat that text as HTML. The status region can announce the changed count to assistive software. Check actual behaviour with the tools available at your centre.
Progressive enhancement 渐进增强 means that useful basic content works before extra features are added. The example keeps interactive controls hidden until their listeners are attached. Without JavaScript, the full table, methods and section links still work. A filter changes the view, not the underlying counts or study limits.
Check, publish and maintain the site
Before any authorised launch, record results of practical checks. Open every link, use the keyboard, enlarge text and try phone-sized layouts. Check both themes and a second browser or device. Verify the complete content still works if the optional script is unavailable. Read errors rather than hiding them.
Relative path 相对路径 means a file location described from another location. For an approved report saved beside your page as report.pdf, an HTML link can use href="report.pdf". Use a meaningful label and identify the PDF. Add the actual report only when you have it; do not leave a broken sample link. Check filenames and upper/lower case on the host.
A static site 静态网站 can serve stored HTML, CSS, scripts and images. The browser can still run interactive JavaScript. A domain name 域名 is an address people use; hosting provides the service that delivers files. A domain alone does not upload your site.
Use your centre's approved publishing process. Check media permission and remove private drafts or participant information. Upload the required files together. Open the actual public URL and verify paths, display and controls there. A successful local preview is not proof of a successful launch.
Keep editable source files and a known working copy. When you revise, check the change and its affected links. Record the version and date. Correcting your local file does not update a hosted copy until the approved publishing process delivers it.
Connect the website to academic work and promotion
The website should complement your report and talk. Its overview gives a clear question, one useful result and the study's limits. The full report carries detailed evidence and references. A slide in the talk can show the page address or an approved QR code. Check that the link reaches the intended version. Do not claim that the practice counts are real findings.
For promotion, define an audience and objective first. For example: help classmates find the approved report during project week. Plan a permitted post with a short accurate description, meaningful link text and a named owner. Follow centre rules and platform requirements. Planning a post does not show that promotion actually happened.
Impressions 展示次数 count displays under the platform's definition. Reach usually refers to distinct accounts under its definition. Neither is automatically the number of people who read the report. Click-through rate 点击率 needs a stated numerator and denominator.
Invented example. Post A receives 400 impressions and 20 link clicks. Post B receives 250 impressions and 25 link clicks. Using link clicks divided by impressions, A has $20/400=5\%$ and B has $25/250=10\%$. B has more link clicks despite fewer impressions.
These numbers do not prove B's wording caused the difference. Timing, audience and repeated clicks may differ. Link clicks also do not prove the report loaded or was read. Choose a change, record its context and compare a measure that matches the objective. Keep unnecessary personal tracking out of the task.
Practice and explained answers
Questions. 1. Which element does the Method link reach? 2. What should the filter display for Cycling? 3. Does filtering change the original total of 36? 4. What remains usable without JavaScript? 5. Why is a domain purchase insufficient for launch? 6. Post C has 600 impressions and 24 link clicks. Find its rate. 7. Does B's higher rate prove its wording is better? 8. Name evidence of a completed website task.
Explained answers. 1. The element whose ID is method; the fragment and ID must match. 2. Only Cycling's row, with six responses and one category shown. 3. No; it changes visible rows, not the original dataset. 4. The text, full table, method and section links; optional controls remain hidden. 5. Files still need approved hosting and delivery, then checks at the actual URL. 6. $24/600=4\%$. 7. No; other differences and measurement limits remain. 8. Show your plan, sources, working page, checks and required publishing, academic and promotion evidence.
