Альтернатива выбору блока текста (alt для выбора тега)

Question

В настоящее время я делаю проект по созданию «экзамена» с точки зрения профессора и позволяю студенту сдать эти экзамены.

При этом у меня все функции работают нормально, но я неМне не нравится, как обрабатывается одна вещь.

Проще говоря, я выбираю ДЛИННЫЕ вопросы из тега выбора.А затем с помощью выбранной строки и добавления ее в массив «test» для отображения.

Тег select делает это довольно уродливым, поскольку весь вопрос не отображается ... даже если онработает это не красиво.(я очень новичок в интерфейсе)

Могу ли я просто получить несколько советов о том, как мне работать?Выбор данных и сохранение значения для отправки или отображения.А именно, я думал о способе отображения абзаца текста и возможности его выбрать.Пока он выбран, я хочу нажать Добавить вопрос, и он возьмет значение (абзац) и добавит его в переменную.

Я приведу скриншот ниже, если это поможет понять!

Answer 1

Если вы хотите, чтобы в любой момент был выбран только один вопрос, почему бы не использовать вместо него «радио»?

Поместите их в элемент div, который можно прокручивать.
Дайте им тот же атрибут name.
Дайте им EventListener 'change', зациклите их и возьмите значение из проверяемого.

<div class="myContainer">
    <label>
        <input class="myInput" type="radio" name="selectQuestion" value="My Question here..."/>
        My Question here...
    </label>
    <label>
        <input class="myInput" type="radio" name="selectQuestion" value="My Question here..."/>
        My Question here...
    </label>
</div>

.container {
    height: 400px;
    overflow-y: auto;
}

var targets = Array.from(document.getElementsByClassName('myInput'));
targets.map(function(item){
    target.addEventListener('change', function(e){ 
        if (e.target.checked) { //do stuff }
    })
})

---

В противном случае, если в любой момент можно выбрать несколько вопросов,просто создайте невидимые элементы div с помощью clickL eventListeners, или входы 'checkbox' с 'change' eventListeners.

<div class="myContainer">
    <label>
        <input class="myInput" type="checkbox" value="My Question here..."/>
        My Question here...
    </label>
    <label>
        <input class="myInput" type="checkbox" value="My Question here..."/>
        My Question here...
    </label>
</div>

Мнения о выборе дизайна здесь довольно сложны.