JAVASCRIPT

(3) 자바스크립트 퀴즈 사이트 만들기 !

Kim do hyun 2023. 3. 14. 13:02
728x90
반응형

세번째 퀴즈 사이트

세번째로 만들게된 퀴즈 사이트입니다.

주관식 형식이며 답을 맞추게 되면 가운데 화면같이 강아지가 웃으며 정답 문구가 흔들리는 모션과 함께 출력되고,

틀리게 되면 왼쪽 화면과 같이 강아지가 슬퍼하며 틀렸다는 문구가 흔들리는 모션과 함께 출력됩니다.

 

완성된 모습

코드

<body >
    <header id="header">
        <h1><a href="../javascript14.html">Quiz</a> <em>주관식 확인하기 유형</em></h1>
        <ul>
          <li><a href="quizEffect01.html">1</a></li>
          <li><a href="quizEffect02.html">2</a></li>
          <li class="active"><a href="quizEffect03.html">3</a></li>           
          <li><a href="quizEffect04.html">4</a></li>
        </ul>
    </header> 
    <!-- //header -->


    <main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <div class="quize__header">
                    <h2 class="quiz__title"></h2>
                </div>
                <div class="quize__main">
                    <div class="quiz__question">
                        <em></em>. <span></span>
                    </div>
                    <div class="quiz__view">
                        <div class="dog__wrap">
                            <div class="true">정답입니다!</div>
                            <div class="false">틀렸습니다!</div>
                            <div class="card-container">
                                <div class="dog">
                                    <div class="head">
                                        <div class="ears"></div>
                                        <div class="face"></div>
                                        <div class="eyes">
                                            <div class="teardrop"></div>
                                        </div>
                                        <div class="nose"></div>
                                        <div class="mouth">
                                            <div class="tongue"></div>
                                        </div>
                                        <div class="chin"></div>
                                    </div>
                                    <div class="body">
                                        <div class="tail"></div>
                                        <div class="legs"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                    <div class="quiz__desc"></div>
                </div>
            </div>
            <div class="quiz">
                <div class="quize__header">
                    <h2 class="quiz__title"></h2>
                </div>
                <div class="quize__main">
                    <div class="quiz__question">
                        <em></em>. <span></span>
                    </div>
                    <div class="quiz__view">
                        <div class="dog__wrap">
                            <div class="true">정답입니다!</div>
                            <div class="false">틀렸습니다!</div>
                            <div class="card-container">
                                <div class="dog">
                                    <div class="head">
                                        <div class="ears"></div>
                                        <div class="face"></div>
                                        <div class="eyes">
                                            <div class="teardrop"></div>
                                        </div>
                                        <div class="nose"></div>
                                        <div class="mouth">
                                            <div class="tongue"></div>
                                        </div>
                                        <div class="chin"></div>
                                    </div>
                                    <div class="body">
                                        <div class="tail"></div>
                                        <div class="legs"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                    <div class="quiz__desc"></div>
                </div>
            </div>
            <div class="quiz">
                <div class="quize__header">
                    <h2 class="quiz__title"></h2>
                </div>
                <div class="quize__main">
                    <div class="quiz__question">
                        <em></em>. <span></span>
                    </div>
                    <div class="quiz__view">
                        <div class="dog__wrap">
                            <div class="true">정답입니다!</div>
                            <div class="false">틀렸습니다!</div>
                            <div class="card-container">
                                <div class="dog">
                                    <div class="head">
                                        <div class="ears"></div>
                                        <div class="face"></div>
                                        <div class="eyes">
                                            <div class="teardrop"></div>
                                        </div>
                                        <div class="nose"></div>
                                        <div class="mouth">
                                            <div class="tongue"></div>
                                        </div>
                                        <div class="chin"></div>
                                    </div>
                                    <div class="body">
                                        <div class="tail"></div>
                                        <div class="legs"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                    <div class="quiz__desc"></div>
                </div>
            </div>
        </div>
    </main>
    <!-- //main -->


    <footer id="footer">
        <a href="mailto:kshkmn0929@naver.com">kshkmn0929@naver.com</a>
    </footer>
    <!-- //footer -->

