퀴즈 만들기 네번째

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

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

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

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

3페이지 https://xoouxa58.tistory.com/37)

완성화면 입니다.

밑으로 스크롤 하시면 정답을 확인하실 수 있습니다.

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

CSS 코드

/* header */
#header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #cacaca;
    color: #fff;
    padding: 10px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
}
#header::before {
    content: '';
    border: 4px ridge #cacaca;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#header h1{
    font-size: 28px;
    padding: 0px 5px 5px 10px;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
}
#header h1 a {
    color: #fff;
}
#header h1 em{
    font-size: 0.5em;
}
#header ul {
  padding: 5px;
}
#header li {
  display: inline;
  z-index: 10;
  position: relative;
}
#header li a {
  color: #fff;
  font-family: 'DungGeunMo';
  border: 1px dashed #fff;
  display: inline-block;
  padding: 5px;
}
#header li.active a,
#header li a:hover {
  background-color: #fff;
  color: #000;
}


/* footer */
#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #cacaca;
    text-align: center;

}
#footer a{
    color: #cacaca;
    padding: 20px;
    display: block;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
}
#footer ::before{
    content: '';
    border: 4px ridge #cacaca;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 16px);
    height: calc(100% - 18px);
}
#main {
    padding: 100px 0;
}
/* quiz__wrap */
.quiz__wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}
.quiz__wrap .quiz{
    width: 500px;
    background-color: #cacaca;
    border: 8px ridge #cacaca;
    margin: 10px;

}
.quiz__header{}
.quiz__title{
    background-color: #cacaca;
    border: 3px ridge #cacaca;
    border-bottom-width: 6px;
    padding: 5px;
    font-family: 'DungGeunMo';
    font-size: 16px;
    color: #ffffff;
    text-align: center;
}
.quiz__main{}
.quiz__question {
    padding: 20px;
    font-size: 24px;
    font-family: 'DalseoHealing';
    font-weight: bold;
    line-height: 1.5;
    border-bottom: 6px ridge #cacaca;
}
.quiz__question em {
    color : #111
}
.quiz__answer {
    font-family: 'DalseoHealing';
    padding: 20px;
    text-align: center;
    font-size: 24px;
    /* border-bottom: 6px ridge #05e658; */
}
.quiz__answer .confirm {
    background-color: #cacaca;
    border: 3px ridge #cacaca;
    width: 100%;
    font-family: 'DalseoHealing';
    padding: 10px 20px;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 1px 1px 0px #cacaca;
    font-weight: bold;
}
.quiz__answer .confirm:hover {
    background-color: #cacaca;
}
.quiz__answer .result {
    background-color: #cacaca;
    border: 3px ridge #cacaca;
    width: 100%;
    font-family: 'DalseoHealing';
    padding: 10px 20px;
    font-size: 22px;
    /* display: none; */
}
.quiz__answer .input{
  background-color: #fff;
  border: 6px ridge #cacaca;
  width: 100%;
  font-family: 'DalseoHealing';
  padding: 10px 20px;
  font-size: 22px;
}
.quiz__answer .input{
  background-color: #fff;
  border: 6px groove #cacaca;
  width: 100%;
  font-family: 'DalseoHealing';
  padding: 10px 20px;
  font-size: 22px;
  margin-bottom: 10px;
}
.quiz__view {
    border-bottom: 6px ridge #cacaca;
    overflow: hidden;
}
.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;
}
.quiz__choice {
  padding: 20px;
  border-bottom: 6px ridge #CC9AEE;
  font-family: 'EliceDigitalBaeum';
}
.quiz__choice label {
  display: flex;
}
.quiz__choice label input {
  position:absolute;
  clip:rect(0 0 0 0);
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
}
.quiz__choice label span {
  font-size: 20px;
  line-height: 1.4;
  padding: 6px;
  display: flex;
  cursor: pointer;
  margin: 2px 0;
}
.quiz__choice label span::before{
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-right: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 4px #9922E9;
  transition: all 0.2s;
  flex-shrink: 0;
}
.quiz__choice label input:checked + span {
  background-color: #F2E0FF;
}
.quiz__choice label input:checked + span::before {
  box-shadow: inset 0 0 8px #9922E9;
}

