Build a Quiz Generator with AI

Build a single-page quiz generator as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17 and a centered content area (max-width 680px). The accent color is #8b5cf6 (purple). The app has three views: Quiz Library, Quiz Builder, and Quiz Taker. Navigation between views uses simple JavaScript state management (no router needed). The Quiz Library is the default landing view. The Quiz Library view shows a list of saved quizzes as cards. Each card displays the quiz title, number of questions, date created, and a "best score" badge if the quiz has been taken before. Each card has three action buttons: "Take Quiz" (accent color), "Edit" (gray outline), and "Delete" (red text, with confirmation dialog). At the top, a prominent "Create New Quiz" button opens the Quiz Builder. If no quizzes exist, show a friendly empty state: "No quizzes yet. Create your first quiz to get started!" with an illustration-like CSS shape (stacked cards icon made with CSS borders). The Quiz Builder view has a form for creating or editing a quiz. At the top, a text input for the quiz title (required, placeholder: "My Geography Quiz") and an optional description textarea. Below, a questions list where each question is an expandable card. The "Add Question" button at the bottom opens a new question form inline. Each question form has: a question type selector (radio buttons: "Multiple Choice" or "True/False"), a question text textarea, and answer options. For Multiple Choice: four answer input fields (A, B, C, D) with a radio button next to each to mark the correct answer. The correct answer radio button has an accent color fill. Users must fill at least 2 answer options and select one correct answer. For True/False: simply two radio buttons "True" and "False" with one selected as correct. Each question card shows its number, the question text truncated to one line, the type badge, and a collapse/expand toggle. Include a drag handle for reordering questions (implement with mousedown/touchstart drag and drop), and a delete button per question. The builder has a "Save Quiz" button that validates: title must not be empty, at least 2 questions required, each question must have text and a correct answer marked. On validation failure, scroll to the first error and show an inline red error message. Saved quizzes go to localStorage and the user returns to the Quiz Library. The Quiz Taker view shows one question at a time with a progress bar at the top ("Question 3 of 15"). The question text is displayed in large font (1.3rem). Answer options are displayed as clickable cards with rounded borders. When clicked, the selected option gets the accent color border. A "Next" button advances to the next question. Users can navigate back to previous questions and change answers — their selections are preserved. The last question shows "Submit Quiz" instead of "Next." After submission, show a Results screen with: score (correct/total), percentage with a large circular progress ring drawn with CSS (green if 80%+, yellow if 50-79%, red if under 50%), time taken, and a detailed question-by-question review. In the review, each question shows the question text, the user's selected answer (highlighted green if correct, red if wrong), and the correct answer (always shown in green with a checkmark). Wrong answers show the correct answer below with "Correct answer:" label. Add a "Share Results" button that generates a shareable text string: "I scored 8/10 (80%) on [Quiz Title]! Try it yourself:" and copies it to clipboard. Also add a "Retake Quiz" button that resets answers and restarts, and a "Back to Library" button. Store all quiz data (questions, answers, user attempts with timestamps and scores) in localStorage. Keep the last 5 attempts per quiz so users can see their score history in the quiz card on the library view as a small sparkline-style trend (show dots representing scores). Make it responsive: on mobile, answer options stack vertically with larger touch targets (min-height 48px), and the quiz builder form uses full-width inputs. Add keyboard navigation: Enter to advance, number keys 1-4 to select answers in multiple choice. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].