자바스크립트 부분

// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title");                        // 시험 종목/시험 날짜
const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em");            // 문제 번호
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");             // 문제 질문
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result");        // 문제 정답
const quizDesc = quizWrap.querySelectorAll(".quiz__desc");                          // 문제 해설
const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm");      // 정답 버튼
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer .input");          // 사용자 정답
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");

// 문제 정보
const quizInfo = [
    {
        infoType: "정보처리 기능사",
        infoTime: "2012년 2회",
        infoNumber: "1",
        infoQuestion: "입출력 조작의 시간과 중앙처리장치의 처리시간과의 불균형을 보완하는 것은?",
        infoAnswer: "채널장치",
        infoDesc: "채널이란? I/O장치와 주기억장치 사이에 위치하여 입출력만을 전담해서 처리 전담기종류 : 셀렉터채널, 멀티플렉서 채널, 블록멀티플렉서 채널"
    },{
        infoType: "정보처리 기능사",
        infoTime: "2012년 2회",
        infoNumber: "2",
        infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제는 무엇인가?",
        infoAnswer: "UNIX",
        infoDesc: "UNIX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다."
    },{
        infoType: "정보처리 기능사",
        infoTime: "2012년 2회",
        infoNumber: "3",
        infoQuestion: "명령어 형식(instruction format)에서 첫 번째 바이트에 기억되는 것은?",
        infoAnswer: "operand",
        infoDesc: "명령어의 구성명령어 코드부 + 주소부 (한글)OP-code + Operand (영문)"
    }
];

//#1 // 문체 출력
// quizTitle[0].textContent = quizInfo[0].infoType;
// quizTitle[1].textContent = quizInfo[1].infoType;
// quizTitle[2].textContent = quizInfo[2].infoType;

// // 문제 시간
// quizTime[0].textContent = quizInfo[0].infoTime;
// quizTime[1].textContent = quizInfo[1].infoTime;
// quizTime[2].textContent = quizInfo[2].infoTime;

// //문제 번호
// quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
// quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
// quizQuestionNum[2].textContent = quizInfo[2].infoNumber;

// // 문제 질문
// quizQuestion[0].textContent = quizInfo[0].infoQuestion;
// quizQuestion[1].textContent = quizInfo[1].infoQuestion;
// quizQuestion[2].textContent = quizInfo[2].infoQuestion;

// // 문제 정답
// quizAnswerResult[0].textContent = quizInfo[0].infoAnswer;
// quizAnswerResult[1].textContent = quizInfo[1].infoAnswer;
// quizAnswerResult[2].textContent = quizInfo[2].infoAnswer;

// // 문제 해설
// quizDesc[0].textContent = quizInfo[0].infoDesc;
// quizDesc[1].textContent = quizInfo[1].infoDesc;
// quizDesc[2].textContent = quizInfo[2].infoDesc;

// #2
// 문제 종류 + 문제 시간
// quizTitle[0].innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
// quizTitle[1].innerHTML = quizInfo[1].infoType + " " + quizInfo[0].infoTime;
// quizTitle[2].innerHTML = quizInfo[2].infoType + " " + quizInfo[0].infoTime;

// quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
// quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
// quizQuestionNum[2].textContent = quizInfo[2].infoNumber;

// quizQuestion[0].textContent = quizInfo[0].infoQuestion;
// quizQuestion[1].textContent = quizInfo[1].infoQuestion;
// quizQuestion[2].textContent = quizInfo[2].infoQuestion;

 quizInfo.forEach((e, i) => {})
 quizInfo.forEach(function(e, i){   // 인덱스를 사용하고 싶으면 엘리먼트를 먼저 적어야함
        quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
        quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
        quizQuestion[i].textContent = quizInfo[i].infoQuestion;
        quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
        quizDesc[i].textContent = quizInfo[i].infoDesc;
        quizAnswerResult[i].style.display = "none";
        quizAnswerResult[i].style.display = "none";
        quizAnswerResult[i].style.display = "none";
        quizDesc[i].style.display = "none";
        quizDesc[i].style.display = "none";
        quizDesc[i].style.display = "none";
 });

