Blinking Hello Kitty Angel

HTML

퀴즈 만들기 세번째

xoouxa 2023. 3. 14. 18:49

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

안녕하세요 ヾ(≧▽≦*)o  오늘은 저번에 작업한 퀴즈 만들기 페이지 1,2를 토대로 3페이지를 만들어 보도록 하겠습니다.

(저번 사이트 바로 가기 : 1페이지 https://xoouxa58.tistory.com/29 / 2페이지 https://xoouxa58.tistory.com/31)

HTML 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>퀴즈 이펙트 03</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/quiz.css">

</head>

<body class="pattern-checks-lg">
    <header id="header">
        <h1><a href="../javascript14.html"></a>Quiz. <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="quiz__header">
                    <h2 class="quiz__title"></h2>
              
                </div>
                <div class="quiz__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='wrapper'>
                            <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>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요.">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                </div>

                    <div class="quiz__desc"></div>
            </div>
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"></h2>
              
                </div>
                <div class="quiz__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='wrapper'>
                            <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>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요.">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                </div>
                    <div class="quiz__desc"></div>
            </div>
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"></h2>
              
                </div>
                <div class="quiz__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='wrapper'>
                            <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>
                    <div class="quiz__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요.">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                </div>
                    <div class="quiz__desc"></div>
            </div>
        </div>

    </main>
    <!--main-->

    <footer id="footer">
        <a href="yuna243441@naver.com">yuna243441@naver.com</a>
    </footer>
    <!--footer-->

📌 퀴즈 사이트 2번과 같이 복사해 붙여주는데 여러가지 퀴즈를 다중으로 사용해야 하기 때문에

class="quiz" 부분을 두 개 더 추가 해줍니다. 

 

CSS 코드

.quiz__desc{
  border-top: 6px ridge #cacaca;
  padding: 20px;
  font-family: 'DalseoHealing';
  background-color: #f5f5f5;
}
.quiz__desc::before {
  content: "😎 Tip";
  color:rgb(255, 157, 157);
  font-weight: bold;
}

📌 저번 퀴즈 효과처럼 전체 css를 가져온 후 quiz__desc를 추가해 줍니다.

before 가상요소를 추가해 줍니다.

javascript 코드

 <script>
        //선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelectorAll(".quiz__title");  //시험 종목/시간
        const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");  //문제 번호
        const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em");  //문제 질문
        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");
        
        //다중의 문제를 넣을 땐 querySelectorAll 처럼 All을 넣어주기
        
        console.log(quizAnswerResult);

        //문제 정보
        const quizInfo = [
            {
                infoType : "정보처리 기능사",
                infoTime : "2011년 4회",
                infoNumber :"1",
                infoQuestion: "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것을 무엇이라 하는가?",
                infoAnswer : "가드밴드",
                infoDesc : "가드밴드(Grade Band)는 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것이다."
            },{
                infoType : "정보처리 기능사",
                infoTime : "2011년 4회",
                infoNumber :"2",
                infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내주는 대화식 운영체제는 무엇인가?",
                infoAnswer : "UIUX",
                infoDesc : "UIUX는 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내주는 대화식 운영체제이다."
            },{
                infoType : "정보처리 기능사",
                infoTime : "2011년 4회",
                infoNumber :"3",
                infoQuestion: "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 상태를 무엇이라 하는가 ?",
                infoAnswer : "교착상태",
                infoDesc : "교착상태(Deadlock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 가지고 있는 자원을 무한정 기다려 시스템이 멈춘 것처럼 보이는 것"
            }
        ];

        //문제 출력
        //#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;
        // // 문제 질문
        // quizQuestion[0].textContent = quizinfo[0].infoQuestion;
        // quizQuestion[1].textContent = quizinfo[1].infoQuestion;
        // quizQuestion[2].textContent = quizinfo[2].infoQuestion;
        // // 문제 번호
        // quizQuestionNum[0].textContent = quizinfo[0].infoNumber;
        // quizQuestionNum[1].textContent = quizinfo[1].infoNumber;
        // quizQuestionNum[2].textContent = quizinfo[2].infoNumber;

        // //문제 정답
        // 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[1].infoTime;
        // quizTitle[2].innerHTML = quizinfo[2].infoType +" "+ 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;

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

        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[0].style.display = "none";
        // quizAnswerResult[1].style.display = "none";
        // quizAnswerResult[2].style.display = "none";

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

        //for
        // for(let i=0; i<quizInfo.length; i++){
        //     quizAnswerResult[i].style.display = "none";
        //     quizDesc[i].style.display = "none";
        // }
        //foreach
        quizInfo.forEach(function(e, i){
            quizAnswerResult[i].style.display = "none";
            quizDesc[i].style.display = "none";
        });

        //정답 확인
        quizAnswerConfirm.forEach(function(btn, num){
            btn.addEventListener("click", function(){
                //사용자 정답
                const userAnswer = quizAnswerInput[num].value.trim();
                quizAnswerConfirm[num].style.display = "none"; //정답 확인버튼 숨김
                quizAnswerInput[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");
                }
            });
        });
    </script>
</body>

</html>

 

📜 스크립트를 이용해 퀴즈를 완성해 줍니다.

퀴즈2에서 한 것처럼 선택자를 만들어준 후 문제 정보를 const quizinfo로 총 3개 만들어 줍니다.

퀴즈 2처럼 문제 종류, 시간, 번호, 질문, 정답, 해설을 스크립트 합니다.

3가지씩 있어 다중이기 때문에 배열 안에 객체를 가져오는 방법을 이용해 문제를 출력합니다.

quizTitle[0].textContent = quizinfo[0].infoType;
quizTitle[1].textContent = quizinfo[1].infoType;
quizTitle[2].textContent = quizinfo[2].infoType;

 

for문을 이용해 문제를 간단히 하는 법

📜  문제를 출력하기 전 문제 종류 + 시간을 합쳐줍니다.

quizTitle[0].innerHTML = quizinfo[0].infoType + " " + quizinfo[0].infoTime;

 

📜  for문을 이용해 문제 종류+시간, 번호, 질문, 정답, 해설을 출력해 줍니다.

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

📜 forEach문으로도 변경해 줄 수 있습니다.

for Each로 바꾸기 위해선 quizinfo라는 값을 먼저 입력해 function을 사용해 출력해 주는데

[i]라는 인덱스 값을 출력하기 대문에 e(엘리먼트) 값을 써 줘야 출력이 가능합니다.

quizinfo.forEach(function(e, i)

    //foreach
        quizInfo.forEach(function(e, i){
            quizAnswerResult[i].style.display = "none";
            quizDesc[i].style.display = "none";
        });

📜 정답 확인을 위해 다시 한 번 forEach문을 사용해 주는데 다중이기 때문에 num을 사용해 줍니다.

사용자 정답을 위해 userAnswer라는 선택자를 만들어 준 후 인풋박스 숨김, 정답 확인버튼 숨김,

정답 보이기, 해설 보이기를 만들어 줍니다.

//사용자 정답 
const userAnswer = quizAnsweInput[num].value;    
quizAnsweInput[num].style.display = "none";             //인풋박스 숨김
quizAnswerConfirm[num].style.display = "none";         //정답 확인 버튼 숨김
quizAnswerResult[num].style.display = "block";         //정답 보이기
quizDesc[num].style.display = "block";                 //해설 보이기

 

📜 if문을 사용해 사용자 정답이 문제 정답과 같을 때와 다를 때의 값을 설정해 줍니다.

//사용자 정답 == 문제 정답
if(userAnswer == quizinfo[num].infoAnswer){
    dogWrap[num].classList.add("like");
}else {
   dogWrap[num].classList.add("dislike");
 }

 

📌 quaerySelectAll : 선택자가 다중선택을 할 수 있도록 뒤에 All을 붙여 다중 선택을 해줍니다.

 

📌innerHTML : TML 및 XML 문서의 DOM API에서 Element 인터페이스의 속성(property) 중 하나입니다.

이를 사용해 HTML 콘텐츠를 가져오거나 설정할 수 있습니다.

 

 

밑으로 스크롤 하시면 문제가 나옵니다.

 

 

✨ 오늘도 감사합니다.

'HTML' 카테고리의 다른 글

내 스타일대로 만드는 슬라이드 유형 페이지  (17) 2023.03.15
내 스타일대로 만드는 이미지텍스트 유형 페이지  (15) 2023.03.14
내 스타일대로 만드는 이미지 유형 페이지  (16) 2023.03.12
움직이는 귀여운 강아지를 넣어 만든 퀴즈 두 번째 사이트  (5) 2023.03.09
움직이는 귀여운 강아지를 넣어 만든 퀴즈 사이트  (16) 2023.03.08

'HTML'의 다른글

  • 현재글퀴즈 만들기 세번째

관련글

댓글

티스토리툴바