И другие нелинейные процессы принятия решений.
Сегодня у нас проект по автоматизации: будем ускорять то, что мы делаем в журнале каждый день. Если вы делаете что-то похожее — тоже можете такое автоматизировать.
Предыстория
У нас есть рубрика «Новости» — там наши коллеги каждый день публикуют заметки о технологических и научных новинках.
Раньше процесс был устроен так:
- Каждый автор «пылесосит» свои источники.
- Авторы делают подборки событий и изобретений, о которых можно написать.
- Авторы присылают подборки дежурному редактору рубрики. Тот принимает решение, какие новости стоит взять в «Код», а какие — нет.
- Авторы пишут новости.
- Дежурный редактор проверяет и доделывает новости.
Основной затык с п. 3 — если редактор затупил или долго не отвечает, редакционный процесс может встать.
Чтобы решить эту проблему, в редакции сделали чеклист — он формализует процесс принятия решений по новостям.
В нём всё хорошо, кроме одного — каждый раз нужно самому вручную считать, сколько плюсов и минусов набрала каждая новость. Кажется, что это можно автоматизировать и получать результат по каждой новости гораздо быстрее.
Что будем делать
Самый простой способ решить эту задачу — сделать веб-страницу с вариантами ответов. Вы выбираете нужные и получаете ответ: стоит эту новость брать или нет.
В чек-листе у нас есть значки: ✅ и ❌. Пусть галочка обозначает плюс 1 балл, а крестик — минус 1 балл. За каждый ответ мы прибавляем или отнимаем нужное количество баллов и смотрим на результат.
Чтобы понять, брать новость или нет, сделаем такую градацию:
- если новость набирает отрицательное количество баллов, то точно не берём;
- если сумма баллов равна нулю — переспросить шефа;
- если новость набрала один балл, то всё решают картинки или видео — если они есть, то новость тоже есть;
- если у новости в сумме 2 балла и выше — однозначно берём в работу.
Выбираем варианты ответов
Нам понадобятся переключатели — специальные поля, где можно выбрать только один из нескольких вариантов. Выглядят они так:
Синяя точка означает, что мы выбрали первый вариант. Если выберем второй, то на первом она автоматически снимется:
За такой переключатель в HTML отвечает элемент <input> со свойством type="radio" . Чтобы поставить его на страницу, пишут так:
<input name="result" type="radio" value="2">
Последнее свойство value отвечает за результат — какой ответ мы получим, если выберем этот вариант. Двойка у нас получилась от того, что в чек-листе напротив этого ответа стояло две галочки. Если бы было два крестика, мы бы написали value="-2" .
Теперь у нас есть всё, чтобы оформить первый вопрос в виде кода на HTML:
Мы сделали три переключателя с одинаковым именем result. Это нужно для того, чтобы браузер понимал, что все три ответа относятся к одному вопросу и нужно выбрать один из них. Если бы мы везде поставили разные имена для свойства name , то можно было бы выбрать все три одновременно, а нам это не нужно.
Получается, что для остальных вопросов нам нужно сделать то же самое, только поставить уникальный параметр name для каждой группы вопросов и проследить за баллами за ответы:
Добавляем кнопку подсчёта баллов
Добавим на страницу кнопку, по нажатию на которую запустится скрипт подсчёта баллов:
<button onclick="count()"> Оценить </button>
К кнопке привязан обработчик событий onclick — он следит за нажатиями и запускает нужный скрипт. Скрипта у нас ещё нет, поэтому им и займёмся.
Логика будет такая:
- Обнуляем количество отмеченных вопросов и набранных баллов.
- Находим все переключатели на странице.
- Считаем, сколько из них отмечено. Если меньше четырёх (у нас 4 вопроса), то выводим сообщение, что не всё отмечено.
- Для каждого отмеченного считаем, сколько он даёт нам баллов, положительных или отрицательных, и складываем баллы вместе.
- Если у нас есть 4 ответа, то в зависимости от набранных баллов выводим результат.
Чтобы у нас на странице появилась информация с результатами, добавим пустой абзац и пропишем ему своё имя класса. Так мы сможем отличать его от других абзацев. Когда нам что-то понадобится туда поместить, мы найдём его по имени класса и положим в него нужный текст.
Добавим абзац в самый конец страницы:
<!-- В самом низу сделаем пустой абзац, куда будем выводить результаты -->
<p class = "itogo"></p>
Пишем скрипт
В скрипте мы будем использовать три команды, которые нам ещё не встречались, но они довольно простые.
Чтобы не подключать jQuery и при этом находить нужные элементы на странице, используем функцию document.getElementsByClassName("itogo") . Она найдёт все элементы на странице с указанным классом (itogo) и вернёт массив из найденных элементов. Так как на странице у нас только один такой элемент с таким классом, то это сразу всё упрощает.
Вторая команда — функция document.getElementsByTagName('input') . Она находит все тэги input и делает из них массив с объектами. Дальше с ними можно уже работать как с обычными элементами — проверять их свойства и значения.
Третье — свойство getAttribute() . С его помощью мы выясним, переключатель перед нами или нет. Если свойство getAttribute('type') совпадает с 'radio', значит это переключатель.
Сбрасываем ответы
Чтобы не путаться, добавим кнопку сброса. Она уберёт все отмеченные варианты, и следующую новость можно оценивать заново:
<button onclick="clear()"> Сбросить </button>
Для функции clear() мы возьмём код из предыдущей функции и немного его поправим:
Если вам пока этот сервис не нужен, можно просто посмотреть готовый результат .
Что дальше
Кажется, что проблема решена, но на самом деле нет, смотрите:
- неудобно прицеливаться в маленькие кружочки переключателей, это долго и раздражает
- кнопки тоже маленькие
- результат нужно читать, а это тоже время
- сами вопросы сейчас не заточены под быструю работу с интерфейсом, их нужно переформулировать
- для результата нужно нажать на кнопку, хотя можно сделать автоматический вывод итогов, когда всё отмечено
Всё это сделаем в следующий раз. Не переключайтесь.