-- WebDastur MySQL Database Dump
-- Import this file to your hosting MySQL database
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

CREATE TABLE IF NOT EXISTS `users` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `email_verified_at` timestamp NULL DEFAULT NULL,
  `password` varchar(255) NOT NULL,
  `remember_token` varchar(100) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `role` enum('student','admin','superadmin') NOT NULL DEFAULT 'student',
  `avatar` varchar(255) DEFAULT NULL,
  `points` int NOT NULL DEFAULT 0,
  `level` int NOT NULL DEFAULT 1,
  PRIMARY KEY (`id`),
  UNIQUE KEY `users_email_unique` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `password_reset_tokens` (
  `email` varchar(255) NOT NULL,
  `token` varchar(255) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `sessions` (
  `id` varchar(255) NOT NULL,
  `user_id` bigint unsigned DEFAULT NULL,
  `ip_address` varchar(45) DEFAULT NULL,
  `user_agent` text,
  `payload` longtext NOT NULL,
  `last_activity` int NOT NULL,
  PRIMARY KEY (`id`),
  KEY `sessions_user_id_index` (`user_id`),
  KEY `sessions_last_activity_index` (`last_activity`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `cache` (
  `key` varchar(255) NOT NULL,
  `value` mediumtext NOT NULL,
  `expiration` int NOT NULL,
  PRIMARY KEY (`key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `cache_locks` (
  `key` varchar(255) NOT NULL,
  `owner` varchar(255) NOT NULL,
  `expiration` int NOT NULL,
  PRIMARY KEY (`key`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `jobs` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `queue` varchar(255) NOT NULL,
  `payload` longtext NOT NULL,
  `attempts` tinyint unsigned NOT NULL,
  `reserved_at` int unsigned DEFAULT NULL,
  `available_at` int unsigned NOT NULL,
  `created_at` int unsigned NOT NULL,
  PRIMARY KEY (`id`),
  KEY `jobs_queue_index` (`queue`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `job_batches` (
  `id` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `total_jobs` int NOT NULL,
  `pending_jobs` int NOT NULL,
  `failed_jobs` int NOT NULL,
  `failed_job_ids` longtext NOT NULL,
  `options` mediumtext,
  `cancelled_at` int DEFAULT NULL,
  `created_at` int NOT NULL,
  `finished_at` int DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `failed_jobs` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `uuid` varchar(255) NOT NULL,
  `connection` text NOT NULL,
  `queue` text NOT NULL,
  `payload` longtext NOT NULL,
  `exception` longtext NOT NULL,
  `failed_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `failed_jobs_uuid_unique` (`uuid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `courses` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `icon` varchar(255) DEFAULT NULL,
  `color` varchar(7) NOT NULL DEFAULT '#3498db',
  `order` int NOT NULL DEFAULT 0,
  `is_active` tinyint(1) NOT NULL DEFAULT 1,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `courses_slug_unique` (`slug`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `topics` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `course_id` bigint unsigned NOT NULL,
  `title` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `order` int NOT NULL DEFAULT 0,
  `is_active` tinyint(1) NOT NULL DEFAULT 1,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `topics_slug_unique` (`slug`),
  KEY `topics_course_id_foreign` (`course_id`),
  CONSTRAINT `topics_course_id_foreign` FOREIGN KEY (`course_id`) REFERENCES `courses` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `lessons` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `topic_id` bigint unsigned NOT NULL,
  `title` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `content` longtext NOT NULL,
  `code_example` longtext DEFAULT NULL,
  `code_language` varchar(255) NOT NULL DEFAULT 'html',
  `order` int NOT NULL DEFAULT 0,
  `points` int NOT NULL DEFAULT 10,
  `is_active` tinyint(1) NOT NULL DEFAULT 1,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `lessons_slug_unique` (`slug`),
  KEY `lessons_topic_id_foreign` (`topic_id`),
  CONSTRAINT `lessons_topic_id_foreign` FOREIGN KEY (`topic_id`) REFERENCES `topics` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `lesson_user` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `user_id` bigint unsigned NOT NULL,
  `lesson_id` bigint unsigned NOT NULL,
  `completed` tinyint(1) NOT NULL DEFAULT 0,
  `score` int NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `lesson_user_user_id_lesson_id_unique` (`user_id`, `lesson_id`),
  KEY `lesson_user_lesson_id_foreign` (`lesson_id`),
  CONSTRAINT `lesson_user_user_id_foreign` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE,
  CONSTRAINT `lesson_user_lesson_id_foreign` FOREIGN KEY (`lesson_id`) REFERENCES `lessons` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `quizzes` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `lesson_id` bigint unsigned DEFAULT NULL,
  `course_id` bigint unsigned NOT NULL,
  `title` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `time_limit` int NOT NULL DEFAULT 0,
  `points` int NOT NULL DEFAULT 20,
  `is_active` tinyint(1) NOT NULL DEFAULT 1,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `quizzes_lesson_id_foreign` (`lesson_id`),
  KEY `quizzes_course_id_foreign` (`course_id`),
  CONSTRAINT `quizzes_lesson_id_foreign` FOREIGN KEY (`lesson_id`) REFERENCES `lessons` (`id`) ON DELETE CASCADE,
  CONSTRAINT `quizzes_course_id_foreign` FOREIGN KEY (`course_id`) REFERENCES `courses` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `quiz_questions` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `quiz_id` bigint unsigned NOT NULL,
  `question` text NOT NULL,
  `type` varchar(255) NOT NULL DEFAULT 'multiple_choice',
  `options` json DEFAULT NULL,
  `correct_answer` varchar(255) NOT NULL,
  `explanation` text DEFAULT NULL,
  `code_snippet` longtext DEFAULT NULL,
  `points` int NOT NULL DEFAULT 5,
  `order` int NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `quiz_questions_quiz_id_foreign` (`quiz_id`),
  CONSTRAINT `quiz_questions_quiz_id_foreign` FOREIGN KEY (`quiz_id`) REFERENCES `quizzes` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `quiz_results` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `user_id` bigint unsigned NOT NULL,
  `quiz_id` bigint unsigned NOT NULL,
  `score` int NOT NULL,
  `total` int NOT NULL,
  `correct_answers` int NOT NULL,
  `total_questions` int NOT NULL,
  `time_spent` int NOT NULL DEFAULT 0,
  `answers` json DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `quiz_results_user_id_foreign` (`user_id`),
  KEY `quiz_results_quiz_id_foreign` (`quiz_id`),
  CONSTRAINT `quiz_results_user_id_foreign` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE,
  CONSTRAINT `quiz_results_quiz_id_foreign` FOREIGN KEY (`quiz_id`) REFERENCES `quizzes` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `games` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `type` varchar(255) NOT NULL,
  `course_id` bigint unsigned DEFAULT NULL,
  `config` json NOT NULL,
  `max_points` int NOT NULL DEFAULT 100,
  `difficulty` varchar(255) NOT NULL DEFAULT 'easy',
  `is_active` tinyint(1) NOT NULL DEFAULT 1,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `games_slug_unique` (`slug`),
  KEY `games_course_id_foreign` (`course_id`),
  CONSTRAINT `games_course_id_foreign` FOREIGN KEY (`course_id`) REFERENCES `courses` (`id`) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `game_results` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `user_id` bigint unsigned NOT NULL,
  `game_id` bigint unsigned NOT NULL,
  `score` int NOT NULL,
  `time_spent` int NOT NULL DEFAULT 0,
  `details` json DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `game_results_user_id_foreign` (`user_id`),
  KEY `game_results_game_id_foreign` (`game_id`),
  CONSTRAINT `game_results_user_id_foreign` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE,
  CONSTRAINT `game_results_game_id_foreign` FOREIGN KEY (`game_id`) REFERENCES `games` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `course_user` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `user_id` bigint unsigned NOT NULL,
  `course_id` bigint unsigned NOT NULL,
  `progress` int NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `course_user_user_id_course_id_unique` (`user_id`, `course_id`),
  KEY `course_user_course_id_foreign` (`course_id`),
  CONSTRAINT `course_user_user_id_foreign` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE CASCADE,
  CONSTRAINT `course_user_course_id_foreign` FOREIGN KEY (`course_id`) REFERENCES `courses` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

CREATE TABLE IF NOT EXISTS `migrations` (
  `id` int unsigned NOT NULL AUTO_INCREMENT,
  `migration` varchar(255) NOT NULL,
  `batch` int NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- ======= SEED DATA =======

INSERT INTO `users` (`id`,`name`,`email`,`email_verified_at`,`password`,`remember_token`,`created_at`,`updated_at`,`role`,`avatar`,`points`,`level`) VALUES (1,'Super Admin','admin@webdastur.uz',NULL,'$2y$12$WYbGaCuoRQwOu3UNDKSQ1.G6gylyNBCwKMkQvxwTc0kYmTG5sMPRe',NULL,'2026-06-27 16:04:02','2026-06-27 16:04:02','superadmin',NULL,0,1);
INSERT INTO `courses` (`id`,`title`,`slug`,`description`,`icon`,`color`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (1,'HTML','html','HTML (HyperText Markup Language) - veb-sahifalarning asosiy tuzilmasini yaratishda foydalaniladigan standart belgi tili. HTML orqali veb-sahifaning barcha elementlarini joylashtirish mumkin.','fab fa-html5','#E44D26',1,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `courses` (`id`,`title`,`slug`,`description`,`icon`,`color`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (2,'CSS','css','CSS (Cascading Style Sheets) - veb-sahifalarning ko\'rinishini sozlash uchun ishlatiladigan stil varaqalari tili. Ranglar, shriftlar, joylashuv va animatsiyalarni boshqarish mumkin.','fab fa-css3-alt','#264DE4',2,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `courses` (`id`,`title`,`slug`,`description`,`icon`,`color`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (3,'JavaScript','javascript','JavaScript - veb-sahifalarga dinamik xususiyatlar qo\'shish uchun ishlatiladigan dasturlash tili. Interaktiv elementlar, animatsiyalar va murakkab veb-ilovalar yaratish mumkin.','fab fa-js','#F7DF1E',3,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (1,1,'HTML ga Kirish','html-kirish',NULL,1,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (2,1,'Matn Formatlash','html-matn-format',NULL,2,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (3,1,'Ro\'yxatlar va Jadvallar','html-royxat-jadval',NULL,3,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (4,1,'HTML Formalar','html-formalar-mv',NULL,4,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (5,1,'Semantic HTML va Media','html-semantic',NULL,5,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (6,2,'CSS ga Kirish','css-kirish',NULL,1,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (7,2,'Ranglar, Shrift va Matn','css-ranglar-matn',NULL,2,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (8,2,'Box Model va Layout','css-box-model',NULL,3,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (9,2,'Hover va Animatsiyalar','css-animatsiya',NULL,4,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (10,2,'Responsive Dizayn','css-responsive',NULL,5,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (11,3,'JavaScript Asoslari','js-asoslar',NULL,1,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (12,3,'Shartlar va Tsikllar','js-shart-tsikl',NULL,2,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (13,3,'Funksiyalar','js-funksiyalar',NULL,3,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (14,3,'DOM bilan ishlash','js-dom',NULL,4,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `topics` (`id`,`course_id`,`title`,`slug`,`description`,`order`,`is_active`,`created_at`,`updated_at`) VALUES (15,3,'Hodisalar va Amaliy Loyihalar','js-events-loyiha',NULL,5,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (1,1,'HTML nima?','html-nima-1','<h3>HTML nima?</h3>
<p><strong>HTML</strong> (HyperText Markup Language) — veb-sahifalarni yaratish uchun ishlatiladigan standart belgi tilidir. HTML veb-sahifaning <em>tuzilmasini</em> belgilaydi.</p>
<h4>HTML hujjat tuzilishi:</h4>
<ul>
<li><code>&lt;!DOCTYPE html&gt;</code> — hujjat turini bildiradi</li>
<li><code>&lt;html&gt;</code> — bosh element</li>
<li><code>&lt;head&gt;</code> — meta-ma\'lumotlar (title, charset)</li>
<li><code>&lt;body&gt;</code> — sahifa mazmuni</li>
</ul>
<p>HTML fayllarining kengaytmasi <strong>.html</strong> yoki <strong>.htm</strong> bo\'ladi.</p>','<!DOCTYPE html>
<html>
<head>
    <title>Mening birinchi sahifam</title>
</head>
<body>
    <h1>Salom Dunyo!</h1>
    <p>Bu mening birinchi veb-sahifam.</p>
</body>
</html>','html',1,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (2,1,'HTML Elementlar va Teglar','html-elementlar-1','<h3>HTML Elementlar</h3>
<p>HTML elementi ochilish tegi, kontent va yopilish tegidan iborat:</p>
<pre><code>&lt;tegnomi&gt;Kontent&lt;/tegnomi&gt;</code></pre>
<h4>Muhim qoidalar:</h4>
<ul>
<li>Ko\'pchilik teglar juft bo\'ladi: <code>&lt;p&gt;...&lt;/p&gt;</code></li>
<li>Ba\'zi teglar yakka (self-closing): <code>&lt;br&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;hr&gt;</code></li>
<li>Teglar kichik harfda yoziladi</li>
<li>Teglar bir-birining ichiga joylashishi mumkin (nesting)</li>
</ul>','<!DOCTYPE html>
<html>
<body>
    <!-- Bu izoh, brauzerda ko\'rinmaydi -->
    <h1>Sarlavha</h1>
    <p>Bu oddiy paragraf.</p>
    <hr>
    <p>Paragraflar orasida chiziq.</p>
    <br>
    <p>Yangi qatordan keyin.</p>
</body>
</html>','html',2,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (3,1,'HTML Atributlar','html-atributlar-1','<h3>HTML Atributlar</h3>
<p>Atributlar HTML elementlariga qo\'shimcha ma\'lumot beradi. Ular ochilish tegida yoziladi.</p>
<h4>Asosiy atributlar:</h4>
<ul>
<li><code>href</code> — havola manzili (<code>&lt;a&gt;</code> uchun)</li>
<li><code>src</code> — rasm manzili (<code>&lt;img&gt;</code> uchun)</li>
<li><code>alt</code> — rasm tavsifi</li>
<li><code>width</code>, <code>height</code> — o\'lcham</li>
<li><code>style</code> — inline CSS stil</li>
<li><code>id</code> — noyob identifikator</li>
<li><code>class</code> — CSS klass nomi</li>
<li><code>title</code> — tooltip matn</li>
</ul>','<!DOCTYPE html>
<html>
<body>
    <h1 style=\"color:blue;\" title=\"Bu sarlavha\">Stilli sarlavha</h1>
    <p id=\"kirish\" class=\"muhim\">Bu paragraf.</p>
    <a href=\"https://google.com\" target=\"_blank\">Google (yangi oyna)</a>
    <br><br>
    <img src=\"https://via.placeholder.com/200x100\" alt=\"Namuna rasm\" width=\"200\">
</body>
</html>','html',3,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (4,2,'Sarlavhalar va Paragraflar','html-sarlavhalar-2','<h3>Sarlavhalar</h3>
<p>HTMLda 6 daraja sarlavha mavjud: <code>&lt;h1&gt;</code> (eng katta) dan <code>&lt;h6&gt;</code> (eng kichik) gacha.</p>
<h4>Paragraflar</h4>
<p><code>&lt;p&gt;</code> tegi paragraf yaratadi. Brauzer avtomatik ravishda paragraflar orasiga bo\'shliq qo\'yadi.</p>
<h4>Maxsus formatlash teglari:</h4>
<ul>
<li><code>&lt;strong&gt;</code> — qalin (muhim) matn</li>
<li><code>&lt;em&gt;</code> — kursiv (ta\'kidlangan) matn</li>
<li><code>&lt;mark&gt;</code> — ajratilgan matn</li>
<li><code>&lt;del&gt;</code> — o\'chirilgan matn</li>
<li><code>&lt;sub&gt;</code>, <code>&lt;sup&gt;</code> — pastki/yuqori indeks</li>
<li><code>&lt;blockquote&gt;</code> — iqtibos</li>
</ul>','<!DOCTYPE html>
<html>
<body>
    <h1>H1 - Asosiy sarlavha</h1>
    <h2>H2 - Ikkinchi daraja</h2>
    <h3>H3 - Uchinchi daraja</h3>

    <p>Bu oddiy paragraf matni.</p>
    <p>Bu <strong>qalin</strong>, bu <em>kursiv</em>, bu <mark>ajratilgan</mark> matn.</p>
    <p>Bu <del>o\'chirilgan</del> va bu <ins>qo\'shilgan</ins> matn.</p>
    <p>H<sub>2</sub>O — suv formulasi. x<sup>2</sup> — kvadrat.</p>

    <blockquote style=\"border-left:4px solid #2E86AB;padding-left:15px;color:#555\">
        \"Bilim — eng katta boylik.\" — Xalq maqoli
    </blockquote>
</body>
</html>','html',1,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (5,2,'Havolalar','html-havolalar-2','<h3>HTML Havolalar</h3>
<p><code>&lt;a&gt;</code> tegi bilan havola yaratiladi.</p>
<h4>Havola turlari:</h4>
<ul>
<li><strong>Tashqi havola:</strong> <code>&lt;a href=\"https://sayt.uz\"&gt;</code></li>
<li><strong>Ichki havola:</strong> <code>&lt;a href=\"#bolim\"&gt;</code></li>
<li><strong>Email havola:</strong> <code>&lt;a href=\"mailto:email@misol.uz\"&gt;</code></li>
</ul>
<h4>target atributi:</h4>
<ul>
<li><code>_blank</code> — yangi oynada ochish</li>
<li><code>_self</code> — shu oynada (standart)</li>
</ul>','<!DOCTYPE html>
<html>
<body>
    <h2>Havolalar</h2>

    <p><a href=\"https://google.com\">Oddiy havola</a></p>
    <p><a href=\"https://google.com\" target=\"_blank\">Yangi oynada ochiladi</a></p>
    <p><a href=\"mailto:misol@email.uz\">Email yuborish</a></p>

    <h3>Rasm-havola</h3>
    <a href=\"https://google.com\">
        <img src=\"https://via.placeholder.com/150x50/2E86AB/fff?text=Bosing\" alt=\"Tugma\">
    </a>

    <h3 id=\"pastga\">Ichki havola</h3>
    <p><a href=\"#pastga\">Bu joyga o\'tish</a></p>
</body>
</html>','html',2,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (6,2,'Rasmlar','html-rasmlar-2','<h3>HTML Rasmlar</h3>
<p><code>&lt;img&gt;</code> tegi bilan rasm joylashtiriladi. Bu yakka teg — yopilish tegi yo\'q.</p>
<h4>Muhim atributlar:</h4>
<ul>
<li><code>src</code> — rasm fayl yo\'li (majburiy)</li>
<li><code>alt</code> — alternativ matn (majburiy, SEO uchun muhim)</li>
<li><code>width</code>, <code>height</code> — o\'lcham (piksel yoki foiz)</li>
<li><code>style</code> — qo\'shimcha stil</li>
</ul>
<p>Rasm formatlari: <strong>JPG</strong>, <strong>PNG</strong>, <strong>GIF</strong>, <strong>SVG</strong>, <strong>WebP</strong></p>','<!DOCTYPE html>
<html>
<body>
    <h2>Rasmlar bilan ishlash</h2>

    <img src=\"https://via.placeholder.com/300x200/E44D26/fff?text=HTML\" alt=\"HTML rasmi\" width=\"300\">
    <br><br>
    <img src=\"https://via.placeholder.com/300x200/264DE4/fff?text=CSS\" alt=\"CSS rasmi\" width=\"300\">
    <br><br>

    <h3>Rasm va matn</h3>
    <p>
        <img src=\"https://via.placeholder.com/80/27AE60/fff?text=OK\" alt=\"OK\" style=\"vertical-align:middle\"> 
        Rasm matn bilan bir qatorda.
    </p>
</body>
</html>','html',3,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (7,3,'Ro\'yxatlar','html-royxatlar-3','<h3>HTML Ro\'yxatlar</h3>
<h4>3 tur ro\'yxat mavjud:</h4>
<ul>
<li><code>&lt;ul&gt;</code> — tartibsiz (nuqtali) ro\'yxat</li>
<li><code>&lt;ol&gt;</code> — tartiblangan (raqamli) ro\'yxat</li>
<li><code>&lt;dl&gt;</code> — ta\'rifli ro\'yxat</li>
</ul>
<p>Ro\'yxat bandlari <code>&lt;li&gt;</code> tegi bilan belgilanadi. Ro\'yxatlarni bir-birining ichiga joylashtirish mumkin.</p>','<!DOCTYPE html>
<html>
<body>
    <h2>Tartibsiz ro\'yxat</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

    <h2>Tartiblangan ro\'yxat</h2>
    <ol>
        <li>Birinchi qadam</li>
        <li>Ikkinchi qadam</li>
        <li>Uchinchi qadam</li>
    </ol>

    <h2>Ichma-ich ro\'yxat</h2>
    <ul>
        <li>Frontend
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>Backend
            <ul>
                <li>PHP</li>
                <li>Python</li>
            </ul>
        </li>
    </ul>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (8,3,'Jadvallar','html-jadvallar-3','<h3>HTML Jadvallar</h3>
<p>Jadvallar ma\'lumotlarni qator va ustunlarda ko\'rsatish uchun ishlatiladi.</p>
<h4>Jadval teglari:</h4>
<ul>
<li><code>&lt;table&gt;</code> — jadval konteyneri</li>
<li><code>&lt;tr&gt;</code> — jadval qatori (table row)</li>
<li><code>&lt;th&gt;</code> — sarlavha katagi (table header)</li>
<li><code>&lt;td&gt;</code> — ma\'lumot katagi (table data)</li>
<li><code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</code> — semantik bo\'limlar</li>
</ul>
<p><code>colspan</code> va <code>rowspan</code> atributlari kataklarni birlashtirish uchun.</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background: #1B3A5C; color: white; }
        tr:nth-child(even) { background: #f0f4f8; }
        tr:hover { background: #e3f2fd; }
    </style>
</head>
<body>
    <h2>Talabalar jadvali</h2>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Ism</th>
                <th>Fan</th>
                <th>Baho</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>Ali</td><td>Informatika</td><td>5</td></tr>
            <tr><td>2</td><td>Vali</td><td>Matematika</td><td>4</td></tr>
            <tr><td>3</td><td>Guli</td><td>Fizika</td><td>5</td></tr>
        </tbody>
    </table>
</body>
</html>','html',2,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (9,4,'Forma Elementlari','html-forma-elem-4','<h3>HTML Formalar</h3>
<p>Formalar foydalanuvchidan ma\'lumot to\'plash uchun ishlatiladi.</p>
<h4>Input turlari:</h4>
<ul>
<li><code>text</code> — matn kiritish</li>
<li><code>password</code> — parol</li>
<li><code>email</code> — email manzil</li>
<li><code>number</code> — raqam</li>
<li><code>date</code> — sana</li>
<li><code>checkbox</code> — belgilash</li>
<li><code>radio</code> — tanlash</li>
<li><code>file</code> — fayl yuklash</li>
<li><code>submit</code> — yuborish tugmasi</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        form { max-width: 400px; margin: 0 auto; }
        label { display: block; margin-top: 10px; font-weight: bold; color: #1B3A5C; }
        input, select, textarea { width: 100%; padding: 8px; margin-top: 4px; border: 2px solid #ddd; border-radius: 8px; font-size: 14px; }
        input:focus { border-color: #2E86AB; outline: none; }
        button { margin-top: 15px; padding: 10px 30px; background: #2E86AB; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; }
        button:hover { background: #1B3A5C; }
    </style>
</head>
<body>
    <h2 style=\"text-align:center\">Ro\'yxatdan o\'tish</h2>
    <form>
        <label>Ism:</label>
        <input type=\"text\" placeholder=\"Ismingiz\" required>
        <label>Email:</label>
        <input type=\"email\" placeholder=\"email@misol.uz\" required>
        <label>Parol:</label>
        <input type=\"password\" placeholder=\"Kamida 6 belgi\" required>
        <label>Tug\'ilgan sana:</label>
        <input type=\"date\">
        <label>Jinsi:</label>
        <input type=\"radio\" name=\"gender\" value=\"erkak\" style=\"width:auto\"> Erkak
        <input type=\"radio\" name=\"gender\" value=\"ayol\" style=\"width:auto\"> Ayol
        <label><input type=\"checkbox\" style=\"width:auto\"> Shartlarga roziman</label>
        <button type=\"submit\">Yuborish</button>
    </form>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (10,4,'Select, Textarea va Validatsiya','html-select-4','<h3>Qo\'shimcha forma elementlari</h3>
<ul>
<li><code>&lt;select&gt;</code> va <code>&lt;option&gt;</code> — tanlash ro\'yxati</li>
<li><code>&lt;textarea&gt;</code> — ko\'p qatorli matn</li>
<li><code>required</code> — majburiy maydon</li>
<li><code>placeholder</code> — maslahat matni</li>
<li><code>pattern</code> — regex tekshirish</li>
<li><code>min</code>, <code>max</code>, <code>minlength</code>, <code>maxlength</code> — chegaralar</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        form { max-width: 450px; margin: 0 auto; background: white; padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        label { display: block; margin-top: 12px; font-weight: bold; color: #1B3A5C; }
        input, select, textarea { width: 100%; padding: 10px; margin-top: 5px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; box-sizing: border-box; }
        input:focus, select:focus, textarea:focus { border-color: #2E86AB; outline: none; }
        input:invalid { border-color: #E84D3D; }
        input:valid { border-color: #27AE60; }
        button { width: 100%; margin-top: 15px; padding: 12px; background: #2E86AB; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
    <form>
        <h2 style=\"text-align:center;color:#1B3A5C\">Anketa</h2>
        <label>Ism (kamida 2 harf):</label>
        <input type=\"text\" minlength=\"2\" maxlength=\"50\" required placeholder=\"Ismingiz\">
        <label>Yosh (10-100):</label>
        <input type=\"number\" min=\"10\" max=\"100\" required>
        <label>Telefon (+998...):</label>
        <input type=\"tel\" pattern=\"\\+998[0-9]{9}\" placeholder=\"+998901234567\">
        <label>Shahar:</label>
        <select required>
            <option value=\"\">-- Tanlang --</option>
            <option>Toshkent</option>
            <option>Samarqand</option>
            <option>Buxoro</option>
            <option>Guliston</option>
        </select>
        <label>Xabar:</label>
        <textarea rows=\"3\" placeholder=\"Xabaringiz...\"></textarea>
        <button type=\"submit\">Yuborish</button>
    </form>
</body>
</html>','html',2,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (11,5,'Semantic Teglar','html-semantic-5','<h3>Semantic HTML</h3>
<p>Semantic teglar sahifa tuzilmasiga <strong>ma\'no</strong> beradi:</p>
<ul>
<li><code>&lt;header&gt;</code> — sahifa/bo\'lim sarlavhasi</li>
<li><code>&lt;nav&gt;</code> — navigatsiya</li>
<li><code>&lt;main&gt;</code> — asosiy kontent</li>
<li><code>&lt;section&gt;</code> — bo\'lim</li>
<li><code>&lt;article&gt;</code> — mustaqil maqola</li>
<li><code>&lt;aside&gt;</code> — yon panel</li>
<li><code>&lt;footer&gt;</code> — sahifa pastki qismi</li>
</ul>
<p>Bu teglar SEO va accessibility uchun juda muhim!</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial; }
        header { background: #1B3A5C; color: white; padding: 20px; text-align: center; }
        nav { background: #2E86AB; padding: 10px; text-align: center; }
        nav a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; }
        main { padding: 20px; display: flex; gap: 20px; }
        article { flex: 3; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        aside { flex: 1; background: #f0f4f8; padding: 15px; border-radius: 10px; }
        footer { background: #1B3A5C; color: white; padding: 15px; text-align: center; margin-top: 20px; }
    </style>
</head>
<body>
    <header><h1>Mening Saytim</h1></header>
    <nav>
        <a href=\"#\">Bosh sahifa</a>
        <a href=\"#\">Haqida</a>
        <a href=\"#\">Aloqa</a>
    </nav>
    <main>
        <article>
            <h2>Asosiy maqola</h2>
            <p>Bu yerda asosiy kontent joylashadi.</p>
        </article>
        <aside>
            <h3>Yon panel</h3>
            <p>Qo\'shimcha ma\'lumotlar.</p>
        </aside>
    </main>
    <footer><p>&copy; 2024 WebDastur</p></footer>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (12,5,'Audio va Video','html-media-5','<h3>HTML5 Multimedia</h3>
<ul>
<li><code>&lt;video&gt;</code> — video qo\'shish</li>
<li><code>&lt;audio&gt;</code> — audio qo\'shish</li>
<li><code>controls</code> — boshqaruv paneli</li>
<li><code>autoplay</code>, <code>loop</code>, <code>muted</code></li>
<li><code>&lt;iframe&gt;</code> — tashqi kontent (YouTube, xarita)</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .media-card { background: white; padding: 20px; border-radius: 16px; margin: 15px auto; max-width: 600px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <h1 style=\"color:#1B3A5C\">Multimedia</h1>
    <div class=\"media-card\">
        <h3>YouTube Video (iframe)</h3>
        <iframe width=\"100%\" height=\"300\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\" frameborder=\"0\" allowfullscreen style=\"border-radius:12px\"></iframe>
    </div>
    <div class=\"media-card\">
        <h3>Video tegi</h3>
        <video width=\"100%\" controls style=\"border-radius:12px\">
            <source src=\"video.mp4\" type=\"video/mp4\">
            Brauzeringiz video tegini qo\'llab-quvvatlamaydi.
        </video>
    </div>
</body>
</html>','html',2,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (13,5,'HTML5 Canvas va SVG','html-canvas-5','<h3>HTML5 Canvas</h3>
<p><code>&lt;canvas&gt;</code> — JavaScript yordamida grafikalar chizish uchun.</p>
<h4>Canvas bilan:</h4>
<ul>
<li>Geometrik shakllar chizish</li>
<li>Ranglar va gradientlar</li>
<li>Matn yozish</li>
<li>Animatsiyalar yaratish</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        canvas { background: white; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <h1 style=\"color:#1B3A5C\">HTML5 Canvas</h1>
    <canvas id=\"myCanvas\" width=\"500\" height=\"350\"></canvas>
    <script>
        const c = document.getElementById(\'myCanvas\');
        const ctx = c.getContext(\'2d\');

        // Ko\'k doira
        ctx.beginPath();
        ctx.arc(150, 150, 80, 0, Math.PI * 2);
        ctx.fillStyle = \'#2E86AB\';
        ctx.fill();

        // Qizil to\'rtburchak
        ctx.fillStyle = \'#E84D3D\';
        ctx.fillRect(280, 80, 150, 100);

        // Yashil uchburchak
        ctx.beginPath();
        ctx.moveTo(350, 250);
        ctx.lineTo(280, 330);
        ctx.lineTo(420, 330);
        ctx.closePath();
        ctx.fillStyle = \'#27AE60\';
        ctx.fill();

        // Matn
        ctx.font = \'bold 20px Arial\';
        ctx.fillStyle = \'#1B3A5C\';
        ctx.fillText(\'Canvas!\', 130, 155);

        // Oltin chiziq
        ctx.beginPath();
        ctx.moveTo(50, 300);
        ctx.lineTo(250, 300);
        ctx.strokeStyle = \'#D4A533\';
        ctx.lineWidth = 4;
        ctx.stroke();
    </script>
</body>
</html>','html',3,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (14,5,'HTML Yakuniy Loyiha: Portfolio','html-portfolio-5','<h3>Yakuniy loyiha: Shaxsiy Portfolio</h3>
<p>Oldingi darslardagi barcha bilimlarni birlashtirib, to\'liq <strong>portfolio veb-sahifa</strong> yaratamiz:</p>
<ul>
<li>Semantic HTML tuzilma</li>
<li>Navigatsiya, sarlavha, asosiy kontent, footer</li>
<li>Rasmlar, havolalar, ro\'yxatlar</li>
<li>Forma (aloqa uchun)</li>
<li>Inline CSS stillar</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <meta charset=\"UTF-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Mening Portfoliom</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial; }
        body { background: #f0f4f8; color: #333; }
        header { background: linear-gradient(135deg, #1B3A5C, #2E86AB); color: white; padding: 60px 20px; text-align: center; }
        header h1 { font-size: 2.5rem; margin-bottom: 10px; }
        header p { font-size: 1.2rem; opacity: 0.8; }
        nav { background: #1B3A5C; padding: 12px; text-align: center; position: sticky; top: 0; }
        nav a { color: white; text-decoration: none; margin: 0 15px; font-weight: bold; }
        nav a:hover { color: #D4A533; }
        section { max-width: 900px; margin: 30px auto; padding: 0 20px; }
        .skills { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
        .skill { background: white; padding: 20px 30px; border-radius: 12px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); min-width: 150px; }
        .skill h3 { color: #2E86AB; }
        .projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
        .project { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .project h3 { color: #1B3A5C; }
        footer { background: #1B3A5C; color: white; text-align: center; padding: 20px; margin-top: 40px; }
    </style>
</head>
<body>
    <header>
        <h1>Islombek Boltabayev</h1>
        <p>Web Dasturchi | Talaba</p>
    </header>
    <nav>
        <a href=\"#skills\">Ko\'nikmalar</a>
        <a href=\"#projects\">Loyihalar</a>
        <a href=\"#contact\">Aloqa</a>
    </nav>
    <section id=\"skills\">
        <h2 style=\"text-align:center;margin-bottom:20px;color:#1B3A5C\">Ko\'nikmalarim</h2>
        <div class=\"skills\">
            <div class=\"skill\"><h3>HTML5</h3><p>90%</p></div>
            <div class=\"skill\"><h3>CSS3</h3><p>85%</p></div>
            <div class=\"skill\"><h3>JavaScript</h3><p>75%</p></div>
            <div class=\"skill\"><h3>Laravel</h3><p>70%</p></div>
        </div>
    </section>
    <section id=\"projects\">
        <h2 style=\"text-align:center;margin-bottom:20px;color:#1B3A5C\">Loyihalarim</h2>
        <div class=\"projects\">
            <div class=\"project\"><h3>WebDastur</h3><p>Web dasturlash o\'rgatuvchi platforma</p></div>
            <div class=\"project\"><h3>Portfolio</h3><p>Shaxsiy portfolio sayti</p></div>
        </div>
    </section>
    <footer>&copy; 2024 Islombek Boltabayev. Barcha huquqlar himoyalangan.</footer>
</body>
</html>','html',4,20,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (15,6,'CSS nima?','css-nima-1','<h3>CSS nima?</h3>
<p><strong>CSS</strong> (Cascading Style Sheets) — veb-sahifalar ko\'rinishini boshqarish uchun til.</p>
<h4>CSS qo\'shish 3 usuli:</h4>
<ul>
<li><strong>Inline:</strong> <code>style=\"color:red\"</code> — to\'g\'ridan-to\'g\'ri tegda</li>
<li><strong>Internal:</strong> <code>&lt;style&gt;</code> tegi ichida — head bo\'limida</li>
<li><strong>External:</strong> alohida .css faylda — eng yaxshi usul</li>
</ul>
<h4>CSS sintaksisi:</h4>
<pre><code>selektor { xususiyat: qiymat; }</code></pre>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; background: #f0f4f8; padding: 20px; }
        h1 { color: #1B3A5C; text-align: center; }
        .qizil { color: #E84D3D; }
        .ko-k { color: #2E86AB; }
        #maxsus { background: #D4A533; color: white; padding: 10px; border-radius: 8px; }
    </style>
</head>
<body>
    <h1>CSS bilan tanishuv</h1>
    <p class=\"qizil\">Bu qizil rangdagi matn (class bilan).</p>
    <p class=\"ko-k\">Bu ko\'k rangdagi matn (class bilan).</p>
    <p id=\"maxsus\">Bu maxsus stilga ega paragraf (id bilan).</p>
    <p style=\"font-size:20px; font-weight:bold;\">Bu inline stil.</p>
</body>
</html>','html',1,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (16,6,'CSS Selektorlar','css-selektorlar-1','<h3>CSS Selektorlar</h3>
<ul>
<li><code>element</code> — teg nomi (h1, p, div)</li>
<li><code>.class</code> — klass bo\'yicha (nuqta bilan)</li>
<li><code>#id</code> — ID bo\'yicha (# bilan)</li>
<li><code>element, element</code> — guruhlash</li>
<li><code>element element</code> — ichki (descendant)</li>
<li><code>element > element</code> — bevosita bola (child)</li>
<li><code>:hover</code> — sichqoncha ustida</li>
<li><code>:first-child</code>, <code>:nth-child()</code> — tartib bo\'yicha</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        /* Element selektori */
        p { color: #333; line-height: 1.6; }
        /* Class selektori */
        .muhim { color: #E84D3D; font-weight: bold; }
        .ramka { border: 2px solid #2E86AB; padding: 10px; border-radius: 8px; }
        /* ID selektori */
        #sarlavha { color: #1B3A5C; border-bottom: 3px solid #D4A533; padding-bottom: 5px; }
        /* Guruhlash */
        h2, h3 { color: #2E86AB; }
        /* Hover */
        .tugma { display: inline-block; padding: 10px 20px; background: #2E86AB; color: white; border-radius: 8px; cursor: pointer; transition: 0.3s; }
        .tugma:hover { background: #1B3A5C; transform: scale(1.05); }
    </style>
</head>
<body>
    <h1 id=\"sarlavha\">CSS Selektorlar</h1>
    <p>Oddiy paragraf.</p>
    <p class=\"muhim\">Muhim paragraf!</p>
    <div class=\"ramka\">
        <h2>Ramka ichida</h2>
        <p>Bu matn ramka ichida.</p>
    </div>
    <br>
    <span class=\"tugma\">Ustimga kel!</span>
</body>
</html>','html',2,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (17,7,'CSS Ranglar','css-ranglar-2','<h3>CSS Ranglar</h3>
<ul>
<li><strong>Nom:</strong> red, blue, green, tomato...</li>
<li><strong>HEX:</strong> #ff0000, #00ff00, #0000ff</li>
<li><strong>RGB:</strong> rgb(255, 0, 0)</li>
<li><strong>RGBA:</strong> rgba(255, 0, 0, 0.5) — shaffoflik</li>
<li><strong>HSL:</strong> hsl(0, 100%, 50%)</li>
</ul>
<p><code>color</code> — matn rangi, <code>background-color</code> — fon rangi.</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        .box { display: inline-block; width: 150px; padding: 20px; margin: 8px; border-radius: 12px; text-align: center; color: white; font-weight: bold; }
        .hex { background: #E84D3D; }
        .rgb { background: rgb(46, 134, 171); }
        .rgba { background: rgba(39, 174, 96, 0.8); }
        .hsl { background: hsl(280, 60%, 45%); }
        .gradient { background: linear-gradient(135deg, #1B3A5C, #2E86AB); }
        .gradient2 { background: linear-gradient(to right, #E84D3D, #D4A533, #27AE60); }
    </style>
</head>
<body>
    <h2>CSS Ranglar</h2>
    <div class=\"box hex\">#E84D3D</div>
    <div class=\"box rgb\">rgb()</div>
    <div class=\"box rgba\">rgba()</div>
    <div class=\"box hsl\">hsl()</div>
    <div class=\"box gradient\">Gradient</div>
    <div class=\"box gradient2\">Gradient 2</div>
</body>
</html>','html',1,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (18,7,'Shrift va Matn Stillari','css-shrift-2','<h3>CSS Shrift xususiyatlari</h3>
<ul>
<li><code>font-family</code> — shrift turi</li>
<li><code>font-size</code> — o\'lcham (px, em, rem, %)</li>
<li><code>font-weight</code> — qalinlik (100-900, bold)</li>
<li><code>font-style</code> — italic, normal</li>
</ul>
<h4>Matn xususiyatlari:</h4>
<ul>
<li><code>text-align</code> — tekislash (left, center, right, justify)</li>
<li><code>text-decoration</code> — chiziq (underline, none, line-through)</li>
<li><code>text-transform</code> — harf o\'zgartirish (uppercase, lowercase, capitalize)</li>
<li><code>line-height</code> — qator balandligi</li>
<li><code>letter-spacing</code> — harflar orasidagi masofa</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { padding: 20px; background: #f0f4f8; }
        .serif { font-family: Georgia, serif; font-size: 18px; }
        .sans { font-family: Arial, sans-serif; font-size: 18px; }
        .mono { font-family: \'Courier New\', monospace; font-size: 18px; background: #282c34; color: #abb2bf; padding: 10px; border-radius: 8px; }
        .katta { text-transform: uppercase; letter-spacing: 5px; font-weight: 800; color: #1B3A5C; }
        .center { text-align: center; color: #2E86AB; }
        .chiziq { text-decoration: line-through; color: #999; }
        .shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-size: 24px; color: #E84D3D; }
    </style>
</head>
<body>
    <p class=\"serif\">Bu Serif shrift (Georgia).</p>
    <p class=\"sans\">Bu Sans-serif shrift (Arial).</p>
    <p class=\"mono\">Bu Monospace shrift (kod uchun).</p>
    <p class=\"katta\">Katta harflar va keng oraliq</p>
    <p class=\"center\">Markazga tekislangan</p>
    <p class=\"chiziq\">O\'chirilgan matn</p>
    <p class=\"shadow\">Soyali matn</p>
</body>
</html>','html',2,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (19,8,'Box Model','css-boxmodel-3','<h3>CSS Box Model</h3>
<p>Har bir HTML elementi to\'rtburchak qutiga ega:</p>
<ul>
<li><code>content</code> — kontent (matn, rasm)</li>
<li><code>padding</code> — ichki bo\'shliq</li>
<li><code>border</code> — chegara</li>
<li><code>margin</code> — tashqi bo\'shliq</li>
</ul>
<p><code>box-sizing: border-box</code> — padding va border ni width ichiga kiritadi.</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        * { box-sizing: border-box; }
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        .box { background: white; border-radius: 12px; margin: 15px 0; }
        .box1 { padding: 10px; border: 2px solid #2E86AB; margin: 10px; }
        .box2 { padding: 30px; border: 4px dashed #E84D3D; margin: 20px; }
        .box3 { padding: 20px; border: 3px solid #27AE60; margin: 0 auto; width: 300px; text-align: center; }

        .demo { background: #1B3A5C; color: white; padding: 40px; margin: 20px; border: 5px solid #D4A533; border-radius: 16px; text-align: center; position: relative; }
        .demo::after { content: \'margin: 20px | border: 5px | padding: 40px\'; position: absolute; bottom: 5px; left: 0; right: 0; font-size: 11px; opacity: 0.7; }
    </style>
</head>
<body>
    <h2>Box Model</h2>
    <div class=\"box box1\">Padding: 10px, Border: 2px, Margin: 10px</div>
    <div class=\"box box2\">Padding: 30px, Border: 4px, Margin: 20px</div>
    <div class=\"box box3\">Markazlashgan quti (width: 300px, margin: 0 auto)</div>
    <div class=\"demo\">KONTENT</div>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (20,8,'CSS Flexbox','css-flexbox-3','<h3>CSS Flexbox</h3>
<p>Flexbox — elementlarni moslashuvchan joylashtirish tizimi.</p>
<h4>Konteyner xususiyatlari:</h4>
<ul>
<li><code>display: flex</code> — flex konteyner yaratish</li>
<li><code>justify-content</code> — gorizontal tekislash (center, space-between, space-around)</li>
<li><code>align-items</code> — vertikal tekislash (center, stretch, flex-start)</li>
<li><code>flex-direction</code> — yo\'nalish (row, column)</li>
<li><code>flex-wrap</code> — o\'rash (wrap, nowrap)</li>
<li><code>gap</code> — elementlar orasidagi bo\'shliq</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        h3 { color: #1B3A5C; }
        .flex-demo { display: flex; gap: 10px; margin: 10px 0; padding: 15px; background: #fff; border-radius: 12px; }
        .flex-demo .item { padding: 15px 25px; background: #2E86AB; color: white; border-radius: 8px; font-weight: bold; text-align: center; }
        .center-demo { justify-content: center; }
        .between-demo { justify-content: space-between; }
        .around-demo { justify-content: space-around; }
        .column-demo { flex-direction: column; align-items: center; }
        .wrap-demo { flex-wrap: wrap; }
        .wrap-demo .item { flex: 1 1 150px; }

        .perfect-center { display: flex; justify-content: center; align-items: center; height: 150px; background: #1B3A5C; border-radius: 12px; }
        .perfect-center span { color: white; font-size: 20px; font-weight: bold; }
    </style>
</head>
<body>
    <h3>justify-content: center</h3>
    <div class=\"flex-demo center-demo\">
        <div class=\"item\">A</div><div class=\"item\">B</div><div class=\"item\">C</div>
    </div>
    <h3>justify-content: space-between</h3>
    <div class=\"flex-demo between-demo\">
        <div class=\"item\">A</div><div class=\"item\">B</div><div class=\"item\">C</div>
    </div>
    <h3>flex-direction: column</h3>
    <div class=\"flex-demo column-demo\">
        <div class=\"item\">A</div><div class=\"item\">B</div><div class=\"item\">C</div>
    </div>
    <h3>Mukammal markazlashtirish</h3>
    <div class=\"perfect-center\"><span>Flex bilan markaz!</span></div>
</body>
</html>','html',2,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (21,8,'CSS Grid','css-grid-3','<h3>CSS Grid</h3>
<p>Grid — ikki o\'lchamli (qator + ustun) layout tizimi.</p>
<ul>
<li><code>display: grid</code> — grid konteyner</li>
<li><code>grid-template-columns</code> — ustunlar</li>
<li><code>grid-template-rows</code> — qatorlar</li>
<li><code>gap</code> — oraliq</li>
<li><code>fr</code> — kasr birlik (fraction)</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 15px 0; }
        .grid .card { background: white; padding: 25px; border-radius: 12px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: 0.3s; }
        .grid .card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
        .grid .card i { font-size: 2rem; margin-bottom: 10px; }

        .layout { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto; gap: 10px; height: 400px; }
        .layout div { padding: 15px; border-radius: 10px; color: white; font-weight: bold; }
        .layout .header { grid-column: 1 / -1; background: #1B3A5C; }
        .layout .sidebar { background: #2E86AB; }
        .layout .main { background: #27AE60; }
        .layout .footer { grid-column: 1 / -1; background: #1B3A5C; }
    </style>
</head>
<body>
    <h2>Grid Kartochkalar</h2>
    <div class=\"grid\">
        <div class=\"card\" style=\"color:#E44D26\"><div style=\"font-size:2rem\">&#60;/&#62;</div><h3>HTML</h3><p>Tuzilma</p></div>
        <div class=\"card\" style=\"color:#264DE4\"><div style=\"font-size:2rem\">#</div><h3>CSS</h3><p>Dizayn</p></div>
        <div class=\"card\" style=\"color:#F7DF1E\"><div style=\"font-size:2rem\">{}</div><h3>JS</h3><p>Dinamika</p></div>
    </div>
    <h2>Grid Layout</h2>
    <div class=\"layout\">
        <div class=\"header\">HEADER</div>
        <div class=\"sidebar\">SIDEBAR</div>
        <div class=\"main\">MAIN CONTENT</div>
        <div class=\"footer\">FOOTER</div>
    </div>
</body>
</html>','html',3,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (22,9,'Transition va Hover Effektlar','css-hover-4','<h3>CSS Transition</h3>
<p><code>transition</code> — elementning bir holatdan ikkinchi holatga silliq o\'tishi.</p>
<ul>
<li><code>transition-property</code> — qaysi xususiyat</li>
<li><code>transition-duration</code> — davomiyligi</li>
<li><code>transition-timing-function</code> — tezlik egri chizig\'i</li>
</ul>
<p>Qisqa yozuv: <code>transition: all 0.3s ease;</code></p>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 30px; background: #f0f4f8; text-align: center; }
        .btn { display: inline-block; padding: 12px 30px; margin: 10px; border-radius: 10px; font-weight: bold; font-size: 16px; cursor: pointer; transition: all 0.3s ease; border: none; color: white; }
        .btn-1 { background: #2E86AB; }
        .btn-1:hover { background: #1B3A5C; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(46,134,171,0.4); }
        .btn-2 { background: #E84D3D; }
        .btn-2:hover { background: #c0392b; transform: scale(1.1); }
        .btn-3 { background: #27AE60; }
        .btn-3:hover { border-radius: 30px; padding: 12px 50px; }

        .card { display: inline-block; width: 200px; padding: 30px; margin: 15px; background: white; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.4s ease; }
        .card:hover { transform: translateY(-10px) rotate(2deg); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
        .card h3 { transition: color 0.3s; }
        .card:hover h3 { color: #2E86AB; }
    </style>
</head>
<body>
    <h2>Hover Effektlar</h2>
    <div class=\"btn btn-1\">Ko\'tarilish</div>
    <div class=\"btn btn-2\">Kattalashish</div>
    <div class=\"btn btn-3\">Yumaloq</div>
    <br><br>
    <div class=\"card\"><h3>Karta 1</h3><p>Ustimga kel</p></div>
    <div class=\"card\"><h3>Karta 2</h3><p>Ustimga kel</p></div>
    <div class=\"card\"><h3>Karta 3</h3><p>Ustimga kel</p></div>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (23,9,'CSS Animatsiyalar','css-animation-4','<h3>CSS Animation</h3>
<p><code>@keyframes</code> — animatsiya kadrlari, <code>animation</code> — animatsiyani qo\'llash.</p>
<ul>
<li><code>animation-name</code> — keyframes nomi</li>
<li><code>animation-duration</code> — davomiylik</li>
<li><code>animation-iteration-count</code> — takrorlanish (infinite)</li>
<li><code>animation-timing-function</code> — tezlik</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 30px; background: #1B3A5C; color: white; text-align: center; overflow: hidden; }

        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
        @keyframes fadeSlide { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes rainbow { 0% { color: #E84D3D; } 25% { color: #D4A533; } 50% { color: #27AE60; } 75% { color: #2E86AB; } 100% { color: #8E44AD; } }

        .pulse { display: inline-block; width: 80px; height: 80px; background: #E84D3D; border-radius: 50%; margin: 20px; animation: pulse 1.5s infinite; }
        .spin { display: inline-block; width: 80px; height: 80px; border: 5px solid transparent; border-top: 5px solid #D4A533; border-radius: 50%; margin: 20px; animation: spin 1s linear infinite; }
        .bounce { display: inline-block; width: 60px; height: 60px; background: #27AE60; border-radius: 12px; margin: 20px; animation: bounce 0.8s infinite; }
        .fade { animation: fadeSlide 1s ease-out; }
        .rainbow { font-size: 2.5rem; font-weight: 800; animation: rainbow 3s infinite; }
    </style>
</head>
<body>
    <h1 class=\"rainbow\">CSS Animatsiyalar!</h1>
    <p class=\"fade\">Bu matn silliq paydo bo\'ldi</p>
    <div class=\"pulse\"></div>
    <div class=\"spin\"></div>
    <div class=\"bounce\"></div>
</body>
</html>','html',2,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (24,9,'Transform va Effektlar','css-transform-4','<h3>CSS Transform</h3>
<ul>
<li><code>translate(x, y)</code> — siljitish</li>
<li><code>scale(x)</code> — kattalash/kichiklashtirish</li>
<li><code>rotate(deg)</code> — aylantirish</li>
<li><code>skew(deg)</code> — qiyalash</li>
<li><code>box-shadow</code> — quti soyasi</li>
<li><code>opacity</code> — shaffoflik</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 30px; background: #f0f4f8; text-align: center; }
        .demo { display: inline-block; width: 120px; height: 120px; margin: 20px; border-radius: 16px; color: white; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; transition: all 0.4s; cursor: pointer; }
        .d1 { background: #2E86AB; } .d1:hover { transform: translateY(-20px); }
        .d2 { background: #E84D3D; } .d2:hover { transform: scale(1.3); }
        .d3 { background: #27AE60; } .d3:hover { transform: rotate(45deg); }
        .d4 { background: #D4A533; } .d4:hover { transform: skewX(15deg); }
        .d5 { background: #8E44AD; } .d5:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.3); transform: translateY(-10px); }
        .d6 { background: #1B3A5C; } .d6:hover { opacity: 0.5; }
    </style>
</head>
<body>
    <h2 style=\"color:#1B3A5C\">Hover qiling!</h2>
    <div class=\"demo d1\">Translate</div>
    <div class=\"demo d2\">Scale</div>
    <div class=\"demo d3\">Rotate</div>
    <div class=\"demo d4\">Skew</div>
    <div class=\"demo d5\">Shadow</div>
    <div class=\"demo d6\">Opacity</div>
</body>
</html>','html',3,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (25,10,'Media Queries','css-media-5','<h3>Responsive Dizayn</h3>
<p>Responsive = sayt barcha ekranlarda chiroyli ko\'rinadi.</p>
<h4>Media Queries:</h4>
<pre><code>@media (max-width: 768px) { ... }</code></pre>
<ul>
<li>Mobil: 0-480px</li>
<li>Planshet: 481-768px</li>
<li>Laptop: 769-1024px</li>
<li>Desktop: 1025px+</li>
</ul>
<p><code>viewport meta</code> tegi majburiy: <code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;</code></p>','<!DOCTYPE html>
<html>
<head>
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: Arial; background: #f0f4f8; }
        .header { background: #1B3A5C; color: white; padding: 20px; text-align: center; }
        .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px; }
        .card { background: white; padding: 25px; border-radius: 12px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .card h3 { color: #1B3A5C; }

        /* Planshet */
        @media (max-width: 768px) {
            .container { grid-template-columns: repeat(2, 1fr); }
        }
        /* Mobil */
        @media (max-width: 480px) {
            .container { grid-template-columns: 1fr; }
            .header h1 { font-size: 1.3rem; }
        }
    </style>
</head>
<body>
    <div class=\"header\"><h1>Responsive Dizayn</h1><p>Brauzer oynasini kichraytiring!</p></div>
    <div class=\"container\">
        <div class=\"card\"><h3>HTML</h3><p>Tuzilma</p></div>
        <div class=\"card\"><h3>CSS</h3><p>Dizayn</p></div>
        <div class=\"card\"><h3>JavaScript</h3><p>Dinamika</p></div>
    </div>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (26,10,'CSS Variables va Yakuniy Loyiha','css-variables-5','<h3>CSS O\'zgaruvchilar (Custom Properties)</h3>
<ul>
<li><code>--nom: qiymat</code> — e\'lon qilish</li>
<li><code>var(--nom)</code> — ishlatish</li>
<li><code>:root</code> — global o\'zgaruvchilar</li>
</ul>
<p>CSS o\'zgaruvchilari bilan temani oson o\'zgartirish mumkin.</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --primary: #1B3A5C;
            --secondary: #2E86AB;
            --accent: #D4A533;
            --bg: #f0f4f8;
            --text: #333;
            --card-bg: #fff;
            --radius: 12px;
        }
        .dark {
            --primary: #e0e0e0;
            --secondary: #64b5f6;
            --bg: #121212;
            --text: #e0e0e0;
            --card-bg: #1e1e1e;
        }
        body { font-family: Arial; padding: 20px; background: var(--bg); color: var(--text); transition: all 0.3s; text-align: center; }
        h1 { color: var(--primary); }
        .card { background: var(--card-bg); padding: 25px; border-radius: var(--radius); margin: 15px auto; max-width: 500px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
        .btn { padding: 10px 25px; background: var(--secondary); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-size: 16px; }
        .btn:hover { background: var(--accent); }
    </style>
</head>
<body>
    <h1>CSS O\'zgaruvchilar</h1>
    <button class=\"btn\" onclick=\"document.body.classList.toggle(\'dark\')\">Tungi rejim</button>
    <div class=\"card\">
        <h3>CSS Variables</h3>
        <p>Bu karta CSS o\'zgaruvchilari yordamida stillangan. Tungi rejim tugmasini bosib ko\'ring!</p>
    </div>
    <div class=\"card\">
        <h3>Moslashuvchan</h3>
        <p>Bitta joyda o\'zgartirsangiz, hammasi o\'zgaradi!</p>
    </div>
</body>
</html>','html',2,20,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (27,11,'JavaScript nima?','js-nima-1','<h3>JavaScript nima?</h3>
<p><strong>JavaScript</strong> — veb-sahifalarga interaktivlik va dinamiklik qo\'shadigan dasturlash tili.</p>
<h4>JS nima qila oladi?</h4>
<ul>
<li>HTML kontentini o\'zgartirish</li>
<li>CSS stillarini o\'zgartirish</li>
<li>Foydalanuvchi harakatlariga javob berish (click, hover)</li>
<li>Ma\'lumotlarni serverdan olish (AJAX, Fetch)</li>
<li>Animatsiya va o\'yinlar yaratish</li>
</ul>
<p>JavaScript kodni <code>&lt;script&gt;</code> tegi ichida yoki alohida .js faylda yozish mumkin.</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; text-align: center; background: #f0f4f8; }
        #demo { font-size: 28px; padding: 20px; margin: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.3s; min-height: 80px; }
        button { padding: 10px 25px; margin: 5px; font-size: 16px; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; color: white; transition: 0.3s; }
        button:hover { transform: translateY(-2px); }
        .b1 { background: #2E86AB; } .b2 { background: #E84D3D; } .b3 { background: #27AE60; } .b4 { background: #D4A533; }
    </style>
</head>
<body>
    <h1>JavaScript Demo</h1>
    <div id=\"demo\">Tugmalarni bosib ko\'ring!</div>
    <button class=\"b1\" onclick=\"document.getElementById(\'demo\').innerHTML=\'Salom Dunyo!\'\">Matn</button>
    <button class=\"b2\" onclick=\"document.getElementById(\'demo\').style.color=\'#E84D3D\'\">Qizil</button>
    <button class=\"b3\" onclick=\"document.getElementById(\'demo\').style.fontSize=\'40px\'\">Katta</button>
    <button class=\"b4\" onclick=\"document.getElementById(\'demo\').style.background=\'#1B3A5C\';document.getElementById(\'demo\').style.color=\'white\'\">Tun</button>
</body>
</html>','html',1,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (28,11,'O\'zgaruvchilar va Turlar','js-vars-1','<h3>O\'zgaruvchilar</h3>
<ul>
<li><code>let</code> — o\'zgartirish mumkin (blok scope)</li>
<li><code>const</code> — o\'zgarmas qiymat</li>
<li><code>var</code> — eski usul (ishlatmang)</li>
</ul>
<h4>Ma\'lumot turlari:</h4>
<ul>
<li><strong>String:</strong> \"matn\" yoki \'matn\'</li>
<li><strong>Number:</strong> 42, 3.14</li>
<li><strong>Boolean:</strong> true, false</li>
<li><strong>Array:</strong> [1, 2, 3]</li>
<li><strong>Object:</strong> {nom: \"Ali\", yosh: 20}</li>
<li><strong>undefined, null</strong></li>
</ul>','<!DOCTYPE html>
<html>
<body style=\"font-family:Arial;padding:20px;background:#f0f4f8\">
    <div id=\"r\" style=\"background:white;padding:20px;border-radius:12px;line-height:2\"></div>
    <script>
        let ism = \"Islombek\";
        let yosh = 22;
        const PI = 3.14159;
        let talaba = true;
        let fanlar = [\"HTML\", \"CSS\", \"JavaScript\"];
        let odam = { ism: \"Ali\", yosh: 20, kasb: \"Dasturchi\" };

        let n = \"\";
        n += \"<b>let ism =</b> \'\" + ism + \"\' <small>(String)</small><br>\";
        n += \"<b>let yosh =</b> \" + yosh + \" <small>(Number)</small><br>\";
        n += \"<b>const PI =</b> \" + PI + \" <small>(Number)</small><br>\";
        n += \"<b>let talaba =</b> \" + talaba + \" <small>(Boolean)</small><br>\";
        n += \"<b>let fanlar =</b> [\" + fanlar.join(\", \") + \"] <small>(Array)</small><br>\";
        n += \"<b>let odam =</b> {ism: \'\" + odam.ism + \"\', yosh: \" + odam.yosh + \"} <small>(Object)</small><br>\";
        n += \"<hr><b>typeof ism =</b> \" + typeof ism + \"<br>\";
        n += \"<b>typeof yosh =</b> \" + typeof yosh + \"<br>\";
        n += \"<b>fanlar.length =</b> \" + fanlar.length;
        document.getElementById(\'r\').innerHTML = n;
    </script>
</body>
</html>','html',2,10,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (29,12,'If-Else va Switch','js-ifelse-2','<h3>Shart operatorlari</h3>
<ul>
<li><code>if...else</code> — asosiy shart</li>
<li><code>else if</code> — qo\'shimcha shart</li>
<li><code>switch</code> — ko\'p variantli shart</li>
<li><code>? :</code> — uchlik (ternary) operator</li>
</ul>
<h4>Solishtirish operatorlari:</h4>
<ul>
<li><code>===</code> qat\'iy teng, <code>!==</code> qat\'iy teng emas</li>
<li><code>&gt;</code> katta, <code>&lt;</code> kichik</li>
<li><code>&amp;&amp;</code> VA, <code>||</code> YOKI, <code>!</code> INKOR</li>
</ul>','<!DOCTYPE html>
<html>
<body style=\"font-family:Arial;padding:20px;background:#f0f4f8;text-align:center\">
    <h2>Baho kalkulyatori</h2>
    <input type=\"number\" id=\"ball\" placeholder=\"Ballingiz (0-100)\" style=\"padding:10px;font-size:18px;border-radius:8px;border:2px solid #ddd;width:200px\">
    <button onclick=\"tekshir()\" style=\"padding:10px 25px;background:#2E86AB;color:white;border:none;border-radius:8px;font-size:16px;cursor:pointer;margin-left:10px\">Tekshirish</button>
    <div id=\"natija\" style=\"margin-top:20px;padding:20px;background:white;border-radius:12px;font-size:20px;min-height:60px\"></div>
    <script>
        function tekshir() {
            let ball = Number(document.getElementById(\'ball\').value);
            let natija = \'\';
            let rang = \'\';

            if (ball >= 90) { natija = \'A\\\'lo! &#127942;\'; rang = \'#27AE60\'; }
            else if (ball >= 75) { natija = \'Yaxshi! &#128170;\'; rang = \'#2E86AB\'; }
            else if (ball >= 60) { natija = \'Qoniqarli &#128221;\'; rang = \'#D4A533\'; }
            else if (ball >= 0) { natija = \'Yomon &#128546;\'; rang = \'#E84D3D\'; }
            else { natija = \'Noto\\\'g\\\'ri son!\'; rang = \'#888\'; }

            let el = document.getElementById(\'natija\');
            el.innerHTML = \'<b>\' + ball + \' ball</b> — \' + natija;
            el.style.color = rang;
            el.style.borderLeft = \'5px solid \' + rang;
        }
    </script>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (30,12,'For va While Tsikllar','js-tsikllar-2','<h3>Tsikllar</h3>
<ul>
<li><code>for</code> — ma\'lum marta takrorlash</li>
<li><code>while</code> — shart to\'g\'ri bo\'lguncha</li>
<li><code>for...of</code> — massiv elementlari bo\'yicha</li>
<li><code>forEach</code> — massiv metodi</li>
</ul>
<p><code>break</code> — tsikldan chiqish, <code>continue</code> — keyingi iteratsiyaga o\'tish.</p>','<!DOCTYPE html>
<html>
<body style=\"font-family:Arial;padding:20px;background:#f0f4f8\">
    <h2>Tsikllar demo</h2>
    <div id=\"demo\" style=\"display:flex;gap:15px;flex-wrap:wrap\"></div>
    <script>
        let html = \'\';
        let colors = [\'#E84D3D\', \'#2E86AB\', \'#27AE60\', \'#D4A533\', \'#8E44AD\', \'#1ABC9C\', \'#E67E22\', \'#34495E\', \'#16A085\', \'#2C3E50\'];

        // for tsikli
        for (let i = 1; i <= 10; i++) {
            html += \'<div style=\"width:80px;height:80px;background:\' + colors[i-1] + \';border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-weight:bold;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,0.2)\">\' + i + \'</div>\';
        }
        document.getElementById(\'demo\').innerHTML = html;

        // forEach demo
        let fanlar = [\'HTML\', \'CSS\', \'JavaScript\'];
        let list = \'<h3 style=\"margin-top:20px\">Fanlar (forEach):</h3><ul>\';
        fanlar.forEach(function(fan, index) {
            list += \'<li><b>\' + (index + 1) + \'.</b> \' + fan + \'</li>\';
        });
        list += \'</ul>\';
        document.getElementById(\'demo\').innerHTML += list;
    </script>
</body>
</html>','html',2,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (31,12,'Massivlar','js-massivlar-2','<h3>JavaScript Massivlar</h3>
<p>Massiv — bir nechta qiymatni bir o\'zgaruvchida saqlash.</p>
<h4>Massiv metodlari:</h4>
<ul>
<li><code>push()</code> — oxiriga qo\'shish</li>
<li><code>pop()</code> — oxiridan olish</li>
<li><code>shift()</code> — boshidan olish</li>
<li><code>length</code> — uzunlik</li>
<li><code>indexOf()</code> — indeksni topish</li>
<li><code>includes()</code> — mavjudlikni tekshirish</li>
<li><code>map()</code>, <code>filter()</code>, <code>reduce()</code> — transformatsiya</li>
</ul>','<!DOCTYPE html>
<html>
<body style=\"font-family:Arial;padding:20px;background:#f0f4f8\">
    <h2 style=\"color:#1B3A5C\">Massivlar</h2>
    <div id=\"r\" style=\"background:white;padding:20px;border-radius:12px;line-height:2\"></div>
    <script>
        let mevalar = [\'Olma\', \'Banan\', \'Uzum\', \'Anor\', \'Shaftoli\'];
        let sonlar = [10, 25, 3, 47, 8, 15, 32];
        let n = \'\';

        n += \'<b>Mevalar:</b> \' + mevalar.join(\', \') + \'<br>\';
        n += \'<b>Uzunlik:</b> \' + mevalar.length + \'<br>\';
        n += \'<b>mevalar[0]:</b> \' + mevalar[0] + \'<br>\';
        n += \'<b>Oxirgi:</b> \' + mevalar[mevalar.length - 1] + \'<br><hr>\';

        // push, pop
        mevalar.push(\'Nok\');
        n += \'<b>push(\"Nok\") keyin:</b> \' + mevalar.join(\', \') + \'<br>\';
        mevalar.pop();
        n += \'<b>pop() keyin:</b> \' + mevalar.join(\', \') + \'<br><hr>\';

        // filter va map
        let kattaSonlar = sonlar.filter(s => s > 15);
        n += \'<b>Sonlar:</b> \' + sonlar.join(\', \') + \'<br>\';
        n += \'<b>15 dan katta:</b> \' + kattaSonlar.join(\', \') + \'<br>\';

        let ikkiHissa = sonlar.map(s => s * 2);
        n += \'<b>Ikki hissa:</b> \' + ikkiHissa.join(\', \') + \'<br>\';

        let yigindi = sonlar.reduce((a, b) => a + b, 0);
        n += \'<b>Yig\\\'indi:</b> \' + yigindi;

        document.getElementById(\'r\').innerHTML = n;
    </script>
</body>
</html>','html',3,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (32,13,'Funksiya yaratish','js-funksiya-3','<h3>JavaScript Funksiyalar</h3>
<p>Funksiya — qayta ishlatiladigan kod bloki.</p>
<h4>Funksiya turlari:</h4>
<ul>
<li><code>function nom() {}</code> — oddiy funksiya</li>
<li><code>const nom = () => {}</code> — arrow funksiya</li>
<li><code>return</code> — qiymat qaytarish</li>
<li>Parametrlar va argumentlar</li>
</ul>','<!DOCTYPE html>
<html>
<body style=\"font-family:Arial;padding:20px;background:#f0f4f8;text-align:center\">
    <h2>Kalkulyator</h2>
    <input type=\"number\" id=\"a\" placeholder=\"Son 1\" style=\"padding:10px;width:100px;border-radius:8px;border:2px solid #ddd;font-size:18px\">
    <select id=\"op\" style=\"padding:10px;border-radius:8px;border:2px solid #ddd;font-size:18px\">
        <option>+</option><option>-</option><option>*</option><option>/</option>
    </select>
    <input type=\"number\" id=\"b\" placeholder=\"Son 2\" style=\"padding:10px;width:100px;border-radius:8px;border:2px solid #ddd;font-size:18px\">
    <button onclick=\"hisoblash()\" style=\"padding:10px 25px;background:#27AE60;color:white;border:none;border-radius:8px;font-size:18px;cursor:pointer\">=</button>
    <div id=\"natija\" style=\"margin-top:20px;font-size:36px;font-weight:800;color:#1B3A5C\"></div>

    <script>
        // Oddiy funksiya
        function qoshish(a, b) { return a + b; }
        function ayirish(a, b) { return a - b; }

        // Arrow funksiya
        const kopaytirish = (a, b) => a * b;
        const bolish = (a, b) => b !== 0 ? a / b : \'Nolga bo\\\'lish mumkin emas!\';

        function hisoblash() {
            let a = Number(document.getElementById(\'a\').value);
            let b = Number(document.getElementById(\'b\').value);
            let op = document.getElementById(\'op\').value;
            let natija;

            switch(op) {
                case \'+\': natija = qoshish(a, b); break;
                case \'-\': natija = ayirish(a, b); break;
                case \'*\': natija = kopaytirish(a, b); break;
                case \'/\': natija = bolish(a, b); break;
            }
            document.getElementById(\'natija\').textContent = natija;
        }
    </script>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (33,14,'DOM Asoslari','js-dom-4','<h3>DOM nima?</h3>
<p><strong>DOM</strong> (Document Object Model) — HTML sahifani JavaScript orqali boshqarish imkonini beradi.</p>
<h4>Elementni topish:</h4>
<ul>
<li><code>getElementById(\"id\")</code></li>
<li><code>querySelector(\".class\")</code></li>
<li><code>querySelectorAll(\"tag\")</code></li>
</ul>
<h4>Elementni o\'zgartirish:</h4>
<ul>
<li><code>.innerHTML</code> — HTML kontent</li>
<li><code>.textContent</code> — faqat matn</li>
<li><code>.style.xususiyat</code> — CSS stil</li>
<li><code>.classList.add/remove/toggle</code> — klass</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .todo-input { padding: 12px; width: 300px; border: 2px solid #ddd; border-radius: 10px; font-size: 16px; }
        .todo-btn { padding: 12px 25px; background: #2E86AB; color: white; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; margin-left: 10px; }
        .todo-list { list-style: none; padding: 0; max-width: 400px; margin: 20px auto; }
        .todo-list li { background: white; padding: 12px 15px; margin: 8px 0; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .todo-list li.done { text-decoration: line-through; opacity: 0.5; }
        .del-btn { background: #E84D3D; color: white; border: none; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
    </style>
</head>
<body>
    <h2>Todo Ilovasi</h2>
    <input type=\"text\" id=\"todoInput\" class=\"todo-input\" placeholder=\"Yangi vazifa...\">
    <button class=\"todo-btn\" onclick=\"addTodo()\">Qo\'shish</button>
    <ul class=\"todo-list\" id=\"todoList\"></ul>

    <script>
        function addTodo() {
            let input = document.getElementById(\'todoInput\');
            let text = input.value.trim();
            if (!text) return;

            let li = document.createElement(\'li\');
            li.innerHTML = \'<span onclick=\"this.parentElement.classList.toggle(\\\'done\\\')\">\' + text + \'</span>\' +
                \'<button class=\"del-btn\" onclick=\"this.parentElement.remove()\">X</button>\';
            document.getElementById(\'todoList\').appendChild(li);
            input.value = \'\';
            input.focus();
        }

        document.getElementById(\'todoInput\').addEventListener(\'keypress\', function(e) {
            if (e.key === \'Enter\') addTodo();
        });
    </script>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (34,14,'Element Yaratish va O\'chirish','js-create-elem-4','<h3>DOM - Element yaratish va o\'chirish</h3>
<ul>
<li><code>createElement()</code> — yangi element yaratish</li>
<li><code>appendChild()</code> — elementni qo\'shish</li>
<li><code>remove()</code> — elementni o\'chirish</li>
<li><code>insertBefore()</code> — oldin qo\'shish</li>
<li><code>cloneNode()</code> — nusxa olish</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px; }
        .square { width: 60px; height: 60px; border-radius: 10px; cursor: pointer; transition: all 0.3s; animation: popIn 0.3s; }
        .square:hover { transform: scale(1.2) rotate(10deg); }
        @keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
        button { padding: 10px 25px; margin: 5px; border: none; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; color: white; }
    </style>
</head>
<body>
    <h2 style=\"color:#1B3A5C\">Rangli kvadratlar</h2>
    <button style=\"background:#27AE60\" onclick=\"addSquare()\">+ Qo\'shish</button>
    <button style=\"background:#E84D3D\" onclick=\"clearAll()\">Hammasini o\'chirish</button>
    <button style=\"background:#8E44AD\" onclick=\"addRandom(10)\">10 ta qo\'shish</button>
    <div class=\"grid\" id=\"grid\"></div>
    <p id=\"count\" style=\"color:#888\">0 ta kvadrat</p>
    <script>
        const colors = [\'#E84D3D\',\'#2E86AB\',\'#27AE60\',\'#D4A533\',\'#8E44AD\',\'#1ABC9C\',\'#E67E22\',\'#34495E\'];
        const grid = document.getElementById(\'grid\');

        function addSquare() {
            const div = document.createElement(\'div\');
            div.className = \'square\';
            div.style.background = colors[Math.floor(Math.random() * colors.length)];
            div.onclick = () => { div.style.transform = \'scale(0)\'; setTimeout(() => div.remove(), 300); updateCount(); };
            grid.appendChild(div);
            updateCount();
        }

        function addRandom(n) { for (let i = 0; i < n; i++) setTimeout(addSquare, i * 100); }
        function clearAll() { grid.innerHTML = \'\'; updateCount(); }
        function updateCount() { document.getElementById(\'count\').textContent = grid.children.length + \' ta kvadrat\'; }
    </script>
</body>
</html>','html',2,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (35,15,'Event Listener va Hodisalar','js-events-5','<h3>JavaScript Hodisalar (Events)</h3>
<ul>
<li><code>click</code> — bosish</li>
<li><code>mouseover/mouseout</code> — sichqoncha kirishi/chiqishi</li>
<li><code>keydown/keyup</code> — klaviatura</li>
<li><code>input/change</code> — kiritish o\'zgarishi</li>
<li><code>submit</code> — forma yuborish</li>
</ul>
<p>Hodisalarni <code>addEventListener</code> bilan bog\'lash tavsiya etiladi.</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .box { width: 200px; height: 200px; background: #2E86AB; border-radius: 16px; margin: 20px auto; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s; user-select: none; }
        .counter { font-size: 4rem; font-weight: 900; color: #1B3A5C; }
        .btn-group button { padding: 10px 20px; margin: 5px; font-size: 18px; border: none; border-radius: 10px; cursor: pointer; color: white; font-weight: bold; }
    </style>
</head>
<body>
    <h2>Hodisalar Demo</h2>
    <div class=\"box\" id=\"box\">Menga bos!</div>
    <div class=\"counter\" id=\"counter\">0</div>
    <div class=\"btn-group\">
        <button style=\"background:#27AE60\" id=\"plus\">+1</button>
        <button style=\"background:#E84D3D\" id=\"minus\">-1</button>
        <button style=\"background:#D4A533\" id=\"reset\">Reset</button>
    </div>
    <p id=\"pos\" style=\"margin-top:15px;color:#888\"></p>

    <script>
        let count = 0;
        const counterEl = document.getElementById(\'counter\');
        const box = document.getElementById(\'box\');
        const colors = [\'#E84D3D\', \'#2E86AB\', \'#27AE60\', \'#D4A533\', \'#8E44AD\', \'#1ABC9C\'];

        // Click event
        document.getElementById(\'plus\').addEventListener(\'click\', () => {
            count++;
            counterEl.textContent = count;
        });
        document.getElementById(\'minus\').addEventListener(\'click\', () => {
            count--;
            counterEl.textContent = count;
        });
        document.getElementById(\'reset\').addEventListener(\'click\', () => {
            count = 0;
            counterEl.textContent = 0;
        });

        // Box color change on click
        box.addEventListener(\'click\', () => {
            box.style.background = colors[Math.floor(Math.random() * colors.length)];
            box.style.transform = \'scale(1.1) rotate(\' + (Math.random()*20-10) + \'deg)\';
            setTimeout(() => box.style.transform = \'scale(1)\', 200);
        });

        // Mousemove
        document.addEventListener(\'mousemove\', (e) => {
            document.getElementById(\'pos\').textContent = \'Sichqoncha: x=\' + e.clientX + \', y=\' + e.clientY;
        });
    </script>
</body>
</html>','html',1,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (36,15,'LocalStorage','js-localstorage-5','<h3>LocalStorage</h3>
<p>LocalStorage — brauzerda ma\'lumot saqlash. Sahifa yopilsa ham saqlanib qoladi.</p>
<ul>
<li><code>localStorage.setItem(\"key\", \"value\")</code> — saqlash</li>
<li><code>localStorage.getItem(\"key\")</code> — olish</li>
<li><code>localStorage.removeItem(\"key\")</code> — o\'chirish</li>
<li><code>localStorage.clear()</code> — hammasini tozalash</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .note-card { background: white; max-width: 500px; margin: 0 auto; padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        textarea { width: 100%; height: 150px; padding: 12px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 16px; resize: vertical; box-sizing: border-box; }
        textarea:focus { border-color: #2E86AB; outline: none; }
        button { padding: 10px 25px; margin: 5px; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; color: white; font-weight: bold; }
        .status { margin-top: 10px; padding: 8px; border-radius: 8px; font-weight: bold; }
    </style>
</head>
<body>
    <h2 style=\"color:#1B3A5C\">Eslatmalar (LocalStorage)</h2>
    <div class=\"note-card\">
        <textarea id=\"note\" placeholder=\"Eslatmangizni yozing...\"></textarea>
        <br>
        <button style=\"background:#27AE60\" onclick=\"saveNote()\">Saqlash</button>
        <button style=\"background:#2E86AB\" onclick=\"loadNote()\">Yuklash</button>
        <button style=\"background:#E84D3D\" onclick=\"clearNote()\">O\'chirish</button>
        <div id=\"status\" class=\"status\"></div>
    </div>
    <script>
        function saveNote() {
            const text = document.getElementById(\'note\').value;
            localStorage.setItem(\'myNote\', text);
            localStorage.setItem(\'savedTime\', new Date().toLocaleString());
            showStatus(\'Saqlandi! \' + new Date().toLocaleTimeString(), \'#27AE60\');
        }
        function loadNote() {
            const saved = localStorage.getItem(\'myNote\');
            const time = localStorage.getItem(\'savedTime\');
            if (saved) {
                document.getElementById(\'note\').value = saved;
                showStatus(\'Yuklandi! (Saqlangan: \' + time + \')\', \'#2E86AB\');
            } else {
                showStatus(\'Saqlangan eslatma topilmadi\', \'#E84D3D\');
            }
        }
        function clearNote() {
            localStorage.removeItem(\'myNote\');
            document.getElementById(\'note\').value = \'\';
            showStatus(\'O\\\'chirildi!\', \'#E84D3D\');
        }
        function showStatus(msg, color) {
            const el = document.getElementById(\'status\');
            el.textContent = msg;
            el.style.background = color + \'20\';
            el.style.color = color;
        }
        // Avtomatik yuklash
        window.onload = loadNote;
    </script>
</body>
</html>','html',2,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (37,15,'Fetch API va JSON','js-fetch-5','<h3>Fetch API</h3>
<p>Fetch — serverdan ma\'lumot olish va yuborish uchun zamonaviy usul.</p>
<ul>
<li><code>fetch(url)</code> — so\'rov yuborish</li>
<li><code>.then(response => response.json())</code> — JSON ga aylantirish</li>
<li><code>async/await</code> — asinxron sintaksis</li>
</ul>
<h4>JSON — JavaScript Object Notation</h4>
<p>Ma\'lumot almashish formati. Serverlar odatda JSON formatida javob beradi.</p>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; text-align: center; }
        .user-card { display: inline-block; background: white; padding: 20px; margin: 10px; border-radius: 16px; box-shadow: 0 2px 15px rgba(0,0,0,0.1); width: 200px; text-align: center; transition: 0.3s; }
        .user-card:hover { transform: translateY(-5px); }
        .avatar { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px; }
        button { padding: 12px 30px; background: #2E86AB; color: white; border: none; border-radius: 10px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h2 style=\"color:#1B3A5C\">Fetch API - Foydalanuvchilar</h2>
    <button onclick=\"loadUsers()\">Foydalanuvchilarni yuklash</button>
    <div id=\"users\" style=\"margin-top:20px\"></div>
    <script>
        async function loadUsers() {
            document.getElementById(\"users\").innerHTML = \"Yuklanmoqda...\";
            try {
                const response = await fetch(\"https://jsonplaceholder.typicode.com/users\");
                const users = await response.json();
                let html = \"\";
                users.slice(0, 6).forEach(function(user) {
                    html += \'<div class=\"user-card\">\' +
                        \'<img class=\"avatar\" src=\"https://ui-avatars.com/api/?name=\' + user.name + \'&background=2E86AB&color=fff&size=80\">\' +
                        \'<h4 style=\"color:#1B3A5C\">\' + user.name + \'</h4>\' +
                        \'<p style=\"color:#888;font-size:13px\">\' + user.email + \'</p></div>\';
                });
                document.getElementById(\"users\").innerHTML = html;
            } catch (error) {
                document.getElementById(\"users\").innerHTML = \"Xato: \" + error.message;
            }
        }
    </script>
</body>
</html>','html',3,15,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (38,15,'Amaliy Loyiha: Raqamli Soat','js-soat-5','<h3>Amaliy Loyiha: Raqamli Soat</h3>
<p>Bu loyihada biz HTML, CSS va JavaScript bilimlarimizni birlashtirib, chiroyli <strong>raqamli soat</strong> yaratamiz.</p>
<ul>
<li>JavaScript <code>setInterval</code> funksiyasi har sekundda yangilanadi</li>
<li><code>Date</code> ob\'ekti bilan vaqt olinadi</li>
<li>CSS animatsiya bilan chiroyli dizayn</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #0f2439, #1B3A5C, #2E86AB); font-family: Arial; }
        .clock-container { text-align: center; }
        .clock { font-size: 5rem; font-weight: 900; color: white; letter-spacing: 5px; text-shadow: 0 0 20px rgba(46,134,171,0.5); }
        .date { color: #D4A533; font-size: 1.3rem; margin-top: 10px; font-weight: 600; }
        .seconds-bar { width: 300px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: 15px auto; overflow: hidden; }
        .seconds-fill { height: 100%; background: linear-gradient(90deg, #D4A533, #27AE60); border-radius: 2px; transition: width 1s linear; }
        .greeting { color: rgba(255,255,255,0.7); font-size: 1.5rem; margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class=\"clock-container\">
        <div class=\"greeting\" id=\"greeting\"></div>
        <div class=\"clock\" id=\"clock\">00:00:00</div>
        <div class=\"seconds-bar\"><div class=\"seconds-fill\" id=\"secBar\"></div></div>
        <div class=\"date\" id=\"date\"></div>
    </div>
    <script>
        const kunlar = [\'Yakshanba\',\'Dushanba\',\'Seshanba\',\'Chorshanba\',\'Payshanba\',\'Juma\',\'Shanba\'];
        const oylar = [\'Yanvar\',\'Fevral\',\'Mart\',\'Aprel\',\'May\',\'Iyun\',\'Iyul\',\'Avgust\',\'Sentabr\',\'Oktabr\',\'Noyabr\',\'Dekabr\'];

        function updateClock() {
            const now = new Date();
            const h = String(now.getHours()).padStart(2, \'0\');
            const m = String(now.getMinutes()).padStart(2, \'0\');
            const s = String(now.getSeconds()).padStart(2, \'0\');

            document.getElementById(\'clock\').textContent = h + \':\' + m + \':\' + s;
            document.getElementById(\'date\').textContent = kunlar[now.getDay()] + \', \' + now.getDate() + \' \' + oylar[now.getMonth()] + \' \' + now.getFullYear();
            document.getElementById(\'secBar\').style.width = (now.getSeconds() / 59 * 100) + \'%\';

            let soat = now.getHours();
            let salom = soat < 6 ? \'Tun xayrli!\' : soat < 12 ? \'Xayrli tong!\' : soat < 18 ? \'Xayrli kun!\' : \'Xayrli kech!\';
            document.getElementById(\'greeting\').textContent = salom;
        }

        updateClock();
        setInterval(updateClock, 1000);
    </script>
</body>
</html>','html',4,20,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `lessons` (`id`,`topic_id`,`title`,`slug`,`content`,`code_example`,`code_language`,`order`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (39,15,'Yakuniy Loyiha: Ob-havo Ilovasi','js-weather-5','<h3>Yakuniy Loyiha: Ob-havo Ilovasi</h3>
<p>HTML, CSS va JavaScript bilimlarimizni birlashtirgan to\'liq loyiha. Bu ilovada:</p>
<ul>
<li>Chiroyli UI dizayn (CSS)</li>
<li>Foydalanuvchi bilan interaksiya (JS Events)</li>
<li>Ma\'lumotlarni dinamik ko\'rsatish (DOM)</li>
<li>Animatsiyalar va transition</li>
</ul>','<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial; }
        body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1B3A5C, #2E86AB); }
        .weather-app { background: rgba(255,255,255,0.95); width: 380px; border-radius: 24px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); text-align: center; }
        .search { display: flex; gap: 8px; margin-bottom: 20px; }
        .search input { flex: 1; padding: 12px; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 16px; }
        .search input:focus { border-color: #2E86AB; outline: none; }
        .search button { padding: 12px 18px; background: #2E86AB; color: white; border: none; border-radius: 12px; cursor: pointer; font-size: 16px; }
        .weather-icon { font-size: 5rem; margin: 10px 0; }
        .temp { font-size: 4rem; font-weight: 900; color: #1B3A5C; }
        .city { font-size: 1.5rem; color: #2E86AB; font-weight: 700; margin: 5px 0; }
        .details { display: flex; justify-content: space-around; margin-top: 20px; padding-top: 15px; border-top: 2px solid #f0f0f0; }
        .detail { text-align: center; }
        .detail-value { font-size: 1.2rem; font-weight: 800; color: #1B3A5C; }
        .detail-label { font-size: 0.8rem; color: #888; }
    </style>
</head>
<body>
    <div class=\"weather-app\">
        <div class=\"search\">
            <input type=\"text\" id=\"cityInput\" placeholder=\"Shahar nomi...\" value=\"Toshkent\">
            <button onclick=\"getWeather()\">&#128269;</button>
        </div>
        <div id=\"weatherData\">
            <div class=\"weather-icon\" id=\"icon\">&#9925;</div>
            <div class=\"temp\" id=\"temp\">--&deg;C</div>
            <div class=\"city\" id=\"city\">Shahar</div>
            <div style=\"color:#888\" id=\"desc\">Ob-havo</div>
            <div class=\"details\">
                <div class=\"detail\"><div class=\"detail-value\" id=\"humidity\">--%</div><div class=\"detail-label\">Namlik</div></div>
                <div class=\"detail\"><div class=\"detail-value\" id=\"wind\">-- km/s</div><div class=\"detail-label\">Shamol</div></div>
                <div class=\"detail\"><div class=\"detail-value\" id=\"feels\">--&deg;C</div><div class=\"detail-label\">His qilish</div></div>
            </div>
        </div>
    </div>
    <script>
        const cities = {
            \'toshkent\': { temp: 32, feels: 35, humidity: 40, wind: 12, desc: \'Quyoshli\', icon: \'&#9728;&#65039;\' },
            \'samarqand\': { temp: 30, feels: 33, humidity: 45, wind: 8, desc: \'Bulutli\', icon: \'&#9925;\' },
            \'buxoro\': { temp: 36, feels: 39, humidity: 25, wind: 15, desc: \'Issiq\', icon: \'&#127774;\' },
            \'guliston\': { temp: 33, feels: 36, humidity: 50, wind: 10, desc: \'Qisman bulutli\', icon: \'&#127780;&#65039;\' },
            \'fargona\': { temp: 29, feels: 31, humidity: 55, wind: 7, desc: \'Yomg\\\'irli\', icon: \'&#127783;&#65039;\' },
            \'namangan\': { temp: 28, feels: 30, humidity: 60, wind: 5, desc: \'Bulutli\', icon: \'&#9729;&#65039;\' },
        };

        function getWeather() {
            const city = document.getElementById(\'cityInput\').value.toLowerCase().trim();
            const data = cities[city];
            if (data) {
                document.getElementById(\'icon\').innerHTML = data.icon;
                document.getElementById(\'temp\').innerHTML = data.temp + \'&deg;C\';
                document.getElementById(\'city\').textContent = city.charAt(0).toUpperCase() + city.slice(1);
                document.getElementById(\'desc\').textContent = data.desc;
                document.getElementById(\'humidity\').textContent = data.humidity + \'%\';
                document.getElementById(\'wind\').textContent = data.wind + \' km/s\';
                document.getElementById(\'feels\').innerHTML = data.feels + \'&deg;C\';
            } else {
                document.getElementById(\'city\').textContent = \'Topilmadi!\';
                document.getElementById(\'desc\').textContent = \'Toshkent, Samarqand, Buxoro, Guliston, Farg\\\'ona, Namangan kiriting\';
            }
        }

        document.getElementById(\'cityInput\').addEventListener(\'keypress\', (e) => { if (e.key === \'Enter\') getWeather(); });
        getWeather();
    </script>
</body>
</html>','html',5,20,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `quizzes` (`id`,`lesson_id`,`course_id`,`title`,`description`,`time_limit`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (1,NULL,1,'HTML Asoslari Testi','HTML bo\'yicha bilimlaringizni sinab ko\'ring',300,30,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `quizzes` (`id`,`lesson_id`,`course_id`,`title`,`description`,`time_limit`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (2,NULL,2,'CSS Asoslari Testi','CSS bilimlaringizni tekshiring',300,25,1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quizzes` (`id`,`lesson_id`,`course_id`,`title`,`description`,`time_limit`,`points`,`is_active`,`created_at`,`updated_at`) VALUES (3,NULL,3,'JavaScript Asoslari Testi','JavaScript bilimlaringizni tekshiring',600,35,1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (1,1,'HTML nimaning qisqartmasi?','multiple_choice','[\"HyperText Markup Language\",\"High Tech Modern Language\",\"Hyper Transfer Markup Language\",\"Home Tool Markup Language\"]','HyperText Markup Language',NULL,NULL,5,0,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (2,1,'Eng katta sarlavha tegi qaysi?','multiple_choice','[\"<h6>\",\"<h1>\",\"<heading>\",\"<head>\"]','<h1>',NULL,NULL,5,1,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (3,1,'Rasm qo\'shish uchun qaysi teg?','multiple_choice','[\"<img>\",\"<image>\",\"<pic>\",\"<photo>\"]','<img>',NULL,NULL,5,2,'2026-06-27 16:04:02','2026-06-27 16:04:02');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (4,1,'Tartibsiz ro\'yxat tegi?','multiple_choice','[\"<ul>\",\"<ol>\",\"<li>\",\"<list>\"]','<ul>',NULL,NULL,5,3,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (5,1,'Havola yaratish tegi?','multiple_choice','[\"<a>\",\"<link>\",\"<href>\",\"<url>\"]','<a>',NULL,NULL,5,4,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (6,1,'HTML hujjati qanday boshlanadi?','multiple_choice','[\"<!DOCTYPE html>\",\"<html>\",\"<head>\",\"<document>\"]','<!DOCTYPE html>',NULL,NULL,5,5,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (7,2,'CSS nimaning qisqartmasi?','multiple_choice','[\"Cascading Style Sheets\",\"Computer Style Sheets\",\"Creative Style System\",\"Colorful Style Sheets\"]','Cascading Style Sheets',NULL,NULL,5,0,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (8,2,'Matn rangini o\'zgartirish?','multiple_choice','[\"color\",\"text-color\",\"font-color\",\"text-style\"]','color',NULL,NULL,5,1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (9,2,'Fon rangini belgilash?','multiple_choice','[\"background-color\",\"bgcolor\",\"color-background\",\"back-color\"]','background-color',NULL,NULL,5,2,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (10,2,'ID selektori belgisi?','multiple_choice','[\"#\",\".\",\"@\",\"&\"]','#',NULL,NULL,5,3,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (11,2,'Class selektori belgisi?','multiple_choice','[\".\",\"#\",\"*\",\"&\"]','.',NULL,NULL,5,4,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (12,3,'O\'zgaruvchi e\'lon qilish uchun qaysi kalit so\'z ishlatiladi?','multiple_choice','[\"let\",\"var\",\"const\",\"Hammasini\"]','Hammasini',NULL,NULL,5,0,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (13,3,'JavaScript\'da console.log() nima qiladi?','multiple_choice','[\"Konsolga chiqaradi\",\"Oynaga yozadi\",\"Faylga saqlaydi\",\"Serverga yuboradi\"]','Konsolga chiqaradi',NULL,NULL,5,1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (14,3,'typeof 42 ning natijasi nima?','multiple_choice','[\"number\",\"string\",\"integer\",\"float\"]','number',NULL,NULL,5,2,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (15,3,'Massiv yaratish uchun qaysi belgilar ishlatiladi?','multiple_choice','[\"[]\",\"{}\",\"()\",\"<>\"]','[]',NULL,NULL,5,3,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (16,3,'=== operatori nimani tekshiradi?','multiple_choice','[\"Qiymat va turni\",\"Faqat qiymatni\",\"Faqat turni\",\"Hech nima\"]','Qiymat va turni',NULL,NULL,5,4,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (17,3,'DOM nima?','multiple_choice','[\"Document Object Model\",\"Data Object Method\",\"Digital Output Mode\",\"Document Order Model\"]','Document Object Model',NULL,NULL,5,5,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `quiz_questions` (`id`,`quiz_id`,`question`,`type`,`options`,`correct_answer`,`explanation`,`code_snippet`,`points`,`order`,`created_at`,`updated_at`) VALUES (18,3,'\"5\" + 3 ning natijasi nima?','multiple_choice','[\"\\\"53\\\"\",\"8\",\"53\",\"Xato\"]','\"53\"',NULL,NULL,5,6,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (1,'HTML Teglarni Top!','html-teglarni-top','HTML teglarini ularning vazifalari bilan moslashtiring','matching',1,'{\"pairs\":[{\"q\":\"&lt;h1&gt;\",\"a\":\"Sarlavha tegi\"},{\"q\":\"&lt;p&gt;\",\"a\":\"Paragraf tegi\"},{\"q\":\"&lt;a&gt;\",\"a\":\"Havola tegi\"},{\"q\":\"&lt;img&gt;\",\"a\":\"Rasm tegi\"},{\"q\":\"&lt;ul&gt;\",\"a\":\"Tartibsiz ro\'yxat\"},{\"q\":\"&lt;table&gt;\",\"a\":\"Jadval tegi\"}]}',60,'easy',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (2,'CSS Kodini Tez Yoz!','css-tez-yoz','CSS kodini tez va to\'g\'ri yozing','speed_typing',2,'{\"texts\":[\"body { color: red; font-size: 16px; }\",\"h1 { text-align: center; color: blue; }\",\".box { padding: 20px; margin: 10px; }\"]}',80,'medium',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (3,'HTML Kod Yozish','html-kod-yozish','Vazifalarni HTML kod yozib bajaring','code_challenge',1,'{\"challenges\":[{\"task\":\"H1 sarlavha yarating \\\"Salom!\\\" matni bilan\",\"answer\":\"<h1>Salom!<\\/h1>\",\"hint\":\"<h1> tegi sarlavha uchun ishlatiladi\"},{\"task\":\"Paragraf yarating \\\"Bu test\\\" matni bilan\",\"answer\":\"<p>Bu test<\\/p>\",\"hint\":\"<p> tegi paragraf uchun ishlatiladi\"},{\"task\":\"Qalin matn yarating \\\"Muhim\\\" so\'zi bilan\",\"answer\":\"<strong>Muhim<\\/strong>\",\"hint\":\"<strong> tegi qalin matn uchun\"},{\"task\":\"Kursiv matn yarating \\\"Eslatma\\\" so\'zi bilan\",\"answer\":\"<em>Eslatma<\\/em>\",\"hint\":\"<em> tegi kursiv matn uchun\"},{\"task\":\"Google.com ga havola yarating \\\"Google\\\" matni bilan\",\"answer\":\"<a href=\\\"https:\\/\\/google.com\\\">Google<\\/a>\",\"hint\":\"<a href=\\\"URL\\\">matn<\\/a> formatida\"}]}',100,'medium',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (4,'HTML Teglar Xotira O\'yini','html-memory','HTML teglarini eslab juftliklarni toping!','memory',1,'{\"cards\":[{\"front\":\"&lt;h1&gt;\",\"back\":\"Sarlavha\"},{\"front\":\"&lt;p&gt;\",\"back\":\"Paragraf\"},{\"front\":\"&lt;a&gt;\",\"back\":\"Havola\"},{\"front\":\"&lt;img&gt;\",\"back\":\"Rasm\"},{\"front\":\"&lt;div&gt;\",\"back\":\"Blok\"},{\"front\":\"&lt;ul&gt;\",\"back\":\"Ro\'yxat\"}]}',80,'easy',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (5,'HTML da Xatoni Top!','html-bug-finder','Koddagi xatoli qatorni toping','bug_finder',1,'{\"bugs\":[{\"hint\":\"Sarlavha tegi noto\'g\'ri yopilgan\",\"lines\":[{\"code\":\"<span class=\\\"tag\\\">&lt;html&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"  <span class=\\\"tag\\\">&lt;body&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"    <span class=\\\"tag\\\">&lt;h1&gt;<\\/span>Salom<span class=\\\"tag\\\">&lt;\\/h2&gt;<\\/span>\",\"hasBug\":true},{\"code\":\"  <span class=\\\"tag\\\">&lt;\\/body&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"<span class=\\\"tag\\\">&lt;\\/html&gt;<\\/span>\",\"hasBug\":false}]},{\"hint\":\"Rasm tegida xato bor\",\"lines\":[{\"code\":\"<span class=\\\"tag\\\">&lt;body&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"  <span class=\\\"tag\\\">&lt;h1&gt;<\\/span>Rasmlar<span class=\\\"tag\\\">&lt;\\/h1&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"  <span class=\\\"tag\\\">&lt;img<\\/span> <span class=\\\"attr\\\">scr<\\/span>=<span class=\\\"string\\\">\\\"foto.jpg\\\"<\\/span><span class=\\\"tag\\\">&gt;<\\/span>\",\"hasBug\":true},{\"code\":\"  <span class=\\\"tag\\\">&lt;p&gt;<\\/span>Rasm yuqorida<span class=\\\"tag\\\">&lt;\\/p&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"<span class=\\\"tag\\\">&lt;\\/body&gt;<\\/span>\",\"hasBug\":false}]},{\"hint\":\"Havola tegida xato bor\",\"lines\":[{\"code\":\"<span class=\\\"tag\\\">&lt;body&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"  <span class=\\\"tag\\\">&lt;p&gt;<\\/span>Bu saytga o\'ting:<span class=\\\"tag\\\">&lt;\\/p&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"  <span class=\\\"tag\\\">&lt;a<\\/span> <span class=\\\"attr\\\">hrf<\\/span>=<span class=\\\"string\\\">\\\"https:\\/\\/google.com\\\"<\\/span><span class=\\\"tag\\\">&gt;<\\/span>Google<span class=\\\"tag\\\">&lt;\\/a&gt;<\\/span>\",\"hasBug\":true},{\"code\":\"  <span class=\\\"tag\\\">&lt;p&gt;<\\/span>Rahmat!<span class=\\\"tag\\\">&lt;\\/p&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"<span class=\\\"tag\\\">&lt;\\/body&gt;<\\/span>\",\"hasBug\":false}]},{\"hint\":\"Ro\'yxat tegida xato bor\",\"lines\":[{\"code\":\"<span class=\\\"tag\\\">&lt;h2&gt;<\\/span>Mening fanlarim<span class=\\\"tag\\\">&lt;\\/h2&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"<span class=\\\"tag\\\">&lt;ol&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"  <span class=\\\"tag\\\">&lt;li&gt;<\\/span>Matematika<span class=\\\"tag\\\">&lt;\\/il&gt;<\\/span>\",\"hasBug\":true},{\"code\":\"  <span class=\\\"tag\\\">&lt;li&gt;<\\/span>Fizika<span class=\\\"tag\\\">&lt;\\/li&gt;<\\/span>\",\"hasBug\":false},{\"code\":\"<span class=\\\"tag\\\">&lt;\\/ol&gt;<\\/span>\",\"hasBug\":false}]}]}',100,'medium',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (6,'JavaScript Natijani Top!','js-output-quiz','JavaScript kodi qanday natija beradi?','output_quiz',3,'{\"questions\":[{\"code\":\"let x = 5;\\nlet y = 3;\\nconsole.log(x + y);\",\"answer\":\"8\",\"options\":[\"8\",\"53\",\"15\",\"undefined\"]},{\"code\":\"let ism = \\\"Salom\\\";\\nconsole.log(ism.length);\",\"answer\":\"5\",\"options\":[\"5\",\"6\",\"4\",\"Salom\"]},{\"code\":\"let arr = [1, 2, 3];\\nconsole.log(arr[1]);\",\"answer\":\"2\",\"options\":[\"1\",\"2\",\"3\",\"undefined\"]},{\"code\":\"console.log(typeof \\\"42\\\");\",\"answer\":\"string\",\"options\":[\"number\",\"string\",\"integer\",\"boolean\"]},{\"code\":\"let a = true;\\nlet b = false;\\nconsole.log(a && b);\",\"answer\":\"false\",\"options\":[\"true\",\"false\",\"undefined\",\"null\"]},{\"code\":\"let x = 10;\\nx += 5;\\nconsole.log(x);\",\"answer\":\"15\",\"options\":[\"15\",\"10\",\"5\",\"105\"]},{\"code\":\"let s = \\\"Web\\\";\\ns += \\\"Dastur\\\";\\nconsole.log(s);\",\"answer\":\"WebDastur\",\"options\":[\"WebDastur\",\"Web Dastur\",\"Web\",\"Dastur\"]}]}',100,'medium',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (7,'CSS Ranglarni Top!','css-color-picker','Berilgan rangni CSS kodiga moslashtiring','color_picker',2,'{\"colors\":[{\"name\":\"Bu qaysi rang?\",\"color\":\"#E84D3D\",\"options\":[{\"color\":\"#E84D3D\",\"label\":\"#E84D3D\",\"correct\":true},{\"color\":\"#3498DB\",\"label\":\"#3498DB\",\"correct\":false},{\"color\":\"#27AE60\",\"label\":\"#27AE60\",\"correct\":false},{\"color\":\"#F39C12\",\"label\":\"#F39C12\",\"correct\":false}]},{\"name\":\"Bu qaysi rang?\",\"color\":\"#2E86AB\",\"options\":[{\"color\":\"#E74C3C\",\"label\":\"#E74C3C\",\"correct\":false},{\"color\":\"#2E86AB\",\"label\":\"#2E86AB\",\"correct\":true},{\"color\":\"#8E44AD\",\"label\":\"#8E44AD\",\"correct\":false},{\"color\":\"#1ABC9C\",\"label\":\"#1ABC9C\",\"correct\":false}]},{\"name\":\"Bu qaysi rang?\",\"color\":\"#F39C12\",\"options\":[{\"color\":\"#D4A533\",\"label\":\"#D4A533\",\"correct\":false},{\"color\":\"#E74C3C\",\"label\":\"#E74C3C\",\"correct\":false},{\"color\":\"#F39C12\",\"label\":\"#F39C12\",\"correct\":true},{\"color\":\"#E67E22\",\"label\":\"#E67E22\",\"correct\":false}]},{\"name\":\"Bu qaysi rang?\",\"color\":\"#27AE60\",\"options\":[{\"color\":\"#2ECC71\",\"label\":\"#2ECC71\",\"correct\":false},{\"color\":\"#27AE60\",\"label\":\"#27AE60\",\"correct\":true},{\"color\":\"#1ABC9C\",\"label\":\"#1ABC9C\",\"correct\":false},{\"color\":\"#16A085\",\"label\":\"#16A085\",\"correct\":false}]},{\"name\":\"Bu qaysi rang?\",\"color\":\"#8E44AD\",\"options\":[{\"color\":\"#9B59B6\",\"label\":\"#9B59B6\",\"correct\":false},{\"color\":\"#2E86AB\",\"label\":\"#2E86AB\",\"correct\":false},{\"color\":\"#8E44AD\",\"label\":\"#8E44AD\",\"correct\":true},{\"color\":\"#E84D3D\",\"label\":\"#E84D3D\",\"correct\":false}]}]}',80,'easy',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (8,'CSS Xususiyatlarni Top!','css-properties-match','CSS xususiyatlarini ularning vazifalari bilan moslashtiring','matching',2,'{\"pairs\":[{\"q\":\"color\",\"a\":\"Matn rangi\"},{\"q\":\"font-size\",\"a\":\"Shrift o\'lchami\"},{\"q\":\"margin\",\"a\":\"Tashqi bo\'shliq\"},{\"q\":\"padding\",\"a\":\"Ichki bo\'shliq\"},{\"q\":\"border-radius\",\"a\":\"Burchak yumalatish\"},{\"q\":\"background-color\",\"a\":\"Fon rangi\"},{\"q\":\"text-align\",\"a\":\"Matn tekislash\"}]}',70,'medium',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (9,'JavaScript Tez Yozing!','js-speed-typing','JavaScript kodini tez va to\'g\'ri yozing!','speed_typing',3,'{\"texts\":[\"let x = 10;\",\"console.log(\\\"Salom!\\\");\",\"function sum(a, b) { return a + b; }\",\"document.getElementById(\\\"demo\\\");\",\"for (let i = 0; i < 5; i++) {}\"]}',90,'hard',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');
INSERT INTO `games` (`id`,`title`,`slug`,`description`,`type`,`course_id`,`config`,`max_points`,`difficulty`,`is_active`,`created_at`,`updated_at`) VALUES (10,'CSS Xotira O\'yini','css-memory','CSS xususiyatlarini eslab juftliklarni toping','memory',2,'{\"cards\":[{\"front\":\"color\",\"back\":\"Matn rangi\"},{\"front\":\"padding\",\"back\":\"Ichki bo\'shliq\"},{\"front\":\"margin\",\"back\":\"Tashqi bo\'shliq\"},{\"front\":\"display\",\"back\":\"Ko\'rinish turi\"},{\"front\":\"border\",\"back\":\"Chegara\"},{\"front\":\"font-size\",\"back\":\"Shrift o\'lchami\"}]}',80,'medium',1,'2026-06-27 16:04:03','2026-06-27 16:04:03');

INSERT INTO `migrations` (`migration`, `batch`) VALUES ('0001_01_01_000000_create_users_table', 1);
INSERT INTO `migrations` (`migration`, `batch`) VALUES ('0001_01_01_000001_create_cache_table', 1);
INSERT INTO `migrations` (`migration`, `batch`) VALUES ('0001_01_01_000002_create_jobs_table', 1);
INSERT INTO `migrations` (`migration`, `batch`) VALUES ('2024_01_01_000001_create_courses_table', 1);

SET FOREIGN_KEY_CHECKS = 1;