inflearn logo
강의

Khóa học
Chia sẻ kiến thức

<M.B.I.T> Tạo trang thử nghiệm! với Django

Tạo trang khảo sát - js

안넘어가요.

347

leehack30066391

4 câu hỏi đã được viết

1

1/3에서는 잘 넘어가는데

2/3에서는 안넘어 갑니다.

html코드는 이거입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 유형찾기</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/form.css">
</head>
<body>
    <section id="survey">
        <div class="wrapper">
            <form id="form">
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">1/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap">
                        <button class="next_btn">다 음</button>
                    </div>
                </div>
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">2/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn_sort">
                        <button class="prev_btn">이 전</button>
                        <button class="next_btn">다 음</button>
                    </div>
                </div>
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">3/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn_sort">
                        <button class="prev_btn">이 전</button>
                        <input type="submit" value="제 출" class="submit_btn"/>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
</body>
</html>

 

자바스크립트 코드는 이거입니다.

 

function scrollUp() {
    const vheight = $('.test').height();
    $('html, body').animate({
      scrollTop: ((Math.ceil($(window).scrollTop() / vheight)-1) * vheight)
    }, 500);
};

function scrollDown() {
    const vheight = $('.test').height();
    $('html, body').animate({
        scrollTop: ((Math.floor($(window).scrollTop() / vheight)+1) * vheight)
    }, 500);
}

$(function(){
    $('.next_btn').click(function(e){
        let divs = $(this).parent().prev().children();
        let inputs = divs.find('input:checked');
        if(inputs.length < 1) {
            alert('문항이 선택되지 않았습니다.');
            return false;
        }
        e.preventDefault();
        scrollDown();
    });

    $('.prev_btn').click(function(e){
        e.preventDefault();
        scrollUp();
    });

    $("#form").submit(function() {
        let radios = $('input[type=radio]:checked');
        if(radios.length < 10) {
            alert("문항이 선택되지 않았습니다.");
            return false;
        }
        return true;
    });

    $("html, body").animate({
        scrollTop: 0
    }, 500);
});

HTML/CSS django javascript

Câu trả lời 1

2

Hara Chung

제가 강사님은 아니지만 저도 같은 문제를 겪었던 학생 입장으로서 제 해결 방법을 알려 드립니다.

학생분 form.html을 보시면 .answer div 내의 input id가 전부 "one"으로 되어 있습니다.

그러니까 첫 번째 문제의 .answer 세트에서는 id가 가령 "one"이었다면, 두 번째 문제의 .answer 세트에서는 id가 "two", 세 번째 문제의 .answer 세트에서는 "three" 이런 식으로 각각 다르게 바꾸어 주셔야 해요.

이게 정답이 아닐 수도 있는데 저는 여튼 이렇게 해결했어요!

이 학생분의 궁금증이 일찍 해결되었으면 좋았을 텐데 혹시 저처럼 똑같은 실수 하시는 분 계실까 봐 노파심에 저도 이렇게 해결 방법 남깁니다. 도움이 되기를 바라요!

0

leehack30066391

답변 정말로 감사합니다! 한번 해보도록 하겠습니다!

0

peter9167

소스코드를 보여주실수 있을까요..?

0

Hara Chung

진짜 말 그대로 answer div 안에 있는 Input들 id를 각각 one, two, three 이렇게 바꿔 주시면 돼요 ㅎㅎ 제 소스 코드는 아래와 같습니다! (form.html이에요!)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>나의 개발 유형 찾기</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <section id="survey">
        <div class="wrapper">
            <form id="form">
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">1/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap">
                        <button class="next_btn">다음</button>
                    </div>
                </div>


                <div class="test">
                    <div class="question_container">
                        <h3 class="number">2/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn-sort">
                        <button class="prev_btn">이전</button>
                        <button class="next_btn">다음</button>
                    </div>
                </div>


                <div class="test">
                    <div class="question_container">
                        <h3 class="number">3/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn-sort">
                        <button class="prev_btn">이전</button>
                        <input class="submit_btn" value="제출" type="submit"/>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
</body>
</html>

0

peter9167

소스코드 감사합니다~~

data.json 파일을 어디 올려놓은 건가요??

0

144

1

python manage.py dumpdata main --output data.json로 생성된 파일의 글자가 깨짐 문제

0

149

1

현재는 구름 ide 컨테이너 생성이 유료인가요? 시간당 크레딧이 필요합니다.

0

251

1

사이트 접속이 안돼요

0

232

1

첫화면 버튼이 css 적용이 안됩니다..

0

492

1

제출버튼 클릭하면 오류 발생

0

233

1

makemygrations 오류

0

245

1

자바스크립트 오류 관련해서 질문합니다.

0

680

1

장고 ORM 깃허브 업로드 관련 질문입니다.

0

419

1

결과 페이지 만들기 -js편 execCommand를 더이상 지원하지 않습니다.

0

1547

1

결과페이지 만들기 - css 강의 내 질문입니다.

0

298

0

테스트 사용자 이름을 결과페이지에 뜨게

0

273

0

js) 2/3 -> 3/3으로 안 넘어갑니다

0

323

1

질문지를 블록형태로 바꿀려면 어떻게 입력해야하나요??

0

256

1

제출 클릭 시 result로 못넘어가는 오류

0

348

1

구름 컨테이너 선택시 파이썬->장고 선택하면?

0

295

1

static.zip 링크가 없습니다!

0

243

1

display: flex 오류

0

574

0

다른 방식으로 구현하는 부분에 대한 질문입니다.

0

310

0

문항 클릭시 다음페이지로 넘어가게 할 수 있을까요?

0

599

1

uWSGI 소켓 설정 후에 프로젝트 화면 접근이 안 됩니다.

0

202

0

다 완성하고 배경색을 바꾸려고 하는데요

0

310

1

함수질문

0

252

1

아래 글 이어서 질문

0

268

1