퀴즈 이펙트03

    //선택자
    const quizType = document.querySelectorAll(".quiz_type");                  //퀴즈 종류
    const quizNumber = document.querySelectorAll(".quiz_question .number");    //퀴즈 번호
    const quizAsk = document.querySelectorAll(".quiz_question .ask");          //퀴즈 질문
    const quizConfirm = document.querySelectorAll(".quiz_answer .confirm");    //정답 확인 버튼
    const quizResult = document.querySelectorAll(".quiz_answer .result ");     //정답 결과
    const quizInput = document.querySelectorAll(".quiz_answer .input");        //사용자 정답
    const quizView = document.querySelectorAll(".quiz_view");              //강아지

    //문제 정보
    const quizInfo = [
        {   
            answerType : "웹디자인기능사 2013년 2회",
            answerNumber : "1. " ,
            answerAsk : " 분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는?",
            answerResul: "아바타"
        },
        {
            answerType : "웹디자인기능사 2013년 2회",
            answerNumber : "2. " ,
            answerAsk : "시각적 또는 촉각적으로 느껴지는 물체 표면에 대한 느낌을의미하는가?",
            answerResul: "질감"
        },
        {
            answerType : "웹디자인기능사 2013년 2회",
            answerNumber : "3. " ,
            answerAsk : "컬러 인쇄를 위해 C, M, Y, K 4색의 네거필름으로 만드는 과정을 무엇이라 하는가?",
            answerResul: "색분해도"
        },
        {
            answerType : "웹디자인기능사 2013년 2회",
            answerNumber : "4. " ,
            answerAsk : "사용자가 모니터 위에 표시된 메뉴를 손가락으로 누르면 입력이 되어 컴퓨터에 익숙하지 않은 초보자들도 간단하고 편리하게 사용할 수 있는 입력장치는?",
            answerResul: "터치스크린"
        }
    ]
    
    //문제 출력
    // quizType[0].textContent = quizInfo[0].answerType;
    // quizType[1].textContent = quizInfo[1].answerType;
    // quizType[2].textContent = quizInfo[2].answerType;
    // quizType[3].textContent = quizInfo[3].answerType;

    // quizNumber[0].textContent = quizInfo[0].answerNumber;
    // quizNumber[1].textContent = quizInfo[1].answerNumber;
    // quizNumber[2].textContent = quizInfo[2].answerNumber;
    // quizNumber[3].textContent = quizInfo[3].answerNumber;

    // quizAsk[0].textContent = quizInfo[0].answerAsk;
    // quizAsk[1].textContent = quizInfo[1].answerAsk;
    // quizAsk[2].textContent = quizInfo[2].answerAsk;
    // quizAsk[3].textContent = quizInfo[3].answerAsk;

    // quizResult[0].textContent = quizInfo[0].answerResul;
    // quizResult[1].textContent = quizInfo[1].answerResul;
    // quizResult[2].textContent = quizInfo[2].answerResul;
    // quizResult[3].textContent = quizInfo[3].answerResul;

    //for문
    // for( let i=0; i < 4; i++){
    //     quizType[i].textContent = quizInfo[i].answerType;    //퀴즈 종류
    //     quizNumber[i].textContent = quizInfo[i].answerNumber;    //퀴즈 번호
    //     quizAsk[i].textContent = quizInfo[i].answerAsk;  //문제 정보
    //     quizResult[i].textContent = quizInfo[i].answerResul; //문제 정답
    // }

    //forEach문
    quizInfo.forEach((e,i) => {
        quizType[i].textContent = quizInfo[i].answerType;   //퀴즈 종류
        quizNumber[i].textContent = quizInfo[i].answerNumber;   //퀴즈 번호
        quizAsk[i].textContent = quizInfo[i].answerAsk;     //문제 정보
        quizResult[i].textContent = quizInfo[i].answerResul;    //문제 정답
    });

    // //정답 숨기기(4개)
    // quizResult[0].style.display = "none"
    // quizResult[1].style.display = "none"
    // quizResult[2].style.display = "none"
    // quizResult[3].style.display = "none"

    // //정답 숨기기 for문
    // for( let i=0; i < quizInfo.length; i++){
    //     quizResult[i].style.display = "none";
    // }

    //정답 숨기기 forEach문
    quizInfo.forEach((el,i)=>{
        quizResult[i].style.display = "none";
    });

    //정답 확인
    quizConfirm.forEach((btn,num)=>{    //버튼이 여러개 있다는걸 확인시킨 뒤 클릭을 넣어준다.
        btn.addEventListener("click",()=>{

            //사용자 정답
            const userWord = quizInput[num].value;
            
            //사용자 정답 == 문제 정답
            if(userWord == quizInfo[num].answerResul){
                //정답
                // alsrt("정답")
                quizView[num].classList.add("like");
                quizConfirm[num].style.display = "none";
            }else{
                //오답
                // alsrt("오답")
                quizView[num].classList.add("dislike");
                quizConfirm[num].style.display = "none";
                quizInput[num].style.display = "none";
                quizResult[num].style.display = "block";
            }
        })
    });

   <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 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 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 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>

    .quiz_wrap {
        display: flex;
        align-items: flex-start;s
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 150px;
        flex-wrap: 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;
        /*span이라 inline이어서*/
        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: "TwayAir";
        line-height: 1.3;
    }

    .quiz_question .number {
        color: #b771f8;
    }

    .quiz_question .ask {
        display: inline;
    }

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

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

    .quiz_answer .result {
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        border: 6px ridge #cacaca;
        box-sizing: border-box;
        text-align: center;
        font-family: "TwayAir";
        line-height: 1.3;
    }
    .quiz_answer .input {
        width: 100%;
        border: 6px ridge #cacaca;
        font-size: 22px;
        padding: 13px 20px;
        background-color: #fff;
        font-family: "TwayAir";
        margin-bottom: 10px;
    }
    .quiz_view {
        background-color: #f5f5f5;
        font-family: "TwayAir";
        position: relative;
        overflow: hidden;
    }
    .quiz_view .true {
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color: #8beeff;
        color: rgb(60, 68, 136);
        border-radius: 50%;
        text-align: center;
        position: absolute;
        left: 70%;
        top: 100px;
        opacity: 0;
    }
    .quiz_view .false {
        width: 120px;
        height: 120px;
        background-color: rgb(255, 205, 68);
        color: rgb(82, 39, 22);
        line-height: 120px;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        right: 70%;
        top: 100px;
        opacity: 0;
    }
    .quiz_view.like .true{
        opacity: 1;
        animation: wobble 0.6s;
    }
    .quiz_view.dislike .false{
        opacity: 1;
        animation: wobble 0.6s; /*wobble 좌우로 흔드는 애니메이션*/
    }

    .quiz_selects {
        margin: 5px 0;
    }

    .quiz_selects label {
        display: flex;
    }
    .quiz_selects label input {
        position: absolute;
        left: -9999px;
    }
    .quiz_selects label span {
        font-size: 20px;
        line-height: 1.3 ;
        font-family: "TwayAir";
        padding: 10px;
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 5px;
        cursor: pointer;
    }

    .quiz_selects label span::before {
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        margin-right: 15px;
        flex-shrink: 0;
        box-shadow: inset 0px 0px 0px 4px #b781e9;
        transition: all 0.25s;
    }

    .quiz_selects label input:checked + span {
        background-color: rgb(228, 224, 235);
    }

    .quiz_selects label input:checked + span::before {
        box-shadow: inset 0px 0px 0px 10px #b781e9;
    }

    .quiz_confirm {
        width: 100%;
        text-align: center;
    }
    .quiz_confirm .check {
        font-size: 22px;
        line-height: 1.3;
        padding: 13px 60px;
        border: 6px ridge #cacaca;
        box-sizing: border-box;
        text-align: center; 
        font-family: "TwayAir";
        cursor: pointer;
        margin: 40px 0;
        transition: background 0.3s;
    }

    .quiz_confirm .check:hover {
        background: #b080fd;
    }

    .quiz_confirm .ex {
        font-family: "DungGeunMo";
        font-size: 28px;
        font-weight: 500;

    }

