felixs.dev / correlation-vs-causation-quiz
[READ-ONLY] Mirror of https://github.com/trueberryless/correlation-vs-causation-quiz. Find out if you know the difference between correlation and causation in this short quiz. correlation-vs-causation-quiz.felixs.dev
Star 0
Fork 0
Watch
JavaScript 72%
TypeScript 24%
Astro 4%
47 33 0
public
results
src
.gitignore
astro.config.mjs
CODEOWNERS
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
tailwind.config.mjs
README.md

Correlation vs Causation Quiz #

Netlify Status

An interactive quiz to test your ability to distinguish between correlation and causation.

Features #

  • 🌐 Bilingual support (English & German) with i18next
  • 🎯 10 random questions (5 true, 5 false)
  • 📊 Confidence ratings for each answer (50-100%)
  • 🔄 Up to 3 attempts per user
  • 📈 Global statistics dashboard
  • 🔒 Secure server-side GitHub API integration
  • 💾 Local storage backup
  • ✨ Beautiful gradient UI with smooth animations
  • 📚 Educational content explaining correlation vs causation

Setup #

  1. Clone the repository
  2. Install dependencies:
   npm install

  1. Create a results/ folder in your GitHub repository

  2. Create a .env file with your GitHub token:

   GITHUB_TOKEN=your_github_personal_access_token
   PUBLIC_REPO_OWNER=trueberryless
   PUBLIC_REPO_NAME=correlation-vs-causation-quiz
  1. Run development server:
   npm run dev
  1. Build for production:
   npm run build

GitHub Token Setup #

  1. Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
  2. Generate new token with these scopes:
    • repo (Full control of repositories)
  3. Add token to .env file (server-side only - NOT committed to git)

Security #

  • ✅ GitHub token is stored server-side only
  • ✅ Client never has access to authentication credentials
  • ✅ All GitHub API calls go through secure server endpoints
  • ✅ Input validation on all API endpoints

How It Works #

  1. Users get 10 random questions (5 causal, 5 correlation)
  2. NEW: Users must adjust confidence slider (50-100%) before answering
  3. After all questions, they estimate total correct answers
  4. Results are saved locally AND submitted via secure API
  5. Each device gets a unique anonymous ID
  6. Multiple attempts from same device are stored in one file
  7. Statistics page aggregates all results anonymously

Project Structure #

├── src/
│   ├── components/
│   │   ├── Quiz.jsx
│   │   ├── Statistics.jsx
│   │   └── LanguageSwitcher.jsx
│   ├── data/
│   │   └── questions.json
│   ├── i18n/
│   │   ├── en.json
│   │   └── de.json
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   ├── stats.astro
│   │   └── api/
│   │       ├── submit-results.ts
│   │       └── get-stats.ts
│   ├── utils/
│   │   └── i18n.js
│   └── constants.ts
├── results/          (in GitHub repo)
│   ├── .gitkeep
│   └── {userId}.json (one file per device)
└── README.md

Constants #

  • MAX_ATTEMPTS = 5 - Maximum quiz attempts per device
  • MIN_CONFIDENCE = 50 - Minimum confidence level
  • MAX_CONFIDENCE = 100 - Maximum confidence level

License #

MIT