Өзін-өзі тану жүйесі — Жеке қалауларды талдау

Автор: Ахмедьянов Саламат, КПО 9/22-2
Жыл: 2026
Оқу орны: Абылқас Сағынов атындағы Қарағанды Техникалық Университетінің Инновациялық Технологиялар Колледжі

---

📋 Жоба сипаттамасы

Бұл дипломдық жоба — интерактивті таңдау сценарийлері арқылы пайдаланушының жеке қалаулары мен даму бағыттарын талдайтын цифрлық жүйе. Жүйе HTML, CSS және JavaScript тілдерінде жазылған, серверсіз, толығымен браузер жағында жұмыс істейді.

Негізгі мүмкіндіктер

• Интерактивті сценарийлер — 3–4 таңдау нұсқасы бар 12 дилемма
• Когнитивті тест — 6 өлшем бойынша когнитивті стильді анықтау
• Кеңейтілген тест — тереңдетілген дилемма сценарийлері
• Динамикалық логика — алдыңғы жауаптарға негізделген бейімделгіш сценарий таңдауы
• Паттерн талдауы — 6 өлшем бойынша пайдаланушы таңдауларын автоматты талдау
• Профиль эволюциясы — сессиялар арасындағы нәтижелер өзгерістерін бақылау
• Атақты тұлғалармен салыстыру — профильді белгілі тұлғалармен салыстыру
• Нәтижелерді визуализациялау — диаграммалар мен кестелер арқылы тұлға профилін бейнелеу
• Локализация — қазақ, орыс, ағылшын тілдерін қолдау (KK / RU / EN)
• Қолжетімділік — контраст, мәтін өлшемі, дыбыстық кері байланыс, дауыстап оқу
• Жергілікті өңдеу — барлық деректер браузерде сақталады, сервер жоқ

---

🎯 Жоба мақсаты

Пайдаланушыларға өз-өзін тануға қызмет ететін интерактивті жүйені жасау:

• Шешімдер қабылдаудағы жеке қалауларды анықтау
• Ойлау паттерндерін зерттеу
• Даму бағыттары бойынша нақты ұсыныстар беру
• Тұлға профилін визуализациялау

---

🔬 Талдау моделі — 6 өлшем

#	Өлшем	Сипаттама
1	Стратегиялық ойлау	Ұзақ мерзімді жоспарлау мен жүйелі ойлау
2	Зерттеуші	Жаңа тәжірибеге ашықтық, белгісізді зерттеуге құштарлық
3	Жекешілдік	Тәуелсіздік пен ұжымдық ойлау балансы
4	Рационалдық	Шешімдерде логика мен талдауға басымдық
5	Бақылау	Жағдайды басқаруға ұмтылу
6	Мағына іздеу	Іс-әрекеттерден терең мән іздеу

---

📁 Жоба құрылымы

