diverse — 學習風格自我測驗 (Learning Style Self-Assessment)
A Quasar/Vue 3 web app for self-assessing learning styles based on the VARK model (Visual, Auditory, Reading/Writing, Kinesthetic). Includes a VARK quiz, a Whole/Analytic style quiz, and a guessing game.
Author: Bestian Tang bestian@gmail.com
- Framework: Quasar v2 (Vue 3)
- Language: TypeScript + Vue (Options API,
.vueSFCs) - Template engine: Pug (
lang="pug"in some templates) - Routing: Vue Router v4
- HTTP: Axios
- i18n: vue-i18n v9
- PWA: Workbox-based service worker (
src-pwa/) - Build tool: Quasar CLI with Vite (
@quasar/app-vite)
src/
layouts/MainLayout.vue # Main layout; holds VARK question data (qs[]) and passes via props
pages/
Index.vue # VARK learning style quiz
Whole_Reduct.vue # Whole/Analytic style quiz
Game.vue # Learning style guessing game (receives qs via props)
ErrorNotFound.vue # 404 page
components/
EssentialLink.vue
ExampleComponent.vue
router/ # Vue Router config
boot/ # Quasar boot files (axios, i18n)
i18n/ # Internationalization strings
src-pwa/ # PWA service worker files
- Question data (
qs[]) lives inMainLayout.vueand is passed down to pages via:qs="qs"prop on<router-view>. Game.vuereceivesqsas a prop from the layout.- Pages emit
@closeDrawerto trigger drawer close in the layout. - VARK scores use letter codes:
v(Visual),a(Auditory),r(Reading),k(Kinesthetic).
quasar dev # Start dev server
quasar build # Production build
npm run lint # ESLint
npm run format # Prettier- Use Vue Options API (consistent with existing code).
- Pug is used in some page templates — keep consistent with the file being edited.
- No test suite currently (
npm testexits 0 with a message). - Keep Chinese UI text as-is; this is a Traditional Chinese (zh-TW) interface.