inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

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

243

최민준

작성한 질문수 8

1

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

HTML/CSS javascript bootstrap

답변 3

0

최민준

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

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

최민준

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

0

판다코딩

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

0

최민준

무슨말씀이신지 ㅠ

0

최민준

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

0

최민준

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

0

판다코딩

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

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

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

0

최민준

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

emmet 에디터 설치 하려고 하는데 안 나오네요

0

154

2

결과 이미지랑 글이 안떠요 왜일까요

0

132

1

select 배열 이해를 도와주세요!

0

366

1

result 에서 결과가 안 나와요.

0

365

1

결과 계산하기에서 콘솔이 다르게 찍힙니다.

0

388

1

다음 버튼을 누르면 다음질문으로 넘어가게 만들고 싶어요.

0

375

1

클론코딩 시

0

367

1

결과페이지 선택값 합산하기

0

351

1

select 부분이 이해가 안가서 질문드립니다 ㅠ

0

383

1

index에서 result 페이지로 이동 질문드립니다.

0

430

1

진행바 강의에서요 스테이터스바가 짤립니다

0

377

1

이미지버전에서 부트스트랩 이미지하고 텍스트도 이용하고 싶어요

0

508

1

viewport 가 제대로 작동을 안해요 뭐가 문제일까요?

0

481

1

결과 페이지별 개별링크버튼 추가

0

352

1

뒤로가기

0

421

1

netlify not found 오류

1

1051

1

아톰 에디터 설치

2

934

1

display:block을 사용하는 이유

1

448

1

qIdx수에 따라 for 문이 돌아요 ㅜ.ㅜ

1

373

1

카카오톡 공유하기

1

579

1

질문 개수 5개에 결과 4개

0

421

1

질문 수를 줄이는 방법

1

387

1

강의 순서

1

263

1

결과페이지에서 result-0,1,23,....html 호출하기

1

351

1