<!DOCTYPE html>

<head>

<title>TSquared Word Quiz</title>

<style>

:root {

--bg: #0b1020;

--card: #151b2f;

--accent: #f4b400;

--accent-soft: #f4b40022;

--text-main: #fdfdfd;

--text-soft: #c5c8e6;

--wrong: #ff4d4f;

--right: #00c853;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: radial-gradient(circle at top, #283593 0, #0b1020 45%, #000 100%);

color: var(--text-main);

padding: 16px;

}

.game-shell {

width: 100%;

max-width: 520px;

background: linear-gradient(145deg, #171d33, #0f1424);

border-radius: 18px;

padding: 20px 18px 24px;

box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);

border: 1px solid rgba(255, 255, 255, 0.04);

}

.logo-row {

display: flex;

align-items: center;

gap: 10px;

margin-bottom: 12px;

}

.logo-mark {

width: 34px;

height: 34px;

border-radius: 12px;

border: 2px solid var(--accent-soft);

display: flex;

align-items: center;

justify-content: center;

font-weight: 700;

font-size: 18px;

color: var(--accent);

background: #090d1a;

box-shadow: 0 0 10px rgba(244, 180, 0, 0.35);

}

.logo-text {

display: flex;

flex-direction: column;

}

.logo-text span:first-child {

font-size: 13px;

letter-spacing: 0.08em;

text-transform: uppercase;

color: var(--text-soft);

}

.logo-text span:last-child {

font-size: 16px;

font-weight: 600;

}

.progress-row {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 10px;

font-size: 13px;

color: var(--text-soft);

}

.progress-bar {

width: 100%;

height: 7px;

border-radius: 999px;

background: #050815;

overflow: hidden;

margin-bottom: 16px;

border: 1px solid rgba(255, 255, 255, 0.06);

}

