자바스크립트 활용편3 - 퀴즈이펙트 만들어보기

퀴즈 프로그램 다중문제 표현

자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해
코드를 효과적으로 사용하였습니다

자바스크립트 다중문제

▶우선 선택자를 정합니다.(각각 선택자가 무엇을 출력할지 정해주고 알맞는 이름을 써줘서 변수에 넣어준다.).
▶문제의 정보를 가져와서 각각의 정보들을 quizInfo 변수에 대입해서 넣어줍니다.
▶css로 틀을 만들고 각각 틀에 알맞은 정보를 넣기위해 textContent, innerText 함수를 사용해 quizInfo변수 안에 정보를 출력합니다.(이때 for문과 forEach문을 사용해서 효과적으로 출력하였습니다.)
▶사용자가 정답을 입력하기 전에 정답은 나타나있으면 안되기 때문에 quizResult[i].style.display = "none";를 사용하여 숨겨놓아야 합니다. (for문과 forEach문을 사용해서 출력해 보았습니다.)
▶사용자가 정답을 입력하고 나서 변화가 있어야하기 떄문에 forEach문에 요소와 인덱스 값을 주고 각각 정답을 입력했을때와 오답을 입력했을때 상황을 조건문을 사용해 나타냈습니다.
(이때 addEventListener('click', funcion(){})를 사용해 버튼을 클릭했을 때 상황을 표현하였습니다, 또한 classList.add를 사용해서 class를 추가해서 강아지의 감정을ㄹ 표현하였습니다. )

선택자와 문제

//선택자
const quizType = document.querySelectorAll(".quiz__type"); //퀴즈종류
const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈번호
const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm") //정답확인버튼
const quizResult = document.querySelectorAll(".quiz__answer .result") // 정답 결과
const quizInput = document.querySelectorAll(".quiz__answer .input") // 사용자 정답
const quizView = document.querySelectorAll(" .quiz__view")  //강아지 //뷰어로 바꾸어서 정답과 오답박스를 출력한다.
// 요소다중선택이 필요한경우 querySelectorAll을 사용해서 한다.
//문제정보

const quizInfo = [
    {
        answerType: "웹디자인 기능사 2016년 1회",
        answerNumber: "1",
        answerAsk: "같은 크기의 형을 상, 하로 겹칠 때 위쪽의 것이 크게 보이는 착시현상은?",
        answerResult: "상방 거리의 과대착시"
    },
    {
        answerType: "웹디자인 기능사 2016년 1회",
        answerNumber: "2",
        answerAsk: "수적 법칙에 의해 생겨난 형태로 규칙적이고 명쾌한 조형적 감정을 유발시키는 형태는?",
        answerResult: "기하학적 형태"
    },
    {
        answerType: "웹디자인 기능사 2016년 1회",
        answerNumber: "3",
        answerAsk: "연산자 좌우의 검색어를 모두 포함하는 데이터를 찾는 정보검색 연산자는?",
        answerResult: "AND"
    },
    {
        answerType: "웹디자인 기능사 2016년 1회",
        answerNumber: "4",
        answerAsk: "월드 와이드 웹(WWW)서비스를 이용하기 위해 개발된 프로그램으로 인터넷에 연결된 컴퓨터를 탐색하고 원하는 정보를 읽어 들여 그 내용을 화면에 표시해 주는 클라이언트 프로그램은?",
        answerResult: "웹 브라우저"
    }
]

//문제출력


    //forEach문을 이용한 문제출력
quizInfo.forEach((el, i) =>{
quizType[i].textContent = quizInfo[i].answerType;
quizNumber[i].textContent = quizInfo[i].answerNumber + ". ";
quizAsk[i].textContent = quizInfo[i].answerAsk;
quizResult[i].textContent = quizInfo[i].answerResult;
});


    //for문을 이용한 문제출력
// for(let i = 0; i<quizInfo.length; i++) {

// quizType[i].textContent = quizInfo[i].answerType;
// quizNumber[i].textContent = quizInfo[i].answerNumber + ". ";
// quizAsk[i].textContent = quizInfo[i].answerAsk;
// quizResult[i].textContent = quizInfo[i].answerResult;
// }



    //하나하나씩 일일이 출력해줌
// quizType[0].textContent = quizInfo[0].answerType;
// quizType[1].textContent = quizInfo[1].answerType;
// quizType[2].textContent = quizInfo[2].answerType;
// quizType[3].textContent = quizInfo[3].answerType;

// quizNumber[0].textContent = quizInfo[0].answerNumber + ". ";
// quizNumber[1].textContent = quizInfo[1].answerNumber + ". ";
// quizNumber[2].textContent = quizInfo[2].answerNumber + ". ";
// quizNumber[3].textContent = quizInfo[3].answerNumber + ". ";

// quizAsk[0].textContent = quizInfo[0].answerAsk;
// quizAsk[1].textContent = quizInfo[1].answerAsk;
// quizAsk[2].textContent = quizInfo[2].answerAsk;
// quizAsk[3].textContent = quizInfo[3].answerAsk;

// quizResult[0].textContent = quizInfo[0].answerResult;
// quizResult[1].textContent = quizInfo[1].answerResult;
// quizResult[2].textContent = quizInfo[2].answerResult;
// quizResult[3].textContent = quizInfo[3].answerResult;



//정답 숨기기 (4개)

quizInfo.forEach((el, i) => {
    quizResult[i].style.display = "none";
});



// for(let i = 0; i<quizInfo.length; i++){
//     quizResult[i].style.display = "none";
// }



// quizResult[0].style.display = "none";
// quizResult[1].style.display = "none";
// quizResult[2].style.display = "none";
// quizResult[3].style.display = "none";



//정답확인  정의되있지 않은 오류가 뜨면  quizConfirm 위치를 확인하자


// quizConfirm.addEventListener("click", () => {
//     alert("ads")
// });


quizConfirm.forEach((btn, num)=>{
    btn.addEventListener("click", () => {     //클릭을 눌렀을때 상황을 만들기 위한 코드
    
        //사용자 정답
        const userWord = quizInput[num].value;   //.toLowerCase().trim() 소문자와 여백을 인식하는 코드이다. 하지만 오류가 생겨서 확인 필요  
        // console.log(userWord);
        // console.log(quizInfo[num] = answerResult.value);


        // 사용자 정답 == 문제정답 비교
        if(userWord == quizInfo[num].answerResult){
            //정답
            alert("정답")
            quizView[num].classList.add("like");
            quizConfirm[num].style.display = "none";
            
        } else {
            //오답
            alert("오답")
            quizView[num].classList.add("dislike");
            quizConfirm[num].style.dispaly = "none";
            quizResult[num].style.display = "block";
            quizInput[num].style.display = "none";
            
        }
    });
})

결과

원본 소스 보기