И получаем готовый рабочий продукт.
В прошлый раз мы сделали страницу, которая помогает нам принимать решения по новостям . Всё работает, но после использования мы поняли, что пользоваться этим неудобно:
- плохо подобран шрифт и размер, из-за чего читать вопросы тяжело;
- сложно попасть мышкой в маленький кружок для выбора ответа;
- кнопки тоже маленькие и находятся рядом — легко перепутать или промахнуться;
- результат выводится внизу, и его тоже нужно читать — это также отнимает лишнее время;
- кажется, что достаточно всего трёх градаций: берём, не берём и надо подумать, при этом неважно, сколько точно баллов набрала новость;
- иногда к вопросу подходит одновременно несколько ответов, а переключатели позволяют выбрать только один.
Исправим это.
Делаем множественный выбор
Сейчас у нас переключатели, которые дают выбирать только один ответ из нескольких:
<input name="mega" type="radio" value="-2">
Чтобы сделать чекбоксы с галочкой, которые не зависят друг от друга, достаточно везде в коде и в функциях заменить "radio" на "checkbox":
<input name="mega" type="checkbox" value="-2">
Выглядит это так:
Второе полезное свойство чекбоксов — у каждого из них может быть своё уникальное имя. Это нам пригодится при подсчёте баллов.
Упрощаем выбор ответов
Сейчас нам всё равно нужно целиться в маленькие чекбоксы, чтобы выбрать правильные ответы. Но гораздо проще кликнуть по тексту, чтобы выбрать его — он больше и в него легче попасть.
Получается, нам нужно написать такой код, чтобы он срабатывал при каждом нажатии на абзац с вариантом ответа и отмечал или убирал соответствующий чекбокс.
У нас маленький боевой проект на коленке, поэтому мы сделаем это грязно и в лоб — поместим обработчик onclick() в каждый абзац и будем передавать ему имя чекбокса как параметр:
<p onclick="p_click('result2')" ><input name="result2" type="checkbox" value="2">
Есть более валидный способ сделать это — через тег <label>. Тогда чекбокс будет знать, где его лейбл, а лейбл будет знать, каким чекбоксом он управляет. Но тогда один лейбл будет всегда отвечать за один чекбокс. Возможно, в будущем нам понадобится настроить более сложную логику: например, при нажатии на один абзац отмечаются два чекбокса или один включается, а другой выключается. Этот вариант пока отложим.
Можно было бы собрать все абзацы и в конце документа с помощью скрипта повесить на них обработчики кликов. Но это тоже не даст нам нужной гибкости.
Поэтому пока остановимся на диком решении в лоб: скопипастим обработчик onclick во все абзацы.
Обработчик
Теперь напишем саму функцию, которая поставит галочку в нужном месте:
Дизайн и подсветка вариантов
Теперь займёмся внешним видом страницы. Для этого поменяем шрифт и увеличим его размер. А чтобы было проще понять, какой вариант ответа мы сейчас выберем, возьмём код из статьи про красивые ссылки и применим его к абзацам:
Убираем кнопки
Проблема : неудобно попадать в маленькие кнопки.
Идеальное решение: сделать так, чтобы можно было обойтись вообще без кнопок.
Проще всего избавиться от кнопки «Сбросить», которая очищает все чекбоксы. Для этого мы сделаем так, чтобы сброс работал по двойному клику мышки в любом месте страницы:
<!-- очищаем результаты по двойному клику -->
<body ondblclick="clearall()">
Чтобы избавиться от кнопки «Оценить», нам нужно вызывать функцию подсчёта каждый раз, когда мы выбираем какой-то ответ. Но у нас уже есть функция, которую мы вызываем в этом случае — p_click(). Значит, если мы в неё добавим вызов функции подсчёта count(), то кнопку можно тоже убирать.
Работать всё это будет так: мы нажимаем на любой ответ, а скрипт сразу пересчитывает результаты. Если будет что выводить — он покажет.
Убираем надпись с результатами
Проблема : текст с результатами нужно перечитывать каждый раз, а это тоже отнимает время.
Идеальное решение: сделать так, чтобы можно было обойтись вообще без надписи. Например, при положительном решении менять цвет фона на зелёный, при нулевом — на жёлтый, а если сумма баллов отрицательная, то делать его красным. В этом случае нам не нужно будет ничего читать, но при этом мы будем знать результат.
Для этого нам понадобится свойство document.body.style.background — оно отвечает за цвет фона всей страницы. Если нам нужен белый фон, то команда будет выглядеть так:
document.body.style.background = '#ffffff'
Зная это, заменим команды вывода текста с результатом на команду смены фона:
Последнее, что нам осталось сделать, — добавить возврат белого фона в конец функции сброса результатов clearall().
Ещё мы уменьшили количество градаций с результатами, чтобы было проще ориентироваться. Теперь сразу понятно, что если фон стал зелёным, то новость можно брать в работу, а если красным — то, скорее всего, нет.
Готовая страница с новым дизайном .
Было:
Стало:
Что дальше
Этот код есть куда улучшать:
- можно прокачать дизайн, сделать области более кликабельными и удобными;
- сделать один обработчик на все нажатия на текст;
- добавить настройку баллов за ответы;
- сделать историю для новостей и их результатов с ответами;
- в конце концов, можно научить нейросеть саму анализировать текст новости и приходить к нужным выводам.
Будет отлично, если вы в комментариях тоже напишете, что бы вы добавили в этот сервис.
