Skip to main content

Example prompt

ZapQuiz: Interactive Quiz Application 

DevelopmentPart Prompt (1)1

Project Overview

ZapQuiz is a Kahoot-like interactive quiz application that allows teachers to create quizzes and participants to join via QR codes, answering questions in real-time with a points-based scoring system.

Technology Stack

  • Backend: PHP
  • Frontend: HTML, CSS, JavaScript (responsive design)
  • Database: MySQL/MariaDB
  • CSS Framework: Tailwind CSS
  • Real-time Updates: SSE (Server-Snet events)
  • Installation: Must support subdirectory installation (e.g., https://www.server.com/zapquiz)

Development Phases

The project will be developed in three distinct phases:

  1. Teacher Authentication & Quiz Management (current focus)
  2. Quiz Session Initialization & Participant Onboarding
  3. Quiz Execution, Scoring & Results Display

Phase 1: Teacher Authentication & Quiz Management System

Requirements

User Authentication

  1. Create a secure login system for teachers with:
    • Username/email and password authentication
    • Password encryption using bcrypt
    • Session management
    • Basic "remember me" functionality
    • Password reset capability (optional)

Database Schema (Initial)

  1. Teachers Table:

    • id (PRIMARY KEY)
    • username
    • email
    • password (bcrypt hashed)
    • created_at
    • updated_at

  2. Quizzes Table:

    • id (PRIMARY KEY)
    • teacher_id (FOREIGN KEY)
    • title
    • description
    • unique_identifier (for QR code generation)
    • status (draft, active, completed)
    • created_at
    • updated_at

  3. Questions Table:

    • id (PRIMARY KEY)
    • quiz_id (FOREIGN KEY)
    • question_text (HTML-formatted)
    • image_path (optional)
    • display_order
    • time_limit (default: 30 seconds)
    • created_at
    • updated_at

  4. Answers Table:

    • id (PRIMARY KEY)
    • question_id (FOREIGN KEY)
    • answer_text
    • is_correct (boolean)
    • answer_option (A, B, C, or D)
    • created_at
    • updated_at

Teacher Dashboard Functionality

  1. Authentication Pages:

    • Login page
    • For now we don't need an registration page yet. Create one login wiht user admn, password admin123
    • No password recovery yet.

  2. Quiz Management:

    • List all quizzes with search/filter options
    • Create new quiz (with auto-generated unique identifier)
    • Edit existing quiz details
    • Delete quiz (with confirmation)
    • Duplicate quiz (optional)

  3. Question Management:

    • List all questions for a quiz
    • Add new questions with:
      • Question text (HTML editor)
      • Image upload capability
      • Four answer options (A, B, C, D)
      • Correct answer designation
      • Question reordering capability
    • Edit existing questions
    • Delete questions (with confirmation)

Technical Implementation Details

  1. Directory Structure:

    zapquiz/
├── assets/
│   ├── css/
│   ├── js/
│   ├── images/
│   └── uploads/
├── config/
│   └── database.php
├── includes/
│   ├── auth.php
│   ├── functions.php
│   └── header.php
├── models/
│   ├── Teacher.php
│   ├── Quiz.php
│   └── Question.php
├── views/
│   ├── auth/
│   ├── dashboard/
│   └── quiz/
├── index.php
└── .htaccess (for subdirectory configuration)

  2. URL Structure:

    • /zapquiz/ - Landing page
    • /zapquiz/login - Teacher login
    • /zapquiz/dashboard - Teacher dashboard
    • /zapquiz/quiz/create - Create new quiz
    • /zapquiz/quiz/{id}/edit - Edit quiz
    • /zapquiz/quiz/{id}/questions - Manage questions
    • /zapquiz/quiz/{id}/start - Initialize quiz (Phase 2)

  3. Security Considerations:

    • Input validation and sanitization
    • CSRF protection for forms
    • Session security
    • Proper handling of file uploads
    • Database query parameterization

UI/UX Requirements

  1. Teacher Dashboard:

    • Clean, professional interface using Tailwind CSS
    • Responsive design for both desktop and tablet use
    • Intuitive navigation between quizzes and questions
    • Visual indication of quiz status (draft, active, completed)

  2. Quiz & Question Editor:

    • User-friendly HTML editor for question text
    • Simple image upload with preview
    • Clear visual distinction between correct and incorrect answers
    • Drag-and-drop functionality for question reordering (optional)

Deliverables for Phase 1

  1. Functional teacher authentication system
  2. Complete quiz CRUD operations
  3. Question and answer management system
  4. Responsive UI built with Tailwind CSS
  5. Database with appropriate schema and relationships
  6. Installation instructions for subdirectory setup

Next Steps After Phase 1

Upon completion of Phase 1, development will proceed to Phase 2, focusing on quiz initialization, QR code generation, and participant onboarding.

--

Back to top