Skip to content

feat: Educational quiz — learn Solana with 1001 terms #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ojonassa wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Educational quiz — learn Solana with 1001 terms #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions quiz/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Solana Quiz

> Interactive quiz game built from the 1001-term Solana Glossary. Test your knowledge, review what you missed, and level up your Solana expertise.

**Live demo:** https://quiz-flame-two.vercel.app

---

## Features

- **Dynamic questions** — generated from any combination of the 14 categories
- **Multiple choice** — 4 options per question (1 correct + 3 distractors from the full dataset)
- **Instant feedback** — correct/incorrect highlighted immediately after each answer
- **Scoring** — percentage score + average answer time
- **Review mode** — see every question with your answer vs. the correct answer
- **Terms to study** — missed terms listed with their definitions after the quiz

## Stack

- React 18
- TypeScript
- Vite
- Tailwind CSS v4 (via `@tailwindcss/vite`)
- `@stbr/solana-glossary` for the question bank

## Running locally

```bash
npm install
npm run dev # http://localhost:5173
npm run build
```

## How it works

`src/quiz.ts` generates questions by:
1. Filtering terms by selected categories (or all if none selected)
2. Randomly picking N terms with `definition.length > 40`
3. For each term: picking 3 distractors from the full pool
4. Shuffling the 4 options and recording the correct index

```
src/
glossary.ts # Static imports of all JSON data (Vite bundles at build time)
quiz.ts # Question generation + types
App.tsx # Screen router (setup → quiz → results → review)
components/
Setup.tsx # Category picker + question count selector
QuizQuestion.tsx # Single question with progress bar
Results.tsx # Score + terms-to-review list
Review.tsx # Full answer-by-answer breakdown
```

---

Built by [Superteam Brazil](https://superteam.fun/brazil) for the Solana Glossary Bounty.
23 changes: 23 additions & 0 deletions quiz/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])
13 changes: 13 additions & 0 deletions quiz/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>quiz</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading