웹 페이지의 JavaScript를 사용하여 트리 구조로 테스트 구현

Question

각 답변에 따라 특정 질문을 얻을 수있는 사용자 테스트가 필요한 웹 페이지가 필요합니다. 내 웹 응용 프로그램은 플라스크에 있으므로 다른 종류의 HTML 템플리트로 라우팅 할 수 있습니다. 하지만 대신 자바 스크립트를 사용하고 질문과 답변으로 HTML 코드 조각 만 바꾸고 싶습니다. 이런 물체를 사용할 수 있습니까? :

var test = { 
    "QUESTION_1": { 
     "answer_1.1": { 
      "answer_1.1_text": "text1.1", 
      "QUESTION_1.1": { 
       "answer_1.1.1": { 
        "answer_1.1.1_text": "text1.1", 
        "QUESTION_1.1.1": {"..."} 
       } 
       "answer_1.1.2": { 
        "answer_1.1.2_text": "text1.1.2", 
        "QUESTION_1.1.2": {"..."} 
       } 
       "answer_1.1.3": { 
        "answer_1.1.3_text": "text1.1.3", 
        "QUESTION_1.1.3": {"..."} 
       }     
      } 
     } 
     "answer_1.2": { 
      "answer_1.2_text": "text1.2", 
      "QUESTION_1.2": { 
       "answer_1.2.1": { 
        "answer_1.2.1_text": "text1.2.1", 
        "QUESTION_1.2.2.1": {"..."} 
       } 
       "answer_1.2.2": { 
        "answer_1.2.2_text": "text1.2.2", 
        "QUESTION_1.2.2.2": {"..."} 
       } 
       "answer_1.2.3": { 
        "answer_1.2.3_text": "text1.2.3", 
        "QUESTION_1.2.2.3": {"..."} 
       } 
      } 
     } 
     "answer_1.3": { 
      "answer_1.3_text": "text1.3", 
      "QUESTION_1.3": { 
       "answer_1.3.1": { 
        "answer_1.3.1_text": "text1.3.1", 
        "QUESTION_1.3.1.1": {"..."} 
       } 
       "answer_1.3.2": { 
        "answer_1.3.2_text": "text1.3.2", 
        "QUESTION_.1.3.2.2": {"..."} 
       } 
       "answer_1.3.3": { 
        "answer_1.3.3_text": "text1.3.3", 
        "QUESTION_1.3.3.1": {"..."} 
       } 
      } 
     } 
    } 
} 

따라서 모든 대답에 대해 사용자는 새로운 질문을하게됩니다. 그리고 이것을 구현하는 방법은 무엇입니까? 하나의 질문에 대한 html의 샘플 바로 아래이지만 동적이지 않습니다.

Answer 1

다른 질문에 대한 답변을 기반으로 추가 질문을하는 동적 양식을 원하십니까? 많은 고용 형태에서 찾을 질문처럼 다음 If yes...가 질문을 후속

는

Have you ever been convicted of a crime? 
[X] Yes 
[ ] No 

If yes, please explain: 
Well, it happened a long time ago in a galaxy far, far away... 

단지 앞의 질문이 '예'라고 대답하고 아무 대답하면 숨겨진 나타납니다. 코드 그래서 형태의 모든 적절한 영역으로

1. 후크 : 나는 거기에 아마 당신이 할 수있는 도구해야하지만,이 스스로를 달성하기 위해 생각

   , 당신은 3 일을해야합니다 폼 응답이 변경되면 실행됩니다.

2. 양식의 답변 상태를 현재 보유하고있는 기준과 비교하고 양식의 어떤 측면을 표시하거나 숨길 지 결정하십시오.
3. 양식의 해당 섹션을 표시하거나 숨 깁니다. 이것은 CSS display:none; 스타일링을 통해 또는 실제로 DOM 요소를 주입/삭제함으로써 수행 할 수 있습니다.

각 단계를 조사하고 목표를 달성하는 데 어떤 방법을 사용 하시겠습니까? 행운을 빌어 요!