Шаблон вопрос/ответ
| Вот пример интеграции HTML-формы для ввода ответов с вашим скриптом:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Вопрос-ответ</title>
<style>
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.question-box {
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
}
textarea {
width: 100%;
height: 100px;
margin: 10px 0;
padding: 10px;
}
button {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="question-box" id="questionContainer"></div>
<form id="answerForm">
<textarea
id="answerInput"
placeholder="Введите ваш ответ здесь..."
required
></textarea>
<button type="submit">Отправить ответ</button>
</form>
</div>
<script>
// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
// Текст с вопросами
const questionText = `
Как называется столица России?
Что такое фотосинтез?
Почему небо голубое?
Сколько планет в Солнечной системе?
Как работает JavaScript?
`;
// Получаем элементы DOM
const questionContainer = document.getElementById('questionContainer');
const answerForm = document.getElementById('answerForm');
const answerInput = document.getElementById('answerInput');
// Обработка вопросов
const questions = questionText
.split('\n')
.map(line => line.trim())
.filter(line => /.*\?$/.test(line) && line.split(/\s+/).length >= 3);
// Показываем случайный вопрос
function showRandomQuestion() {
if(questions.length > 0) {
const randomIndex = Math.floor(Math.random() * questions.length);
questionContainer.textContent = questions[randomIndex];
} else {
questionContainer.textContent = 'Вопросы не найдены!';
}
}
// Обработка отправки формы
answerForm.addEventListener('submit', (e) => {
e.preventDefault();
const answer = answerInput.value.trim();
if(!answer) {
alert('Пожалуйста, введите ответ!');
return;
}
// Здесь можно добавить обработку ответа
console.log('Ответ получен:', answer);
alert('Ответ принят! Спасибо!');
// Очищаем поле ввода и показываем новый вопрос
answerInput.value = '';
showRandomQuestion();
});
// Показать первый вопрос при загрузке
showRandomQuestion();
});
</script>
</body>
</html>
```
Этот код:
1. Создает структуру HTML с:
- Контейнером для отображения вопроса
- Формой с текстовым полем для ответа
- Кнопкой отправки ответа
2. Добавляет функциональность:
- Автоматически показывает случайный вопрос при загрузке
- Обновляет вопрос после отправки ответа
- Проверяет заполненность поля ответа
- Очищает форму после отправки
- Выводит уведомления для пользователя
3. Особенности:
- Адаптивный дизайн с базовой стилизацией
- Валидация формы
- Поддержка Enter для отправки формы
- Защита от пустых ответов
- Логирование ответов в консоль
Для дальнейшего развития можно добавить:
- Оценку ответов
- Хранение истории ответов
- Таймер для ответа
- Категории вопросов
- Систему баллов
- Визуальные эффекты
- Загрузку вопросов с сервера
Чтобы модифицировать обработку ответов, измените часть кода внутри обработчика события `submit`.
| |
| Категория: второй подраздел | Добавил: Lom (13.02.2025) | |
| Просмотров: 5 |
| Всего комментариев: 0 | |