-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
제가 질문항을 10번까지 만들었는데 9번 질문에서
21.04.15 07:17 작성 조회수 124
0
제가 질문항을 10번까지 만들었는데 9번 질문에서
답을 선택해도 .. 다음을 누르면
계속 문항이 선택되지 않았다고 뜹니다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
답변을 작성해보세요.
1
0
0
codesweaver
2021.04.15
<div class="test">
<div class="question_container">
<h3 class="number">9/12</h3>
<h3 class="question">메타링 은하로로 점점 가까워진다..당신이 좀 더 듣고싶은 환영인사는? </h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_9" />
<label> 메하! 메타링 은하에 오신것을 환영합니다! 앞으로 어떤 일정이 기다리고 있나요?</label>
</div>
<div>
<input type="radio" name="answer_9" />
<label>메하! 메타링 은하에 오신것을 환영합니다! 도착하신 소감이 어떠세요?</label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>9번 문제 부분의 HTML을 위와같이 고쳐주시기 바랍니다.
.btn-wrap 엘리먼트가.answer 안에 들어가 있어서 스크립트가 제대로 작동하지 않는 문제입니다. (질문자님의 원본 코드는 아래를 참조해 주세요)
<div class="test">
<div class="question_container">
<h3 class="number">9/12</h3>
<h3 class="question">메타링 은하로로 점점 가까워진다..당신이 좀 더 듣고싶은 환영인사는? </h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_9" />
<label> 메하! 메타링 은하에 오신것을 환영합니다! 앞으로 어떤 일정이 기다리고 있나요?</label>
</div>
<div>
<input type="radio" name="answer_9" />
<label>메하! 메타링 은하에 오신것을 환영합니다! 도착하신 소감이 어떠세요?</label>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
</div>0
Dasom Kim
질문자2021.04.15
function scrollUp(top) {
const vheight = $('.test').height();
const margin_top = parseInt($('#survey').css('margin-top'), 10);
$('html, body').animate({
scrollTop: top - vheight - margin_top
}, 600);
};
function scrollDown(top) {
const vheight = $('.test').height();
const margin_top = parseInt($('#survey').css('margin-top'), 10);
$('html, body').animate({
scrollTop: vheight + top - margin_top
}, 600);
}
$('.next_btn').click(function(e){
let divs = $(this).parent().prev().children();
let present_top = $(this).parent().parent()[0].offsetTop;
let inputs = divs.find('input:checked');
if(inputs.length < 1) {
alert('문항이 선택되지 않았습니다.');
return false;
}
e.preventDefault();
scrollDown(present_top);
});
$('.prev_btn').click(function(e){
let present_top = $(this).parent().parent()[0].offsetTop;
e.preventDefault();
scrollUp(present_top);
});
0
Dasom Kim
질문자2021.04.15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/form.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<title>나의 질문 유형찾기</title>
</head>
<body>
<section id="survey">
<div class="wrapper">
<form id="form">
<div class="test">
<div class="question_container">
<h3 class="number">1/12</h3>
<h3 class="question">어느 날 당신에게 특별한 여행 티켓이 도작했다 그 이유는?</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_1" />
<label>지친일상에서 벗어나 휴식을 위해 </label>
</div>
<div>
<input type="radio" name="answer_1" />
<label>무료한 일상에서 벗어나 특별한 나날을 위해</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/12</h3>
<h3 class="question">여행 출발 전 당신은?</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_2" />
<label>가이드북과 블로그 리뷰를 섭렵하는 현실파 </label>
</div>
<div>
<input type="radio" name="answer_2" />
<label>여행지 배경의 영화나 드라마를 찾아보는 낭만파</label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">3/12</h3>
<h3 class="question">여행을 떠나는 내 옆자리에 있는 사람은?</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_3" />
<label>현재 사랑하는 사람</label>
</div>
<div>
<input type="radio" name="answer_3" />
<label>나의 가장 친한 친구</label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">4/12</h3>
<h3 class="question">메타링 궤도 진입까지 한참 남았다...영화나 볼까...좀 더 선호하는 영화는?</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_4" />
<label>현실 기반 영화 (기생충/미나리)</label>
</div>
<div>
<input type="radio" name="answer_4" />
<label>판타지&SF 영화 (해리포터/어벤져스)</label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">5/12</h3>
<h3 class="question">당신을 더 잘 설명하는 단어는? </h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_5" />
<label>체계적, 뚜렷한기준, 목표의식 </label>
</div>
<div>
<input type="radio" name="answer_5" />
<label>유유자적, 유동적, 자율적 </label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">6/12</h3>
<h3 class="question">깜깜한 우주..잠이 오지 않는 밤.. 당신은</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_6" />
<label>지구에서의 나의 삶이 주마등처럼 스쳐지나간다</label>
</div>
<div>
<input type="radio" name="answer_6" />
<label>앞으로 펼쳐질 모험을 생각한다</label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">7/12</h3>
<h3 class="question">번쩍...! 우주에서 알 수 없는 힘에 의해 초능력을 얻었다</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_7" />
<label>과거로 돌아갈 수 있는 타임 워프 능력</label>
</div>
<div>
<input type="radio" name="answer_7" />
<label>미래를 예측할 수 있는 예지 능력 </label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">8/12</h3>
<h3 class="question">‘나’를 이루고 있는 더 큰 요소는?</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_8" />
<label>과거의 기억</label>
</div>
<div>
<input type="radio" name="answer_8" />
<label>미래와 가능성 </label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">9/12</h3>
<h3 class="question">메타링 은하로로 점점 가까워진다..당신이 좀 더 듣고싶은 환영인사는? </h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_9" />
<label> 메하! 메타링 은하에 오신것을 환영합니다! 앞으로 어떤 일정이 기다리고 있나요?</label>
</div>
<div>
<input type="radio" name="answer_9" />
<label>메하! 메타링 은하에 오신것을 환영합니다! 도착하신 소감이 어떠세요?</label>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<button class="next_btn">다 음</button>
</div>
</div>
</div>
<div class="test">
<div class="question_container">
<h3 class="number">10/12</h3>
<h3 class="question">드디어 .. 메타링 은하로 진입했다.
곧 당신은 소행성에 첫 발을 내딛게 된다.
당신을 반기는 사람은?</h3>
</div>
<div class="answer">
<div>
<input type="radio" name="answer_10" />
<label>유명한 연예인</label>
</div>
<div>
<input type="radio" name="answer_10" />
<label>박학다식한 철학가,예술가</label>
</div>
<div>
<input type="radio" name="answer_10" />
<label>당신이 섬기는 신</label>
</div>
</div>
<div class="btn_wrap">
<button class="prev_btn">이 전</button>
<input type="submit" value="제 출" class="submit_btn" />
</div>
</div>
</form>
</div>
</section>
<script type="text/javascript" src="js/form.js"></script>
</body>
</html>
0
0
제주코딩베이스캠프
지식공유자2021.04.15
안녕하세요, 제주코딩베이스캠프입니다 :)
혹시 작성하신 코드를 올려주실 수 있을까요?
코드를 함께 올려주시면 빠르게 답변 드리도록 하겠습니다!
감사합니다.
답변 7