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

감사합니다

혹시 쉽게 설명가능하실까요 제이쿼리만 다룰줄알지 자바스크립트는 초보라서요..ㅜㅜ

 

프로세스를 정리해드리면

1. goPrev함수를 생성해야 하고
- goPrev함수는 idx를 1 감소하는 동작을 수행해야 합니다.

2. 첫번째 질문에서는 goPrev 함수의 동작을 막아야 합니다.

현재는 select라는 object를 생성하여 사용자 응답 결과를 받고 있습니다.

다만, prev를 통해 이전 질문으로 돌아간 다음, 다른 결과를 선택하게 된다면

select배열에 이전에 선택한 값을 1 감소해주어야 하고,

현재에 선택한 값을 1 증가시켜주어야 합니다.

위 과정이 다소 복잡하고 어려울 것 같아서

object 배열로 접근드릴 것을 권장드린 겁니다!

추가. 굳이 obj 배열이 아니더라도, obj에 인덱스를 담고있는 데이터를 추가하는 방법도 가능할 것 같습니다~

안녕하세요

goPrev함수에 이렇게 감소를 하고

addAnswer가 아닌 addAnswers를 하나 더 만들었는데

현재문제는 그대로 있고, 이전 질문과 문제가 다시 나옵니다. 그리고 다시 문제를 실행하려하면 반응이없습니다.

이렇게 되는게 아닌걸까요 ㅠㅠ

 

function goPrev(qIdx){

 

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

 

    if(qIdx === endPoint){

    goResult();

    return;

    }

    

  

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

  q.innerHTML = qnaList[qIdx].q;

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

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

  }

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

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

}

    

function addAnswers(answerText, qIdx, idx){

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

  var prev = document.querySelector('.prevBtn');

  

 

  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;

   

  prev.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';

      }

 

 

 

function addAnswers(answerText, qIdx, idx){

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

  var prev = document.querySelector('.prevBtn');

  

 

  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;

   

  prev.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';

      }

      goPrev(++qIdx);

    },450)   

  }, false);

    

    

    

}

      goPrev(++qIdx);

    },450)   

  }, false);

    

    

    

}

 

 

 

goPrev 함수를 통해서 현재 문제에 대한 스타일을 꺼주셔야 할 것 같습니다.

또 goPrev 함수가 실행이 되면서 생성되는 버튼들에 대해서 다시 event를 걸어줄 필요가 있는 것 같습니다.

사실 말씀해주신 기능이 static한 html js만 가지고 구현하기 조금 난해해 보이긴 합니다.

혹은 select배열을 obj로 바꾸어서 사용자에게 qIdx선택권을 주는 방향으로 구조적으로 코드가 바뀔 필요도 있는 것 같습니다.

제가 조금 여유가 되는 상황이면 저도 직접 코딩을 진행해보면서 최적의 구조를 찾아보고..

영상으로도 찍어서 설명도 드리고 싶은데,

제가 너무 바빠서 빠른 시간 안에 시간을 내기 어려울 것 같네요... 죄송합니다.