diplom-main/
├── index.html                   # Басты бет (лендинг + тест)
├── about.html                   # Жүйе туралы бет
├── profile.html                 # Пайдаланушы профилі беті
├── manifest.json                # PWA манифесі
├── sw.js                        # Service Worker
├── .eslintrc.json               # ESLint конфигурациясы
│
├── css/
│   ├── design-tokens.css        # Дизайн жүйесінің айнымалылары
│   ├── typography.css           # Типография стильдері
│   ├── layout.css               # Орналасу стильдері
│   ├── navigation.css           # Навигация стильдері
│   ├── pages.css                # Беттер стильдері
│   ├── styles.css               # Негізгі стильдер
│   ├── themes.css               # Ашық/қараңғы тема
│   ├── landing.css              # Лендинг стильдері
│   ├── modal.css                # Модал терезелер
│   ├── transitions.css          # Анимациялар мен өтулер
│   ├── accessibility.css        # Қолжетімділік стильдері
│   └── google-auth.css          # Google авторизация стильдері
│
├── js/
│   ├── app.js                   # Қосымшаның басты модулі (кіру нүктесі)
│   │
│   ├── core/
│   │   ├── EventBus.js          # Оқиғалар шиносы
│   │   └── AppState.js          # Қосымша күйін басқару
│   │
│   ├── config/
│   │   └── config.js            # Конфигурация файлы
│   │
│   ├── data/
│   │   ├── scenarios-data.js        # Негізгі сценарий деректері
│   │   ├── advanced-scenarios-data.js # Кеңейтілген сценарийлер
│   │   ├── cognitive-test-data.js   # Когнитивті тест деректері
│   │   ├── dynamic-scenarios.js     # Динамикалық сценарий логикасы
│   │   ├── advanced-test-organizer.js # Кеңейтілген тест ұйымдастырушы
│   │   └── celebrity-profiles.js    # Атақты тұлғалар профильдері
│   │
│   ├── analysis/
│   │   ├── analysis.js              # Негізгі талдау модулі
│   │   ├── advanced-analysis.js     # Кеңейтілген AI талдауы
│   │   ├── comparative-analysis.js  # Салыстырмалы талдау
│   │   └── evolution-tracker.js     # Профиль эволюция бақылаушысы
│   │
│   ├── services/
│   │   ├── localization.js          # Локализация (KK/RU/EN)
│   │   ├── localization-patch.js    # Локализация кеңейтімі
│   │   ├── storage.js               # localStorage басқару
│   │   ├── auth.js                  # Google OAuth авторизациясы
│   │   ├── data-loader.js           # Деректер жүктеуші
│   │   ├── report-generator.js      # PDF/есеп генераторы
│   │   ├── accessibility-service.js # Қолжетімділік сервисі
│   │   ├── audio-feedback.js        # Дыбыстық кері байланыс
│   │   ├── voice-control.js         # Дауыспен басқару
│   │   ├── keyboard-navigation.js   # Пернетақта навигациясы
│   │   ├── feedback.js              # Пайдаланушы кері байланысы
│   │   ├── celebrity-service.js     # Атақты тұлғалар сервисі
│   │   ├── error-handler.js         # Қателерді өңдеу
│   │   ├── resource-loader.js       # Ресурстар жүктеуші
│   │   └── logger.js                # Журналдау сервисі
│   │
│   ├── managers/
│   │   ├── test-manager.js          # Тест ағымын басқару
│   │   └── results-manager.js       # Нәтижелерді басқару
│   │
│   ├── ui/
│   │   ├── ui-controller.js         # UI контроллері
│   │   ├── navigation-controller.js # Навигация контроллері
│   │   ├── profile-extensions.js    # Профиль кеңейтімдері
│   │   ├── toast-manager.js         # Toast хабарламалар
│   │   └── views/
│   │       ├── BaseView.js          # Базалық view класы
│   │       ├── IntroView.js         # Кіріспе экран
│   │       ├── TestSelectionView.js # Тест таңдау экраны
│   │       ├── ScenarioView.js      # Сценарий экраны
│   │       └── ResultsView.js       # Нәтижелер экраны
│   │
│   └── vis/
│       ├── visualization.js         # Chart.js диаграммалары
│       └── particles-background.js  # Бөлшектер фоны анимациясы
│
├── data/
│   ├── scenarios.json           # Сценарий деректері (резервтік)
│   └── advanced-scenarios.json  # Кеңейтілген сценарийлер (резервтік)
│
├── icons/                       # PWA иконкалары
│   ├── icon-72x72.png
│   ├── icon-96x96.png
│   ├── icon-128x128.png
│   ├── icon-144x144.png
│   ├── icon-152x152.png
│   ├── icon-192x192.png
│   ├── icon-384x384.png
│   └── icon-512x512.png
│
├── i18n/                        # Аударма файлдары
├── docs/                        # Қосымша құжаттама
└── ACCESSIBILITY.md             # Қолжетімділік нұсқаулығы

---

🚀 Жобаны іске қосу

1. Жобаны клондаңыз немесе жүктеп алыңыз
2. index.html файлын заманауи браузерде ашыңыз
3. Тестті бастаңыз

Талаптар:

• ES6+ қолдайтын заманауи браузер (Chrome, Firefox, Edge, Safari)
• Интернет байланысы (Chart.js CDN-ден жүктеу үшін)

Ескерту: Деректердің негізгі көзі — js/data/scenarios-data.js. data/scenarios.json файлы веб-сервер арқылы іске қосу кезінде резервтік нұсқа ретінде пайдаланылады.

