https://pastein.ru/t/VvA
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Обучающий сайт по информатике - Табличные процессоры (Excel)</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: auto;
padding: 20px;
background: #f0f0f0;
}
h1 { color: #1e6f3f; text-align: center; }
.card {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 10px;
}
.section-title {
margin-bottom: 10px;
font-weight: bold;
}
.excel-tip {
background: #e8f5e9;
border-left: 5px solid #1e6f3f;
padding: 10px;
margin-top: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th { background-color: #ddd; }
.question {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
#results {
display: none;
padding: 15px;
background-color: #d4edda;
border: 1px solid #c3e6cb;
border-radius: 8px;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Табличные процессоры (Microsoft Excel)</h1>
<!-- Теория -->
<div class="card" id="theory">
<h2>Что такое табличные процессоры?</h2>
<p>Табличные процессоры — это программы для работы с электронными таблицами. Они позволяют хранить, редактировать и анализировать данные, выполнять вычисления и визуализировать их в виде диаграмм.</p>
<div class="excel-tip">
<strong>Запомните:</strong> Файл Excel называется <strong>книга</strong>. В книге много <strong>листов</strong>, каждый лист — из ячеек. Каждая ячейка имеет адрес вроде <strong>A1</strong>, <strong>B5</strong>.
</div>
<h2>Основные возможности Excel</h2>
<ul>
<li>Ввод и форматирование данных</li>
<li>Вычисления формулами и функциями</li>
<li>Создание диаграмм</li>
<li>Сортировка и фильтр данных</li>
<li>Условное форматирование</li>
<li>Работа с большими таблицами</li>
<li>Защита данных и листов паролем</li>
</ul>
<h2>Дополнительные сведения</h2>
<p>Excel поддерживает множество встроенных функций: математические, статистические, логические, текстовые, даты и времени. Вы можете автоматизировать задачи с помощью макросов (VBA).</p>
<p>Для быстрого анализа данных можно использовать <strong>сводные таблицы</strong>, которые позволяют группировать, суммировать и представлять данные в удобной форме.</p>
<p>Excel также поддерживает работу с внешними источниками данных: базы данных, CSV-файлы, интернет-таблицы.</p>
<p>Профессионалы часто используют сочетание клавиш — например:
<ul>
<li><strong>Ctrl + C</strong> — копировать</li>
<li><strong>Ctrl + V</strong> — вставить</li>
<li><strong>Ctrl + Z</strong> — отменить действие</li>
<li><strong>Ctrl + Shift + $</strong> — формат "Денежный"</li>
</ul>
</p>
</div>
<!-- Тест -->
<div class="card" id="test-section">
<center>
<h2>Хочешь проверить свои знания по Excel?</h2>
</center>
<div id="questions-container"></div>
<button onclick="submitTest()">Проверить результаты</button>
</div>
<!-- Результаты -->
<div id="results">
<h2>Результаты теста</h2>
<p>Правильных ответов: <span id="correct-count"></span> из 20.</p>
<button onclick="restartTest()">Пройти снова</button>
</div>
<script>
const questions = [
{ question: "Что такое файл Excel?", options: ["Лист", "Книга", "Таблица"], correct: 1 },
{ question: "Как называется рабочая область внутри листа?", options: ["Ячейка", "Строка", "Столбец"], correct: 0 },
{ question: "Что обозначает адрес ячейки A1?", options: ["Первая колонка, первая строка", "Пятая колонка, первая строка", "Первая колонка, пятая строка"], correct: 0 },
{ question: "Какой символ используют для формул?", options: ["%", "=", "&"], correct: 1 },
{ question: "Какая функция считает сумму чисел?", options: ["SUM", "ADD", "TOTAL"], correct: 0 },
{ question: "Как вставить диаграмму?", options: ["Меню Вставка", "Меню Формат", "Меню Данные"], correct: 0 },
{ question: "Можно ли сортировать данные?", options: ["Да", "Нет"], correct: 0 },
{ question: "Что такое формула?", options: ["Произвольный текст", "Выражение для вычислений", "Код программы"], correct: 1 },
{ question: "Можно ли объединять ячейки?", options: ["Да", "Нет"], correct: 0 },
{ question: "Квадратная скобка [{ }], используется в формуле?", options: ["Да", "Нет"], correct: 1 },
{ question: "Что такое фильтр?", options: ["Показывает все данные", "Выбирает определённые данные", "Удаляет данные"], correct: 1 },
{ question: "Можно ли защитить лист паролем?", options: ["Да", "Нет"], correct: 0 },
{ question: "Что такое абсолютная ссылка в Excel?", options: ["Меняется при копировании", "Не меняется при копировании", "Связана с абсолютным нулём"], correct: 1 },
{ question: "Можно ли форматировать отдельную ячейку?", options: ["Да", "Нет"], correct: 0 },
{ question: "Есть ли функция для подсчёта среднего?", options: ["Да", "Нет"], correct: 0 },
{ question: "Можно ли вставлять картинки в ячейки?", options: ["Да", "Нет"], correct: 0 },
{ question: "Что делает команда 'Копировать'?", options: ["Вставляет данные", "Дублирует выбранную ячейку", "Удаляет данные"], correct: 1 },
{ question: "Можно ли вычислять сумму по диапазону ячеек?", options: ["Да", "Нет"], correct: 0 },
{ question: "Что такое условное форматирование?", options: ["Форматирование по условию", "Создание таблицы", "Редактирование текста"], correct: 0 },
{ question: "Можно ли сохранить документ в другом формате?", options: ["Да", "Нет"], correct: 0 },
{ question: "Что делает команда 'Автофигуры'?", options: ["Добавляет фигуры и рисунки", "Редактирует таблицу", "Меняет оформление"], correct: 0 }
];
function generateQuestions() {
const container = document.getElementById('questions-container');
container.innerHTML = '';
questions.forEach((q, index) => {
const div = document.createElement('div');
div.className = 'question';
const questionText = document.createElement('p');
questionText.innerHTML = `<strong>Вопрос ${index+1}:</strong> ${q.question}`;
div.appendChild(questionText);
q.options.forEach((opt, optIndex) => {
const label = document.createElement('label');
label.style.display = 'block';
const input = document.createElement('input');
input.type = 'radio';
input.name = 'q' + index;
input.value = optIndex;
label.appendChild(input);
label.appendChild(document.createTextNode(' ' + opt));
div.appendChild(label);
});
container.appendChild(div);
});
}
function submitTest() {
let correctCount = 0;
questions.forEach((q, index) => {
const answers = document.getElementsByName('q' + index);
let selected = -1;
for (let i = 0; i < answers.length; i++) {
if (answers[i].checked) {
selected = parseInt(answers[i].value);
break;
}
}
if (selected === q.correct) {
correctCount++;
}
});
document.getElementById('correct-count').textContent = correctCount;
document.getElementById('results').style.display = 'block';
document.getElementById('test-section').style.display = 'none';
}
function restartTest() {
document.getElementById('results').style.display = 'none';
document.getElementById('test-section').style.display = 'block';
generateQuestions();
}
window.onload = () => {
generateQuestions();
};
</script>
</body>
<style>
.question:hover {
background-color: orange;
border-color: black;
border-width: 5;
font-size: 24;
font-weight: bold;
}
</style>
</html>
исходя из данного кода сделать так чтобы вопросы были из 4 вариантов т где то 2 правильных ответа где то 1 и картинки добавить например выбрать правильную и добавить hover на текст