Mad1yarBakhtiyar/index.html

## index.html
<!DOCTYPE html>
<html lang="kk">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IT сұрақтар</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
      color: #333;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      margin-bottom: 30px;
      font-size: 24px;
    }

    .quiz-container {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .question {
      font-weight: bold;
      margin-bottom: 15px;
      font-size: 18px;
    }

    .options {
      margin-bottom: 20px;
    }

    .option {
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .option:hover {
      background-color: #f0f0f0;
    }

    .option.selected {
      background-color: #3498db;
      color: white;
      border-color: #3498db;
    }

    .option.correct {
      background-color: #2ecc71;
      color: white;
      border-color: #2ecc71;
    }

    .option.incorrect {
      background-color: #e74c3c;
      color: white;
      border-color: #e74c3c;
    }

    button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
      margin-right: 10px;
    }

    button:hover {
      background-color: #2980b9;
    }

    .result {
      text-align: center;
      font-size: 20px;
      margin-top: 20px;
      font-weight: bold;
    }

    .hidden {
      display: none;
    }

    .progress {
      margin-bottom: 20px;
      text-align: right;
      color: #7f8c8d;
    }

    .final-score {
      text-align: center;
      font-size: 24px;
      margin: 20px 0;
      color: #2c3e50;
    }
  </style>
</head>

<body>
  <h1>IT сұрақтар</h1>

  <div class="progress">
    Сұрақ <span id="current-question">1</span> / <span id="total-questions">20</span>
  </div>

  <div class="quiz-container" id="quiz">
    <div class="question" id="question"></div>
    <div class="options" id="options"></div>
    <div>
      <button id="submit-btn">Жауапты тексеру</button>
      <button id="next-btn" class="hidden">Келесі</button>
    </div>
    <div class="result" id="result"></div>
  </div>

  <script>
    const questions = [{
        question: "HTML дегеніміз не?",
        options: [
          "HyperText Markup Language",
          "HighText Machine Language",
          "HyperTool Multi Language",
          "HomeText Markup Language"
        ],
        answer: 0
      },
      {
        question: "Интернеттегі веб-беттерді жеткізу үшін қандай протокол қолданылады?",
        options: [
          "FTP",
          "SMTP",
          "HTTP",
          "IP"
        ],
        answer: 2
      },
      {
        question: "Android қосымшаларын жасау үшін қолданылатын негізгі бағдарламалау тілі қандай?",
        options: [
          "Kotlin",
          "Swift",
          "Ruby",
          "Go"
        ],
        answer: 0
      },
      {
        question: "Веб-сайттағы 'Жүктеу' түймесі не істейді?",
        options: [
          "Файлды интернетке жібереді",
          "Файлды компьютерге сақтайды",
          "Жаңа терезе ашады",
          "Файлды жояды"
        ],
        answer: 1
      },
      {
        question: "Қай сан бүтін сан болып табылады?",
        options: [
          "3.14",
          "7",
          "0.5",
          "2.8"
        ],
        answer: 1
      },
      {
        question: "IP-адрес дегеніміз не?",
        options: [
          "Браузердегі қолданушы нөмірі",
          "Интернет-провайдердің атауы",
          "Желіде құрылғының ерекше мекенжайы",
          "Веб-беттегі код"
        ],
        answer: 2
      },
      {
        question: "Төмендегі қай тіл интерпретатор арқылы жұмыс істейді?",
        options: [
          "C++",
          "Java",
          "Python",
          "Go"
        ],
        answer: 2
      },
      {
        question: "Microsoft Excel бағдарламасы не үшін қолданылады?",
        options: [
          "Сурет салу үшін",
          "Мәтін теру үшін",
          "Кестелермен жұмыс істеу үшін",
          "Видео көру үшін"
        ],
        answer: 2
      },
      {
        question: "Компьютерлік вирус деген не?",
        options: [
          "Компьютерлік ойын",
          "Интернеттегі қате",
          "Зиянды бағдарлама",
          "Қарапайым файл"
        ],
        answer: 2
      },
      {
        question: "Гигабайттан кейінгі ақпарат бірлігі қандай?",
        options: [
          "Мегабайт",
          "Килобайт",
          "Терабайт",
          "Пентабайт"
        ],
        answer: 2
      },
      {
        question: "Компьютердің негізгі бөлігін қалай атайды?",
        options: [
          "Монитор",
          "Жүйелік блок",
          "Пернетақта",
          "Тінтуір"
        ],
        answer: 1
      },
      {
        question: "Компьютердің жады (память) не үшін керек?",
        options: [
          "Экранды қосу үшін",
          "Ақпаратты уақытша сақтау үшін",
          "Электр қуатын беру үшін",
          "Принтермен байланыс үшін"
        ],
        answer: 1
      },
      {
        question: "Интернетке қосылу үшін не қажет?",
        options: [
          "Микрофон",
          "Wi-Fi немесе кабель",
          "Принтер",
          "Камера"
        ],
        answer: 1
      },
      {
        question: "Компьютердегі 'қапшық' (папка) не үшін керек?",
        options: [
          "Ойын ойнау үшін",
          "Жүйені өшіру үшін",
          "Файлдарды сақтау және ұйымдастыру үшін",
          "Тек суреттерді көру үшін"
        ],
        answer: 2
      },
      {
        question: "Электронды пошта (email) не үшін керек?",
        options: [
          "Фото салу үшін",
          "Хат алмасу үшін",
          "Видеоны көру үшін",
          "Принтерді қосу үшін"
        ],
        answer: 1
      },
      {
        question: "Компьютердің пернетақтасы не үшін керек?",
        options: [
          "Дыбыс шығару үшін",
          "Тінтуірді басқару үшін",
          "Мәлімет теру үшін",
          "Экранды өшіру үшін"
        ],
        answer: 2
      },
      {
        question: "Интернеттегі 'браузер' дегеніміз не?",
        options: [
          "Ойын бағдарламасы",
          "Видео редактор",
          "Веб-сайттарды ашатын бағдарлама",
          "Компьютердің микрофоны"
        ],
        answer: 2
      },
      {
        question: "Компьютердегі 'Shift' пернесінің қызметі қандай?",
        options: [
          "Компьютерді өшіреді",
          "Бас әріппен жазуға көмектеседі",
          "Файлды жояды",
          "Бетті жаңартады"
        ],
        answer: 1
      },
      {
        question: "Вирусқа қарсы бағдарлама қалай аталады?",
        options: [
          "Интернет",
          "Браузер",
          "Антивирус",
          "Веб-сервер"
        ],
        answer: 2
      },
      {
        question: "Принтер не істейді?",
        options: [
          "Мәтін тереді",
          "Сурет салады",
          "Ақпаратты қағазға басып шығарады",
          "Видеоны көрсетеді"
        ],
        answer: 2
      }
    ];
    let currentQuestion = 0;
    let score = 0;
    let selectedOption = null;
    const questionElement = document.getElementById('question');
    const optionsElement = document.getElementById('options');
    const nextButton = document.getElementById('next-btn');
    const submitButton = document.getElementById('submit-btn');
    const resultElement = document.getElementById('result');
    const currentQuestionElement = document.getElementById('current-question');
    const totalQuestionsElement = document.getElementById('total-questions');
    const quizContainer = document.getElementById('quiz');
    totalQuestionsElement.textContent = questions.length;

    function loadQuestion() {
      currentQuestionElement.textContent = currentQuestion + 1;
      const question = questions[currentQuestion];
      questionElement.textContent = question.question;
      optionsElement.innerHTML = '';
      question.options.forEach((option, index) => {
        const optionElement = document.createElement('div');
        optionElement.classList.add('option');
        optionElement.textContent = option;
        optionElement.dataset.index = index;
        optionElement.addEventListener('click', selectOption);
        optionsElement.appendChild(optionElement);
      });
      nextButton.classList.add('hidden');
      submitButton.classList.remove('hidden');
      resultElement.textContent = '';
      selectedOption = null;
    }

    function selectOption(e) {
      const options = document.querySelectorAll('.option');
      options.forEach(option => option.classList.remove('selected'));
      e.target.classList.add('selected');
      selectedOption = parseInt(e.target.dataset.index);
    }

    function checkAnswer() {
      if (selectedOption === null) return;
      const question = questions[currentQuestion];
      const options = document.querySelectorAll('.option');
      options.forEach(option => {
        option.classList.remove('correct', 'incorrect');
        const optionIndex = parseInt(option.dataset.index);
        if (optionIndex === question.answer) {
          option.classList.add('correct');
        } else if (optionIndex === selectedOption && selectedOption !== question.answer) {
          option.classList.add('incorrect');
        }
      });
      if (selectedOption === question.answer) {
        score++;
        resultElement.textContent = 'Дұрыс!';
        resultElement.style.color = '#2ecc71';
      } else {
        resultElement.textContent = 'Қате!';
        resultElement.style.color = '#e74c3c';
      }
      submitButton.classList.add('hidden');
      nextButton.classList.remove('hidden');
    }

    function nextQuestion() {
      currentQuestion++;
      if (currentQuestion < questions.length) {
        loadQuestion();
      } else {
        showResult();
      }
    }

    function showResult() {
      quizContainer.innerHTML = `
                <div class="final-score">
                    <h2>Викторина аяқталды!</h2>
                    <p>Сіз ${score} дұрыс жауап бердіңіз (${questions.length} сұрақтан).</p>
                    <p>Қорытынды балл: ${Math.round((score / questions.length) * 100)}%</p>
                    <button onclick="location.reload()">Қайтадан бастау</button>
                </div>
            `;
    }
    submitButton.addEventListener('click', checkAnswer);
    nextButton.addEventListener('click', nextQuestion);
    loadQuestion();
  </script>
</body>

</html>

## untitled.markdown

      
    Raw
  

              untitled.markdown
            
          
    Untitled

A Pen by Madiyar Bakhtiyar on CodePen.
License.
	<!DOCTYPE html>
	<html lang="kk">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>IT сұрақтар</title>
	<style>
	body {
	font-family: 'Arial', sans-serif;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f5f5f5;
	color: #333;
	}

	h1 {
	color: #2c3e50;
	text-align: center;
	margin-bottom: 30px;
	font-size: 24px;
	}

	.quiz-container {
	background-color: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	}

	.question {
	font-weight: bold;
	margin-bottom: 15px;
	font-size: 18px;
	}

	.options {
	margin-bottom: 20px;
	}

	.option {
	margin: 10px 0;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
	}

	.option:hover {
	background-color: #f0f0f0;
	}

	.option.selected {
	background-color: #3498db;
	color: white;
	border-color: #3498db;
	}

	.option.correct {
	background-color: #2ecc71;
	color: white;
	border-color: #2ecc71;
	}

	.option.incorrect {
	background-color: #e74c3c;
	color: white;
	border-color: #e74c3c;
	}

	button {
	background-color: #3498db;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
	margin-right: 10px;
	}

	button:hover {
	background-color: #2980b9;
	}

	.result {
	text-align: center;
	font-size: 20px;
	margin-top: 20px;
	font-weight: bold;
	}

	.hidden {
	display: none;
	}

	.progress {
	margin-bottom: 20px;
	text-align: right;
	color: #7f8c8d;
	}

	.final-score {
	text-align: center;
	font-size: 24px;
	margin: 20px 0;
	color: #2c3e50;
	}
	</style>
	</head>

	<body>
	<h1>IT сұрақтар</h1>

	<div class="progress">
	Сұрақ <span id="current-question">1</span> / <span id="total-questions">20</span>
	</div>

	<div class="quiz-container" id="quiz">
	<div class="question" id="question"></div>
	<div class="options" id="options"></div>
	<div>
	<button id="submit-btn">Жауапты тексеру</button>
	<button id="next-btn" class="hidden">Келесі</button>
	</div>
	<div class="result" id="result"></div>
	</div>

	<script>
	const questions = [{
	question: "HTML дегеніміз не?",
	options: [
	"HyperText Markup Language",
	"HighText Machine Language",
	"HyperTool Multi Language",
	"HomeText Markup Language"
	],
	answer: 0
	},
	{
	question: "Интернеттегі веб-беттерді жеткізу үшін қандай протокол қолданылады?",
	options: [
	"FTP",
	"SMTP",
	"HTTP",
	"IP"
	],
	answer: 2
	},
	{
	question: "Android қосымшаларын жасау үшін қолданылатын негізгі бағдарламалау тілі қандай?",
	options: [
	"Kotlin",
	"Swift",
	"Ruby",
	"Go"
	],
	answer: 0
	},
	{
	question: "Веб-сайттағы 'Жүктеу' түймесі не істейді?",
	options: [
	"Файлды интернетке жібереді",
	"Файлды компьютерге сақтайды",
	"Жаңа терезе ашады",
	"Файлды жояды"
	],
	answer: 1
	},
	{
	question: "Қай сан бүтін сан болып табылады?",
	options: [
	"3.14",
	"7",
	"0.5",
	"2.8"
	],
	answer: 1
	},
	{
	question: "IP-адрес дегеніміз не?",
	options: [
	"Браузердегі қолданушы нөмірі",
	"Интернет-провайдердің атауы",
	"Желіде құрылғының ерекше мекенжайы",
	"Веб-беттегі код"
	],
	answer: 2
	},
	{
	question: "Төмендегі қай тіл интерпретатор арқылы жұмыс істейді?",
	options: [
	"C++",
	"Java",
	"Python",
	"Go"
	],
	answer: 2
	},
	{
	question: "Microsoft Excel бағдарламасы не үшін қолданылады?",
	options: [
	"Сурет салу үшін",
	"Мәтін теру үшін",
	"Кестелермен жұмыс істеу үшін",
	"Видео көру үшін"
	],
	answer: 2
	},
	{
	question: "Компьютерлік вирус деген не?",
	options: [
	"Компьютерлік ойын",
	"Интернеттегі қате",
	"Зиянды бағдарлама",
	"Қарапайым файл"
	],
	answer: 2
	},
	{
	question: "Гигабайттан кейінгі ақпарат бірлігі қандай?",
	options: [
	"Мегабайт",
	"Килобайт",
	"Терабайт",
	"Пентабайт"
	],
	answer: 2
	},
	{
	question: "Компьютердің негізгі бөлігін қалай атайды?",
	options: [
	"Монитор",
	"Жүйелік блок",
	"Пернетақта",
	"Тінтуір"
	],
	answer: 1
	},
	{
	question: "Компьютердің жады (память) не үшін керек?",
	options: [
	"Экранды қосу үшін",
	"Ақпаратты уақытша сақтау үшін",
	"Электр қуатын беру үшін",
	"Принтермен байланыс үшін"
	],
	answer: 1
	},
	{
	question: "Интернетке қосылу үшін не қажет?",
	options: [
	"Микрофон",
	"Wi-Fi немесе кабель",
	"Принтер",
	"Камера"
	],
	answer: 1
	},
	{
	question: "Компьютердегі 'қапшық' (папка) не үшін керек?",
	options: [
	"Ойын ойнау үшін",
	"Жүйені өшіру үшін",
	"Файлдарды сақтау және ұйымдастыру үшін",
	"Тек суреттерді көру үшін"
	],
	answer: 2
	},
	{
	question: "Электронды пошта (email) не үшін керек?",
	options: [
	"Фото салу үшін",
	"Хат алмасу үшін",
	"Видеоны көру үшін",
	"Принтерді қосу үшін"
	],
	answer: 1
	},
	{
	question: "Компьютердің пернетақтасы не үшін керек?",
	options: [
	"Дыбыс шығару үшін",
	"Тінтуірді басқару үшін",
	"Мәлімет теру үшін",
	"Экранды өшіру үшін"
	],
	answer: 2
	},
	{
	question: "Интернеттегі 'браузер' дегеніміз не?",
	options: [
	"Ойын бағдарламасы",
	"Видео редактор",
	"Веб-сайттарды ашатын бағдарлама",
	"Компьютердің микрофоны"
	],
	answer: 2
	},
	{
	question: "Компьютердегі 'Shift' пернесінің қызметі қандай?",
	options: [
	"Компьютерді өшіреді",
	"Бас әріппен жазуға көмектеседі",
	"Файлды жояды",
	"Бетті жаңартады"
	],
	answer: 1
	},
	{
	question: "Вирусқа қарсы бағдарлама қалай аталады?",
	options: [
	"Интернет",
	"Браузер",
	"Антивирус",
	"Веб-сервер"
	],
	answer: 2
	},
	{
	question: "Принтер не істейді?",
	options: [
	"Мәтін тереді",
	"Сурет салады",
	"Ақпаратты қағазға басып шығарады",
	"Видеоны көрсетеді"
	],
	answer: 2
	}
	];
	let currentQuestion = 0;
	let score = 0;
	let selectedOption = null;
	const questionElement = document.getElementById('question');
	const optionsElement = document.getElementById('options');
	const nextButton = document.getElementById('next-btn');
	const submitButton = document.getElementById('submit-btn');
	const resultElement = document.getElementById('result');
	const currentQuestionElement = document.getElementById('current-question');
	const totalQuestionsElement = document.getElementById('total-questions');
	const quizContainer = document.getElementById('quiz');
	totalQuestionsElement.textContent = questions.length;

	function loadQuestion() {
	currentQuestionElement.textContent = currentQuestion + 1;
	const question = questions[currentQuestion];
	questionElement.textContent = question.question;
	optionsElement.innerHTML = '';
	question.options.forEach((option, index) => {
	const optionElement = document.createElement('div');
	optionElement.classList.add('option');
	optionElement.textContent = option;
	optionElement.dataset.index = index;
	optionElement.addEventListener('click', selectOption);
	optionsElement.appendChild(optionElement);
	});
	nextButton.classList.add('hidden');
	submitButton.classList.remove('hidden');
	resultElement.textContent = '';
	selectedOption = null;
	}

	function selectOption(e) {
	const options = document.querySelectorAll('.option');
	options.forEach(option => option.classList.remove('selected'));
	e.target.classList.add('selected');
	selectedOption = parseInt(e.target.dataset.index);
	}

	function checkAnswer() {
	if (selectedOption === null) return;
	const question = questions[currentQuestion];
	const options = document.querySelectorAll('.option');
	options.forEach(option => {
	option.classList.remove('correct', 'incorrect');
	const optionIndex = parseInt(option.dataset.index);
	if (optionIndex === question.answer) {
	option.classList.add('correct');
	} else if (optionIndex === selectedOption && selectedOption !== question.answer) {
	option.classList.add('incorrect');
	}
	});
	if (selectedOption === question.answer) {
	score++;
	resultElement.textContent = 'Дұрыс!';
	resultElement.style.color = '#2ecc71';
	} else {
	resultElement.textContent = 'Қате!';
	resultElement.style.color = '#e74c3c';
	}
	submitButton.classList.add('hidden');
	nextButton.classList.remove('hidden');
	}

	function nextQuestion() {
	currentQuestion++;
	if (currentQuestion < questions.length) {
	loadQuestion();
	} else {
	showResult();
	}
	}

	function showResult() {
	quizContainer.innerHTML = `
	<div class="final-score">
	<h2>Викторина аяқталды!</h2>
	<p>Сіз ${score} дұрыс жауап бердіңіз (${questions.length} сұрақтан).</p>
	<p>Қорытынды балл: ${Math.round((score / questions.length) * 100)}%</p>
	<button onclick="location.reload()">Қайтадан бастау</button>
	</div>
	`;
	}
	submitButton.addEventListener('click', checkAnswer);
	nextButton.addEventListener('click', nextQuestion);
	loadQuestion();
	</script>
	</body>

	</html>