퀴즈 이펙트

소스 보기

// 선택자
const quizWrap = document.querySelector('.quiz__wrap');
const updateQuiz = () => {
    const exam = [];
    quizInfo.forEach((question, number) => {
        exam.push(`
        <div class="quiz">
            <span class="quiz__type">${quizInfo[number].answerType}</span>
            <h2 class="quiz__question">
                <span class="number">${quizInfo[number].answerNum}. </span>
                <div class="ask">${quizInfo[number].answerAsk}</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">
                <div class="quiz__selects">
                    <label for="select1${number}">
                        <input type="radio" name="select${number}" value="1" id="select1${number}" class="select">
                        <span class="choice">${quizInfo[number].answerChoice[1]}</span>
                    </label>
                    <label for="select2${number}">
                        <input type="radio" name="select${number}" value="2" id="select2${number}" class="select">
                        <span class="choice">${quizInfo[number].answerChoice[2]}</span>
                    </label>
                    <label for="select3${number}">
                        <input type="radio" name="select${number}" value="3" id="select3${number}" class="select">
                        <span class="choice">${quizInfo[number].answerChoice[3]}</span>
                    </label>
                    <label for="select4${number}">
                        <input type="radio" name="select${number}" value="4" id="select4${number}" class="select">
                        <span class="choice">${quizInfo[number].answerChoice[4]}</span>
                    </label>
                </div>
            </div>
        </div>
    `);
    });
    exam.push(`
            <div class="quiz__confirm">
                <button class="check">정답 확인하기</button>
                <div class="ex"></div>
            </div>
        `);
    quizWrap.innerHTML += exam.join('');

}
updateQuiz();

const quizConfirm = document.querySelector('.quiz__confirm .check');
const quizResult = document.querySelector('.quiz__confirm .check');
const answerQuiz = () => {
    const quizSelects = document.querySelectorAll('.quiz__selects');
    const quizView = document.querySelectorAll('.quiz__view');

    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`; // 사용자가 체크한 것
        const quizSelectsWrap = quizSelects[number];
        const userAnswer = quizSelectsWrap.querySelector(userSelector);
        if (userAnswer && (userAnswer.value === question.answerResult)) {
            quizView[number].classList.add('like');
        }
        else {
            quizView[number].classList.add('dislike');
            const div = document.createElement('div');
            div.innerHTML = `<p class="result">${question.answerEx}</p>`;
            quizSelectsWrap.append(div);
        }
    });

    // 전체 문제수
    // 내가 맞힌 수
    const total = quizInfo.length;
    let ok = 1;
    quizView.forEach(el => {
        if (el.classList.contains('like')) ok++;
    });

    ok < 37 ? quizResult.innerHTML = `${ok}문제 맞았어요<br> 불합격 입니다.` : quizResult.innerHTML = `${ok}문제 맞았어요 <br> 합격 입니다.`;
}
quizConfirm.addEventListener('click', answerQuiz);

<div class="quiz__wrap">
</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";
}