// 정답 숨기기
// quizAnswerResult[0].style.display = "none";
// quizAnswerResult[1].style.display = "none";
// quizAnswerResult[2].style.display = "none";

위 코드의 주석들처럼 코드를 일일이 사용하여 굉장히 길어질 수 있습니다 그렇기에 forEach();문을 사용한 모습이고,

그리고 아래처럼 for문과 forEach()문을 사용하여 정리 및 출력할 수 있습니다.

for, forEach();

for(let i=0; i<quizInfo.length; i++){
    quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
    quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
    quizQuestion[i].textContent = quizInfo[i].infoQuestion;
    quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
    quizDesc[i].textContent = quizInfo[i].infoDesc;
    quizAnswerResult[i].style.display = "none";
    quizDesc[i].style.display = "none";
  
// 정답 확인  
quizAnswerConfirm.forEach(function(btn, num){
    btn.addEventListener("click", function(){
        // 사용자 정답
        const userAnswer = quizAnswerInput[num].value;
        quizAnswerInput[num].style.display = "none";
        quizAnswerConfirm[num].style.display = "none";
        quizAnswerResult[num].style.display = "block";
        quizDesc[num].style.display = "block";
        //사용자 정답 == 문제 정답
        if(userAnswer == quizInfo[num].infoAnswer){
            dogWrap[num].classList.add("like");
        } else {
            dogWrap[num].classList.add("dislike");
        }
    });
});

 

자바스크립트 사용된 요소들

querySelectorAll

querySelectorAll은 CSS 선택자를 사용하여 HTML 문서에서 요소를 선택할 수 있는 메서드입니다. 이 메서드는 document 객체나 요소 객체의 메서드로 사용할 수 있습니다. 반환된 요소는 NodeList 객체에 저장됩니다.

querySelectorAll 메서드는 다양한 CSS 선택자를 사용할 수 있으며, 클래스(class), 태그 이름(tag name), 속성(attribute) 또는 가상 클래스(pseudo-class)를 사용하여 요소를 선택하는 데 사용됩니다. 선택된 요소들은 NodeList 객체에 저장되며, for 루프를 사용하여 NodeList의 각 요소에 대해 작업할 수 있습니다.

querySelectorAll은 querySelector와 함께 사용하여 더 구체적인 요소를 선택하는 데 사용될 수도 있습니다. 예를 들어, querySelector를 사용하여 첫 번째 요소를 선택하고, querySelectorAll을 사용하여 해당 요소의 하위 요소들 중에서 필요한 요소를 선택할 수 있습니다.

 

innerHTML

innerHTML은 요소의 내용을 HTML 문자열로 가져오거나 설정합니다. 이 속성을 사용하면 HTML 요소 내에 HTML 태그와 함께 텍스트를 반환합니다.
innerHTML을 사용할 때 주의해야 할 점은, HTML을 삽입하기 전에 반드시 유효성 검사를 수행해야 한다는 것입니다. 안전하지 않은 HTML이 삽입될 경우, 웹 페이지에 보안 취약점이 생길 수 있습니다. 따라서, 신뢰할 수 없는 소스에서 HTML을 받는 경우에는 textContent를 사용하는 것이 더 안전합니다.

 

for문, forEach()문

링크참고

 

데이터 불러오기 부문forEach(), for of, for in, map()

01. forEach() 배열 객체의 메서드 중 하나입니다. 이 메서드를 사용하면 배열의 각 요소에 대해 콜백 함수를 실행할 수 있습니다. array.forEach(function(element, index, array) { // 콜백 함수에서 수행할 코드

qqw2.tistory.com

 

if문

링크참고

 

자바스크립트 조건문이란?

어떤 조건에 따라 명령 실행 순서를 바꾸거나 특정한 부분만 계속해서 반복하려면 조건문이나 반복문을 사용해야 합니다. 조건문은 명령을 실행하기 위해 조건을 체크하는 문으로, 앞에서 공부

qqw2.tistory.com

 

'JAVASCRIPT'의 다른글

  • 현재글(3) 자바스크립트 퀴즈 사이트 만들기 !

관련글

댓글

티스토리툴바