usulpro
/
math-tasks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
math-tasks/tasks.md

2.6 KiB
Raw Blame History

Math Tasks Generator — Setup Steps

Step 1: Initialize Node.js project

  • npm init -y with "type": "module"
  • Create .gitignore (node_modules/, output/)

Step 2: Install dependencies

  • puppeteer — HTML to PDF conversion (headless Chrome)
  • @tailwindcss/cli — Tailwind CSS v4 build tool (dev)
  • serve — static file server for HTML preview (dev)
  • concurrently — run CSS watch + preview server together (dev)

Step 3: Create directory structure

  • src/styles/main.css — Tailwind source with A4/print styles
  • src/scripts/generate-pdf.mjs — HTML → PDF via Puppeteer
  • src/scripts/generate-problems.mjs — JSON task → concrete problem list
  • src/scripts/banatie.mjs — Banatie API client for image generation
  • tasks/ — JSON task definition files
  • assets/backgrounds/ — large background images per theme
  • assets/icons/ — icon sets in subfolders
  • output/html/ — generated HTML (gitignored)
  • output/pdf/ — generated PDFs (gitignored)
  • output/css/ — built Tailwind CSS (gitignored)

Step 4: Configure Tailwind CSS v4

  • src/styles/main.css with @import "tailwindcss", @page rules for A4
  • Custom utility classes: .page-a4, .page-background, .page-content, .problem-row, .problem-icon, .problem-text, .answer-line
  • Build script: npx @tailwindcss/cli -i src/styles/main.css -o output/css/styles.css

Step 5: Create PDF generation script

  • src/scripts/generate-pdf.mjs using Puppeteer
  • Accepts HTML file path, outputs PDF to output/pdf/
  • Settings: A4 format, printBackground: true, zero margins, preferCSSPageSize: true

Step 6: Create problem generation utility

  • src/scripts/generate-problems.mjs — reads JSON task, generates randomized math problems
  • Exports function and works as CLI
  • Handles variable substitution, deduplication

Step 7: Create example JSON task

  • tasks/example-multiply.json with sample multiplication task config
  • Demonstrates full JSON schema: template, variables, labels, theme refs

Step 8: Set up npm scripts

  • build:css — build Tailwind CSS (minified)
  • build:css:watch — watch mode
  • preview — serve HTML at localhost:3000
  • pdf — convert HTML to PDF
  • dev — CSS watch + preview (concurrent)

Step 9: Initialize git repo

  • git init, initial commit

Step 10: Configure Banatie API integration

  • src/scripts/banatie.mjs — API client for image generation
  • Documented in CLAUDE.md
  • Standard sizes: backgrounds 1200×1700px, icons 128×128px transparent PNG