퀴즈 이펙트

소스보기

Javascript

CSS

HTML

        //선택자
const quizType = document.querySelector(".quiz__type"); //퀴즈종류
const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈번호
const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__answer .confirm") //정답확인버튼
const quizResult = document.querySelector(".quiz__answer .result") // 정답 결과
const quizDog = document.querySelector(" .quiz__view .dog")  //강아지

//문제 정보
const answerType = "웹디자인기능사";
const answerNum = "1";
const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?"
const answerResult = "연변대비"

//문제 출력
quizType.innerText = answerType;
// quizType.innerHtml 태그인식함
quizNumber.innerText = answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.textContent = answerResult;  //textContent와 innerText는 같지만 익스플로러 때문에 생긴 문제이다.

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

//정답 확인
//정답 버튼을 클릭하면 확인버튼 안보이게.. 숨겨진 정답은 보이게..
//정답을 확인하면 강아지가 웃고 있어야한다.  클래스 like 추가
quizConfirm.addEventListener("click", function () {
    quizConfirm.style.display = "none";    //버튼을 누르면 정답버튼을 없애기
    quizResult.style.display = "block";
    quizDog.classList.add("like");    //class를 추가해준다.
});

.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative;
    width: 800px;
    height: 600px;
    z-index: -1;

}
.slider{
    position: absolute;
    left: 0;
    top: 0; 
}
.slider::before{
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 5px 10px;
}
.slider:nth-child(1){z-index: 5; content:'이미지1';}
.slider:nth-child(2){z-index: 4; content:'이미지2';}
.slider:nth-child(3){z-index: 3; content:'이미지3';}
.slider:nth-child(4){z-index: 2; content:'이미지4';}
.slider:nth-child(5){z-index: 1; content:'이미지5';}
@media (max-width: 800px) {
    .slider__img{
        width: 400px;
        height: 300px;
    }
}

<main id="main">
    <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="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">
                <button class="confirm">정답 확인하기</button>
                <div class="result"></div>
            </div>
        </div>
    </div>
</main>