javascript — отображение динамически растущей страницы

Предположим, у меня есть страница пользователя, где пользователь может выбрать предмет для изучения и кнопку для загрузки вопросов.

Основной вид предметной страницы — Пользователь выбирает тему и получает вид, как в скрипке

<div class="dataContainer">
<div class="clsContextContainer">
<a href="intro.php">Chapter1</a>
<a href="basic.php">Chapter2</a>
<a href="next.php">Chapter3</a>
<a href="advanced.php">Chapter4</a>
<a href="future.php">Chapter5</a>
</div>
<div class="clsContentContainer">
<div class="q"> Q: Question goes here
<div class="c">C: a) choice1 b) choice2</div>
<div class="a">AnswerButton</div></div>

<div class="q"> Q: Question goes here
<div class="c">C: a) choice1 b) choice2</div>
<div class="a"> AnswerButton</div>
</div>
</div>
</div>

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

Solution1

Пользователь загружает отдельный вопрос или файл, который содержит список вопросов. Один из администраторов одобряет это [не дублирующий вопрос, допустимый], затем его следует добавить на эту тему.

я могу использовать handlebars.js и где я могу поддерживать шаблон, как я показал на скрипке и на странице контекста. Как только один из администраторов одобряет, я могу добавить новый вопрос (и) в список доступных контекстов. [MODIFYING A FILE IN THE SERVER] Таким образом, когда пользователь отображает страницу в следующий раз, также будет добавлен новый вопрос.

Мои сомнения — Безопасно ли изменять файл в serer через скрипт?

Solution2:

Я могу вести таблицу на сервере questionsSubName, Пользователь добавляет новый вопрос (ы). Admin одобряет его. Так что добавьте этот вопрос в таблицу на сервере.

Во время рендеринга прочитайте вопросы из БД, а затем отрендерите их.

Мои сомненияЯ не чувствую, что это осуществимо, так как часто запрашивать db — не лучший способ для такой ситуации.

Solution3

Я могу иметь списки файлов, как показано на скрипке [anchor tag]. Пользователь добавляет новый вопрос. Админ одобряет это.

(i) Вручную создает / изменяет файлы, которые соответствуют главам. create — Я хочу ограничить 50 вопросов в каждой главе. Если одна глава достигает 50 вопросов, мне нужно создать другую. Итак, творение входит в картину здесь. Если в главе менее 50 вопросов, измените ее.

II) Сделайте это с помощью сценария.

Но я не уверен, правильно ли я это делаю. Пожалуйста, предложите мне, как я могу это сделать или есть какие-то другие рамки, которые могут помочь мне в этой ситуации.

РЕДАКТИРОВАТЬ

Прочитав комментарии, handlebars js with tables это лучшее решение.

    <div class="q"> {{{Question}}}
<div class="c">{{{Choices}}}
<div class="a">AnswerButton</div>

Это может быть моя страница шаблона.

Контекстная страница будет похожа

   {
Questions:[
{Q: questionString, C: ChoiceString},
next one
]
}

Я должен прочитать набор вопросов с сервера, например: у меня есть 5 глав для предмета и 220 вопросов в таблице.

Формат таблицы:

 Question Id Column

Question Column

Choice Column

Answer Column

Так что если пользователь нажимает chapter1Я прочитаю первые 50 вопросов из таблицы и создам контекст, а затем отредактирую его. Если пользователь нажимает chapter5Прочитайте последние 50 вопросов и создайте контекст, затем выполните рендеринг.

Это возможно?