inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

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

132

dbwls204605

작성한 질문수 6

0

// main변수= 문서 내 #main을 찾아서 가지고 와라
const main= document.querySelector("#main");
const qna= document.querySelector("#qna");
// statusbar 위한 엔드포인트 정의
const endPoint =12;
// 결과값
const result=document.querySelector("#result");
// 사용자 입력값에 대한 배열
// const select = [];
// 사용자 입력값에 대한 배열 new.직접 12개의 배열에 value 0넣기
const select = [0,0,0,0,0,0,0,0,0,0,0,0,0];

// 질문에 따른 답변 계산
// function calresult(){
//     var pointArray = [
// 이 부분 data는 data.js로 옮겨서 동물 당 번호로 바꿔줌.
//     ]
//     for(let i = 0; i<endPoint; i++){
//         // qnalist로 들어가서 a로 들어가고 거기서 select한 값
//         var target =qnaList[i].a[select[i]];
//         for(let j=0; j< target.type.length; j++){
//             for(let k=0; k<pointArray.length; k++){
//                 if(target.type[j]=== pointArray[k].name){
//                     pointArray[k].value += 1;
//                 }
//             }
//         }
//     }

function calresult(){
    // select라는 배열에 index를 반환할건데 최대값을 
    console.log(select);
    var result =select.indexOf(Math.max(...select));
    return result;
   }


    // // value기준으로 정렬 sort
    // var resultArray = pointArray.sort(function(a,b){
    //     if(a.value > b.value){
    //         return -1;
    //     }
    //     if(a.value < b.value){
    //         return 1;
    //     }
    //         return 0;
    //     });
    //     console.log(resultArray)
    
    //     // key값을 도출, 동물의 이름
    //     let resultword = resultArray[0].key;
    //     return resultworld;

    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 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)})
    setresult();
    calresult();
}

function addAnswer(answerText, qIdx,idx){
    var a = document.querySelector('.answerbox');
    var answer = document.createElement('button');
    // answer는 클래스나 id값이 없어서 querySelector이용 불가하므로 클래스 만들어주기 
    answer.classList.add('answerlist');
    // qbox, answerlist에 애니메이션 넣기 위해 클래스 만들어주기 
    answer.classList.add('fadeIn');

    // 버튼 간 간격
    answer.classList.add('my-3');
    answer.classList.add('py-3');
    answer.classList.add('mx-auto');

    // 답변 클릭할 수 있게 버튼 만들기 그것을 html에서 코드 짜지 않고
    // innerhtml을 통해서 넣기 
    a.appendChild(answer);
    answer.innerHTML = answerText;
    
    // html의 onclick 역할의 addEventListener
    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 1s";
            children[i].style.Animation = "fadeOut 1s";
        }
           
        setTimeout(() => {
            // 소,닭 등 각 부여된 select 리스트의 순서를 찾아 value값 1씩 늘려주기
            var target =qnaList[qIdx].a[idx].type;
            for(let i=0; i< target.length; i++){
                select[target[i]] +=1;    
            }
            
            //// 사용자 입력이 몇 번째인지 인덱스로 넣어주고 idx로 받아주기 -> 몇 번째 질문에서 몇 번째 답변 눌렀는지 
            select[qIdx] = idx;
            for(let i=0; i< children.length; i++){
                children[i].style.display = 'none';
            }
            goNext(++qIdx);
             // 버튼이 사라지고 950초쯤 이후 버튼 없어지게
        }, 950)
      }, false);   
    }

    function goNext(qIdx){
    //    결과값 호출하는 함수
        if(qIdx === endPoint){
            goresult();
            return;
        }

    // html파일에서 qna 안 qbox가져와라
    var q= document.querySelector('.qbox');
    q.innerHTML = qnaList[qIdx].q;
    // 원래는 q.innerHTML =qnalist[0].q; 였는데 0~11번째 질문을
    // 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서, for 함수 사용 
    for(let i in qnaList[qIdx].a){
        // answerlist를 하나씩 입력하지 않고 파라미터로
        addAnswer(qnaList[qIdx].a[i].answer,qIdx,i);
    }
    // status에 따라서 바로 나타내려고
    var status = document.querySelector('.statusbar');
    status.style.width=(100/endPoint)*(qIdx+1) + '%';
    }

// 장면 넘어가는 animation
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);
}

HTML/CSS javascript bootstrap

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

dbwls204605님께서 겪고 있는 문제는 결과 이미지와 설명이 나타나지 않는 문제로 보입니다. 이런 문제는 주로 HTML 요소가 정확히 선택되고 데이터를 올바르게 처리하지 못할 때 발생합니다. 몇 가지 확인해야 할 사항과 관련된 가진 비슷한 문제에 관한 Q&A를 안내드리겠습니다.

1. HTML 요소가 정확히 선택되었는지 확인하세요.

  • resultName, resultImg, resultDesc와 같은 클래스나 ID가 올바르게 설정되어 있는지 HTML을 확인해 보세요. JavaScript에서 해당 요소를 찾을 수 없으면 결과가 제대로 렌더링되지 않습니다.

2. infoListqnaList 데이터 구조 확인

  • infoList[point]가 데이터를 제대로 가지고 있는지 확인하세요. 모든 point 인덱스마다 namedesc 속성을 가지고 있어야 합니다.
  • qnaList에서 각 질문의 선택지가 제대로 설정되어 있는지 확인하세요. target이 올바르게 계산되고 있는지 등을 점검하세요.

3. 애니메이션 CSS 클래스 체크

  • 작동하고 있는 애니메이션(TTL)이 올바르게 CSS로 설정되어 있는지 확인하세요. 잘못된 CSS 이름이 설정되거나 애니메이션이 계속 재호출되면 문제가 발생할 수 있습니다.

아래에 사용자들의 비슷한 문제와 해결책을 제공했던 Q&A를 링크드립니다:

  1. 결과 값이 계속 1번만 출력이 됩니다.

    • 잘못된 데이터 참조 및 select 리스트 초기화 문제에 대한 해결방법이 다루어집니다.
  2. 이미지로 버튼만들기 강좌보고 했는데. 배열값이 배수로 증가합니다.

    • 선택 옵션에 따른 점수 증가 처리 방법 및 결과 설정 로직 검토.

이러한 방법들이 미처 문제를 해결하지 못한 경우, HTML/CSS/JavaScript 파일들을 차근차근 비교 확인해 보시며 엘리먼트 선택과 데이터 참조 부분에 착오가 없는지 파악하시길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

0

154

2

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

264

1

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

1

353

1

배열 내 줄바꿈

1

595

1