Как реализовать каркас переключения между окнами в многооконном приложении на Javascript?

Question

[Eugene Zalivadnyi]

Задача: реализовать каркас многостраничного приложения на bootstrap и jquery.

• По умолчанию отображается только первый экран.
  
• Переключаться между экранами можно кнопками вперёд и назад.
  
• На некоторых экранах могут быть варианты выбора, например вопросы с тестами на радиобаттонах, и в зависимости от выбранного варианта происходит переход на соответствующее окно (3 или 4 в примере). Важно не столько сделать сами тесты, как переходы между экранами, как если бы вместо вариантов ответа были пункты меню .
  
• Зависимость между окнами похожи на граф.
  
• Всё должно загружаться один раз и работать локально, без обращений к серверу.
  

Пример экранов приложения:

1. Добро пожаловать в тест! Кнопка "далее".
   
2. Сколько будет 1+1? Радиобаттоны: 1, 2 , 3. Кнопка "назад" и "далее". Далее активна только при выборе радиобаттона.
   
3. Вы ответили правильно! Кнопка "пройти тест еще раз".
   
4. Вы ответили не правильно! Кнопка "пройти тест еще раз".
   

На всех экранах кроме первого нужно показывать счетчики удачных и неудачных попыток, которые инкрементируются по результатам перехода с экрана “2” на экран “3” или “4”.

Мои соображения по реализации:
Каждому экрану давать класс screen для более удобной манипуляции с окнами, по умолчанию display: none.
Присваивать активному окну класс active, в CSS прописывать ему display: block.
Давать каждому окну идентификатор предыдущего окна для возможности возврата.

Важно: Как более грамотно спроектировать архитектуру, чтобы можно было в дальнейшем добавлять дополнительные экраны, вплоть до сотни или более?
Как указать кнопке далее, на какой экран следует перейти?

Answer 1

[Роман Макаров]

Судя по описанию, вы хотите сделать не многостраничное, а одностраничное приложение.
1. Стоит заранее знать, какое количество данных, аяксов будет использоваться. Если страницы статичные и не имеют объемной структуры данных, то можно на обычном Jquery, как вы и предположили.
2. Стоит помнить, что jquery код jq коду рознь. Задумывайтесь сразу, насколько удобны ваши конструкции при масштабировании.
3. Кнопки Вперед - Назад это hash-навигация, если страницы статичные, то можно просто вести массив истории.

Всё должно загружаться один раз и работать локально, без обращений к серверу.

Т.е. человек прошел 87 тестов, обновился и все потерял?

По-хорошему, существуют такие штуки как Backbone и Angular, которые хорошо работают с приложениями такого типа.
Но вам я бы предложил создать двумерный массив для навигации (id шаблона + состояние). А потом уже по ходу перекидывать пользователя на нужный шаблон с нужным состоянием.