document.addEventListener('DOMContentLoaded', () => {
const inputElement = document.querySelector("input");
const originalFontSize = parseFloat(getComputedStyle(inputElement).fontSize);
let currentSize = originalFontSize;
// переменная для последнего значения поля input
let lastValue = '';
inputElement.addEventListener("input", () => {
const value = inputElement.value;
if (value.length > lastValue.length) {
// добавлен символ
if (inputElement.scrollWidth > inputElement.clientWidth) {
// текст не помещается, уменьшаем шрифт
currentSize -= 1;
}
} else if (value.length < lastValue.length) {
// удалён символ
if (currentSize < originalFontSize) {
// восстанавливаем размер шрифта до начального
currentSize += 1;
}
}
inputElement.style.fontSize = `${currentSize}px`;
// console.log(`Размер шрифта: ${currentSize}px`);
lastValue = value;
});
// инициализация размера шрифта
inputElement.style.fontSize = `${originalFontSize}px`;
});// ждем пока контент будет полностью загружен
document.addEventListener('DOMContentLoaded', function() {
// находим кнопку и добавляем обработчик
const applyButton = document.getElementById('apply');
applyButton.addEventListener('click', function() {
summary();
});
function summary() {
let questions = document.querySelectorAll('.question');
let score = 0;
let rightAnswers = ["a_2", "a_5", "a_9", "a_10", "a_13", "a_18", "a_19", "a_24", "a_27", "a_28"];
questions.forEach(function(question, index) {
let chosenAnswer = question.querySelector("input[type='radio']:checked");
if (chosenAnswer && chosenAnswer.id === rightAnswers[index]) {
score++;
}
console.log("Выбранный ответ: " + (chosenAnswer ? chosenAnswer.parentNode.textContent : "Нет ответа выбрано"));
console.log("Правильный ответ: " + rightAnswers[index]);
console.log("Очки: " + score);
});
alert("Количество правильных ответов: " + score);
}
});// объект с путями к изображениям для нормального и hover состояний чтоб не засорять основной код ссылками
// предполагаю, что в сумме у вас их 6, по 2 на каждый элемент motionPlitka
const imageSources = {
preim1: {
normal: "https://i.ibb.co/ZdHgXTm/green.png",
hover: "https://i.ibb.co/g6mNxm8/white.png"
},
preim2: {
normal: "https://i.postimg.cc/6pKDm5Lq/green2.png",
hover: "https://i.postimg.cc/2SPBDMy1/white2.png"
},
preim3: {
normal: "https://ltdfoto.ru/images/2024/06/13/green3.png",
hover: "https://ltdfoto.ru/images/2024/06/13/white3.png"
}
};
// выносим функцию изменения картинки в зависимости от состояния (normal или hover)
const setImageSrc = (element, state) => {
// находим элемент <img> внутри элемента motionPlitka, на котором у нас курсор
const img = element.querySelector("img");
// извлекаем список классов элемента и ищем класс, который есть в imageSources
// в вашем случае preim1, preim2 или preim3
const className = [...element.classList].find(cls => imageSources[cls]);
// меняем src элемента <img> на значение из объекта imageSources для нужного класса и состояния
img.src = imageSources[className][state];
};
// получаем все элементы .motionPlitka и добавляем обработчики
document.querySelectorAll(".motionPlitka").forEach(elem => {
// при наведении мыши вызываем setImageSrc с состоянием hover
elem.addEventListener('mouseenter', () => setImageSrc(elem, 'hover'));
// при уходе мыши вызываем setImageSrc с состоянием normal
elem.addEventListener('mouseleave', () => setImageSrc(elem, 'normal'));
});} else if (Array.isArray(value)) {
return value.reduce((acc, key) => {
acc[key] = indexs[key];
return acc;
}, {});
}const indexs = index.reduce((acc, key, i) => {
acc[key] = arr[i];
return acc;
}, {});