퀴즈 이펙트 4번 객관식 확인하기

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

완성된 사진입니다.

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>퀴즈 이펙트04</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
    <header id="header">
        <h1><a href="../javascript14.html">Quiz</a><em>객관식 확인하기</em></h1>
        <ul>
            <li><a href="quizEffect01.html">1</a></li>
            <li><a href="quizEffect02.html">2</a></li>
            <li><a href="quizEffect03.html">3</a></li>
            <li class="active"><a href="quizEffect04.html">4</a></li>
            <li><a href="quizEffect05.html">5</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_quection">
                    </div>
                    <div class="quiz_view">
                        <div class='dog_wrap'>
                            <div class="ture">정답입니다.</div>
                            <div class="false">틀렸습니다!</div>
                            <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 class="quiz_choice">
                        <label for="choice1">
                            <input type="radio" id="choice1" value="1" name="choice">
                            <span></span>
                        </label>
                        <label for="choice2">
                            <input type="radio" id="choice2" value="2" name="choice">
                            <span></span>
                        </label>
                        <label for="choice3">
                            <input type="radio" id="choice3" value="3" name="choice">
                            <span></span>
                        </label>
                        <label for="choice4">
                            <input type="radio" id="choice4" value="4" name="choice">
                            <span></span>
                        </label>

                    </div>
                    <div class="quiz_answer">
                        <button class="confirm">정답 확인 하기</button>
                    </div>
                </div>
                <div class="quiz_desc"></div>
            </div>
        </div>
</main>
<!-- //main -->

<footer id="footer">
    <a href="mailto:ture403@gmail.com">ture403@gmail.com</a>
</footer>
<!-- //footer -->
</body>

div박스를 만들어서 quiz_choice 클래스를 만들어서 거기안에 4개의 inupt박스를 만들었습니다.
input type을 라디오로 하고 그안에 이름을 choice로 설정 하고 각각 value값을 넣어주었습니다.
정답확인하기 버튼을 button태그를 써서 만들었습니다.
quiz_desc 를 만들어서 해설을 넣었습니다.

CSS코드 입니다. 강아지는 전에 있는 코드를 봐주세요

/* header */
#header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #262626;
    color: #fff;
    padding: 10px;
    margin-bottom: 100px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
}
#header::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#header h1 {
    font-size: 28px;
    padding: 5px 5px 5px 10px;
    font-family: 'DungGeunMo';
    position: relative;
    z-index: 10;
}
#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;
    background-color: #262626;
    width: 100%;
    text-align: center;
}
#footer a {
    color: #fff;
    padding: 20px;
    display: block;
    font-family: 'DungGeunMo';
    position: relative;
    z-index: 10;
}
#footer::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    
}

