vbyes

Prompt

Create a single, self-contained index.html file for an interactive browser quiz game that teaches indoor volleyball 6–2 rotations. It must run immediately by double-clicking the file—no server, packages, build tools, external APIs, images, fonts, or dependencies. Learning goal: Help a player understand that a 6–2 uses two setters opposite each other; the setter in the back row sets, while three front-row attackers remain available. Include the key overlap idea: at the moment of serve, players must preserve their required front/back and left/right relative order; after contact, they may transition. Game requirements: Use a responsive, polished dark volleyball-themed UI with court-orange, blue, and white accents. Display a six-zone court diagram labeled: Front row: Zone 4 (left front), Zone 3 (middle front), Zone 2 (right front) Back row: Zone 5 (left back), Zone 6 (middle back), Zone 1 (right back) Represent players with draggable or clickable markers, using roles such as S1, S2, OH1, OH2, MB1, MB2, OPP1, OPP2, and L. Include three modes: Learn Mode: brief explanation plus a diagram of the active back-row setter and the three front-row attackers. Rotation Challenge: show a rotation scenario and ask the user to identify which setter should set, whether the alignment is legal, or which player should move after the serve. Build the Rotation: give a target rotation and let the user place players on the court, then validate the answer. Cover all six clockwise rotations. Clearly show that players rotate clockwise when winning the serve back. Randomize question order and include at least 18 meaningful questions total. Give immediate feedback after every answer: Correct: explain the volleyball reason. Incorrect: explain the misconception, visually highlight the relevant zones, and allow one retry before showing the explanation. Track score, streak, completed rotations, accuracy, and a progress bar. Add a final results screen with a rotation-by-rotation breakdown and a Play Again button. Include an optional “Hints” toggle and a “Reset Progress” button. Make all controls keyboard accessible and add clear aria-label attributes. Store high score and user preferences using localStorage. Accuracy rules: Setters begin opposite each other in the rotational order, so when one setter is back row, the other is front row. The back-row setter runs the offense in a standard 6–2; the team retains three front-row attack options. Separate “rotational starting positions at serve” from “post-serve transition positions,” because players can move after the serve is contacted. Avoid presenting one universal serve-receive diagram as the only correct version; label diagrams as a common instructional arrangement where needed. Code quality: Put all HTML, CSS, and JavaScript in index.html. Organize quiz data in a clear JavaScript array so questions can be edited easily. Add concise comments around the rotation engine, overlap validator, and question-generation logic. Do not use placeholder buttons or incomplete features. At the top of the page, include a short “How to use” section: “Save this file as index.html, then open it in Chrome, Safari, Edge, or Firefox.”

A system prompt was added to support web rendering