inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

Result 구현하기(2) + Result 디자인

뭐가 문제일까요 ㅠㅠ

1283

김정훈

작성한 질문수 3

1

계속 결과 값이 쥐로 똑같이 출력이 되는데 왜 그럴까요ㅠ 

javascript HTML/CSS bootstrap

답변 5

0

판다코딩

setResult함수가 두개네요?!

하나를 삭제해주시고, goResult 함수에서 calResult 함수가 아니라 setResult 함수를 호출해주세요!

0

김정훈

앗 그렇네요 !! 수정하고 다시 해보겠습니다 !

0

김정훈

여기서 문제가 있나요 ?

0

김정훈

const main = document.querySelector("#main");

const qna = document.querySelector("#qna");

const result = document.querySelector("#result");

const endPoint = 12;

const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

function calResult(){

  var result = select.indexOf(Math.max(...select));

  return result;

}

function setResult(){

  let point = calResult();

  const resultName = document.querySelector('.resultname');

  resultName.innerHTML = infoList[point].name;

  var resultImg = document.createElement('img');

  const imgDiv = document.querySelector('#resultImg');

  var imgURL = 'img/image-' + point + '.png';

  resultImg.src = imgURL;

  resultImg.alt = point;

  resultImg.classList.add('img-fluid');

  imgDiv.appendChild(resultImg);

  const resultDesc = document.querySelector('.resultDesc');

  resultDesc.innerHTML = infoList[point].desc;

}

function setResult(){

  let point = calResult();

  const resultName = document.querySelector('.resultname');

  resultName.innerHTML = infoList[point].name;

  var resultImg = document.createElement('img')

  const imgDiv = document.querySelector('#resultImg');

  var imageUrl = 'img/image-' + point + '.png';

  resultImg.src = imageUrl;

  resultImg.alt = point

  imgDiv.appendChild(resultImg);

  const resultDesc = document.querySelector('.resultDesc');

  resultDesc.innerHTML = infoList[point].desc;

}

function goResult(){

  qna.style.WebkitAnimation = "fadeOut 1s";

  qna.style.animation = "fadeOut 1s";

  setTimeout(() => {

    result.style.WebkitAnimation = "fadeIn 1s";

    result.style.animation = "fadeIn 1s";

    setTimeout(() => {

      qna.style.display = "none";

      result.style.display = "block"

    }, 450)})

    console.log(select);

    calResult();

}

function addAnswer(answerText, qIdx, idx){

  var a = document.querySelector('.answerBox');

  var answer = document.createElement('button');

  answer.classList.add('answerList');

  answer.classList.add('my-3');

  answer.classList.add('py-3');

  answer.classList.add('mx-auto');

  answer.classList.add('fadeIn');

  a.appendChild(answer);

  answer.innerHTML = answerText;

  answer.addEventListener("click", function(){

    var children = document.querySelectorAll('.answerList');

    for(let i = 0; i < children.length; i++){

      children[i].disabled = true;

      children[i].style.WebkitAnimation = "fadeOut 0.5s";

      children[i].style.animation = "fadeOut 0.5s";

    }

    setTimeout(() => {

      var target = qnaList[qIdx].a[idx].type;

      for(let i = 0; i < target.length; i++){

        select[target[i]] += 1;

      }

      for(let i = 0; i < children.length; i++){

        children[i].style.display = 'none';

      }

      goNext(++qIdx);

    },450)

  }, false);

}

function goNext(qIdx){

  if(qIdx === endPoint){

    goResult();

    return;

  }

  var q = document.querySelector('.qBox');

  q.innerHTML = qnaList[qIdx].q;

  for(let i in qnaList[qIdx].a){

    addAnswer(qnaList[qIdx].a[i].answer, qIdx, i);

  }

  var status = document.querySelector('.statusBar');

  status.style.width = (100/endPoint) * (qIdx+1) + '%';

}

function begin(){

  main.style.WebkitAnimation = "fadeOut 1s";

  main.style.animation = "fadeOut 1s";

  setTimeout(() => {

    qna.style.WebkitAnimation = "fadeIn 1s";

    qna.style.animation = "fadeIn 1s";

    setTimeout(() => {

      main.style.display = "none";

      qna.style.display = "block"

    }, 450)

    let qIdx = 0;

    goNext(qIdx);

  }, 450);

}

0

김정훈

이제는 그냥 값이 출력이 되는거도 없네요 ㅋㅋㅋ

0

판다코딩

console.log로 질문을 선택할 때 마다 select 배열을 확인해보시겠어요?

정상적으로 값이 저장된다면,

setResult함수를 확인해보셔야 할 것 같습니다.

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