버튼을 클릭하면 명언이 나와요
-이름이 나와요
퀴즈 4번 완성된 모습
퀴즈 4번은 radio버튼으로 만든 것들을 클릭하고
그거에 대한 "정답"과 "오답"을 보여줍니다.
HTML코드
<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__question">
</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다.</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" class="select" name="choice" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" class="select" name="choice" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" class="select" name="choice" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" class="select" name="choice" value="4">
<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="skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->코드 설명
이번에는 raio버튼을 통해서 선택을 하는 퀴즈 입니다.
1. main태그 안에는 퀴즈에 들어가는 "문제 번호", "문제 내용", "강이지 이미지", "radio 버튼"이 있습니다.
2. div태그 중 .quiz__header에 있는 h2태그 .quiz__title에는 "시험 종목"과 "회차"가 나옵니다.
3. div태그 중 .quiz__main에는 "문제 번호", "문제 내용", "강이지 이미지", "radio 버튼"을 담아줍니다.
4. div태그 중 .quiz__question에는 "문제 번호", "문제 내용"이 들어갑니다.
5. div태그 중 .dog__wrap에 있는 div태그 중 .true와 .false는 "정답을 맞추"거나 "틀렸을때" 나오는 메세지입니다.
6. div태그 중 .dog__wrap에 있는 .card-container는 강아지의 이미지를 표현하는 div 태그입니다.
7. div태그 중 .quiz__choice에 있는 label안에는 ratio버튼이 있습니다.
radio버튼에 있는 value의 값으로 비교하여 정답인지 오답인지 구분이 가능합니다.
8. div태그 중 .quiz__answer안에 있는 button태그는 radio버튼에 있는 것들을 선택했을때 "정답"인지 "오답"인지 알려줍니다.
9. div태그 중 .quiz__desc은 문제에 대한 "설명"과 "답"이 들어갑니다.
10. div태그 중 #footer은 저의 이메일을 써놨습니다.
JAVASCRIPT코드
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title"); // 시험 종목 / 시간 합칠예정임
const quizQustion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelector(".quiz__choice");
const quizChoice2 = 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 quizAnswer = quizWrap.querySelector(".quiz__answer .result");
// 문제 정보
const quizInfo = [
{
infoType: "웹디자인 기능사",
infoTime: "2016년 4회",
infoNumber: "1",
infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
infoChoice: ["선, 색채, 공간, 수량", "점, 선, 면, 질감", "시간, 수량, 구조, 공간", "면, 구조, 공간, 수량"],
infoAnswer: "2",
infoDesc : "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다."
}
];
// 문제 출력
function updateQuiz(){
quizTitle.innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
quizQustion.innerHTML = "<em>" + quizInfo[0].infoNumber +"</em>. " + "<em>" + quizInfo[0].infoQuestion + "</em>";
quizDesc.innerHTML = quizInfo[0].infoDesc;
for(let i=0; i<quizInfo[0].infoChoice.length; i++){
quizChoice2[i].innerHTML = quizInfo[0].infoChoice[i];
}
// 해설 숨기기
quizDesc.style.display = "none";
}
// 정답 확인
function answerQuiz(){
// 사용자가 선택한 인풋박스(checked) === 문제 정답(quizInfo[0].infoAnswer)
for(let j=0; j<quizInfo[0].infoChoice.length; j++){
if(quizSelect[j].checked === true){ // 사용자가 보기를 체크
if(quizSelect[j].value === quizInfo[0].infoAnswer){
// 정답
dogWrap.classList.add("like");
dogWrap.classList.remove("dislike");
}
else{
// 오답
dogWrap.classList.remove("like");
dogWrap.classList.add("dislike");
}
}
}
// 해설 보이기
quizDesc.style.display = "block";
quizConfirm.style.display = "none";
quizAnswer.style.display = "none";
}
updateQuiz(); // 문제 출력
quizConfirm.addEventListener("click", answerQuiz);
// answerQuiz();
// forEach문으로 만들어보기
// quizChoice2.forEach(function(el, index){
// quizChoice2[index].innerHTML = quizInfo[0].infoChoice[index];
// });코드 설명
1. document.querySelector("대상");을 이용해서 "클래스", "ID", "태그"를 찾습니다.
2. const quizInfo은 문제에 대한 정보가 들어갑니다.
(1.시험 종목, 2.시험 회차, 3.문제 번호, 4.문제, 5.문제 내용, 6.정답, 7.설명)
3. function updateQuiz() 함수안에는 HTML코드의 클래스를 호출해서 const quizInfo 선언된 데이터의 내용을 넣어줍니다.
4. function answerQuiz() 함수안에는 radio버튼을 클릭한게 맞으면 radio버튼의 값을 가져와서 const quizInfo의 infoAnswer 값과 비교합니다. "정답"이나 "오답" 일때 클래스를 추가해서 css style을 바꿔줍니다.
5. quizConfirm은 div 태그 중 .quiz__answer .confirm "정답 확인" 버튼으로 이 "버튼"을 클릭하면 radio 버튼에 누른 것들을 정답과 오답으로 확인 시켜줍니다.
| input type = "text" | 대상text.value로 해당 박스에 적힌 데이터들을 가져옵니다. |
| input type = "radio" | radio.checked로 radio 버튼이 클릭된 곳을 확인 할 수있습니다. radio에 value의 값을 준다면 클릭한 곳의 value값을 가져오고 그것들을 비교하여 원하는 조건을 걸 수가 있습니다. |
| 대상.class.add() | 대상에 class를 추가합니다. |
| 대상.class.remove() | 대상에 있는 class를 지워줍니다. |