퀴즈 이펙트

소스보기

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 quizView = document.querySelector(" .quiz__view")  //강아지 //뷰어로 바꾸어서 정답과 오답박스를 출력한다.
const quizSelects = document.querySelector(".quiz__selects");  //객관식 보기
const quizChoice = quizSelects.querySelectorAll(".choice");    //객관식보기
const quizSelect = document.querySelectorAll(".select");        //객관식보기
// 요소다중선택이 필요한경우 querySelectorAll을 사용해서 한다.


//문제정보
const quizInfo = [
    {
        answerType: "웹디자인 기능사 2022년 1회",
        answerNum: "1",
        answerAsk: "월드 와이드 웹(WWW)서비스를 이용하기 위해 개발된 프로그램으로 인터넷에 연결된 컴퓨터를 탐색하고 원하는 정보를 읽어 들여 그 내용을 화면에 표시해 주는 클라이언트 프로그램은?",
        answerChoice: ["배너", "포털 사이트", "웹 브라우저", "홈페이지"],
        answerResult: "3",
        answerEx: "월드 와이드 웹(WWW)서비스를 이용하기 위해 개발된 프로그램으로 인터넷에 연결된 컴퓨터를 탐색하고 원하는 정보를 읽어 들여 그 내용을 화면에 표시해 주는 클라이언트 프로그램은 웹 브라우저 입니다."
    }
]


//문제 출력 함수: 관리하기 쉽게 하나로 묶어서 사용한다.
function updateQuiz() {
    //문제 출력
    quizType.textContent = quizInfo[0].answerType;
    quizNumber.textContent = quizInfo[0].answerNum + ". ";
    quizAsk.textContent = quizInfo[0].answerAsk;
    quizResult.textContent = quizInfo[0].answerEx;

    //보기 출력

    for (let i = 0; i < quizSelect.length; i++) {
        quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    }

    // quizChoice.forEach((el, i) => {
    //     quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    // })
}
updateQuiz();

//해설 숨기기
quizResult.style.display = "none";

//정답 확인

function answerQuiz() {

    //사용자가 선택한 정답과 == 문제 정답
    //사용자가 클릭한 input --> checked라는 속성을 확인해야 한다.
    for (let i = 0; i < quizSelect.length; i++) {
        if (quizSelect[i].checked == true) {  //quizSelect[i].checked == true 보기에 체크가 된 상태
            // 체크된 번호 == 문제번호
            if (quizSelect[i].value == quizInfo[0].answerResult) {
                alert("정답");
                quizView.classList.add("like");

            } else {
                alert("오답");
                quizView.classList.add("dislike");
                quizResult.style.display = "block";
                quizConfirm.style.display = "none"
            }
        }
    }
}
//정답 클릭 
quizConfirm.addEventListener("click", answerQuiz);