.quiz__check {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  z-index: 1000;
  text-align: center;
  background-color: #000;
  font-family: MYArirangGothic;
  color: #FEFEFE;
  cursor: pointer;
}
.quiz__info {
  position: fixed;
  right: 20px;
  bottom: 170px;
  background-color: pink;
  text-align: center;
  width: 120px;
  height: 50px;
  border-radius: 10px;
  line-height: 50px;
  font-family: 'EliceDigitalBaeum';
  color: #fff;
}
.quiz__info::after {
  content: ' ';
  position: absolute;
  left: 50%;
  margin-left: -10px;
  bottom: -10px;
  border-top: 10px solid pink;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

CSS 2

@import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css');
@import url('https://webfontworld.github.io/daegu/DalseoHealing.css');



* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #ffffff;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
li,ul,ol {
    list-style: none;
}
img{
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
}
body {
    background:
        radial-gradient(#fff 3px, transparent 4px),
        radial-gradient(#fff 3px, transparent 4px),
        linear-gradient(#fff 4px, transparent 0),
        linear-gradient(45deg, transparent 74px, transparent 75px, #cacaca 75px, #cacaca 76px, transparent 77px, transparent 109px),
        linear-gradient(-45deg, transparent 75px, transparent 76px, #cacaca 76px, #cacaca 77px, transparent 78px, transparent 109px),
        #fff;
    background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

JAVASCRIPT

<script>
        // 선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__title");
        const quizQuestion = quizWrap.querySelector(".quiz__question");
        const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
        const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswer = quizWrap.querySelector(".quiz__answer");
        const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm");
        const dogWrap = quizWrap.querySelector(".dog__wrap");
        // 문제 정보
        const quizInfo = [
            {
                infoType: "웹디자인 기능사",
                infoTime: "2016년 4회",
                infoNumber: "1",
                infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
                infoChoice: ["선,색채,공간,수량", "점,선,면,질감,", "시간,수량,구조,공간", "면,구조,공간,수량"],
                infoAnswer: "2",
                infoDesc: "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다.[점선면]"
            }
        ]
        // 문제 출력
        function updateQuiz(){
            quizTitle.innerHTML = quizInfo[0].infoType +' '+ quizInfo[0].infoTime;
            quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber+"</em>. "+ quizInfo[0].infoQuestion;
            quizDesc.innerHTML = quizInfo[0].infoDesc;
            for(let i=0; i<4; i++){
            quizChoice[i].textContent = quizInfo[0].infoChoice[i]
            }
            //해설 숨기기
            quizDesc.style.display = "none";
        }
        // 정답 확인
        function answerQuiz(){
            // 사용자가 선택한 인풋박스(checked)  == 문제 정답(quizInfo[0].infoAnswer)
            for(let i=0; i<quizChoice.length; i++){
                if(quizSelect[i].checked == true){      // 사용자가 보기를 체크한 상태
                    if(quizSelect[i].value == quizInfo[0].infoAnswer){
                        // alert("정답입니다.")
                        dogWrap.classList.add("like");
                    } else {
                        // alert("오답입니다.")
                        dogWrap.classList.add("dislike");
                    }
                }
            }
            //해설 숨기기
            quizDesc.style.display = "block";
            // 정답 보이기
            quizAnswer.style.display = "none";
        }

        // 정답 클릭
        quizConfirm.addEventListener("click", answerQuiz);
        //문제 출력
        updateQuiz();


    </script>
</body>
</html>

📌 How to JAVASCRIPT ?

📜 위에 HTML body 구조는 반복해서 사용될 수도 있어 script를 이용해 작업해 줍니다.

📜 선택자로 변수 지정해주고 문제는 한 문제이기 때문에 document.querySelector을 사용하고 보기는 여러 개가 있기 때문에 document,qureSelectorAll을 사용해 선택자를 만들어주고 ()안에 html body태그에 입력하고자 하는 위치의 class명과 태그를 입력해 줍니다.

📜 문제 정보를 변수 지정해주고 문제의 종류가 많기 때문에 배열 안에 객체가 있는 형식으로 각 구역에 맞는 알맞은 값을 입력해 줍니다.

📜 문제 출력은 함수와 for문을 이용해 innerhtml을 사용해 문제 정보가 배열 안에 객체가 있는 형식이므로 배열 안에 객체의 데이터를 불러오는 방식으로 문제를 출력했습니다. 그리고 사용자가 문제를 풀기 전에 해설을 숨기기 위해 style.display = "none";을 사용해 숨기기를 해줍니다.

📜 정답 확인도 함수와 for문을 이용했습니다. 먼저 if문으로 사용자가 무엇을 체크했는지 확인하기 위해 checked 타입이 true인 지 확인하고 if문ㅇ르 사용해 사용자가 체크한 답과 정답이 맞는 지 확인한 뒤 정답을 확인시켜 줍니다.

📜 문제를 풀고 나서 해설을 보여주고 정답 확인하기 버튼을 숨기기 위해 각각 style.display = "block";와 style.display = "none";을 입력해 줍니다.

📜 사용자가 정답을 체크하고 정답 확인하기 버튼을 클릭하면 정답이 출력되도록 addEventListener 속성을 사용해 줍니다.

아직 잘 모르는 속성

속성	속성 설명
checked	사용자가 요소를 체크했거나 선택한 경우 활성화 되고, 체크나 선택을 해제하는 경우 비활성화 됩니다.
clip	요소의 특정 부분만 나오도록 할 수 있습니다.
box-shadow	요소의 테두리를 감싼 그림자 효과를 추가합니다.
flex-shrink	flex-item 요소의 flex-shrink 값을 설정하는 속성입니다.
transparent	요소의 불투명도를 설정합니다.

🥰 오늘도 감사합니다.

'HTML' 카테고리의 다른 글

내 스타일대로 만드는 푸터 유형 페이지 (14)	2023.03.22
내 스타일대로 만드는 텍스트 유형 페이지 (14)	2023.03.19
내가 몰랐던 거 정리하기 (1)	2023.03.16
내 스타일대로 만드는 슬라이드 유형 페이지 (17)	2023.03.15
내 스타일대로 만드는 이미지텍스트 유형 페이지 (15)	2023.03.14

xoouxa