Каким будет метод создания динамической викторины с помощью логических крючков?

Question

Для сайта, над которым я работаю, мы хотим принять конкретный шаблон дизайна, который мы видели хорошо на других сайтах и ​​реплицируем его.

Sample

Поведение, которое мы после (в pseduo коде)

Question 1 
{ 
if yes go to Question2v1 
if no go to question2v2 
} 
Question 2 version 1 
{ 
if yes go to Question3 
if no go to Message with try again button that loops to start 
} 
Question 2 version 2 
{ 
yes message6 
no message 7 
} 
Question 3 
{ 
if yes go to Question4v1 
if no go to question4v2 
} 
Question 4 version 1 
{ 
if yes message2 with try again button 
if no message3 with try again 
} 
Question 4 version 2 
{ 
if yes message 4 
if no message 5 
} 

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

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

Я видел некоторые динамические опросы, которые выполнялись либо из чистого javascript, либо из jquery-плагина (slickquiz), но я не был уверен, могут ли они легко выполнить это поведение?

Ниже представлен нефункциональный макет. Это две рестайлинговые радиокнопки разделить с Col-хз-6 класса Сообщение:

код стиля, если вы хотите:

<div class="well-inverse well-lg" > 
       <div class="text-center"> 
        <h3>To help you decide which method applies to your company &ndash; answer the questions below</h3> 
        <hr> 
        <p>Question 1: Was the Company dissolved more than 6 years ago?</p> 
        <small style="font-variant:small-caps;">Placeholder: Real Content to come later </small> 
       </div> 
       <div class="col-sm-6"> 
        <div class="funkyradio"> 
         <div class="funkyradio-success"> 
          <input type="radio" name="radio" id="radioY"> 
          <label for="radioY">Yes</label> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-6"> 
        <div class="funkyradio"> 
         <div class="funkyradio-danger"> 
          <input type="radio" name="radio" id="radioN"> 
          <label for="radioN">No</label> 
         </div> 
        </div> 
       </div> 
      </div> 

Answer 1

Я думаю, что я решил это на собственный на самом деле.

Просто набор логических контуров, которые определяют ID элементов Yes No.

И при выборе кнопки изменяется идентификатор кнопки, основанный на ответе.

так что было бы, как

clicked yes first time 
change question based on response 
change id of yes/no to match this question 
e.g from id="q1Yes" to "q2No" 
continue loop until user hits an end of chain. 
upon end of chain, restart loop if user presses "try again" button 

Я думаю, что моя проблема в том, что я не разваливался проблема на достаточно мелкие части.