---

🔧 Технологиялар

Технология	Пайдалану мақсаты
HTML5	Қосымша құрылымы
CSS3	Стильдеу, адаптивті дизайн, анимациялар
JavaScript ES6+	Қосымша логикасы, модульдік архитектура
Chart.js	Деректерді визуализациялау (диаграммалар)
localStorage	Нәтижелерді жергілікті сақтау
Service Worker	PWA функционалдығы
Google OAuth	Пайдаланушы авторизациясы (опционалды)

---

🌐 Локализация

Жүйе 3 тілді қолдайды:

• 🇰🇿 Қазақша (kk) — негізгі тіл
• 🇷🇺 Орысша (ru)
• 🇬🇧 Ағылшынша (en)

Аударма js/services/localization.js және js/services/localization-patch.js файлдарында сақталады.

---

⚙️ Қолжетімділік (Accessibility)

• Жоғары контраст режимі — көру қабілеті бұзылған пайдаланушылар үшін
• Мәтін өлшемін реттеу — 4 деңгей (кіші, қалыпты, үлкен, өте үлкен)
• Дыбыстық кері байланыс — іс-әрекеттерді дыбыстық растау
• Нәтижелерді дауыстап оқу — сөйлеу синтезі арқылы
• Пернетақта навигациясы — тышқансыз толық навигация
• ARIA атрибуттары — экран оқушыларымен толық үйлесімділік
• Автотолтыру және форма қолжетімділігі — барлық форма өрістері үшін autocomplete атрибуттары мен label тегтері
• Көздің шаршауын азайту — ашық және қараңғы тақырыптардың түс балансы оңтайландырылған

Толық нұсқаулық: ACCESSIBILITY.md

---

📊 Сценарий деректерінің құрылымы

scenarios-data.js ішіндегі әр сценарий:

{
  id: 1,
  title: "Дилемма атауы",
  description: "Жағдай сипаттамасы",
  options: [
    {
      text: "A нұсқасының мәтіні",
      weights: {
        strategic: 0.7,
        explorer: -0.4,
        rationality: 0.3,
        individualism: 0.5,
        control: -0.2,
        meaning: 0.6
      }
    },
    // ...
  ]
}

Салмақтар (weights) — таңдаудың әр өлшемге ықпалын анықтайды:

• Диапазон: -1.0 ден +1.0 дейін
• Оң мән — өлшем бойынша бейімділікті арттырады
• Теріс мән — азайтады

---

🎓 Диплом қорғауы үшін

Ғылыми жаңалық

• 6 тәуелсіз өлшемнің бір модельде үйлесуі
• Салмақтық коэффициенттер арқылы таңдаудың сандық талдауы
• Дилемма сценарийлері арқылы интерактивті тәсіл
• Профиль эволюциясын бақылау жүйесі

Практикалық маңызы

• Жұмыс істейтін веб-жүйе (серверсіз)
• Деректердің жеке өңделуі (приватность)
• 3 тілді қолдау
• Толық қолжетімділік (WCAG стандарттары)

Қорғауда күтілетін сұрақтар

Неліктен дәл осы 6 өлшем?
→ Шешімдер қабылдаудың негізгі аспектілерін қамтитын кешенді тәсіл.

Сценарийлердегі салмақтар қалай анықталды?
→ Теориялық модельдерге негізделген; эмпирикалық зерттеулер арқылы нақтылауға болады.

Нәтижелердің негізділігі?
→ Жүйе өзін-өзі тануға арналған; клиникалық диагностика емес. Нәтижелер ұсыным сипатында.

Неліктен жергілікті өңдеу?
→ Пайдаланушы деректерінің құпиялылығы, сервер инфрақұрылымына тәуелсіздік.

---

📈 Даму перспективалары

1. Жаңа өлшемдер мен сценарийлер қосу
2. Профильдерді салыстыру мүмкіндігі
3. PDF экспорты
4. Мобильді қосымша нұсқасы
5. Бұлттық синхронизация (опционалды)

---

Автор: Ахмедьянов Саламат, КПО 9/22-2
Жыл: 2026
Оқу орны: Сағынов атындағы КарТУ Инновациялық Технологиялар Колледжі