테스트 만들기
본문
안녕하세요 고수님들
설문조사? 같은 테스트를 만들어보고 있는데 스크립트를 아무리 생각해봐도 모르겠어서 질문 남깁니다.
도와주시면 감사드리겠습니다
1번 2번 이런식으로 문제 선택을 했을 때 process bar가 움직이게 해보고 싶은데
어떤식으로 줘야할지 감이 안와서요 힌트라도 주시면 공부하겠습니다.
process bar는 after로 준 상태입니다.
<div class="page on">
<div class="process-bar"></div>
1/11
<div class="question01 Num">
<h1 class="question">나의 연령대는__이다.</h1>
<ul class="answer">
<li>
<label><input type="radio" name="Q1"> 여자</label>
</li>
<li>
<label><input type="radio" name="Q1"> 남자</label>
</li>
<li>
<label><input type="radio" name="Q1"> 출생 당시 생물학적 성별과 다르다.</label>
</li>
<li>
<label><input type="radio" name="Q1"> 밝히고 싶지 않다.</label>
</li>
</ul>
</div>
<div class="question02 Num">
<h1 class="question">나의 성별은__이다.</h1>
<ul class="answer">
<li>
<label><input type="radio" name="Q2"> 답1</label>
</li>
<li>
<label><input type="radio" name="Q2"> 답2</label>
</li>
<li>
<label><input type="radio" name="Q2"> 답3</label>
</li>
<li>
<label><input type="radio" name="Q2"> 답4</label>
</li>
</ul>
</div>
<div class="question03 Num">
<h1 class="question">나의 고민은__이다.</h1>
<ul class="answer">
<li>
<label><input type="radio" name="Q3"> 답1</label>
</li>
<li>
<label><input type="radio" name="Q3"> 답2</label>
</li>
<li>
<label><input type="radio" name="Q3"> 답3</label>
</li>
<li>
<label><input type="radio" name="Q3"> 답4</label>
</li>
</ul>
</div>
<div class="question04 Num">
<h1 class="question">내가 하고 있는 고민들 중에 구체적인 해결방법을 제시해 주었으면 하는 고민들이 있다.</h1>
<ul class="answer">
<li>
<label><input type="radio" name="Q4"> 답1</label>
</li>
<li>
<label><input type="radio" name="Q4"> 답2</label>
</li>
<li>
<label><input type="radio" name="Q4"> 답3</label>
</li>
<li>
<label><input type="radio" name="Q4"> 답4</label>
</li>
</ul>
</div>
<div class="question05 Num">
<h1 class="question">나는 가족 중__와(과)의 문제로 고민중이다. 필요하면 함께 상담받을 의향이 있다.</h1>
<ul class="answer">
<li>
<label><input type="radio" name="Q5"> 답1</label>
</li>
<li>
<label><input type="radio" name="Q5"> 답2</label>
</li>
<li>
<label><input type="radio" name="Q5"> 답3</label>
</li>
<li>
<label><input type="radio" name="Q5"> 답4</label>
</li>
</ul>
</div>
<a href="#" class="btn-color large mt30 next">다음으로</a>
</div>
$(document).ready(function(){
var qustionNum = $(".Num").length;
});
답변 1
<script>
$('.answer :radio').on('change', function() {
let q_cnt = $('.Num').length;
let a_cnt = 0;
$('.Num').each(function() {
let val = $(this).find(':radio').val();
if (val != "") {
a_cnt++;
}
});
let percentage = Math.round(((a_cnt / q_cnt) * 100)) + '%';
$('.process-bar').css('width', percentage);
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
