Мне нужно чтобы пользователь мог нажимая на этих кружочках мог сопоставить вопросы и ответы, у меня идей вообще нет, подойдет любое подсказка.
извиняюсь за качеству изображений
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуМне нужно чтобы пользователь мог нажимая на этих кружочках мог сопоставить вопросы и ответы, у меня идей вообще нет, подойдет любое подсказка.
извиняюсь за качеству изображений
Да в принципе можно без всяких скриптов. Негибко, да, но работает:
.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>