301 lines
7.1 KiB
HTML
301 lines
7.1 KiB
HTML
<!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>
|
|
|