архитектура для поддержания состояния и управления вводом-выводом в чисто клиентском приложении викторины (javascript / jquery)

Question

Этот вопрос по необходимости немного общий;это относится к общей архитектуре клиентских приложений, созданных с использованием javascript и jquery:

Я создаю приложение для викторин на основе jquery.Для первоначальных целей я пытаюсь разработать его полностью на стороне клиента, где все данные вопросов и ответов хранятся в литералах объекта в js-файлах (сейчас я не особо обеспокоен тем, что данные будут представлены в источнике).Я хочу построить его так, чтобы эту реализацию можно было легко адаптировать к решению ajax, в котором данные вопроса были бы извлечены из файла php или базы данных.

Я написал функцию генерации вопроса, которая принимает объектлитерал, описывающий вопрос, отображает его как HTML и вставляет его на страницу.Мой вопрос заключается в том, что было бы лучшим способом хранения данных ответов пользователей и осуществления ввода-вывода по мере того, как пользователь проходит тест.Вопросы будут отображаться последовательно, и будет существовать логика, которая выбирает из двумерной сетки вопросов, чтобы определить, какой вопрос будет отображаться следующим, на основании того, правильно ли ответил пользователь, и координатной позиции на сетке вопросов вопроса, на котором они были..

Рад опубликовать любой код, который я уже написал, если это будет полезно для предоставления ответа.Спасибо.

Answer 1

Применяются те же принципы.

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

В этой функции вы будете настраивать программу (как вы бы это делали в основной части C ++), создавать переменные (глобальные или иные), представляющие состояние программы и т. Д. Я думаю, у вас будет некоторая логика, которая выбирает и представляет вопрос плюс, возможно, кнопка «ОК», которую пользователь должен нажать, когда он доволен своим пользователем. На данный момент браузер просто ожидает ввода пользователя, пользователь выбирает свой ответ и нажимает ОК. Логика вашей программы, вероятно, хранить где-то ответ в переменной и вычислять следующий вопрос для отображения. Для этого вы добавили функцию в обработчик событий onclick, которая реализует эту логику. Вы задаете следующий вопрос и вуаля, вы снова в начале цикла.

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

Я не уверен, является ли это частью вашего замешательства, но вы знаете, что вместо:

button.onclick = new function() {  // loads of program code to get next question };

вы можете сделать

function NextQuestion() {
     // code to get next question
}

button.onclick = NextQuestion;