테스트 만들기

테스트 만들기

QA

테스트 만들기

본문

안녕하세요 고수님들 

설문조사? 같은 테스트를 만들어보고 있는데 스크립트를 아무리 생각해봐도 모르겠어서 질문 남깁니다. 

도와주시면 감사드리겠습니다

 

1번 2번 이런식으로 문제 선택을 했을 때 process bar가 움직이게 해보고 싶은데 

어떤식으로 줘야할지 감이 안와서요 힌트라도 주시면 공부하겠습니다.

process bar는 after로 준 상태입니다.

1794350691_1670481142.3837.png


<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>
답변을 작성하시기 전에 로그인 해주세요.
전체 10,639
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT