JSFiddle - React, Tailwind, and code Playground

by slavikse leba

HTML

<img src='http://all-poster.ru/images/brloyo0c.png' usemap='#map'>
<map id='js-fao' name='map'></map>
<span id='js-question'></span>

CSS

#js-question {
  font-size: 1.5em;
  display: block;
}

JavaScript

/**
 * Перспектива для замены каптчи!
 * Тест на распознавание части изображения.
 *
 * Идею назвал - fao, что в переводе find a object - Найди объект.
 *
 * Тест основан на опыте тестирующегося,
 * картинку нужно выбирать максимально простую и популярную.
 *
 * В последствии "полной" интеграции социальных сетей с крупными сайтами,
 * сети смогут предоставить фотографию друга тестируемого, с простым вопрос:
 * "Кто этот человек?", что значительно ускорит как прохождение теста,
 * так и уменьшит вероятность угадывания роботом - друзей.
 */

/**
 * Содержит в себе информацию для создания областей на изображении
 */
function Data() {
  /**
     * Имена. Используются только для визуального представления,
     * что нужно искать тестируемому
     */
  this.name = ['Lisa', 'Marge', 'Homer', 'Bart', 'Maggie', 'Dog', 'Cat'];
  
  /**
     * Координаты именованных областей
     */
  this.arrayCoords = [
    '54, 163, 21, 189, 27, 235, 49, 244, 95, 231, 95, 189'
    , '29, 38, 72, 153, 122, 148, 110, 52, 71, 8, 41, 11'
    , '141, 60, 131, 122, 161, 149, 189, 129, 191, 61, 166, 48'
    , '172, 160, 222, 163, 214, 241, 237, 292, 220, 351, 174, 344, 178, 282, 189, 248, 162, 232'
    , '136, 145, 110, 167, 128, 203, 152, 195, 162, 160'
    , '98, 233, 126, 211, 156, 222, 162, 258, 180, 271, 159, 348, 123, 342, 135, 267'
    , '36, 243, 15, 274, 35, 296, 72, 295, 68, 317, 116, 316, 113, 272, 60, 263, 54, 249'
  ];
}

/**
 * Создаем и возвращаем массив рандомов,
 * ограниченных пятью знаками после запятой
 */
function createArraySerialNumbers(length) {
  var arraySerialNumbers = [];
  
  // В [последнем] будет храниться поисковое число
  for (var i = 0; i < length; i++) {
    arraySerialNumbers[i] = i;
  }
  
  return arraySerialNumbers;
}

/**
 * ADD: полное создание элементов на странице html, включая сам тег map
 *      с добавлением ему id для его определения
 *
 * Создание тега area с заданными атрибутами
 *
 * Объект - для сравнения с искомым рандомом
 * Длина -...