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

최민준님의 프로필 이미지

작성한 질문수

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

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

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

21.04.19 16:14 작성

·

149

1

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

답변 3

0

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

2021. 04. 21. 22:36

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

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

2021. 04. 22. 20:21

주석입니다.

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

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

0

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

2021. 04. 21. 03:20

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

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에서 코드를 적절히 섞으면 구현하실 수 있으실 것입니다.

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

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

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

2021. 04. 21. 19:20

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

0

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

2021. 04. 19. 16:35

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

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

2021. 04. 20. 00:40

무슨말씀이신지 ㅠ

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

2021. 04. 20. 00:59

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

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

2021. 04. 20. 10:16

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

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

2021. 04. 20. 21:43

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

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

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

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

2021. 04. 21. 01:35

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