вступление
Работа с входными данными — одна из самых важных тем в веб-разработке для обеспечения динамики. Если я что-то ввожу, скажем, a, затем скажем the font color may change, а если я ввожу b, скажем a popup will be shown.
В этой статье я буду обсуждать, как можно работать с радио-входами HTML, которые часто используются в формах опросов или онлайн-викторинах или при выборе предпочтений пользователя. Кроме того, я буду обсуждать, как можно добавить градиенты и анимацию в ваш проект. Итак, я покажу, как можно создать классное приложение для викторин, используя только HTML, CSS и JavaScript.
Построение структуры
Поскольку мы создаем приложение для викторины, нам нужен <h1> для вопроса и группа из трех переключателей для ответов, также нам нужна кнопка для отправки ответа, и мы собираемся поместить все эти элементы в <div> и <div> в <main>.
<main id="quiz-app">
<h1 id="quiz-title">JS QUIZ</h1>
<div class="quiz-container" id="quiz">
<h2 id="question"></h2>
<li>
<input type="radio" id="a" name="answer" class="answer" value="a" />
<label for="a" id="a+"></label>
</li>
<li>
<input type="radio" id="b" name="answer" class="answer" value="b" />
<label for="b" id="b+"></label>
</li>
<li>
<input type="radio" id="c" name="answer" class="answer" value="c" />
<label for="c" id="c+"></label>
</li>
<button id="submit" value="Submit">Submit</button>
</div>
</main>Позвольте мне сделать это легко. Предположим, внутри есть поле main, внутри есть поле div, а внутри него у нас есть элементы викторины.
Добавление стилей
Поскольку мы закончили со структурой, теперь давайте добавим CSS.
тело
body { display: flex; justify-content: center; align-items: center; background-color: #eec0c6; background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
Здесь первые три строки гарантируют, что все наши элементы будут в центре, затем background-color даст нам красивый цвет, а liner-gradient даст нам линейный поток цвета от left до right повернутых на 315 градусов от цвета до б.
основной
Теперь давайте создадим нашу основную коробку.
main { background-color: #6b0f1a; background-image: linear-gradient(315deg, #6b0f1a 0%, #b91372 74%);border-radius: 5px; color: white; }
викторина-контейнер
.quiz-container {
list-style: none;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 3rem;
background-color: white;
color: blueviolet;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}Это придаст нашему контейнеру с викториной потрясающий вид.
Стилизуйте кнопку, добавив анимацию
Для кнопки мы будем использовать некоторые классы CSS, такие как :active и :hover. Также мы добавим свойства transform и translateY для добавления анимации щелчка.
button#submit { padding: 0.5rem; border: none; border-radius: 3px; background-color: rebeccapurple; color: white; font-size: 1rem; margin: 1rem 0 0 40%; box-shadow: 0 5px rgb(195, 141, 246); }button#submit:hover { background-color: blueviolet; }button#submit:active { background-color: blueviolet; box-shadow: 0 5px rgb(188, 155, 219); transform: translateY(4px); }
Поймите анимацию здесь. :active позаботится о том, чтобы при нажатии на кнопку она перемещалась на 4 пикселя по оси Y, после чего кнопка возвращалась на свое место. Кроме того, мы используем :hover, что означает, что когда мы наводим курсор на кнопку, она меняет свой фоновый цвет, а тень блока дает нам нижнюю границу в 5 пикселей.
Добавление последних штрихов
Теперь давайте исправим заголовок викторины и элемент вопроса, добавив отступы и поля.
#question { margin: 0 0 2rem 0; }h1 { text-align: center; z-index: -1; }
Добавление JavaScript и создание теста
Я разделил этот раздел на 3 части, т. е. создание данных викторины, получение входных данных HTML и определение функций для дальнейших шагов.
1. Создание данных викторины
/*quiz data */
const quizData = [
{
question: 'Who is the current CEO of Google ?',
a: 'Sunder Pichai',
b: 'Larry Page ',
c: 'Jhon Brown',
correct: 'a',
},
{
question: 'Who is the current CEO of Amazon ?',
a: 'Jeff Bezos',
b: 'Warren Buffet ',
c: 'Andy Jassy',
correct: 'c',
},
{
question: 'Who is the current CEO of Tesla ?',
a: 'Jeffry Black',
b: 'Elon Musk ',
c: 'Jhon Brown',
correct: 'b',
},
{
question: 'Who is the current CEO of Microsoft ?',
a: 'Satya Nadella ',
b: 'Tom Klington',
c: 'Jhon Brown',
correct: 'a',
},
{
question: 'Which of the company is owned by Mark Zkerburg ?',
a: 'Neuralink ',
b: 'Meta Platforms Inc ',
c: 'Metaverse LLC ',
correct: 'b',
},
];Здесь я использую объект массива для хранения данных викторины, у нас есть вопрос, три варианта и correct вариант, который необходим для проверки ответа, данного пользователем.
2. Захват HTML-элементов
Привнесение динамики означает взаимодействие с элементами HTML через JavaScript. Итак, сначала нам нужно получить элементы викторины HTML, чтобы мы могли динамически добавлять к ним значения. Позвольте мне упростить вам задачу: предположим, у нас есть 100 вопросов, и если мы добавим жесткий код, то с помощью HTML мы должны создать 100 элементов викторины вручную. Но с помощью JavaScript мы можем запустить цикл и создать сотни элементов викторины всего несколькими строками кода.
/*Grabing all the elements */
const question = document.getElementById('question');
const a = document.getElementById('a+');
const b = document.getElementById('b+');
const c = document.getElementById('c+');
const btn = document.getElementById('submit');
const all_answer = document.querySelectorAll('.answer');3. Определение логики викторины
let index = 0; let score = 0; //get the getSelected answer function getSelected() { let ans = undefined;all_answer.forEach((el) => { if (el.checked) { ans = el.id; } }); return ans; } //disselect all answer function deselectans() { all_answer.forEach((el) => { el.checked = false; }); } //load the quiz data function getquiz() { deselectans(); question.innerText = quizData[index].question; a.innerText = quizData[index].a; b.innerText = quizData[index].b; c.innerText = quizData[index].c; } //move forward the quiz function startquiz() { btn.addEventListener('click', () => { let ans = getSelected(); if (ans) { if (ans == quizData[index].correct) { score++; } } index++; if (index < quizData.length) { getquiz(); } else { alert('score :' + score); location.reload(); } }); } getquiz(); startquiz();
Итак, все, что мы здесь делаем, очень просто. Во-первых, мы определили две переменные — обе являются счетчиками. Первый используется для продвижения викторины, или, проще говоря, он будет увеличиваться, если и только если пользователь нажмет кнопку отправки. И score будет увеличиваться только в том случае, если пользователь введет ответ, который должен совпадать с correct. Функция getselected() вернет нам вариант id, который выбрал пользователь, например a для варианта а или c для варианта с. deselectans() отменит выбор каждого ответа. Это важно, потому что, скажем, когда пользователь отвечает a на 1-й вопрос, затем он отвечает b на следующий, в этом случае наша функция getselcted() запутается, какой идентификатор опции нужно вернуть. А getquiz() предназначен для динамического добавления вопросов.
Заключение
Я надеюсь, что моя статья добавит некоторую ценность в ваш центр знаний. Не стесняйтесь опубликовать реакцию и поделиться этой статьей с друзьями и коллегами, если она вам понравилась.
Кроме того, оставьте комментарий, если у вас есть какие-либо вопросы, или свяжитесь со мной напрямую через Twitter или LinkedIn. Я буду рад помочь вам. Оставайтесь с нами для следующего, удачного кодирования!
Соединять
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
