answer 여러 개 나옵니다.

아래처럼 하니 해결됐습니다

let isClickable = true;

function start() {   
    
    main.style.WebkitAnimation = "fadeOut 1s";
    main.style.animation = "fadeOut 1s";
    setTimeout(()=>{            
        qna.style.WebkitAnimation = "fadeIn 1s";
        qna.style.animation = "fadeIn 1s";
        isClickable = false;
        setTimeout(()=>{
            main.style.display = "none";    
            qna.style.display = "block";        
        },450)
        let qIdx = 0;
        goNext(qIdx);        
    },450);     
}


function begin() {
    if(!isClickable) {
        return false;
    }
    isClickable = false;

    start();

    setTimeout(()=>{
        isClickable = true;
    }, 1000)
}

새로고침하고 시작하기 버튼을 빠르게 누르면 사라지는 도중에 버튼이 비활성되지 않아 begin() 함수가 여러번 호출되는 것 같습니다.

var start = false;

function begin() {

  if(start) return;

 ...

}

로 임시로 여러번 뜨지 않게 해봤습니다.

https://twelvelovetype.netlify.app/

현재 제 수업의 코드로 배포된 사이트입니다.

질문자님이 말씀해주신 현상은 찾아볼 수 없는데,

코드가 제 수업의 내용과 다소 다른 부분이 있는 것 같습니다.