313 lines
18 KiB
HTML
313 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Multi-year admissions — mockups</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
:root{
|
||
|
|
--bg-primary:#faf7f2; --bg-secondary:#f3ede4; --bg-card:#fff;
|
||
|
|
--text-primary:#1a1612; --text-secondary:#5c564d; --text-muted:#6d685f;
|
||
|
|
--accent-coral:#e07256; --accent-coral-dark:#c45a3f; --accent-teal:#2d7d7d;
|
||
|
|
--accent-gold:#c9a227; --accent-gold-text:#7a6800;
|
||
|
|
--coral-bg:rgba(224,114,86,.12); --teal-bg:rgba(45,125,125,.12); --gold-bg:rgba(201,162,39,.12);
|
||
|
|
--trend-up:#16a34a; --trend-down:#e07256;
|
||
|
|
--border:#e5dfd5; --shadow:0 2px 8px rgba(26,22,18,.06); --shadow-md:0 4px 20px rgba(26,22,18,.1);
|
||
|
|
--radius-sm:4px; --radius-md:8px; --radius-lg:16px;
|
||
|
|
--serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',-apple-system,sans-serif;
|
||
|
|
}
|
||
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
||
|
|
body{font-family:var(--sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;padding:48px 20px 96px}
|
||
|
|
.wrap{max-width:760px;margin:0 auto}
|
||
|
|
.pagehead{margin-bottom:40px}
|
||
|
|
.pagehead h1{font-family:var(--serif);font-weight:600;font-size:32px;letter-spacing:-.01em}
|
||
|
|
.pagehead p{color:var(--text-secondary);margin-top:8px;font-size:15px}
|
||
|
|
.optlabel{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-teal);margin:56px 0 6px}
|
||
|
|
.optlabel .rec{background:var(--teal-bg);color:var(--accent-teal);padding:2px 8px;border-radius:999px;letter-spacing:.02em;text-transform:none;font-weight:600}
|
||
|
|
.optdesc{color:var(--text-muted);font-size:14px;margin-bottom:16px;max-width:60ch}
|
||
|
|
|
||
|
|
/* card shell mimicking SchoolDetailView .card */
|
||
|
|
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px 28px 26px}
|
||
|
|
.sectionTitle{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:18px}
|
||
|
|
|
||
|
|
/* ===== verdict block ===== */
|
||
|
|
.verdict{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-md);margin-bottom:22px}
|
||
|
|
.verdict.hard{background:var(--coral-bg)}
|
||
|
|
.verdict.easing{background:var(--teal-bg)}
|
||
|
|
.verdict .vicon{font-size:20px;line-height:1.2}
|
||
|
|
.verdict .vhead{font-weight:700;font-size:17px;letter-spacing:-.01em}
|
||
|
|
.verdict.hard .vhead{color:var(--accent-coral-dark)}
|
||
|
|
.verdict.easing .vhead{color:var(--accent-teal)}
|
||
|
|
.verdict .vsub{color:var(--text-secondary);font-size:14px;margin-top:3px}
|
||
|
|
|
||
|
|
.trendtag{display:inline-flex;align-items:center;gap:5px;font-weight:600}
|
||
|
|
.trendtag.up{color:var(--trend-down)} /* harder = coral */
|
||
|
|
.trendtag.down{color:var(--trend-up)} /* easier = green */
|
||
|
|
|
||
|
|
/* ===== chart ===== */
|
||
|
|
.chartwrap{margin:6px 0 4px}
|
||
|
|
.chartcap{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
|
||
|
|
.chart{width:100%;height:auto;display:block}
|
||
|
|
.axisyr{font-size:11px;fill:var(--text-muted);font-family:var(--sans)}
|
||
|
|
.ptlbl{font-size:12px;font-weight:700;font-family:var(--sans)}
|
||
|
|
|
||
|
|
/* latest line */
|
||
|
|
.latest{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:14px;color:var(--text-secondary)}
|
||
|
|
.latest b{color:var(--text-primary)}
|
||
|
|
|
||
|
|
/* ===== Q&A (existing style) ===== */
|
||
|
|
.qa{display:grid;gap:0}
|
||
|
|
.qa .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
|
||
|
|
.qa .row:last-child{border-bottom:none}
|
||
|
|
.qa .q{color:var(--text-secondary);font-size:14px}
|
||
|
|
.qa .a{font-weight:700;font-size:16px;white-space:nowrap}
|
||
|
|
.qa .a .sub{font-weight:400;color:var(--text-muted);font-size:13px;margin-left:6px}
|
||
|
|
|
||
|
|
/* ===== table ===== */
|
||
|
|
table{width:100%;border-collapse:collapse;font-size:14px}
|
||
|
|
thead th{text-align:right;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);padding:0 10px 10px;border-bottom:1px solid var(--border)}
|
||
|
|
thead th:first-child{text-align:left}
|
||
|
|
tbody td{text-align:right;padding:12px 10px;border-bottom:1px solid var(--border)}
|
||
|
|
tbody td:first-child{text-align:left;font-weight:600}
|
||
|
|
tbody tr:last-child td{border-bottom:none}
|
||
|
|
tbody tr.latest-row{background:var(--bg-secondary)}
|
||
|
|
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px}
|
||
|
|
.pill.over{background:var(--coral-bg);color:var(--accent-coral-dark)}
|
||
|
|
.pill.ok{background:var(--teal-bg);color:var(--accent-teal)}
|
||
|
|
.note{display:flex;gap:8px;margin-top:16px;font-size:13px;color:var(--text-muted)}
|
||
|
|
.note .i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--bg-secondary);color:var(--text-muted);font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px}
|
||
|
|
|
||
|
|
/* ===== disclosure ===== */
|
||
|
|
.disclosure{margin-top:18px;border-top:1px solid var(--border);padding-top:6px}
|
||
|
|
.disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0;font-weight:600;font-size:14px;color:var(--accent-teal)}
|
||
|
|
.disclosure>summary::-webkit-details-marker{display:none}
|
||
|
|
.disclosure>summary .chev{transition:transform .2s ease}
|
||
|
|
.disclosure[open]>summary .chev{transform:rotate(90deg)}
|
||
|
|
.disclosure .body{padding-top:8px}
|
||
|
|
|
||
|
|
/* hero chips preview */
|
||
|
|
.heroctx{margin:10px 0 14px;font-size:12px;color:var(--text-muted)}
|
||
|
|
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
|
||
|
|
.hchip{border-radius:var(--radius-md);padding:12px 16px;min-width:170px;background:var(--coral-bg)}
|
||
|
|
.hchip .t{font-weight:700;font-size:14px;color:var(--accent-coral-dark)}
|
||
|
|
.hchip .s{font-size:12px;color:var(--text-secondary);margin-top:2px}
|
||
|
|
|
||
|
|
/* ===== card header with segmented toggle ===== */
|
||
|
|
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
|
||
|
|
.cardhead .sectionTitle{margin-bottom:0}
|
||
|
|
.seg{display:inline-flex;background:var(--bg-secondary);border-radius:999px;padding:3px;gap:2px;flex:none}
|
||
|
|
.seg button{appearance:none;border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--text-muted);
|
||
|
|
padding:6px 14px;border-radius:999px;transition:background .15s ease,color .15s ease;white-space:nowrap}
|
||
|
|
.seg button[aria-pressed="true"]{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow)}
|
||
|
|
.seg button:hover[aria-pressed="false"]{color:var(--text-secondary)}
|
||
|
|
/* Stack both views in one grid cell so the card sizes to the taller view —
|
||
|
|
switching modes never shifts layout. */
|
||
|
|
.viewport{display:grid}
|
||
|
|
.viewport > .view{grid-area:1 / 1}
|
||
|
|
.viewport > .view[hidden]{display:block;visibility:hidden;pointer-events:none}
|
||
|
|
/* Default view fills the reserved height: rows spread to consume the slack
|
||
|
|
left by the taller trend view, so there's no empty gap below. */
|
||
|
|
#view-year{display:flex;flex-direction:column}
|
||
|
|
#view-year .qa{flex:1;display:flex;flex-direction:column;justify-content:space-between}
|
||
|
|
/* Larger type in the proposed card so content carries the height
|
||
|
|
instead of empty space between small rows. */
|
||
|
|
#proposed .qa .row{padding:16px 0}
|
||
|
|
#proposed .qa .q{font-size:16px}
|
||
|
|
#proposed .qa .a{font-size:20px}
|
||
|
|
#proposed .qa .a .sub{font-size:14px}
|
||
|
|
#proposed .chartcap{font-size:13px}
|
||
|
|
#proposed .latest{font-size:16px;margin-top:22px;padding-top:18px}
|
||
|
|
#proposed .axisyr{font-size:12.5px}
|
||
|
|
#proposed .ptlbl{font-size:13px}
|
||
|
|
|
||
|
|
@media(max-width:600px){
|
||
|
|
.card{padding:22px 18px}
|
||
|
|
.qa .a{font-size:15px}
|
||
|
|
thead th,tbody td{padding-left:6px;padding-right:6px}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="wrap">
|
||
|
|
|
||
|
|
<div class="pagehead">
|
||
|
|
<h1>How Hard to Get In — multi-year</h1>
|
||
|
|
<p>Three ways to surface admissions history on the school detail page. Sample data: an oversubscribed primary where first-choice odds have tightened from 95% → 68% over three years.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ============ PROPOSED: current view + header toggle to Option C ============ -->
|
||
|
|
<div class="optlabel">Proposed <span class="rec">Header toggle</span></div>
|
||
|
|
<p class="optdesc">Keeps today's single-year view as the default. A segmented toggle in the card header switches between "This year" and "3-year trend" (Option C). Try it — click the toggle.</p>
|
||
|
|
|
||
|
|
<section class="card" id="proposed">
|
||
|
|
<div class="cardhead">
|
||
|
|
<h2 class="sectionTitle">How Hard to Get Into This School</h2>
|
||
|
|
<div class="seg" role="group" aria-label="Admissions view">
|
||
|
|
<button data-show="year" aria-pressed="true" type="button">This year</button>
|
||
|
|
<button data-show="trend" aria-pressed="false" type="button">3-year trend</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="viewport">
|
||
|
|
<!-- DEFAULT: current single-year Q&A -->
|
||
|
|
<div class="view" id="view-year">
|
||
|
|
<div class="qa">
|
||
|
|
<div class="row"><span class="q">How many places were offered?</span><span class="a">60</span></div>
|
||
|
|
<div class="row"><span class="q">How many families wanted this school first?</span><span class="a">88</span></div>
|
||
|
|
<div class="row"><span class="q">How many got their first choice?</span><span class="a">60<span class="sub">of 88 (68%)</span></span></div>
|
||
|
|
<div class="row"><span class="q">How many applied in total?</span><span class="a">241</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SWAPPED: Option C trend view -->
|
||
|
|
<div class="view" id="view-trend" hidden>
|
||
|
|
<div class="chartwrap">
|
||
|
|
<div class="chartcap">First-choice offer rate</div>
|
||
|
|
<svg class="chart" viewBox="0 0 520 118" role="img" aria-label="First-choice offer rate falling from 95% in 2021/22 to 68% in 2023/24">
|
||
|
|
<line x1="44" y1="16" x2="500" y2="16" stroke="#e5dfd5" stroke-width="1"/>
|
||
|
|
<line x1="44" y1="50" x2="500" y2="50" stroke="#e5dfd5" stroke-width="1"/>
|
||
|
|
<line x1="44" y1="84" x2="500" y2="84" stroke="#e5dfd5" stroke-width="1"/>
|
||
|
|
<text x="36" y="20" text-anchor="end" class="axisyr">100%</text>
|
||
|
|
<text x="36" y="54" text-anchor="end" class="axisyr">75%</text>
|
||
|
|
<text x="36" y="88" text-anchor="end" class="axisyr">50%</text>
|
||
|
|
<polyline points="110,21 290,41 470,59" fill="none" stroke="var(--accent-coral)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
<circle cx="110" cy="21" r="5" fill="var(--accent-coral)"/>
|
||
|
|
<circle cx="290" cy="41" r="5" fill="var(--accent-coral)"/>
|
||
|
|
<circle cx="470" cy="59" r="6" fill="var(--accent-coral)" stroke="#fff" stroke-width="2"/>
|
||
|
|
<text x="110" y="13" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">95%</text>
|
||
|
|
<text x="290" y="33" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">81%</text>
|
||
|
|
<text x="470" y="51" text-anchor="middle" class="ptlbl" fill="var(--accent-coral-dark)">68%</text>
|
||
|
|
<text x="110" y="106" text-anchor="middle" class="axisyr">2021/22</text>
|
||
|
|
<text x="290" y="106" text-anchor="middle" class="axisyr">2022/23</text>
|
||
|
|
<text x="470" y="106" text-anchor="middle" class="axisyr">2023/24</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="latest">This year (2023/24), <b>88 families</b> put it first for <b>60 places</b> — 241 applications in total.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<p class="optdesc" style="margin-top:14px">Below: the standalone option mockups for reference.</p>
|
||
|
|
|
||
|
|
<!-- ============ OPTION C (RECOMMENDED) ============ -->
|
||
|
|
<div class="optlabel">Option C <span class="rec">Recommended</span></div>
|
||
|
|
<p class="optdesc">Trend verdict + sparkline, with the full year-by-year table behind a disclosure. Answers the parent's question first, rewards the curious second. Collapses to today's single-year view when only one year exists.</p>
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<h2 class="sectionTitle">How Hard to Get Into This School</h2>
|
||
|
|
|
||
|
|
<div class="chartwrap">
|
||
|
|
<div class="chartcap">First-choice offer rate</div>
|
||
|
|
<svg class="chart" viewBox="0 0 520 170" role="img" aria-label="First-choice offer rate falling from 95% in 2021/22 to 68% in 2023/24">
|
||
|
|
<!-- gridlines -->
|
||
|
|
<line x1="40" y1="20" x2="500" y2="20" stroke="#e5dfd5" stroke-width="1"/>
|
||
|
|
<line x1="40" y1="70" x2="500" y2="70" stroke="#e5dfd5" stroke-width="1"/>
|
||
|
|
<line x1="40" y1="120" x2="500" y2="120" stroke="#e5dfd5" stroke-width="1"/>
|
||
|
|
<text x="32" y="24" text-anchor="end" class="axisyr">100%</text>
|
||
|
|
<text x="32" y="74" text-anchor="end" class="axisyr">75%</text>
|
||
|
|
<text x="32" y="124" text-anchor="end" class="axisyr">50%</text>
|
||
|
|
<!-- 95% -> y=30 ; 81% -> y=58 ; 68% -> y=84 (y = 20 + (100-v)*2) -->
|
||
|
|
<polyline points="110,30 290,58 470,84" fill="none" stroke="var(--accent-coral)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
<circle cx="110" cy="30" r="5" fill="var(--accent-coral)"/>
|
||
|
|
<circle cx="290" cy="58" r="5" fill="var(--accent-coral)"/>
|
||
|
|
<circle cx="470" cy="84" r="6" fill="var(--accent-coral)" stroke="#fff" stroke-width="2"/>
|
||
|
|
<text x="110" y="20" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">95%</text>
|
||
|
|
<text x="290" y="48" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">81%</text>
|
||
|
|
<text x="470" y="74" text-anchor="middle" class="ptlbl" fill="var(--accent-coral-dark)">68%</text>
|
||
|
|
<text x="110" y="150" text-anchor="middle" class="axisyr">2021/22</text>
|
||
|
|
<text x="290" y="150" text-anchor="middle" class="axisyr">2022/23</text>
|
||
|
|
<text x="470" y="150" text-anchor="middle" class="axisyr">2023/24</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="latest">This year (2023/24), <b>88 families</b> put it first for <b>60 places</b> — 241 applications in total.</div>
|
||
|
|
|
||
|
|
<details class="disclosure">
|
||
|
|
<summary><span class="chev">▸</span> See full 3-year breakdown</summary>
|
||
|
|
<div class="body">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr><th>Year</th><th>Places</th><th>1st-pref apps</th><th>1st-choice rate</th><th>Total apps</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr class="latest-row"><td>2023/24</td><td>60</td><td>88</td><td>68%</td><td>241</td></tr>
|
||
|
|
<tr><td>2022/23</td><td>60</td><td>74</td><td>81%</td><td>198</td></tr>
|
||
|
|
<tr><td>2021/22</td><td>60</td><td>63</td><td>95%</td><td>150</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ============ OPTION A (LITE) ============ -->
|
||
|
|
<div class="optlabel">Option A <span style="color:var(--text-muted);text-transform:none;letter-spacing:0;font-weight:500">· lite</span></div>
|
||
|
|
<p class="optdesc">Trend-aware headline + sparkline inside the existing card. Smallest change; shows the shape of the trend but not the per-year numbers.</p>
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<h2 class="sectionTitle">How Hard to Get Into This School</h2>
|
||
|
|
|
||
|
|
<div style="font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:4px">
|
||
|
|
Getting harder to get into <span class="trendtag up">↗</span>
|
||
|
|
</div>
|
||
|
|
<div style="color:var(--text-secondary);font-size:14px;margin-bottom:18px">Oversubscribed in each of the last 3 years.</div>
|
||
|
|
|
||
|
|
<div class="chartwrap">
|
||
|
|
<div class="chartcap">First-choice offer rate</div>
|
||
|
|
<svg class="chart" viewBox="0 0 520 150" role="img" aria-label="First-choice offer rate falling from 95% to 68%">
|
||
|
|
<polyline points="60,30 260,58 460,84" fill="none" stroke="var(--accent-coral)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
|
|
<circle cx="60" cy="30" r="5" fill="var(--accent-coral)"/>
|
||
|
|
<circle cx="260" cy="58" r="5" fill="var(--accent-coral)"/>
|
||
|
|
<circle cx="460" cy="84" r="6" fill="var(--accent-coral)" stroke="#fff" stroke-width="2"/>
|
||
|
|
<text x="60" y="20" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">95%</text>
|
||
|
|
<text x="260" y="48" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">81%</text>
|
||
|
|
<text x="460" y="74" text-anchor="middle" class="ptlbl" fill="var(--accent-coral-dark)">68%</text>
|
||
|
|
<text x="60" y="120" text-anchor="middle" class="axisyr">2021/22</text>
|
||
|
|
<text x="260" y="120" text-anchor="middle" class="axisyr">2022/23</text>
|
||
|
|
<text x="460" y="120" text-anchor="middle" class="axisyr">2023/24</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="latest">Latest (2023/24): <b>60 places</b> · <b>88 first-choice</b> · 241 total applications.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ============ OPTION B (TABLE) ============ -->
|
||
|
|
<div class="optlabel">Option B <span style="color:var(--text-muted);text-transform:none;letter-spacing:0;font-weight:500">· table</span></div>
|
||
|
|
<p class="optdesc">Compact year-by-year table of every metric. Maximum transparency; leaves the parent to spot the trend themselves and is the densest on mobile.</p>
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<h2 class="sectionTitle">How Hard to Get Into This School</h2>
|
||
|
|
<p style="color:var(--text-secondary);font-size:14px;margin-bottom:18px">Three-year admissions history</p>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr><th>Year</th><th>Places</th><th>1st-pref apps</th><th>1st-choice rate</th><th>Total apps</th><th>Status</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr class="latest-row"><td>2023/24</td><td>60</td><td>88</td><td>68%</td><td>241</td><td><span class="pill over">Over</span></td></tr>
|
||
|
|
<tr><td>2022/23</td><td>60</td><td>74</td><td>81%</td><td>198</td><td><span class="pill over">Over</span></td></tr>
|
||
|
|
<tr><td>2021/22</td><td>60</td><td>63</td><td>95%</td><td>150</td><td><span class="pill ok">OK</span></td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<div class="note"><span class="i">i</span><span>A falling first-choice rate means competition is rising. “Places” is the number offered this round, roughly the intake size.</span></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const proposed = document.getElementById('proposed');
|
||
|
|
const views = { year: document.getElementById('view-year'), trend: document.getElementById('view-trend') };
|
||
|
|
const toggles = proposed.querySelectorAll('.seg button');
|
||
|
|
toggles.forEach(btn => {
|
||
|
|
btn.addEventListener('click', () => {
|
||
|
|
const show = btn.dataset.show;
|
||
|
|
views.year.hidden = show !== 'year';
|
||
|
|
views.trend.hidden = show !== 'trend';
|
||
|
|
toggles.forEach(b => b.setAttribute('aria-pressed', String(b.dataset.show === show)));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|