hantim/timothykim.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

align equal signs with subgrid
Build and Push Docker Image / build (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Timothy Kim
2026-07-10 15:26:12 -04:00
parent 497e2a88ab
commit 5b18b03988
1 changed files with 38 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/factoring.html
+38 -23
View File
@@ -88,15 +88,26 @@
.problems-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 1fr 1fr;
gap: 8px 40px;
align-items: start;
}
/* Each column defines the shared [num][lhs][=][rhs] tracks;
problems subgrid onto them so every "=" lines up in that column. */
.prob-col {
display: grid;
grid-template-columns: auto auto max-content 1fr;
column-gap: 6px;
row-gap: 8px;
align-content: start;
}
.problem {
display: grid;
grid-template-columns: 22px 4.4em max-content auto;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: baseline;
column-gap: 6px;
font-size: 1.2rem;
font-weight: 700;
padding: 7px 4px;
@@ -219,36 +230,40 @@ function genUnique(n) {
return out;
}
function probRow(idx, lhs, rhs) {
return `<div class="problem"><span class="prob-num">${idx}.</span>` +
`<span class="lhs">${lhs}</span><span>=</span>` +
`<span class="rhs">${rhs}</span></div>`;
}
// Split rows into two subgrid columns (left = first half, read top-to-bottom).
function twoCols(rows) {
const half = Math.ceil(rows.length / 2);
return `<div class="prob-col">${rows.slice(0, half).join('')}</div>` +
`<div class="prob-col">${rows.slice(half).join('')}</div>`;
}
function renderProblems() {
const L = '<span class="answer-line"></span>';
// Part I - Factor: given a + b, write the factored form
const partA = genUnique(PER_PART).map((t, i) =>
`<div class="problem"><span class="prob-num">${i+1}.</span>` +
`<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
`<span class="rhs"><span class="answer-line"></span>(<span class="answer-line"></span> + <span class="answer-line"></span>)</span>` +
`</div>`
).join('');
const rowsA = genUnique(PER_PART).map((t, i) =>
probRow(i + 1, `${t.a} + ${t.b}`, `${L}(${L} + ${L})`));
// Part II - Expand: given x(y + z), write the sum
const partB = genUnique(PER_PART).map((t, i) =>
`<div class="problem"><span class="prob-num">${i+1}.</span>` +
`<span class="lhs">${t.x}(${t.y} + ${t.z})</span><span>=</span>` +
`<span class="rhs"><span class="answer-line"></span> + <span class="answer-line"></span></span>` +
`</div>`
).join('');
const rowsB = genUnique(PER_PART).map((t, i) =>
probRow(i + 1, `${t.x}(${t.y} + ${t.z})`, `${L} + ${L}`));
// Part III - Find the common factor: fill the box
const partC = genUnique(PER_PART).map((t, i) =>
`<div class="problem"><span class="prob-num">${i+1}.</span>` +
`<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
`<span class="rhs"><span class="box-blank"></span>(${t.y} + ${t.z})</span></div>`
).join('');
const rowsC = genUnique(PER_PART).map((t, i) =>
probRow(i + 1, `${t.a} + ${t.b}`, `<span class="box-blank"></span>(${t.y} + ${t.z})`));
return `
<div class="section"><h1>Part I. Factor out the common factor.</h1><div class="problems-grid">${partA}</div></div>
<div class="section"><h1>Part I. Factor out the common factor.</h1><div class="problems-grid">${twoCols(rowsA)}</div></div>
<hr class="section-divider">
<div class="section"><h1>Part II. Multiply it back out.</h1><div class="problems-grid">${partB}</div></div>
<div class="section"><h1>Part II. Multiply it back out.</h1><div class="problems-grid">${twoCols(rowsB)}</div></div>
<hr class="section-divider">
<div class="section"><h1>Part III. Fill in the common factor.</h1><div class="problems-grid">${partC}</div></div>
<div class="section"><h1>Part III. Fill in the common factor.</h1><div class="problems-grid">${twoCols(rowsC)}</div></div>
`;
}