GitBlixt
teagles/quiz-craft

session

Torey Heinz committed Jul 12, 2025
commit e91ac241c2e778629cdc5cc1e2308e88a17da4c4
Showing 2 changed files with 250 additions and 0 deletions
CLAUDE.md +77 -0
@@ @@ -0,0 +1,77 @@
+ # CLAUDE.md
+
+ This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+ ## Project Overview
+
+ Quiz Craft is a Vue.js application for creating and taking AI-generated assessments. It features pre-built 9th-grade assessments and supports custom quiz creation through file upload or AI generation.
+
+ ## Architecture
+
+ - **Framework**: Vue 3 with Composition API (`<script setup>`)
+ - **Build Tool**: Vite
+ - **Router**: Vue Router 4
+ - **Storage**: LocalStorage for uploaded assessments
+ - **Deployment**: Configured for Cloudflare Pages
+
+ ## Key Files
+
+ - `src/views/Home.vue` - Landing page with assessment list and upload functionality
+ - `src/views/Assessment.vue` - Quiz interface with pagination and scoring
+ - `src/router/index.js` - Route definitions
+ - `public/assessments/*.json` - Pre-built assessment files
+
+ ## Development Commands
+
+ ```bash
+ # Install dependencies
+ npm install
+
+ # Run development server
+ npm run dev
+
+ # Build for production
+ npm run build
+
+ # Preview production build
+ npm run preview
+ ```
+
+ ## Key Patterns
+
+ ### Assessment JSON Structure
+ ```json
+ {
+ "title": "Assessment Title",
+ "description": "Description",
+ "subjects": [{
+ "name": "Subject",
+ "questions": [{
+ "id": 1,
+ "question": "Question?",
+ "options": ["A", "B", "C", "D"],
+ "correctAnswer": 0
+ }]
+ }]
+ }
+ ```
+
+ ### Adding New Features
+ - Components use Vue 3 Composition API with `<script setup>`
+ - Styling is scoped to components
+ - Navigation state managed with Vue Router
+ - Uploaded assessments stored in localStorage with `assessment-${id}` keys
+
+ ## Deployment
+
+ Configured for Cloudflare Pages:
+ - Build command: `npm run build`
+ - Output directory: `dist`
+ - SPA routing handled by `public/_redirects`
+
+ ## Design System
+
+ - Primary color: #42b883 (Vue green)
+ - Max content width: 800px
+ - Questions per page: 5
+ - Logo: 48px height with 5px border radius
\ No newline at end of file
dev/sessions/2024071221-quiz-craft-development.md +173 -0
@@ @@ -0,0 +1,173 @@
+ # Quiz Craft Development Session
+
+ **Date**: July 12, 2024
+ **Overview**: Created a Vue.js quiz application with AI integration, file upload capabilities, and Cloudflare deployment configuration
+
+ ## Features Implemented
+
+ ### 1. Core Quiz Application
+ - **Vue.js + Vite Setup**: Modern development environment with hot reload
+ - **Assessment System**: JSON-based quiz structure with multiple subjects
+ - **Paginated Interface**: 5 questions per page with progress tracking
+ - **Dynamic Routing**: Access assessments via URLs like `/9th-grade-assessment`
+
+ ### 2. File Upload & AI Integration
+ - **Multiple Input Methods**:
+ - File upload for JSON assessments
+ - Direct JSON paste functionality
+ - AI prompt templates for generating assessments
+ - **LocalStorage Persistence**: Uploaded assessments saved across sessions
+ - **Validation**: Comprehensive JSON structure validation with error messages
+
+ ### 3. Navigation Enhancements
+ - **Skip Functionality**: Navigate without answering all questions
+ - **Keyboard Navigation**: Arrow keys (← →) for page navigation
+ - **Dual Navigation**: Buttons at top and bottom of quiz pages
+ - **Results Display**: Shows skipped questions and calculates percentages based on answered questions only
+
+ ### 4. Branding & UI
+ - **Custom Logo**: Quiz Craft logo with rounded corners and drop shadow
+ - **Sticky Header**: Logo and title that link to home page
+ - **Favicon Setup**: Multiple sizes for cross-platform compatibility
+ - **Responsive Design**: Mobile-friendly layout adjustments
+
+ ## Technical Decisions
+
+ ### Architecture Choices
+ - **Vue 3 Composition API**: Modern, performant approach with `<script setup>`
+ - **Vue Router**: Clean URL structure without hash routing
+ - **LocalStorage for Uploads**: Simple persistence without backend
+ - **JSON Assessment Format**: Flexible structure supporting multiple subjects and questions
+
+ ### UI/UX Decisions
+ - **5 Questions Per Page**: Optimal for user focus and mobile viewing
+ - **Progress Bar + Question Range**: Dual progress indicators for clarity
+ - **Tab Interface**: Clean organization of upload/paste/guide options
+ - **Green Primary Actions**: Consistent Vue.js branding (#42b883)
+
+ ### Deployment Strategy
+ - **Cloudflare Pages Ready**: `_redirects` file for SPA routing
+ - **Static Site Generation**: No server requirements, fully static
+ - **Public Repository**: MIT licensed for community use
+
+ ## Code Changes
+
+ ### Project Structure Created
+ ```
+ assessment-app/
+ ├── public/
+ │ ├── assessments/
+ │ │ ├── 9th-grade-assessment-chatgpt.json
+ │ │ ├── 9th-grade-assessment-grok.json
+ │ │ └── 10th-grade-assessment.json
+ │ ├── favicon-16x16.png
+ │ ├── favicon-32x32.png
+ │ ├── apple-touch-icon.png
+ │ └── quiz-craft-logo.jpg
+ ├── src/
+ │ ├── router/index.js
+ │ ├── views/
+ │ │ ├── Home.vue
+ │ │ └── Assessment.vue
+ │ ├── App.vue
+ │ └── main.js
+ └── index.html
+ ```
+
+ ### Key File Modifications
+
+ #### `src/views/Home.vue`
+ - Lines 7-17: Assessment list with uploaded badge
+ - Lines 19-121: Upload section with tabs (upload/paste/guide)
+ - Lines 181-235: AI prompt templates with full JSON structure
+ - Lines 357-377: Copy to clipboard functionality
+
+ #### `src/views/Assessment.vue`
+ - Lines 11-13: Question range display (e.g., "Questions 1-5 of 40")
+ - Lines 17-39: Top navigation with previous/next buttons
+ - Lines 173-215: Score calculation with skipped question tracking
+ - Lines 235-249: Keyboard navigation handlers
+
+ #### `src/App.vue`
+ - Lines 6-15: Header with logo and title
+ - Lines 41-58: Header styling with 800px max-width alignment
+ - Lines 60-65: Logo styling with 5px border-radius and shadow
+
+ #### `index.html`
+ - Lines 5-8: Favicon links for multiple sizes
+ - Line 9: Updated title to "Quiz Craft - AI-Powered Assessment Creator"
+
+ ## Key Patterns
+
+ ### Assessment JSON Structure
+ ```json
+ {
+ "title": "Assessment Title",
+ "description": "Brief description",
+ "subjects": [
+ {
+ "name": "Subject Name",
+ "questions": [
+ {
+ "id": 1,
+ "question": "Question text?",
+ "options": ["A", "B", "C", "D"],
+ "correctAnswer": 0 // 0-based index
+ }
+ ]
+ }
+ ]
+ }
+ ```
+
+ ### LocalStorage Pattern
+ ```javascript
+ // Store assessment
+ localStorage.setItem(`assessment-${id}`, JSON.stringify(data))
+
+ // Store uploaded list
+ localStorage.setItem('uploadedAssessments', JSON.stringify(list))
+
+ // Retrieve on mount
+ const stored = localStorage.getItem('uploadedAssessments')
+ if (stored) uploadedAssessments.value = JSON.parse(stored)
+ ```
+
+ ### Navigation State Management
+ ```javascript
+ // Computed properties for navigation
+ const isLastPage = computed(() =>
+ (currentPage.value + 1) * questionsPerPage >= totalQuestions.value
+ )
+
+ // Keyboard event handling
+ if (event.key === 'ArrowLeft' && currentPage.value > 0) {
+ previousPage()
+ }
+ ```
+
+ ## Next Steps
+
+ ### Immediate Enhancements
+ 1. **Success Notifications**: Add toast/notification when assessment uploaded
+ 2. **Delete Uploaded Assessments**: Add management UI for stored assessments
+ 3. **Export Results**: Allow users to download their quiz results
+ 4. **Dark Mode**: Theme toggle for better accessibility
+
+ ### Future Features
+ 1. **Backend Integration**: Save results and track progress over time
+ 2. **Timed Assessments**: Add optional time limits per question/quiz
+ 3. **Question Types**: Support for true/false, multiple select, fill-in-blank
+ 4. **Analytics Dashboard**: View aggregate results and common mistakes
+ 5. **Share Assessments**: Generate shareable links for custom quizzes
+
+ ### Deployment
+ - Repository ready at: https://github.com/toreyheinz/quiz-craft
+ - Configure Cloudflare Pages for automatic deployments
+ - Consider custom domain like quiz-craft.com
+
+ ## Repository Information
+ - **GitHub**: https://github.com/toreyheinz/quiz-craft
+ - **License**: MIT
+ - **Tech Stack**: Vue 3, Vite, Vue Router
+ - **Deployment Target**: Cloudflare Pages
\ No newline at end of file