Dynami c создание формы и добавление полей ввода

Question

В настоящее время я работаю над проектом, который представляет собой систему создания онлайн-викторин, в которой пользователи должны иметь возможность создавать свои собственные тесты, вопросы и возможные ответы, а затем отправлять их другим пользователям, чтобы они могли решить викторину. Я использую c# в качестве серверной части. Проблема, с которой я сталкиваюсь, - это динамическое создание вопросов и возможных ответов в викторине. Я не знаю, как создать динамическую форму c, чтобы пользователь мог создать вопрос и добавить возможные ответы. Я хочу, чтобы пользователь мог создать такой вопрос:

Вопрос 1: Кто является первым президентом США?

а) Джон Адамс

б) Томас Джефферсон

c) Джордж Вашингтон

Добавить ответ

Создать другой вопрос

И если пользователь решает добавить еще один возможный ответ, он нажимает «Добавить ответ». И когда он нажимает «Создать другой вопрос», он должен создать пустую форму, чтобы напечатать его вопрос и добавить возможные ответы.

Вопрос 1: Кто является первым президентом США?

а) Джон Адамс

б) Томас Джефферсон

c) Джордж Вашингтон

d) Президент

Добавить ответ

Создать другой вопрос

Кто-нибудь делал что-то подобное? Я долго искал и не мог найти то, что мне нужно. Я не ищу полное решение для кода, только некоторую помощь, чтобы я мог продолжить свой проект.

Большое вам спасибо за ваше время.

Answer 1

Если бы вы могли указать, используете ли вы какой-либо js Framework, например Angular, или нет, это упростит предоставление образца, но, поскольку это не так, я сделал такую ​​же функцию в vanilla js, которая будет полезна с добавлением функциональных возможностей динамических c полей.

function addAnswerFields(){

   //Get reference of container and append Text in it
   var container = document.getElementById("container");
   container.appendChild(document.createTextNode("Answer "));

   //Get reference of container and append Input field in it
   var input = document.createElement("input");
   input.type = "text";
   container.appendChild(input);

   // Add Br tag to move input fields on next line
   container.appendChild(document.createElement("br"));
}

Когда пользователь нажимает Создать еще один вопрос , появится поле для ввода ответа. Более того, можно добавить, что вы можете добавить кнопку в правой части поля. После нажатия кнопки поле будет заменено тегом P или любым другим тегом, который вы используете, чтобы отобразить его в качестве ответа. Надеюсь, это поможет!