정답입니다!
틀렸습니다!
정답입니다!
틀렸습니다!
정답입니다!
틀렸습니다!
정답입니다!
틀렸습니다!
//선택자
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") //강아지 //뷰어로 바꾸어서 정답과 오답박스를 출력한다.
// 요소다중선택이 필요한경우 querySelectorAll을 사용해서 한다.
//문제정보
const quizInfo = [
{
answerType: "웹디자인 기능사 2016년 1회",
answerNumber: "1",
answerAsk: "같은 크기의 형을 상, 하로 겹칠 때 위쪽의 것이 크게 보이는 착시현상은?",
answerResult: "상방 거리의 과대착시"
},
{
answerType: "웹디자인 기능사 2016년 1회",
answerNumber: "2",
answerAsk: "수적 법칙에 의해 생겨난 형태로 규칙적이고 명쾌한 조형적 감정을 유발시키는 형태는?",
answerResult: "기하학적 형태"
},
{
answerType: "웹디자인 기능사 2016년 1회",
answerNumber: "3",
answerAsk: "연산자 좌우의 검색어를 모두 포함하는 데이터를 찾는 정보검색 연산자는?",
answerResult: "AND"
},
{
answerType: "웹디자인 기능사 2016년 1회",
answerNumber: "4",
answerAsk: "월드 와이드 웹(WWW)서비스를 이용하기 위해 개발된 프로그램으로 인터넷에 연결된 컴퓨터를 탐색하고 원하는 정보를 읽어 들여 그 내용을 화면에 표시해 주는 클라이언트 프로그램은?",
answerResult: "웹 브라우저"
}
]
//문제출력
//forEach문을 이용한 문제출력
quizInfo.forEach((el, i) =>{
quizType[i].textContent = quizInfo[i].answerType;
quizNumber[i].textContent = quizInfo[i].answerNumber + ". ";
quizAsk[i].textContent = quizInfo[i].answerAsk;
quizResult[i].textContent = quizInfo[i].answerResult;
});
//정답 숨기기 (4개)
quizInfo.forEach((el, i) => {
quizResult[i].style.display = "none";
});
//정답확인 정의되있지 않은 오류가 뜨면 quizConfirm 위치를 확인하자
// quizConfirm.addEventListener("click", () => {
// alert("ads")
// });
quizConfirm.forEach((btn, num)=>{
btn.addEventListener("click", () => { //클릭을 눌렀을때 상황을 만들기 위한 코드
//사용자 정답
const userWord = quizInput[num].value; //.toLowerCase().trim() 소문자와 여백을 인식하는 코드이다. 하지만 오류가 생겨서 확인 필요
// console.log(userWord);
// console.log(quizInfo[num] = answerResult.value);
// 사용자 정답 == 문제정답 비교
if(userWord == quizInfo[num].answerResult){
//정답
alert("정답")
quizView[num].classList.add("like");
quizConfirm[num].style.display = "none";
} else {
//오답
alert("오답")
quizView[num].classList.add("dislike");
quizConfirm[num].style.dispaly = "none";
quizResult[num].style.display = "block";
quizInput[num].style.display = "none";
}
});
})
//강아지 부분
<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>