Subject and Predicate Quiz
by PrismRaven55519 lines27.0 KB
<!doctype html>
<html lang="en">
<head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260818-05-4bbf81c","C":{"Abril Fatface":"YACgEZbkUVE,0","Alfa Slab One":"YACgEYS9sJU,0","Anton":"YACgEcYqQ-A,0","Archivo":"YAHO2-t-jNE,0","Arial":"YAGyDvJ_4Ts,0","Bebas Neue":"YACgESME5ew,0","Bricolage Grotesque":"YAFyMcdwzpc,0","Canva Sans":"YAFLd8sKbwc,2","Caveat":"YALBs2ploWQ,0","Comic Sans MS":"YAHO2VMiyZo,0","Cormorant Garamond":"YAFdJhX-538,0","Courier New":"YAGzXiGs0_8,0","DM Sans":"YAD1aU3sLnI,0","DM Serif Display":"YAD1aYG82rc,0","Forum":"YACgEcnnqB4,0","Fraunces":"YAEul-FRQw4,0","Georgia":"YAGzXkO0pEM,0","Helvetica Neue":"YAFcf6CtJfI,0","Impact":"YAFcfnjI7Vk,0","Inter":"YAFdJvSyp_k,3","Iowan Old Style":"YAGNIFa8j9o,0","Jacques Francois":"YAHO2a5g66Q,0","JetBrains Mono":"YAFdJksXcAk,0","Libre Baskerville":"YACgEUFdPdA,0","Manrope":"YAHO2b2feC4,0","Merriweather":"YACgEXvHxxs,0","Montserrat":"YADLjI9qxTA,0","Nunito":"YACgEX8C5Gg,0","Oleo Script":"YACgEQQ14jI,0","Phantom Sans":"YAHO2E8Pb88,0","Playfair Display":"YACgEYmuCJE,0","Poppins":"YAFdJjbTu24,1","Press Start 2P":"YAFyGr-8pmQ,0","Quicksand":"YADWjpfPmdk,0","Raleway":"YACgEVg3xZg,0","Segoe UI":"YAHNdRD1Klw,0","Source Sans 3":"YAG4lO1Mj10,0","Spectral":"YAHO2rVUHIM,0","Times New Roman":"YAGzXW3gftg,0","Times":"YAGzXW3gftg,0","Ubuntu":"YACgERDU--Q,0","Work Sans":"YAGXhLOKv44,0","Yellowtail":"YACgEYG4kG4,0","ui-monospace":"YADlN8CFZ8Q,0","ui-sans-serif":"YACkoN-xg4g,0"}}');</script><script src="/_sdk/7949ff62d67710d5.telemetry_sdk.js" integrity="sha512-KIvXA82Di44YY/RH9/63A9MuTuavYgDFG8PfErJn7Wli4K0LAOk+coo/aPXk3+ZNL96nHh9VYD4PE+fLes+laQ=="></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subject and Predicate Quiz</title>
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--ink: #16324f;
--paper: #fffdf5;
--blue: #2a9dcb;
--yellow: #ffd54a;
--coral: #f46c5e;
--mint: #63c7ad;
}
* { box-sizing: border-box; }
body {
margin: 0;
width: 100%;
min-height: 100%;
font-family: "Libre Franklin", sans-serif;
color: var(--ink);
overflow-x: hidden;
}
.app-shell {
width: 100%;
min-height: calc(100 * min(var(--vh, 1vh), 1vh));
position: relative;
padding: 28px 18px 42px;
isolation: isolate;
}
.app-shell::before,
.app-shell::after {
content: "";
position: fixed;
z-index: -1;
border-radius: 999px;
opacity: .55;
pointer-events: none;
}
.app-shell::before {
width: 260px;
height: 260px;
background: #ffd54a;
top: -105px;
left: -95px;
}
.app-shell::after {
width: 340px;
height: 340px;
background: #68d2c1;
right: -155px;
bottom: -130px;
}
.quiz-wrap {
width: 100%;
max-width: 850px;
margin: 0 auto;
}
.paper-card {
border: 4px solid #16324f;
box-shadow: 7px 7px 0 #16324f;
}
.title-card {
transform: rotate(-0.7deg);
}
.quiz-card {
position: relative;
overflow: hidden;
}
.quiz-card::after {
content: "";
position: absolute;
width: 145px;
height: 145px;
border-radius: 50%;
background: rgba(255, 213, 74, .38);
right: -48px;
top: -55px;
pointer-events: none;
}
.answer-choice {
border: 3px solid #16324f;
box-shadow: 4px 4px 0 #16324f;
transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.answer-choice:hover:not(:disabled) {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #16324f;
}
.answer-choice:active:not(:disabled) {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 #16324f;
}
.answer-choice:focus-visible,
.next-control:focus-visible,
.restart-control:focus-visible,
.sound-check:focus-visible + label {
outline: 4px solid #ffd54a;
outline-offset: 3px;
}
.answer-choice.correct {
background: #baf1d7 !important;
border-color: #19785f;
box-shadow: 4px 4px 0 #19785f;
}
.answer-choice.incorrect {
background: #ffd1ca !important;
border-color: #b74036;
box-shadow: 4px 4px 0 #b74036;
}
.question-view { display: none; }
.question-view.active { display: block; animation: pop-in .35s ease both; }
.feedback-box { display: none; }
.feedback-box.show { display: flex; animation: pop-in .25s ease both; }
@keyframes pop-in {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.mascot-bubble {
width: 52px;
height: 52px;
border: 3px solid #16324f;
display: grid;
place-items: center;
flex: 0 0 auto;
}
.progress-track {
height: 14px;
background: #d9eef5;
border: 3px solid #16324f;
border-radius: 999px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 10%;
background: #ffd54a;
border-right: 3px solid #16324f;
transition: width .3s ease;
}
.next-control,
.restart-control {
border: 3px solid #16324f;
box-shadow: 4px 4px 0 #16324f;
transition: transform .16s ease, box-shadow .16s ease;
}
.next-control:hover,
.restart-control:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #16324f;
}
.next-control:active,
.restart-control:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 #16324f;
}
.confetti-dot {
position: absolute;
border-radius: 50%;
opacity: .75;
pointer-events: none;
}
@media (max-width: 560px) {
.app-shell { padding: 18px 14px 34px; }
.paper-card { box-shadow: 5px 5px 0 #16324f; }
.answer-choice { box-shadow: 3px 3px 0 #16324f; }
}
</style>
<script src="/_sdk/0e8d3a91e1c6f495.data_sdk.js" type="text/javascript" integrity="sha512-c00oDoGjsMgluCLLEyVl3suwEkgjOGGplVFbsilUoBg4aMKNmsL3mwsc9r0dPn95qiSZyjBousQXgROkAW7p/w=="></script>
<script src="/_sdk/eba18683f23e5798.resizing_sdk.js" type="text/javascript" integrity="sha512-E0UWUllhwPXaNJtjyTKXWKrIE+FruPfFpO4mRmMDP2LI+U9bOizy5npCq6xx/JyWcvSK7D3TFf2wFR2Mha9kbA=="></script>
</head>
<body data-template-id="__page-root">
<div class="app-shell"><span class="confetti-dot bg-[#f46c5e] w-4 h-4 top-24 right-[13%]"></span> <span class="confetti-dot bg-[#ffd54a] w-3 h-3 top-[42%] left-[7%]"></span> <span class="confetti-dot bg-[#63c7ad] w-5 h-5 bottom-24 left-[14%]"></span>
<header class="quiz-wrap mb-7">
<section data-template-id="title-section" class="canva-banner title-card paper-card rounded-[28px] px-6 py-6 md:px-9 md:py-7">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<div class="flex items-center gap-3"><span class="rounded-full border-3 border-[#16324f] bg-[#ffd54a] p-2"> <i data-lucide="book-open" class="w-6 h-6"></i> </span>
<p data-template-id="lesson-tag" class="canva-tag m-0 font-extrabold uppercase tracking-[0.16em]"></p>
</div>
<h1 data-template-id="quiz-title" class="canva-text mt-3 font-extrabold leading-tight"></h1>
<p data-template-id="quiz-instructions" class="canva-text mt-2 mb-0 font-medium leading-relaxed"></p>
</div>
<div class="flex items-center gap-2 self-start rounded-full border-2 border-[#16324f] bg-white px-3 py-2 sm:self-center"><input id="sound-toggle" class="sound-check h-5 w-5 accent-[#2a9dcb]" type="checkbox" checked> <label data-template-id="sound-label" class="canva-text cursor-pointer font-bold" for="sound-toggle"></label>
</div>
</div>
</section>
</header>
<main class="quiz-wrap">
<section id="start-screen" data-template-id="start-panel" class="canva-panel paper-card quiz-card rounded-[30px] p-6 text-center md:p-10">
<div class="relative z-10">
<div data-template-id="start-badge" class="canva-tag mx-auto grid h-24 w-24 place-items-center rounded-full text-5xl">
🚀
</div>
<h2 data-template-id="start-title" class="canva-text mt-5 font-extrabold leading-tight"></h2>
<p data-template-id="start-copy" class="canva-text mx-auto mt-3 max-w-xl font-medium leading-relaxed"></p><button id="start-button" data-template-id="start-button" class="canva-button next-control mt-7 rounded-2xl px-8 py-4 font-extrabold" type="button"></button>
</div>
</section>
<section id="game-panel" data-template-id="game-panel" class="canva-panel paper-card quiz-card hidden rounded-[30px] p-5 md:p-8">
<div class="relative z-10 mb-7">
<div class="flex items-end justify-between gap-4">
<div>
<p data-template-id="progress-label" class="canva-text mb-1 font-extrabold uppercase tracking-[0.12em]"></p>
<p id="question-count" class="m-0 text-lg font-extrabold" aria-live="polite">Question 1 of 8</p>
</div>
<div class="rounded-2xl border-3 border-[#16324f] bg-[#ffd54a] px-4 py-2 text-center">
<p data-template-id="score-label" class="canva-text m-0 font-bold"></p>
<p id="score-count" class="m-0 text-xl font-extrabold" aria-live="polite">0</p>
</div>
</div>
<div class="progress-track mt-3" aria-hidden="true">
<div id="progress-fill" class="progress-fill"></div>
</div>
</div>
<div id="questions-area" class="relative z-10">
<article class="question-view active" data-question="0">
<p data-template-id="q1-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q1-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q1-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q1-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q1-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q1-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q1-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="1">
<p data-template-id="q2-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q2-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q2-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q2-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q2-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q2-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q2-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="2">
<p data-template-id="q3-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q3-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q3-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q3-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q3-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q3-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q3-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button>
</div>
</article>
<article class="question-view" data-question="3">
<p data-template-id="q4-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q4-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q4-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q4-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q4-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q4-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q4-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="4">
<p data-template-id="q5-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q5-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q5-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q5-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q5-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q5-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q5-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="5">
<p data-template-id="q6-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q6-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q6-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q6-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q6-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q6-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q6-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="6">
<p data-template-id="q7-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q7-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q7-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q7-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q7-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q7-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q7-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="7">
<p data-template-id="q8-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q8-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q8-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q8-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q8-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q8-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q8-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="8">
<p data-template-id="q9-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q9-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q9-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q9-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q9-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q9-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q9-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
<article class="question-view" data-question="9">
<p data-template-id="q10-prompt" class="canva-text mb-3 font-extrabold uppercase tracking-[0.1em]"></p>
<div data-template-id="q10-sentence-card" class="canva-card rounded-2xl p-5 md:p-6">
<p data-template-id="q10-sentence" class="canva-text m-0 font-bold leading-relaxed"></p>
</div>
<h2 data-template-id="q10-question" class="canva-text mt-6 mb-4 font-extrabold leading-snug"></h2>
<div class="grid gap-3"><button data-template-id="q10-a" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button> <button data-template-id="q10-b" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="true"></button> <button data-template-id="q10-c" class="canva-button answer-choice rounded-2xl p-4 text-left font-bold" type="button" data-correct="false"></button>
</div>
</article>
</div>
<section class="relative z-10 mt-6" aria-live="polite">
<div id="correct-feedback" data-template-id="correct-feedback" class="canva-banner feedback-box items-center gap-3 rounded-2xl p-4"><span class="mascot-bubble bg-[#ffd54a]">🎉</span>
<div>
<p data-template-id="correct-feedback-title" class="canva-text m-0 font-extrabold"></p>
<p data-template-id="correct-feedback-copy" class="canva-text mt-1 mb-0 font-medium"></p>
</div>
</div>
<div id="retry-feedback" data-template-id="retry-feedback" class="canva-banner feedback-box items-center gap-3 rounded-2xl p-4"><span class="mascot-bubble bg-[#ffd1ca]">💡</span>
<div>
<p data-template-id="retry-feedback-title" class="canva-text m-0 font-extrabold"></p>
<p data-template-id="retry-feedback-copy" class="canva-text mt-1 mb-0 font-medium"></p>
</div>
</div><button id="next-button" data-template-id="next-button" class="canva-button next-control mt-5 hidden w-full rounded-2xl px-5 py-4 font-extrabold" type="button"></button>
</section>
<section id="finish-screen" class="hidden relative z-10 py-4 text-center" aria-live="polite">
<div data-template-id="finish-badge" class="canva-tag mx-auto grid h-20 w-20 place-items-center rounded-full text-4xl">
⭐
</div>
<h2 data-template-id="finish-title" class="canva-text mt-5 font-extrabold"></h2>
<p data-template-id="finish-copy" class="canva-text mx-auto mt-2 max-w-lg font-medium leading-relaxed"></p>
<p id="final-score" class="mt-5 mb-6 text-3xl font-extrabold"></p><button id="restart-button" data-template-id="play-again-button" class="canva-button restart-control rounded-2xl px-7 py-4 font-extrabold" type="button"></button>
</section>
</section>
</main>
</div>
<script src="/_sdk/a051f9537983733d.editing_sdk.js" integrity="sha512-IWn3eBHnVt7zQ0Rp79J72qSgJoLbskCA9lcfY4retf+5km4LjuhSHpvx+182KCHmEZ6EbJtWqVsybpV8Sd8PQQ=="></script>
<script>
const questionViews = Array.from(document.querySelectorAll(".question-view"));
const questionCount = document.getElementById("question-count");
const scoreCount = document.getElementById("score-count");
const progressFill = document.getElementById("progress-fill");
const correctFeedback = document.getElementById("correct-feedback");
const retryFeedback = document.getElementById("retry-feedback");
const nextButton = document.getElementById("next-button");
const questionsArea = document.getElementById("questions-area");
const finishScreen = document.getElementById("finish-screen");
const finalScore = document.getElementById("final-score");
const restartButton = document.getElementById("restart-button");
const startScreen = document.getElementById("start-screen");
const gamePanel = document.getElementById("game-panel");
const startButton = document.getElementById("start-button");
const soundToggle = document.getElementById("sound-toggle");
let currentQuestion = 0;
let score = 0;
let answeredCorrectly = false;
let audioContext;
function playTone(type) {
if (!soundToggle.checked) return;
try {
audioContext = audioContext || new (window.AudioContext || window.webkitAudioContext)();
const now = audioContext.currentTime;
if (type === "correct") {
[523.25, 659.25, 783.99].forEach((frequency, index) => {
const oscillator = audioContext.createOscillator();
const gain = audioContext.createGain();
oscillator.type = "triangle";
oscillator.frequency.setValueAtTime(frequency, now + index * 0.11);
gain.gain.setValueAtTime(0.0001, now + index * 0.11);
gain.gain.exponentialRampToValueAtTime(0.13, now + index * 0.11 + 0.02);
gain.gain.exponentialRampToValueAtTime(0.0001, now + index * 0.11 + 0.24);
oscillator.connect(gain).connect(audioContext.destination);
oscillator.start(now + index * 0.11);
oscillator.stop(now + index * 0.11 + 0.25);
});
} else {
const oscillator = audioContext.createOscillator();
const gain = audioContext.createGain();
oscillator.type = "sine";
oscillator.frequency.setValueAtTime(220, now);
oscillator.frequency.exponentialRampToValueAtTime(150, now + 0.22);
gain.gain.setValueAtTime(0.0001, now);
gain.gain.exponentialRampToValueAtTime(0.12, now + 0.02);
gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.3);
oscillator.connect(gain).connect(audioContext.destination);
oscillator.start(now);
oscillator.stop(now + 0.32);
}
} catch (error) {
// The quiz remains fully usable if browser audio is unavailable.
}
}
function clearFeedback() {
correctFeedback.classList.remove("show");
retryFeedback.classList.remove("show");
nextButton.classList.add("hidden");
}
function updateProgress() {
questionCount.textContent = "Question " + (currentQuestion + 1) + " of " + questionViews.length;
scoreCount.textContent = score;
progressFill.style.width = ((currentQuestion + 1) / questionViews.length) * 100 + "%";
}
function showQuestion(index) {
questionViews.forEach((view, viewIndex) => {
view.classList.toggle("active", viewIndex === index);
view.querySelectorAll(".answer-choice").forEach(button => {
button.disabled = false;
button.classList.remove("correct", "incorrect");
});
});
answeredCorrectly = false;
clearFeedback();
updateProgress();
}
function handleAnswer(button) {
if (answeredCorrectly) return;
const isCorrect = button.dataset.correct === "true";
if (isCorrect) {
answeredCorrectly = true;
score += 1;
button.classList.add("correct");
button.closest(".question-view").querySelectorAll(".answer-choice").forEach(choice => {
choice.disabled = true;
});
scoreCount.textContent = score;
retryFeedback.classList.remove("show");
correctFeedback.classList.add("show");
nextButton.classList.remove("hidden");
playTone("correct");
} else {
button.classList.add("incorrect");
button.disabled = true;
correctFeedback.classList.remove("show");
retryFeedback.classList.add("show");
playTone("retry");
}
}
document.querySelectorAll(".answer-choice").forEach(button => {
button.addEventListener("click", () => handleAnswer(button));
});
startButton.addEventListener("click", () => {
startScreen.classList.add("hidden");
gamePanel.classList.remove("hidden");
currentQuestion = 0;
score = 0;
showQuestion(currentQuestion);
});
nextButton.addEventListener("click", () => {
if (currentQuestion < questionViews.length - 1) {
currentQuestion += 1;
showQuestion(currentQuestion);
} else {
questionsArea.classList.add("hidden");
correctFeedback.classList.remove("show");
retryFeedback.classList.remove("show");
nextButton.classList.add("hidden");
finishScreen.classList.remove("hidden");
questionCount.textContent = "Quiz complete!";
progressFill.style.width = "100%";
finalScore.textContent = "You scored " + score + " out of " + questionViews.length + "!";
playTone("correct");
}
});
restartButton.addEventListener("click", () => {
currentQuestion = 0;
score = 0;
finishScreen.classList.add("hidden");
questionsArea.classList.remove("hidden");
showQuestion(currentQuestion);
});
document.addEventListener("DOMContentLoaded", () => {
lucide.createIcons();
showQuestion(0);
});
</script>
</body>
</html>Game Source: Subject and Predicate Quiz
Creator: PrismRaven55
Libraries: none
Complexity: complex (519 lines, 27.0 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: subject-and-predicate-quiz-prismraven55" to link back to the original. Then publish at arcadelab.ai/publish.