이전 질문에 따라 질문 및 답변 퀴즈를 만들려고합니다. 따라서 사용자가 예를 클릭하면 이전 질문이 화면에서 사라지고 새로운 질문이 화면에 표시됩니다. 클릭하지 않으면 다른 질문이 표시됩니다. 어떤 도움이라도 대단히 감사합니다. 고맙습니다.이전 쿼리에 따라 다단계 응답
는코드 :
<!DOCTYPE html>
<html>
<body>
<p>Is the answer to this question Yes or No?</p>
<button onclick="myFunction1()">Yes</button>
<button onclick="myFunction2()">No</button>
<p id="demo"></p>
<script>
function myFunction1() {
}
function myFunction1() {
}
</script>
</body>
</html>
그 작업을 수행하는 가장 쉬운 방법은이 같은 디스플레이 CSS 속성을 사용하는 것입니다은 :
<!DOCTYPE html>
<html>
<body>
<div id="first-question">
<p>Is the answer to this question Yes or No?</p>
<button onclick="myFunction('first-question', 'second-question-1')">Yes</button>
<button onclick="myFunction('first-question', 'second-question-2')">No</button>
</div>
<div id="second-question-1" style="display: none;">
<p>You have clicked "Yes"</p>
<p>Return to the first question ?</p>
<button onclick="myFunction('second-question-1', 'first-question')">Yes</button>
<button onclick="">No</button>
</div>
<div id="second-question-2" style="display: none;">
<p>You have clicked "No"</p>
<p>Return to the first question ?</p>
<button onclick="myFunction('second-question-2', 'first-question')">Yes</button>
<button onclick="">No</button>
</div>
<script type="text/javascript">
function myFunction (hide, show) {
document.getElementById(hide).style.display = "none";
document.getElementById(show).style.display = "block";
}
</script>
</body>
</html>UPDATE : 단 1 기능을 사용
이것은 내가 찾고있는 것과 정확히 같아 보이지만, 하 5 단계의 질문이 필요한 경우 어떻게해야합니까? 그래서 질문의 수는 2^n이됩니다 (n은 레벨)? – sphe2011
음 ... 많은 id를 가진 많은 div 요소를 갖게 될 것입니다. id를 매개 변수로 보내서 하나의 js 함수 만 사용할 수 있습니다. – AntoineCa
function myFunction3() { \t document.getElementById ("first-question"). style.display = "none"; \t document.getElementById ("second-question-2"). style.display = "none"; document.getElementById ("three-question-1"). style.display = "block"; } 여전히 두 번째 질문을 보여줍니다. – sphe2011