This commit is contained in:
@@ -0,0 +1,300 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiplication Worksheets</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
/* Screen nav */
|
||||
.screen-nav {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
background: #111;
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 100;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen-nav label {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.tab-btn {
|
||||
background: rgba(255,255,255,0.12);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 13px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tab-btn:hover { background: rgba(255,255,255,0.25); }
|
||||
.tab-btn.active { background: white; color: #111; }
|
||||
|
||||
.nav-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.action-btn {
|
||||
background: white;
|
||||
border: none;
|
||||
color: #111;
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
.action-btn:hover { background: #ddd; }
|
||||
|
||||
/* Worksheet */
|
||||
.worksheet {
|
||||
display: none;
|
||||
max-width: 680px;
|
||||
margin: 68px auto 40px;
|
||||
padding: 32px 36px;
|
||||
background: white;
|
||||
}
|
||||
.worksheet.visible { display: block; }
|
||||
|
||||
.ws-header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
border-bottom: 2px solid #111;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.ws-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.ws-meta {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.ws-meta div { display: flex; align-items: center; gap: 6px; }
|
||||
.ws-meta span {
|
||||
border-bottom: 1.5px solid #111;
|
||||
min-width: 130px;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* Problems */
|
||||
.section { margin-bottom: 24px; }
|
||||
|
||||
.problems-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px 40px;
|
||||
}
|
||||
|
||||
.problem {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
padding: 7px 4px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
.prob-num {
|
||||
min-width: 26px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
color: #999;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.answer-line {
|
||||
border-bottom: 2px solid #111;
|
||||
min-width: 38px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.box-blank {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid #111;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1.5px dashed #ccc;
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Print */
|
||||
@media print {
|
||||
body { background: white; }
|
||||
.screen-nav { display: none !important; }
|
||||
.worksheet { display: none !important; margin: 0; padding: 0; }
|
||||
.worksheet.visible { display: block !important; }
|
||||
|
||||
.ws-header {
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.ws-title { font-size: 1.4rem; }
|
||||
.ws-meta { margin-top: 6px; font-size: 0.82rem; }
|
||||
.ws-meta span { min-width: 110px; }
|
||||
|
||||
.section { margin-bottom: 0; }
|
||||
.section-divider { margin: 8px 0; }
|
||||
|
||||
.problems-grid { gap: 2px 40px; }
|
||||
|
||||
.problem {
|
||||
font-size: 1.05rem;
|
||||
padding: 4px 4px;
|
||||
border-bottom-color: #ccc;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.answer-line { height: 16px; min-width: 32px; }
|
||||
.box-blank { width: 24px; height: 24px; }
|
||||
}
|
||||
@page { margin: 0.6in; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="screen-nav" id="nav">
|
||||
<label>Times Tables:</label>
|
||||
</nav>
|
||||
|
||||
<div id="worksheets-container"></div>
|
||||
|
||||
<script>
|
||||
function shuffle(arr) {
|
||||
const a = [...arr];
|
||||
for (let i = a.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[a[i], a[j]] = [a[j], a[i]];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
const nums = [1,2,3,4,5,6,7,8,9,10];
|
||||
|
||||
function renderProblems(n) {
|
||||
const sA = shuffle(nums);
|
||||
const sB = shuffle(nums);
|
||||
const sC = shuffle(nums);
|
||||
|
||||
const partA = sA.map((k, i) =>
|
||||
`<div class="problem"><span class="prob-num">${i+1}.</span><span>${n} × ${k} = <span class="answer-line"></span></span></div>`
|
||||
).join('');
|
||||
|
||||
const partB = sB.map((k, i) =>
|
||||
`<div class="problem"><span class="prob-num">${i+1}.</span><span>${k} × ${n} = <span class="answer-line"></span></span></div>`
|
||||
).join('');
|
||||
|
||||
const partC = sC.map((k, i) =>
|
||||
`<div class="problem"><span class="prob-num">${i+1}.</span><span>${n} × <span class="box-blank"></span> = ${n*k}</span></div>`
|
||||
).join('');
|
||||
|
||||
return `
|
||||
<div class="section"><h1>Part I.</h1><div class="problems-grid">${partA}</div></div>
|
||||
<hr class="section-divider">
|
||||
<div class="section"><h1>Part II.</h1><div class="problems-grid">${partB}</div></div>
|
||||
<hr class="section-divider">
|
||||
<div class="section"><h1>Part III.</h1><div class="problems-grid">${partC}</div></div>
|
||||
`;
|
||||
}
|
||||
|
||||
function buildWorksheet(n) {
|
||||
return `
|
||||
<div class="worksheet" id="ws-${n}" data-n="${n}">
|
||||
<div class="ws-header">
|
||||
<div class="ws-title">Multiplying by ${n}</div>
|
||||
<div class="ws-meta">
|
||||
<div>Name: <span></span></div>
|
||||
<div>Date: <span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="problems" id="problems-${n}">
|
||||
${renderProblems(n)}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Build nav and worksheets
|
||||
const container = document.getElementById('worksheets-container');
|
||||
const nav = document.getElementById('nav');
|
||||
|
||||
for (let n = 2; n <= 9; n++) {
|
||||
container.innerHTML += buildWorksheet(n);
|
||||
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'tab-btn';
|
||||
btn.textContent = '\u00d7' + n;
|
||||
btn.dataset.n = n;
|
||||
btn.onclick = () => showSheet(n);
|
||||
nav.appendChild(btn);
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'nav-actions';
|
||||
|
||||
const randomizeBtn = document.createElement('button');
|
||||
randomizeBtn.className = 'action-btn';
|
||||
randomizeBtn.textContent = '\uD83D\uDD00 Randomize';
|
||||
randomizeBtn.onclick = () => {
|
||||
const ws = document.querySelector('.worksheet.visible');
|
||||
if (!ws) return;
|
||||
const n = +ws.dataset.n;
|
||||
document.getElementById('problems-' + n).innerHTML = renderProblems(n);
|
||||
};
|
||||
|
||||
const printBtn = document.createElement('button');
|
||||
printBtn.className = 'action-btn';
|
||||
printBtn.textContent = '\uD83D\uDDA8 Print';
|
||||
printBtn.onclick = () => window.print();
|
||||
|
||||
actions.appendChild(randomizeBtn);
|
||||
actions.appendChild(printBtn);
|
||||
nav.appendChild(actions);
|
||||
|
||||
function showSheet(n) {
|
||||
document.querySelectorAll('.worksheet').forEach(el => el.classList.remove('visible'));
|
||||
document.querySelector('#ws-' + n).classList.add('visible');
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', +b.dataset.n === n));
|
||||
}
|
||||
|
||||
showSheet(2);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user