Перемешивание и печать списка вопросов с помощью HTML и JavaScript
В современном мире веб-технологии играют важную роль в создании интерактивных и удобных инструментов для различных задач. Одной из таких задач является перемешивание и печать списка вопросов. Это может быть полезно для преподавателей, которые хотят создать случайные наборы вопросов для тестов или экзаменов, или для организаторов мероприятий, которые хотят перемешать вопросы для викторин и конкурсов.
В этой статье мы рассмотрим, как можно создать простое веб-приложение с использованием HTML и JavaScript, которое позволяет пользователям вводить список вопросов, перемешивать их и печатать результат. Мы пошагово разберем код, объясним его основные компоненты и функции, а также добавим комментарии для лучшего понимания.
HTML-структура
Начнем с HTML-структуры нашего приложения:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Перемешивание вопросов</title>
<style>
/* Стили для тела документа */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* Стили для текстового поля */
textarea {
width: 100%;
height: 150px;
margin-bottom: 10px;
}
/* Стили для кнопок */
button {
margin-right: 10px;
}
/* Стили для списка вопросов */
ul {
list-style-type: none;
padding: 0;
}
/* Стили для элементов списка */
li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<!-- Заголовок страницы -->
<h1>Перемешивание вопросов</h1>
<!-- Текстовое поле для ввода вопросов -->
<textarea id="questionsInput" placeholder="Введите список вопросов, разделяя их новой строкой..."></textarea>
<br>
<!-- Кнопки для выполнения действий -->
<button onclick="shuffleQuestions()">Перемешать</button>
<button onclick="clearInput()">Очистить</button>
<button onclick="printQuestions()">Печать</button>
<!-- Заголовок для списка вопросов -->
<h2>Список вопросов:</h2>
<!-- Список для отображения вопросов -->
<ul id="questionsList"></ul>
<script>
// Функция для перемешивания вопросов
function shuffleQuestions() {
// Получаем текст из текстового поля
const questionsInput = document.getElementById('questionsInput').value;
// Разбиваем текст на массив вопросов, удаляя пустые строки
const questionsArray = questionsInput.split('\n').filter(question => question.trim() !== '');
// Перемешиваем массив вопросов
const shuffledArray = shuffleArray(questionsArray);
// Отображаем перемешанные вопросы
displayQuestions(shuffledArray);
}
// Функция для очистки текстового поля и списка вопросов
function clearInput() {
document.getElementById('questionsInput').value = '';
document.getElementById('questionsList').innerHTML = '';
}
// Функция для печати списка вопросов
function printQuestions() {
// Получаем HTML-код списка вопросов
const questionsList = document.getElementById('questionsList').innerHTML;
// Создаем новое окно для печати
const printWindow = window.open('', '', 'height=400,width=800');
// Записываем HTML-код в новое окно
printWindow.document.write('<html><head><title>Печать вопросов</title></head><body>');
printWindow.document.write('<h1>Список вопросов:</h1>');
printWindow.document.write('<ul>' + questionsList + '</ul>');
printWindow.document.write('</body></html>');
printWindow.document.close();
// Вызываем печать нового окна
printWindow.print();
}
// Функция для перемешивания массива
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Функция для отображения вопросов в списке
function displayQuestions(questionsArray) {
const questionsList = document.getElementById('questionsList');
questionsList.innerHTML = '';
questionsArray.forEach((question, index) => {
const li = document.createElement('li');
li.textContent = `${++index}. ${question}`;
questionsList.appendChild(li);
});
}
</script>
</body>
</html>
Объяснение кода
- HTML-структура:
- Заголовок страницы: Отображает название приложения.
- Текстовое поле: Позволяет пользователю вводить список вопросов, разделяя их новой строкой.
- Кнопки: Три кнопки для выполнения действий: перемешать вопросы, очистить текстовое поле и список, а также распечатать список вопросов.
-
Список вопросов: Отображает перемешанные вопросы.
-
CSS-стили:
-
Определяют внешний вид текстового поля, кнопок и списка вопросов.
-
JavaScript-функции:
- shuffleQuestions: Получает текст из текстового поля, разбивает его на массив вопросов, перемешивает массив и отображает перемешанные вопросы.
- clearInput: Очищает текстовое поле и список вопросов.
- printQuestions: Создает новое окно для печати, записывает в него HTML-код списка вопросов и вызывает печать этого окна.
- shuffleArray: Перемешивает массив вопросов.
- displayQuestions: Отображает вопросы в списке.
Заключение
Этот проект не только поможет вам освоить основы веб-разработки, но и предоставит готовое решение, которое можно использовать в повседневной работе или учебе. С помощью простого HTML и JavaScript вы можете создать интерактивное приложение для перемешивания и печати вопросов, которое будет полезно в различных сценариях.
-
Создано 16.12.2024 08:35:50
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.