인프런 커뮤니티 질문&답변

최민준님의 프로필 이미지
최민준

작성한 질문수

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

사용자 응답 사진으로 구현하기

판다님 이거 한번 이미지 할려면 다 해야하는거에요 ?

작성

·

153

1

예를 들어서 질문중 몇개는 항목을 선택하는것이 있고 몇개는 사진을 선택하게 하는것은 어떻게합니까?

답변 3

0

최민준님의 프로필 이미지
최민준
질문자

//(문장) 이게 무슨 뜻이에요 .. ? 혼자서 못하겠는데 제가 사례금이라도 드릴테니 조금 도움을 좀 주실 수 있으신가요 

판다코딩님의 프로필 이미지
판다코딩
지식공유자

주석입니다.

프로젝트도 좋지만 아직 HTML/JS 기초가 조금 부족하지 않으신가요?

기초적인 문법을 학습하시고 프로젝트를 진행하시면 더 좋은 퍼포먼스를 발휘하실 수 있을 것 같습니다.

0

판다코딩님의 프로필 이미지
판다코딩
지식공유자

가령 짝수의 질문에서만 사진을 출력하고 싶다면 아래와 같이 코딩할 수 있을 것입니다.

function addAnswer(answerText, qIdx, idx){
	//텍스트 문항를 출력하는 코드
}

function imageAnswer(answerText, qIdx, idx){
	//이미지 문항을 출력하는 코드
}

function goNext(qIdx){
	  if(qIdx === endPoint){
		goResult();
		return;
	}
	//사용자가 짝수번째 문항에 응답해야 할 때
	if(qIdx % 2 === 0)	{
		imageAnswer();
	}
	//사용자가 홀수번째 문항에 응답해야 할 때
	else {
		addAnswer();
	}
}

비단 짝, 홀수 뿐만이 아니라,

특정한 인덱스의 문항에만 사진을 출력하고 싶을 때에도 지금처럼 조건문을 활용할 수 있을 것입니다.

다만 이러한 경우는 문항의 순서가 바뀔 때마다 코드도 같이 수정되어야 하기에,

저희 object, qnaList가 가지고 있는 key 값 q와 a말고 새로운 key-value 쌍을 추가하여서,

그 value값에 따라서 조건을 나눠주어도 좋을 것입니다.

조건문으로 나누는 경우,

깃헙 기준으로 #img Version과 #Share Page에서 코드를 적절히 섞으면 구현하실 수 있으실 것입니다.

아마 애니메이션을 넣는 부분 때문에 코드가 다소 수정되어야 할 수도 있겠지만,

제 강의를 모두 이해하셨다면 큰 어려움이 없을 것 같습니다 :)

최민준님의 프로필 이미지
최민준
질문자

정말 너무 감사드립니다 ~ 행복한 일만 있으실 거에요

0

판다코딩님의 프로필 이미지
판다코딩
지식공유자

질문의 인덱스에 따라서 조건문으로 분기처리하면 될 것 같습니다!

최민준님의 프로필 이미지
최민준
질문자

무슨말씀이신지 ㅠ

최민준님의 프로필 이미지
최민준
질문자

죄송합니다만.. 이해가 안됩니다.. data.js 에서 따로 그렇게 하고싶은것들만 수정해서하면 되나요?

최민준님의 프로필 이미지
최민준
질문자

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

판다코딩님의 프로필 이미지
판다코딩
지식공유자

저희는 qIdx란 변수를 가지고 사용자가 몇 번째 질문에 응답할지를 결정합니다.

그 qIdx의 값에 따라서 이미지를 뛰워줄지, 텍스트를 뛰워줄지 조건문으로 결정하면 될 것 같습니다.

혹은 말씀하신대로 data.js에서 새로운 object 항목을 추가하는 것 역시 가능합니다.

최민준님의 프로필 이미지
최민준
질문자

Data.js 에서 하는게 편할까유? 조건문으로 한다는 말 이 이해가 잘 안되서유

최민준님의 프로필 이미지
최민준

작성한 질문수

질문하기