Embedded Files
Как добавить математический пример на сайт?
В данном примере задачка 0+1. В ответе пользователь пишет цифру и ответ фиксируется. Если правильно, то выходит белая галочка на зеленом фоне, а если не правильно, то - белый крестик на красном. Ответ изменять не получиться, только если не обновить страницу.
Попробуйте пару раз вводить разные цифры, не забывая каждый раз обновлять:
Если вы хотите подобные примеры добавлять на свои сайты, - скопируйте ниже предоставленный код себе на сайт. Далее мы разберем код и узнаем как менять значения.
<!DOCTYPE html>
<html>
<head>
<style>
.result {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid black;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.correct {
color: white;
background-color: green;
}
.incorrect {
color: white;
background-color: red;
}
.correct::before {
content: '\2714';
}
.incorrect::before {
content: '\2716';
}
</style>
</head>
<body>
<div>
<span>0 + 1 = </span>
<input type="text" id="answer" maxlength="1" size="1">
<div id="result" class="result"></div>
</div>
<script>
var answerInput = document.getElementById("answer");
var result = document.getElementById("result");
answerInput.addEventListener("input", function() {
var answer = answerInput.value;
if (answer === "1") {
result.classList.remove("incorrect");
result.classList.add("correct");
} else {
result.classList.remove("correct");
result.classList.add("incorrect");
}
answerInput.disabled = true;
});
</script>
</body>
</html>
Данный код представляет собой HTML-страницу с использованием CSS и JavaScript. Он создает простую форму для ввода ответа на математическое уравнение и отображает результат верности или неверности ответа.
Разберем код по частям:
1. `<!DOCTYPE html>`: Это объявление типа документа, указывающее на то, что документ является HTML.
2. `<html>...</html>`: Это контейнерный элемент, содержащий все содержимое HTML-страницы.
3. `<head>...</head>`: Элемент `<head>` содержит информацию о документе, такую как заголовок страницы, подключаемые файлы стилей (CSS) и скрипты (JavaScript).
4. `<style>...</style>`: Элемент `<style>` используется для определения стилей CSS, применяемых к элементам на странице.
- `.result`: Это класс, применяемый к элементу с классом "result". Здесь определены стили для блока, который отображает результат (верный или неверный).
- `.correct`: Это класс, применяемый к элементу с классом "result", когда ответ верный. Здесь определены стили для правильного ответа.
- `.incorrect`: Это класс, применяемый к элементу с классом "result", когда ответ неверный. Здесь определены стили для неправильного ответа.
- `.correct::before` и `.incorrect::before`: Это псевдоэлементы `::before`, которые добавляют символы "✓" и "✖" перед содержимым элемента, соответственно.
5. `<body>...</body>`: Элемент `<body>` содержит видимое содержимое страницы, которое будет отображаться в браузере.
6. `<div>...</div>`: Элемент `<div>` используется для создания контейнера для формы ввода и результата.
- `<span>0 + 1 = </span>`: Элемент `<span>` содержит текст, представляющий математическое уравнение.
- `<input type="text" id="answer" maxlength="1" size="1">`: Элемент `<input>` является полем ввода текста, предназначенного для ввода ответа. Он имеет атрибуты `type="text"` для текстового ввода, `id="answer"` для идентификации элемента, `maxlength="1"` для ограничения длины вводимого текста одним символом и `size="1"` для установки размера поля.
- `<div id="result" class="result"></div>`: Элемент `<div>` с идентификатором "result" и классом "result" представляет блок, в котором будет отображаться результат. Изначально у него применяются стили класса "result".
7. 7. `<script>...</script>`: Этот блок кода содержит JavaScript, который добавляет интерактивность к странице.
- `var answerInput = document.getElementById("answer");`: Эта строка кода получает ссылку на элемент `<input>` с идентификатором "answer" и сохраняет его в переменной `answerInput`.
- `var result = document.getElementById("result");`: Эта строка кода получает ссылку на элемент `<div>` с идентификатором "result" и сохраняет его в переменной `result`.
- `answerInput.addEventListener("input", function() { ... });`: Этот код добавляет обработчик события "input" для элемента `<input>`. Когда пользователь вводит текст в поле ввода, выполняется функция, которая следует за ним.
- `var answer = answerInput.value;`: Эта строка кода получает значение, введенное пользователем, из элемента `<input>` и сохраняет его в переменной `answer`.
- `if (answer === "1") { ... } else { ... }`: Это условное выражение, которое проверяет значение переменной `answer`. Если ответ равен "1", выполняются действия внутри блока `if`. Если ответ отличается от "1", выполняются действия внутри блока `else`.
- `result.classList.remove("incorrect");` и `result.classList.add("correct");`: Эти строки кода добавляют и удаляют классы "incorrect" и "correct" у элемента `result`, чтобы изменить его стиль в зависимости от правильности ответа.
- `answerInput.disabled = true;`: Эта строка кода отключает поле ввода ответа, чтобы пользователь не мог вносить изменения после ввода ответа.
Таким образом, при вводе ответа в поле ввода происходит проверка на правильность ответа. Если ответ верный (равен "1"), блок с результатом получает класс "correct" и отображает символ "✓". Если ответ неверный, блок с результатом получает класс "incorrect" и отображает символ "✖". Поле ввода отключается после ввода ответа.
Google Sites
Report abuse