/* modal__wrap */
.modal__wrap{
}
.modal__wrap .modal__btn {
    border: 2px solid #f5f5;
    padding: 10px 20px;
    border-radius: 50px;
    position: absolute;
    bottom: 50px;
    right: 10px;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    display: inline-block;
}
.modal__wrap .modal__btn:hover {
    background-color: rgb(72, 208, 190);
} 
.modal__cont {
    width: 100%;
    height: 100vh;
    background-color: #f5f5;
    position: fixed;
    top: -40px;
    left: 0;
    display: flex;
    align-items: center;
    overflow-x: hidden; 
    transform: scale(0);
    z-index: 1000;
}
.modal__cont .modal__box {
    width: 70%;
    height: 70vh;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.456);
    border-radius: 0.5rem;
    box-shadow: 0 10px 20px -5px hsl(180deg 2% 10%);
    transform: scale(0);
}
.title {
    background-color: rgba(10, 178, 255, 0.333);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: space-between;
}
.title .dot {
    width: 15px;
    height: 15px;
    border: 1px solid #ff0000;
    border-radius: 50%;
    display: inline-block;
    background-color: #ff0000;
    position: relative;
}
.title .dot::before{
    content: '';
    width: 15px;
    height: 15px;
    border: 1px solid #00fc60;
    border-radius: 50%;
    display: inline-block;
    background-color: #00fc60;
    position: absolute;
    left: 50px;
}
.title .dot:after {
    content: '';
    width: 15px;
    height: 15px;
    border: 1px solid #ffff00;
    border-radius: 50%;
    display: inline-block;
    background-color: #ffff00;
    position: absolute;
    left: 25px;
}
.tabs {
    display: flex;
}
.tabs > div {
    color: #7A7D9D;
    background-color: #1f224a;
    padding: 0.35rem 0.8rem 0.25rem 0.8rem;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    border-radius: 0.4rem;
    text-transform: uppercase;
    cursor: grab;
}
.tabs > div.active {
    background-color: #fff;
}
.title .plus {
    border: 1px solid #000;
    padding: 0.4rem;
    border-radius: 10px;
    background-color: #1f224a;
    color: #fff;
}
.modal__box .title .tabs > div.active {
    background-color: #fff;
}
.modal__box .title .tabs > div em {
    font-style: normal;
}
.modal__box .title .tabs > div .favicon {
    margin-right: 0.4rem;
    margin-top: 0.2rem;
}
.modal__box .title .tabs > div .close {
    margin-left: 4rem;
}
.modal__box .cont {
    background-color: #282936;
    height: 100%;
    box-sizing: border-box;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    overflow-y: auto;
}
.modal__box .cont > div{ 
    display: none;
}

.modal__box .cont > div.active {
    display: block;
    height: 100%;
}

.modal__cont .modal__close {
    border: 1px solid #000;
    position: absolute;
    right: 20px;
    top: 100px;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #f5f5;
    transition: all 0.5s ease;
}
.modal__cont .modal__close:hover {
    background-color: #fff;
}
.modal__close {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #1f224a;
    padding: 1rem 1rem 0.8rem 1rem;
    border-radius: 5px;
    box-shadow: 0 3px 5px -5px hsl(180deg 2% 10%);
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0;
}
.modal__close:hover{
    background-color: #13142d7d;
}
.modal__close svg{
    color: #fff;
}
/* 모달 애니메이션 */
.modal__cont.show { /*전체 배경*/
    animation: foldOut 1s ease forwards;
}

.modal__cont.show .modal__box {   /*스크립트 배경*/
    animation: zoomOut 0.5s 1s ease forwards; /*초를 두개써서딜레이를 줄 수 있다*/
}

.modal__cont.show .modal__close {    /* 닫기버튼*/
    animation: closeOut 0.6s 1.5s ease forwards;
}

.modal__cont.show.hide {  
    animation: foldIn 0.3s 0.3s ease backwards; 
}
.modal__cont.show.hide .modal__box{   
    animation: zoomIn 0.5s 1s ease backwards;
}
.modal__cont.show.hide .modal__close {    /* 닫기버튼*/
    animation: closeIn 0.3s 0.6s ease backwards;
    opacity: 0;
}

@keyframes foldOut {
    0% {transform: scaleX(0) scaleY(0.001);}
    50% {transform: scaleX(1) scaleY(0.001);}
    100% {transform: scaleX(1) scaleY(1);}
}
@keyframes closeOut {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes foldIn {
    0% {transform: scaleX(1) scaleY(1);}
    50% {transform: scaleX(1) scaleY(0.001);}
    100% {transform: scaleX(0) scaleY(0.001);}
}
@keyframes zoomOut {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes zoomIn {
    100% {transform: scale(1);}
    0% {transform: scale(0);}
}

<div class="quiz__answer">
        <div class="quiz__selects">
            <label for="select1">
                <input type="radio" id="select1" class="select" name="select" value="1">
                <span class="choice"></span>
            </label>
            <label for="select2">
                <input type="radio" id="select2" class="select" name="select" value="2">
                <span class="choice"></span>
            </label>
            <label for="select3">
                <input type="radio" id="select3" class="select" name="select" value="3">
                <span class="choice"></span>
            </label>
            <label for="select4">
                <input type="radio" id="select4" class="select" name="select" value="4">
                <span class="choice"></span>
            </label>
        </div>
        <button class="confirm">정답 확인하기</button>
        <div class="result"></div>
    </div>