Quiz 주관식(여러문제) 유형

1.
분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는?

2.
시각적 또는 촉각적으로 느껴지는 물체 표면에 대한 느낌을의미하는가?

3.
컬러 인쇄를 위해 C, M, Y, K 4색의 네거필름으로 만드는 과정을 무엇이라 하는가?

4.
사용자가 모니터 위에 표시된 메뉴를 손가락으로 누르면 입력이 되어 컴퓨터에 익숙하지 않은 초보자들도 간단하고 편리하게 사용할 수 있는 입력장치는?

1. 분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는?

2. 시각적 또는 촉각적으로 느껴지는 물체 표면에 대한 느낌을의미하는가?

3. 컬러 인쇄를 위해 C, M, Y, K 4색의 네거필름으로 만드는 과정을 무엇이라 하는가?

4. 사용자가 모니터 위에 표시된 메뉴를 손가락으로 누르면 입력이 되어 컴퓨터에 익숙하지 않은 초보자들도 간단하고 편리하게 사용할 수 있는 입력장치는?

1.
분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는?

2.
시각적 또는 촉각적으로 느껴지는 물체 표면에 대한 느낌을의미하는가?

3.
컬러 인쇄를 위해 C, M, Y, K 4색의 네거필름으로 만드는 과정을 무엇이라 하는가?

4.
사용자가 모니터 위에 표시된 메뉴를 손가락으로 누르면 입력이 되어 컴퓨터에 익숙하지 않은 초보자들도 간단하고 편리하게 사용할 수 있는 입력장치는?