#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: #fff;
    border: 8px ridge #ecb2b2;
    margin: 10px;
}
.quiz_title {
    background-color: #ecb2b2;
    border: 3px ridge #ecb2b2;
    border-bottom-width: 6px;
    padding: 5px;
    font-family: 'DungGeunMo';
    font-size: 16px;
    color: #3b3b3b;
    text-align: center;
}
.quiz_quection {
    padding: 20px;
    font-size: 24px;
    font-family: 'arial';
    line-height: 1.4;
    font-weight: bold;
    border-bottom: 6px ridge #ecb2b2;
}
.quiz_quection em {
    color: hotpink;
}
.quiz_answer {
    padding: 20px;
    font-size: 24px;
    font-family: 'arial';
    text-align: center;
    /* border-bottom: 6px ridge #cacaca; */
}
.quiz_answer .confirm {
    background-color: #ecb2b2;
    border: 6px ridge #ecb2b2;
    width: 100%;
    font-family: 'arial';
    padding: 10px 20px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 2px 2px 0px rgba(212, 153, 153, 0.7);
}
.quiz_answer .confirm:hover{
    background-color: #c77676;
}
.quiz_answer .result {
    background-color: #fff;
    border: 6px ridge #ecb2b2;
    width: 100%;
    font-family: 'arial';
    padding: 10px 20px;
    font-size: 22px;
    /* display: none; */
}
.quiz_answer .input{
    background-color: #fff;
    border: 6px groove #ecb2b2;
    width: 100%;
    font-family: 'arial';
    padding: 10px 20px;
    font-size: 22px;
    text-align: center;
    margin-bottom: 10px;
}
.quiz_view {
    border-bottom: 6px ridge #ecb2b2;
    overflow: hidden;
}
.quiz_desc {
    border-top: 6px ridge #ecb2b2;
    padding: 20px;
    font-family: "arial";
    background-color: #f5f5f5;
}
.quiz_desc::before {
    content: "👍Tip ";
    color: hotpink;
    font-weight: bold;
}
.quiz_choice{
    border-bottom: 6px ridge #ecb2b2;
    padding: 20px;
}
.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.3;
    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 #3b3b3b;
    transition: all 0.2s;
    flex-shrink: 0; /* 기본 크기 유지 */
}
.quiz_choice label input:checked + span{
    background-color: #e27ed5;
}
.quiz_choice label input:checked + span::before{
    box-shadow: inset 0 0 0 8px #3b3b3b;
}
.quiz_check {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 130px;
    height: 130px;
    line-height: 130px;
    border-radius: 50%;
    z-index: 1000;
    background-color: #444;
    color: #fff;
    text-align: center;
    font-family: "arial";
    cursor: pointer;
}
.quiz_info {
    position: fixed;
    right: 20px;
    bottom: 170px;
    background-color: #ff3c3c;
    text-align: center;
    width: 120px;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    font-family: "arial";
    color: #fff;
}
.quiz_info::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -10px;
    border-top: 10px solid #39ee7e;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}

자바스크립트 코드 입니다.

//선언자
const quizWrap = document.querySelector(".quiz_wrap");
const quizTitle = quizWrap.querySelector(".quiz_title");
const quizQuection = quizWrap.querySelector(".quiz_quection");
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",
        infoQuection : "다음 중 디자인의 기본 요소들로 옳은 것은?",
        infoChoice : ["선, 색체 ,공간, 수량","점, 선, 면, 질감","시간, 수량, 구조, 공간","면, 구조, 공간, 수량"],
        infoAnswer :"2",
        infoDesc : "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다.[점선면]"
    }
];

//문제 출력
function updateQuiz(){
    quizTitle.innerHTML = quizInfo[0].infoType +" "+ quizInfo[0].infoTime;
    quizQuection.innerHTML = "<em>" + quizInfo[0].infoNumber + "</em>." + " " + quizInfo[0].infoQuection;
    quizDesc.textContent = quizInfo[0].infoDesc;

    for(let i=0; i<4; i++){
        quizChoice[i].innerHTML = quizInfo[0].infoChoice[i];
    }

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

//정답확인
function answerQuiz(){
    // 사용자가 선택한 input(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();

함수 answerQuiz 에서 사용자가 선택한 것을 찾아내서 정답인지 오답인지 확인하는 쿼리입니다.
그리고 addEventListener를 써서 클릭을 했을떄 answerQuiz 를 실행하게 했습니다.
updateQuiz함수는 선언자로 클래스를 불러오고 그안에 quizInfo안에 있는 값을 넣어 주었습니다.\

속성	속성 설명
checked	선택된 checkbox 또는 radio 타입의 INPUT 버튼이나 선택된 option 태그를 선택하는 선택자
clip	속성은 요소의 보여지는 영역을 지정하는데 사용됩니다. clip 속성은 흔히 position 속성과 함께 사용되어 흥미로운 시각적 효과를 만들기 위해 사용됩니다.
flex-shrink	flex item이 flex container 내에서 줄어들 수 있는 정도를 지정합니다.

june blog

퀴즈 이펙트 4번 객관식 확인하기

- Frederick Philips Brooks

완성된 사진입니다.

HTML 코드 입니다.

CSS코드 입니다. 강아지는 전에 있는 코드를 봐주세요

'퀴즈'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

퀴즈 이펙트 4번 객관식 확인하기

- Frederick Philips Brooks

완성된 사진입니다.

HTML 코드 입니다.

CSS코드 입니다. 강아지는 전에 있는 코드를 봐주세요

'퀴즈'의 다른글

관련글

티스토리툴바