---

Professional Quiz Generator

A sophisticated, browser-based quiz application that allows users to create, take, and review quizzes from custom JSON data. This single-page application is built with vanilla JavaScript, HTML, and CSS, offering a clean, professional, and responsive user experience without any server-side dependencies.

🚀 View Live Demo

✨ Features

• Dual Input Methods: Load quizzes by selecting a local .json file or by pasting raw JSON data directly into the text area.
• 🤖 AI Prompt Helper: A built-in tool that generates a perfectly structured prompt for AI models (like ChatGPT, Claude, etc.) to create quiz data in the required format.
• Detailed Results & Analysis: After submitting a quiz, receive an instant score, a percentage, and a question-by-question breakdown showing your answer, the correct answer, and a detailed explanation.
• 📚 Persistent Quiz History: Your quiz results are automatically saved to your browser's local storage. You can view a list of past attempts and review the detailed results for any quiz you've taken.
• 🔍 Quick Search Functionality: Each question in the results view includes a "Search" button to quickly look up the question on Google.
• 📋 Copyable Summary: Easily copy a simple, text-based summary of your results to the clipboard.
• Professional & Responsive UI: A modern, clean interface built with a professional color scheme and layout that works seamlessly on desktop and mobile devices.
• Zero Dependencies: Runs entirely in the browser. No installation, build steps, or external libraries are required.

🚀 How to Use

Using the Professional Quiz Generator is simple and intuitive.

1. Go to the Live Demo.
2. Choose your quiz source:
   • Option 1: Load from File: Click the "Select Quiz File (.json)" button and choose a valid JSON file from your computer. The quiz will start automatically.
   • Option 2: Paste JSON Data: Paste your quiz data into the text area and click "Start Quiz from Text".
3. Don't have a JSON file? Use the AI Prompt Helper:
   • Expand the "Instructions & AI Prompt Helper" section.
   • Fill in the Topic, Number of Questions, and other optional fields.
   • Click the "Copy AI Prompt" button.
   • Paste the copied prompt into your preferred AI chatbot (e.g., ChatGPT).
   • Copy the JSON output from the AI and paste it into the text area in the quiz app.
4. Take the Quiz: Answer all the multiple-choice questions.
5. Submit & Review: Click "Submit Answers" to see your score, a detailed breakdown of your results, and a summary table.
6. View History: Click the "View Quiz History" button on the setup page to review your past quiz attempts.

📁 JSON Data Format

To create your own quiz, the JSON data must be an array of objects. Each object represents a single question and must contain the following four keys:

• question (string): The text of the question.
• options (array of strings): An array containing the multiple-choice options (typically 4).
• answer (string): The correct answer. This value must exactly match one of the strings in the options array.
• explanation (string): A brief explanation for why the answer is correct.

Example:

[
  {
    "question": "What is the capital of Japan?",
    "options": ["Beijing", "Seoul", "Tokyo", "Bangkok"],
    "answer": "Tokyo",
    "explanation": "Tokyo has been the capital of Japan since 1868 when Emperor Meiji moved the Imperial Court from Kyoto to Edo, which was renamed Tokyo."
  },
  {
    "question": "Which CSS property is used to change the text color of an element?",
    "options": ["font-color", "text-color", "color", "font-style"],
    "answer": "color",
    "explanation": "The 'color' property in CSS is used to set the color of the text content of an element."
  }
]

🛠️ Technology Stack

This project was built using fundamental web technologies, demonstrating the power of a dependency-free frontend application.

• HTML5: For the structure and content.
• CSS3: For professional styling, including CSS Variables, Flexbox, and a responsive layout.
• Vanilla JavaScript (ES6+): For all logic, including DOM manipulation, event handling, the FileReader API for file uploads, the Clipboard API, and localStorage for history management.

💻 Local Development

To run this project on your local machine:

1. Clone the repository:

   git clone https://github.com/kuldeep-dilliwar/quizzz.git

2. Navigate to the project directory:

   cd quizzz

3. Open the index.html file in your preferred web browser.

That's it! No complex setup or dependencies are needed.