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

// 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);
}