Пытаюсь сделать форму для задачи "Сопоставьте ответы" как на изображение

Question

Мне нужно чтобы пользователь мог нажимая на этих кружочках мог сопоставить вопросы и ответы, у меня идей вообще нет, подойдет любое подсказка.

вот как здесь

извиняюсь за качеству изображений

Answer 1

Да в принципе можно без всяких скриптов. Негибко, да, но работает:

.question {
  border: 1px solid gray;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 5px;
  cursor: pointer;
  width: 250px;
}

.answer {
  border: 1px solid gray;
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 5px;
  white-space: nowrap;
  margin-left: 3em;
  width: 250px;
}

.wrap {
  column-count: 2;
}

.answer:before {
  content: 'V';
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 1px solid gray;
  transform: translatex(-2.25em);
  border-radius: 2px;
  color: transparent;
}

#q1:checked~#a1:before,
#q2:checked~#a2:before,
#q3:checked~#a3:before,
#q4:checked~#a4:before {
  color: green;
}

<div class="wrap">
  <label for="q1" class="question">Вопрос 1</label><input type="checkbox" id="q1" /><br>
  <label for="q2" class="question">Вопрос 2</label><input type="checkbox" id="q2" /><br>
  <label for="q3" class="question">Вопрос 3</label><input type="checkbox" id="q3" /><br>
  <label for="q4" class="question">Вопрос 4</label><input type="checkbox" id="q4" /><br>

  <div class="answer" id="a4">Ответ 4</div><br>
  <div class="answer" id="a3">Ответ 3</div><br>
  <div class="answer" id="a1">Ответ 1</div><br>
  <div class="answer" id="a2">Ответ 2</div>

</div>

БЛОГ НА HUSL

Пытаюсь сделать форму для задачи "Сопоставьте ответы" как на изображение

Ответы (1 шт):