.progress-bar-fill {

width: 0%;

height: 100%;

background: linear-gradient(90deg, #f4b400, #ffd54f);

transition: width 0.3s ease;

}

.card {

background: radial-gradient(circle at top left, #28359355, #090d1a 55%);

border-radius: 14px;

padding: 16px 14px 16px;

border: 1px solid rgba(255, 255, 255, 0.06);

margin-bottom: 14px;

}

.question-label {

font-size: 12px;

letter-spacing: 0.12em;

text-transform: uppercase;

color: var(--text-soft);

margin-bottom: 6px;

}

.question-text {

font-size: 18px;

line-height: 1.3;

font-weight: 600;

}

.hint-text {

margin-top: 8px;

font-size: 13px;

color: var(--text-soft);

}

.answers {

display: flex;

flex-direction: column;

gap: 10px;

margin: 10px 0 4px;

}

button.answer-btn {

border-radius: 12px;

border: 1px solid rgba(255, 255, 255, 0.08);

background: #111629;

color: var(--text-main);

padding: 10px 12px;

font-size: 15px;

text-align: left;

cursor: pointer;

display: flex;

justify-content: space-between;

align-items: center;

transition: transform 0.08s ease, box-shadow 0.08s ease,

border-color 0.14s ease, background 0.14s ease;

}

button.answer-btn span.option-label {

font-size: 13px;

text-transform: uppercase;

letter-spacing: 0.12em;

color: var(--text-soft);

margin-right: 10px;

}

button.answer-btn span.option-text {

flex: 1;

}

button.answer-btn:hover {

transform: translateY(-1px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);

border-color: var(--accent-soft);

}

button.answer-btn.correct {

border-color: var(--right);

background: rgba(0, 200, 83, 0.08);

}

button.answer-btn.wrong {

border-color: var(--wrong);

background: rgba(255, 77, 79, 0.08);

}

button.answer-btn.disabled {

pointer-events: none;

opacity: 0.82;

}

.feedback-row {

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 6px;

font-size: 13px;

}

.feedback-message {

min-height: 18px;

}

.feedback-message.correct {

color: var(--right);

}

.feedback-message.wrong {

color: var(--wrong);

}

.primary-btn {

border-radius: 999px;

border: none;

padding: 10px 18px;

font-size: 14px;

font-weight: 600;

letter-spacing: 0.06em;

text-transform: uppercase;

cursor: pointer;

background: linear-gradient(135deg, #f4b400, #ffd54f);

color: #111;

box-shadow: 0 10px 26px rgba(244, 180, 0, 0.4);

display: inline-flex;

align-items: center;

gap: 6px;

}

.primary-btn:disabled {

opacity: 0.6;

cursor: default;

box-shadow: none;

}

.score-row {

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 6px;

font-size: 13px;

color: var(--text-soft);

}

.final-screen {

text-align: center;

padding: 12px 4px 4px;

}

.final-score {

font-size: 34px;

font-weight: 700;

margin: 8px 0;

}

.final-message {

font-size: 15px;

color: var(--text-soft);

margin-bottom: 14px;

}

@media (max-width: 480px) {

.game-shell {

padding: 16px 14px 18px;

}

.question-text {

font-size: 17px;

}

</style>

</head>

<body>

<span>TSquared Word Lab</span>

<span>Quick Quiz</span>

</div>

<span id="questionCounter">Question 1 of 8</span>

<span id="scoreDisplay">Score: 0</span>

</div>

</div>

<div class="question-label">Question</div>

</button>

</div>

<span>Tap an answer to lock it in.</span>

</div>

<div class="question-label">Finished</div>

<div class="question-text">Quiz Complete</div>

<button id="playAgainBtn" class="primary-btn">Play Again</button>

</div>

// Question bank – you can edit or add more later

const questions = [

{

question: "Which word best matches the meaning: 'to make something better'?",

hint: "Think about upgrades or improvements.",

options: ["Damage", "Improve", "Ignore", "Delay"],

correctIndex: 1

{

question: "Which word is closest in meaning to: 'honest'?",

hint: "A quality you'd want in a good friend.",

options: ["Fair", "Secret", "Silent", "Wild"],

correctIndex: 0

{

question: "Which word is the opposite of: 'complex'?",

hint: "You might say this about easy instructions.",

options: ["Simple", "Crowded", "Noisy", "Hidden"],

correctIndex: 0

{

question: "Which word

question: "Which word best matches the meaning: 'to assist'?",

hint: "You might do this when someone needs help.",

options: ["Watch", "Help", "Judge", "Refuse"],

correctIndex: 1

{

question: "Which word is closest in meaning to: 'quickly'?",

hint: "How you move when you are late.",

options: ["Slowly", "Gently", "Rapidly", "Quietly"],

correctIndex: 2

{

question: "Which word is closest in meaning to: 'calm'?",

hint: "Opposite of stressed or panicked.",

options: ["Nervous", "Relaxed", "Loud", "Angry"],

correctIndex: 1

{

question: "Which word best matches the meaning: 'to begin'?",

hint: "What you do at the start of a project.",

options: ["Finish", "Repeat", "Start", "Stop"],

correctIndex: 2

{

question: "Which word is closest in meaning to: 'protect'?",

hint: "What you do for people or animals you care about.",

options: ["Harm", "Guard", "Forget", "Fear"],

correctIndex: 1

}

];

const questionText = document.getElementById("questionText");

const hintText = document.getElementById("hintText");

const answersContainer = document.getElementById("answersContainer");

const feedback = document.getElementById("feedback");

const nextBtn = document.getElementById("nextBtn");

const questionCounter = document.getElementById("questionCounter");

const scoreDisplay = document.getElementById("scoreDisplay");

const progressFill = document.getElementById("progressFill");

const streakDisplay = document.getElementById("streakDisplay");

const quizCard = document.getElementById("quizCard");

const finalCard = document.getElementById("finalCard");

const finalScore = document.getElementById("finalScore");

const finalMessage = document.getElementById("finalMessage");

const playAgainBtn = document.getElementById("playAgainBtn");

let currentIndex = 0;

let score = 0;

let streak = 0;

let answered = false;

function renderQuestion() {

const q = questions[currentIndex];

questionText.textContent = q.question;

hintText.textContent = q.hint;

questionCounter.textContent = `Question ${currentIndex + 1} of ${questions.length}`;

scoreDisplay.textContent = `Score: ${score}`;

streakDisplay.textContent = streak >= 2 ? `Streak: ${streak} ✅` : "";

progressFill.style.width = `${((currentIndex) / questions.length) * 100}%`;

answersContainer.innerHTML = "";

feedback.textContent = "";

feedback.className = "feedback-message";

nextBtn.disabled = true;

answered = false;

const labels = ["A", "B", "C", "D"];

q.options.forEach((option, idx) => {

const btn = document.createElement("button");

btn.className = "answer-btn";

btn.innerHTML = `

<span class="option-label">${labels[idx]}</span>

<span class="option-text">${option}</span>

btn.addEventListener("click", () => handleAnswer(idx, btn));

answersContainer.appendChild(btn);

});

}

function handleAnswer(index, button) {

if (answered) return;

answered = true;

const q = questions[currentIndex];

const buttons = document.querySelectorAll(".answer-btn");

buttons.forEach((btn, idx) => {

btn.classList.add("disabled");

if (idx === q.correctIndex) {

btn.classList.add("correct");

}

});

if (index === q.correctIndex) {

score++;

streak++;

feedback.textContent = "Nice! That's correct.";

feedback.className = "feedback-message correct";

} else {

streak = 0;

button.classList.add("wrong");

feedback.textContent = `Good try. The correct answer was "${q.options[q.correctIndex]}".`;

feedback.className = "feedback-message wrong";

}

scoreDisplay.textContent = `Score: ${score}`;

streakDisplay.textContent = streak >= 2 ? `Streak: ${streak} ✅` : "";

nextBtn.disabled = false;

progressFill.style.width = `${((currentIndex + 1) / questions.length) * 100}%`;

}

nextBtn.addEventListener("click", () => {

if (currentIndex < questions.length - 1) {

currentIndex++;

renderQuestion();

} else {

showFinalScreen();

}

});

function showFinalScreen() {

quizCard.style.display = "none";

finalCard.style.display = "block";

finalScore.textContent = `${score} / ${questions.length}`;

let msg = "";

const pct = (score / questions.length) * 100;

if (pct === 100) {

msg = "Perfect! Word wizard status unlocked. 🔥";

} else if (pct >= 75) {

msg = "Strong work! Your vocabulary is sharp. Keep going. 💪";

} else if (pct >= 50) {

msg = "Nice start. A little more practice and you’ll be unstoppable.";

} else {

msg = "Every try builds skill. Play again and watch your score climb.";

}

finalMessage.textContent = msg;

}

playAgainBtn.addEventListener("click", () => {

score = 0;

streak = 0;

currentIndex = 0;

quizCard.style.display = "block";

finalCard.style.display = "none";

renderQuestion();

});

renderQuestion();

</script>

</body>

</html>