Blackboard • nth Term
@import url(‘
https://fonts.googleapis.com/css2?family=Schoolbell&display=swap’);
body {
margin: 0;
padding: 15px;
min-height: 100vh;
background: #0a0a0a;
color: #f5e8c7;
font-family: ‘Schoolbell’, cursive, sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.blackboard {
background: #111111;
border: 18px solid #3a2f1f;
border-radius: 12px;
box-shadow: 0 0 0 10px #2a1f0f, inset 0 0 60px rgba(0,0,0,0.8);
width: 100%;
max-width: 680px;
padding: clamp(20px, 4vw, 35px) clamp(15px, 3vw, 30px);
position: relative;
box-sizing: border-box;
}
.blackboard::before {
content: ”;
position: absolute;
top: -12px; left: -12px; right: -12px; bottom: -12px;
border: 6px solid #5a4630;
border-radius: 18px;
pointer-events: none;
}
h1 {
text-align: center;
font-size: clamp(1.9rem, 6vw, 2.5rem);
margin: 0 0 8px 0;
color: #f5e8c7;
}
.subtitle {
text-align: center;
margin-bottom: 18px;
font-size: clamp(1rem, 3.5vw, 1.25rem);
color: #d4c3a3;
}
.stats {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: clamp(1.1rem, 4vw, 1.35rem);
}
.sequence {
font-size: clamp(1.5rem, 5.5vw, 2rem);
text-align: center;
margin: 18px 0;
padding: 14px;
background: rgba(0,0,0,0.4);
border-radius: 8px;
border: 2px dashed #d4c3a3;
}
.form {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 18px 0;
}
#answer {
font-family: ‘Schoolbell’, cursive;
font-size: clamp(1.6rem, 5.5vw, 2.1rem);
width: 100%;
max-width: 300px;
text-align: center;
padding: 12px;
background: #1a1a1a;
color: #f5e8c7;
border: 3px solid #d4c3a3;
border-radius: 10px;
}
.submit-btn {
font-family: ‘Schoolbell’, cursive;
font-size: clamp(1.25rem, 4vw, 1.55rem);
padding: 12px 26px;
background: #d4c3a3;
color: #111;
border: none;
border-radius: 8px;
cursor: pointer;
}
#feedback {
font-size: clamp(1.35rem, 4.5vw, 1.7rem);
min-height: 65px;
text-align: center;
margin: 15px 0;
}
.keyboard {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
max-width: 420px;
margin: 22px auto 10px;
}
.key {
font-family: ‘Schoolbell’, cursive;
background: #222;
color: #f5e8c7;
padding: 13px 0;
font-size: clamp(1.2rem, 4.5vw, 1.55rem);
border-radius: 8px;
text-align: center;
cursor: pointer;
border: 2px solid #555;
}
.key:active {
background: #d4c3a3;
color: #111;
}
.level-info {
text-align: center;
font-size: 1rem;
color: #a38f6b;
margin-top: 10px;
}
Find The Nth Term!
Type the expression (e.g. 3n + 2 or 5n)
Level: 1
Score: 0
Lives: ❤️❤️❤️
2, 4, 6, 8, 10, …
1
2
3
4
5
6
7
8
9
0
n
+
–
⌫
C
Pure Timetables → Shifted → Decreasing
let score = 0, level = 1, lives = 3, correctA = 0, correctB = 0;
const levelEl = document.getElementById(“level”),
scoreEl = document.getElementById(“score”),
livesEl = document.getElementById(“lives”),
sequenceEl = document.getElementById(“sequence”),
answerInput = document.getElementById(“answer”),
feedbackEl = document.getElementById(“feedback”);
function generateProblem() {
let first, diff;
if (level <= 2) {
diff = Math.floor(Math.random() * 6) + 2;
first = diff;
} else if (level <= 6) {
diff = Math.floor(Math.random() * 7) + 2;
first = Math.floor(Math.random() * 12) + 3;
} else {
diff = -(Math.floor(Math.random() * 6) + 2);
first = Math.floor(Math.random() * 25) + 15;
}
correctA = diff;
correctB = first – diff;
let terms = [];
for (let i = 0; i < 6; i++) terms.push(first + i * diff);
sequenceEl.textContent = terms.join(", ") + ", …";
}
function addToAnswer(val) { answerInput.value += val; }
function backspace() { answerInput.value = answerInput.value.slice(0, -1); }
function clearAnswer() { answerInput.value = ""; }
function parseExpression(str) {
str = str.replace(/\s+/g, '');
const match = str.match(/^(-?\d*)n?([+-]?\d*)$/i);
if (!match) return null;
let a = match[1] || '1';
if (a === '' || a === '+') a = 1;
if (a === '-') a = -1;
a = parseInt(a);
let b = match[2] || '0';
b = parseInt(b);
return { a, b };
}
function checkAnswer() {
const input = answerInput.value.trim();
if (!input) {
feedbackEl.textContent = "Please enter an expression";
feedbackEl.style.color = "#ffcc66";
return;
}
const parsed = parseExpression(input);
if (!parsed) {
feedbackEl.textContent = "Use format like 3n + 2 or 5n";
feedbackEl.style.color = "#ffcc66";
return;
}
if (parsed.a === correctA && parsed.b === correctB) {
score += 15 + level * 4;
scoreEl.textContent = score;
feedbackEl.innerHTML = `✅ Excellent!
The expression is
${correctA}n ${correctB >= 0 ? ‘+’ : ”} ${correctB}`;
feedbackEl.style.color = “#a8ff9e”;
level++;
levelEl.textContent = level;
setTimeout(() => { resetForm(); generateProblem(); }, 1600);
} else {
lives–;
livesEl.textContent = “❤️”.repeat(Math.max(0, lives));
feedbackEl.innerHTML = `❌ Correct:
${correctA}n ${correctB >= 0 ? ‘+’ : ”} ${correctB}`;
feedbackEl.style.color = “#ff9e9e”;
if (lives { resetForm(); generateProblem(); }, 2000);
}
}
function resetForm() {
answerInput.value = “”;
feedbackEl.textContent = “”;
}
function gameOver() {
feedbackEl.innerHTML = `Game Over!
Final Score:
${score}Highest Level: ${level}`;
feedbackEl.style.color = “#ffcc66”;
const restart = document.createElement(“button”);
restart.textContent = “Play Again”;
restart.className = “submit-btn”;
restart.style.marginTop = “15px”;
restart.onclick = () => location.reload();
document.querySelector(“.blackboard”).appendChild(restart);
}
document.addEventListener(“keydown”, e => { if (e.key === “Enter”) checkAnswer(); });
generateProblem();
levelEl.textContent = level;
Mr Corezzola 