java script 랜덤 설문에서 설문 종료 방법

4가지의 설문지를 만들고 이 설문지가 랜덤하게 돌아가게 만들고 싶습니다. 현재 만들어 놓은 구조를 설명드리자면 가장 첫 번째 인트로화면에서 '설문 시작하기' 버튼에 4개의 설문지 문서(random1.html, random2.html,random3.html,random4.html)이 랜덤하게 열릴 수 있도록 자바스크립트 처리 되어있습니다.

var arr = ["random1.html", "random2.html", "random3.html", "random4.html"];

    function randSite(){
    location.href = "http://" + arr[Math.floor (Math.random()*arr.length)];
    }
</script>

이런식으로요 !

그리고 random1 문서 안 '다음으로' 버튼에는 random2가 열리도록, random2 문서 안 '다음으로' 버튼에는 random3가 열리도록 하는 방식으로 모든 4문서가 물려있습니다.

이러다보니 4개의 설문을 마치더라도 끝이 나지 않고 무한 루핑이 됐습니다. 다른 경우에는 루핑이 도는 것에 크게 문제가 없었어서 이런 식으로 해왔었는데 이건 설문이다보니 루핑이 돌면 문제가 되네요.. 1-4까지의 문서가 랜덤하게 돌아가고 1회씩 모든 문서를 접하면 마지막 문서의 버튼은 '다음으로'가 아닌 '설문 종료'를 만들 수 있는 방법은 무엇인지 궁금합니다 ㅠㅠ

1답변

  • 애플리케이션의 설계를 개선하는 것이 좋을 것 같습니다. 한 페이지 안에 각 페이지 내용을 모두 넣고 이렇게 제어해 보세요.

    1. 각 설문 페이지 내용들을 div로 한 페이지에 나란히 넣고 각 div에 고유한 id를 줍니다.
    2. 일단 이 div들을 모두 숨깁니다. (CSS로는 display: none, jQuery로는 $(개체).hide())
    3. 문서가 열리자마자 이 id들을 늘어놓은 순서배열을 정의하고 이를 뒤섞습니다.
    4. 뒤섞인 순서배열 1번째 id에 해당하는 div를 보여줍니다. (그 전에 전체를 다시 다 숨기는 작업을 하면 항상 1개 div만 보이게 되겠죠)
    5. 순서배열상의 n번째 div의 모든 input에 값이 채워졌으면 n+1번째 div를 보여줍니다.
    6. 더 보여줄 div가 없으면 끗

    + 반드시 페이지들을 물리적으로 분리해야 한다면 '이 사용자가 어느어느 페이지들의 설문을 마쳤는가'를 저장해야 합니다. 클라이언트단과 서버단의 두 가지 방향이 있겠죠. 각각 쿠키와 세션을 사용하면 됩니다.

    • 설문이 단순히 설문지만 있는 것이 아니라 콘텐츠 내용이 상당해 스크롤이 굉장히 깁니다. 물리적으로 페이지를 분리해야할 것 같은데 클라이언트단과 서버단 중 보다 간단한 방법을 알려주시면 감사하겠습니다 ㅠ 참고로 설문은 꼭 모바일로 진행되어야 하며 로그인 정보는 없이 진행됩니다 Jina Kwon 2018.7.6 15:49
    • 간단하기로 말하면 물론 클라이언트 사이드가 간단하지만 제약이 있지요. 예컨대 4개 설문을 하나로 취합할 필요가 있다면 세션을 사용해서 입력값을 관리해야 할 겁니다. 어차피 서버에 설문 내용을 저장해야 하니까 서버사이드를 추천드립니다. 그리고 하나만 더 참견하자면... 의외로 사용자들은 모바일 화면에서 스크롤이 길어도 좋으니 "내가 지금까지 뭘 입력했는지를 확인"하려 하거나 "이전 입력을 취소"하려는 행동을 보이곤 합니다. 스크롤이 길면 CSS로 스크롤바를 만들어주면 될 일이고요 -_-; 엽토군 2018.7.6 16:07

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.