Script Sample/Quiz Effect
Quiz Effect 05 - 객관식 : 여러문제 정답 확인하기
Gentlemanjs
2022. 2. 22. 17:06
hljs.highlightAll(); // 코드 나타낼때 쓰는 스크립트
const modal = function(){ // modal 창 띄우는 함수 만들기.
document.querySelector(".source-btn").addEventListener("click", () => { // 소스보기 버튼을 클릭하면
document.querySelector("#modal").classList.add("show"); // 모달창 보여주기
document.querySelector("#modal").classList.remove("hide"); // 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거
})
document.querySelector(".close").addEventListener("click", () => { // 닫기 버튼을 클릭하면
document.querySelector("#modal").classList.add("hide"); // 모달창 숨김
})
}
modal();
const tabMenu = function(){ // 탭메뉴 함수 만들기.
const tabBtn = document.querySelectorAll(".menu-bar > ul > li"); // 탭메뉴 버튼들 (html,css,javascript)
const tabCont = document.querySelectorAll(".content > .main > div"); // 코드보이는 박스
tabBtn.forEach((el, index) => { // 요소가 여러개라 forEach로 작업
el.addEventListener("click", ()=>{ // 버튼을 클릭하면
tabBtn.forEach(btn => { // 요소가 여러개라 forEach로 작업
btn.classList.remove("active"); // 버튼 모두에서 active 제거
});
el.classList.add("active"); // 클릭한 버튼만 active 추가
tabCont.forEach(hide => { // 우선 모든 컨텐츠 박스 안보이게 작업한 뒤 하나씩 보이게 설정.
hide.style.display = "none"
})
tabCont[index].style.display = "block"
})
})
}
tabMenu();
const quizWrap = document.querySelector(".quiz__wrap");
//문제 정보
const quizInfo = [
{
answerType : "javascript",
answerNum : 1,
answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
answerChoice : {
a: "html",
b: "css",
c: "javascript",
d: "react"},
answerResult : "3",
answerEx : "객체 기반의 스크립트 프로그맹 언어는 자바스크립트입니다."
},
{
answerType : "html",
answerNum : 2,
answerAsk : "다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의하는 태그는 무엇입니까?",
answerChoice : {
a: "a",
b: "img",
c: "p",
d: "html"},
answerResult : "1",
answerEx : "a 태그는 다른 컨텐츠와 연결되는 하이러핑크를 설정합니다."
},
{
answerType : "css",
answerNum : 3,
answerAsk : "CSS에서 바깥쪽 여백을 설정할때 사용하는 속성은 무엇입니까?",
answerChoice : {
a: "padding",
b: "margin",
c: "border",
d: "overflow"},
answerResult : "2",
answerEx : "margin 으로 바깥쪽 여백을 설정할 수 있습니다."
}
];
// 문제 출력 forEach 문으로 입력
function updataQuiz(){
const html = [];
quizInfo.forEach((question, number)=>{
html.push(`<div class="quiz">
<h2 class="quiz__type">${question.answerType}</h2>
<h3 class="quiz__question">
<span class="quiz__number">${question.answerNum}. </span>
<span class="quiz__ask">${question.answerAsk}</span>
</h3>
<div class="quiz__view">
<div class="true">정답입니다!</div>
<div class="false">틀렸습니다!</div>
<div class="dog">
<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 class="quiz__answer">
<div class="quiz__selects">
<label for="select1${number}">
<input class="select" type="radio" id="select1${number}" name="select${number}" value="1">
<span class="choice">${question.answerChoice.a}</span>
</label>
<label for="select2${number}">
<input class="select" type="radio" id="select2${number}" name="select${number}" value="2">
<span class="choice">${question.answerChoice.b}</span>
</label>
<label for="select3${number}">
<input class="select" type="radio" id="select3${number}" name="select${number}" value="3">
<span class="choice">${question.answerChoice.c}</span>
</label>
<label for="select4${number}">
<input class="select" type="radio" id="select4${number}" name="select${number}" value="4">
<span class="choice">${question.answerChoice.d}</span>
</label>
</div>
</div>
</div>`);
});
html.push(`
<div>
<button class="quiz__confirm">정답 확인하기</button>
<div class="quiz__result"></div>
</div>
`);
quizWrap.innerHTML = html.join('');
}
updataQuiz();
function answerQuiz(){
const quizSelects = document.querySelectorAll(".quiz__selects"); // 객관식 보기들
const quizView = document.querySelectorAll(".quiz__view"); // 문제 화면
const quizResult = document.querySelector(".quiz__result"); // 정답 확인 버튼
let scoreCurrent = 0; // 정답 갯수 표현을 위해 변수 선언
quizInfo.forEach((question, number) => { // 문제가 여러개 이므로 forEach문
const quizSelectsWrap = quizSelects[number]; // 각 문제의 보기를 변수로 선언
const userSelector = `input[name=select${number}]:checked` // select로 시작하는 input박스중 선택된 것을 변수로 선언
const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value; // 선택된것을 사용자 정답으로 변수 선언
if(userAnswer == question.answerResult) { // 사용자 정답과 진짜 정답을 비교
quizView[number].classList.add("like")
quizView[number].classList.remove("dislike")
scoreCurrent++;
} else {
quizView[number].classList.add("dislike")
quizView[number].classList.remove("like")
const div = document.createElement("div");
quizSelectsWrap.appendChild(div).innerHTML = `<p class="quiz__ex">${question.answerEx}</p>` // 틀렸다면 설명 표시
}
});
quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다.` // 문제 정답 갯수 표시
}
document.querySelector(".quiz__confirm").addEventListener("click", answerQuiz);