GitBlixt

teagles / quiz-craft

public
0
Files Issues Pull Requests Wiki Pipelines
Clone
main
1 Branch 0 Tags
2024071221-quiz-craft-development.md
Blame History Raw Edit 5.8 KB

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

{

  "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

// 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

// 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 Information