Quiz 정답 확인하기 유형

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

kkk5993@naver.com
소스 보기
JavascriptHTMLCSS
// 선택자
const quizType = document.querySelector('.quiz__type'); // 퀴즈 종류
const quizNumber = document.querySelector('.quiz__question .number') // 퀴즈 번호
const quizAsk = document.querySelector('.quiz__question .ask'); // 퀴즈 질문
const quizInput = document.querySelector('.quiz__answer .input'); // 사용자 정답
const quizConfirm = document.querySelector('.quiz__answer .confirm'); // 정답 확인 버튼
const quizResult = document.querySelector('.quiz__answer .result'); // 정답 결과
const quizView = document.querySelector('.quiz__view'); // 정답 표시

// 문제 정보
const answerType = "웹디자인기능사";
const answerNum = "2";
const answerAsk = "기업의 새로운 이념 구축에 필요한 이미지와 커뮤니케이션 시스템을 의도적, 계획적으로 만들어 내는 기억이미지 통합 전략은 무엇인가요?"
let answerResult = "CIP";

// 문제 출력
quizType.textContent = answerType;
quizNumber.textContent = answerNum + ".";
quizAsk.textContent = answerAsk;
quizResult.textContent = "정답은 : "  + answerResult + " 입니다.";

// 정답 숨기기
quizResult.style.display = 'none';

// 정답 확인
quizConfirm.addEventListener('click',() => {
// quizView.classList.remove('like');
// quizView.classList.remove('dislike');

// 사용자 정답
const userWord = quizInput.value.toLowerCase().trim();
answerResult = answerResult.toLowerCase().trim();

// 사용자 정답이랑 문제정답이 같은가
if(userWord === answerResult){
// 정답
quizView.classList.add('like');
quizResult.style.display = 'block';
}
else{
// 오답
quizView.classList.add('dislike');
}
quizInput.style.display = 'none';
quizConfirm.style.display = 'none';
});

<div class="quiz__wrap">
<div class="quiz">
<span class="quiz__type"></span>
<h2 class="quiz__question">
    <span class="number"></span>
    <div class="ask"></div>
</h2>
<div class="quiz__view">
    <div class="true">정답입니다!</div>
    <div class="false">틀렸습니다!</div>
    <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 class="quiz__answer">
    <input type="text" class="input" placeholder="정답을 적어주세요!">
    <button class="confirm">정답 확인하기</button>
    <div class="result"></div>
</div>
</div>
</div>

#header {
    background: #262626;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: relative;
    z-index: 10;
}

#header::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    box-sizing: border-box;
    z-index: -1;
}

#header h1 {
    padding: 3px 3px 6px 10px;
    font-family: "DungGeunMo";
    font-size: 30px;
}

#header a {
    color: rgb(234, 129, 37);
}

#header h1 em {
    font-size: 16px;
    font-style: normal;
    color: #fff;
}

@media(max-width : 600px) {
    #header h1 em {
        display: none;
    }
}

#header nav {
    padding-right: 10px;
}

#header nav li {
    display: inline;
}

#header nav li.active a {
    color: #000;
    background: #fff;
}

#header nav li a {
    color: #fff;
    padding: 0 10px;
    border: 1px dashed #fff;
    font-family: "DungGeunMo";
}

#footer {
    background: #fff;
    text-align: center;
    padding: 20px;
    padding: auto;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10000;
}

#footer a {
    color: #000;
    font-family: "DungGeunMo";
}

#footer a:hover {
    text-decoration: underline;
}

/* quiz__wrap */
.quiz__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 150px;
}

.quiz__wrap .quiz {
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    border: 8px ridge #cacaca;
    margin: 10px;
}

.quiz__type {
    background-color: #cacaca;
    text-align: center;
    display: block;
    font-size: 16px;
    border: 3px ridge #cacaca;
    color: #3b3b3b;
    font-family: "DungGeunMo";
    padding: 4px;
}

.quiz__question {
    border-top: 6px ridge #cacaca;
    border-bottom: 6px ridge #cacaca;
    padding: 20px;
    font-family: "Cafe24Dangdanghae";
    line-height: 1.3;
}

.quiz__question .number {
    color: rgb(234, 129, 37);
}

.quiz__question .ask {
    display: inline;
}

.quiz__answer {
    border-top: 6px ridge #cacaca;
    padding: 10px;
    background-color: #f5f5f5;
}

.quiz__answer .input {
    width: 100%;
    border: 6px ridge #cacaca;
    font-size: 22px;
    padding: 13px 20px;
    background-color: #fff;
    font-family: "Cafe24Dangdanghae";
    margin-bottom: 10px;
    text-align: center;
}

.quiz__answer .confirm {
    border: 6px ridge #cacaca;
    width: 100%;
    font-size: 22px;
    padding: 13px 22px;
    background-color: #d6d6d6;
    font-family: "Cafe24Dangdanghae";
    cursor: pointer;
}

.quiz__answer .result {
    width: 100%;
    font-size: 22px;
    line-height: 1.3;
    padding: 13px;
    border: 6px ridge #cacaca;
    box-sizing: border-box;
    text-align: center;
    font-family: "Cafe24Dangdanghae";
}