728x90
퀴즈 효과06
웹디자인기능사 필기 기출문제를 이용한 객관식(여러 문제) 슬라이드 형식입니다. 한 문제씩 출력되며, 정답확인하기 버튼을 누르면 정답과 해설을 확인하고, 다음 문제로 넘어갈 수 있습니다.
01. 문제 정보
문제 정보를 배열속의 객체로 저장하였고, 보기는 객체가 아닌 배열에 저장하였습니다.
코드 보기
const quizInfo = [
{
answerType: "웹디자인기능사 2010년 04회",
answerNum: "1",
answerAsk: "색의 수축, 팽창의 효과에 가장 큰 영향을 주는 요소는?",
answerChoice: [
"색약",
"명도",
"잔상",
"중량"
],
answerResult: "명도",
answerEx: "색의 수축, 팽창의 효과에 가장 큰 영향을 주는 요소는 '명도'입니다."
},
{
answerType: "웹디자인기능사 2010년 04회",
answerNum: "2",
answerAsk: "면(plane)에 대한 설명으로 틀린 것은?",
answerChoice: [
"폭은 있으나 길이가 없다.",
"이동하는 선의 자취가 면을 이룬다.",
"공간을 구성하는 단위이다.",
"넓이는 있으나 두께는 없다."
],
answerResult: "폭은 있으나 길이가 없다.",
answerEx: "면에는 길이가 있습니다."
},
{
answerType: "웹디자인기능사 2010년 04회",
answerNum: "3",
answerAsk: "디자인에서 사용되는 용어 설명으로 잘못된 것은?",
answerChoice: [
"2차원의 화면이나 형식 위에, 3차원의 공간에 존재하는 형(shape)이나 형태(form)를 표시하는 것을 투시(perspective)라 한다.",
"장소나 위치 또는 방위가 변화되는 과정이나 움직임을 시차(parallax)라고 한다.",
"점진적 변화, 규칙적 단계에 의해 진행되는 변화과정을 그라데이션(gradation)이라고 한다.",
"시각적 영역 안에서 어떤 형이나 형태가 다른 형이나 형태를 부분적으로 덮어 감추어지는 현상을 중첩이라 한다."
],
answerResult: "장소나 위치 또는 방위가 변화되는 과정이나 움직임을 시차(parallax)라고 한다.",
answerEx: "시차(parallax)란 어떤 물체를 서로 다른 두 지점에서 보았을 때 생기는 방향의 차이를 말합니다."
},
{
answerType: "웹디자인기능사 2010년 04회",
answerNum: "4",
answerAsk: "병원 수술실의 색채계획으로 가장 적당한 배색은?",
answerChoice: [
"갈색계열",
"무채색계열",
"녹색계열",
"보라색계열"
],
answerResult: "녹색계열",
answerEx: "병원 수술실의 색채계획으로 가장 적당한 배색은 '녹색계열'입니다."
},
{
answerType: "웹디자인기능사 2010년 04회",
answerNum: "5",
answerAsk: "색입체를 단순화한 각 부분의 명칭이 맞는 것은? (단, A는 입체의 상하, /B는 입체의 가로방향, C는 입체의 둘레를 의미한다.)",
answerChoice: [
"A-색상, B-채도, C-명도",
"A-채도, B-명도, C-색상",
"A-명도, B-색상, C-채도",
"A-명도, B-채도, C-색상"
],
answerResult: "A-명도, B-채도, C-색상",
answerEx: "입체의 상하(A)는 명도, 입체의 가로방향(B)는 채도, 입체의 둘레(C)는 색상입니다."
}
];
const quizType = document.querySelector(".quiz__type"); //문제 유형
const quizQuestion = document.querySelector(".quiz__question"); //문제 번호, 질문
const quizSelects = document.querySelector(".quiz__selects"); //객관식 보기
const quizResult = document.querySelector(".quiz__answer .result") //해설
const quizConfirm = document.querySelector(".quiz__answer .confirm") //정답 확인버튼
const quizView = document.querySelector(".quiz__view"); //강아지
let quizCount = 0; //문제의 개수
let quizScore = 0; //사용자가 맞힌 정답의 개수
02. 문제 출력
문제출력을 위해 매개변수를 사용하였습니다.
const updateQuiz = (index) => {
const questionTag = `
<span class="number">${quizInfo[index].answerNum}. </span>
<div class="ask">${quizInfo[index].answerAsk}</div>
`
const choiceTag = `
<label for="select1">
<input type="radio" id="select1" class="select" name="select" value="1">
<span class="choice">${quizInfo[index].answerChoice[0]}</span>
</label>
<label for="select2">
<input type="radio" id="select2" class="select" name="select" value="2">
<span class="choice">${quizInfo[index].answerChoice[1]}</span>
</label>
<label for="select3">
<input type="radio" id="select3" class="select" name="select" value="3">
<span class="choice">${quizInfo[index].answerChoice[2]}</span>
</label>
<label for="select4">
<input type="radio" id="select4" class="select" name="select" value="4">
<span class="choice">${quizInfo[index].answerChoice[3]}</span>
</label>
`;
//문제 출력
quizQuestion.innerHTML = questionTag; //퀴즈 유형
quizSelects.innerHTML = choiceTag; //번호, 질문
quizType.innerHTML = quizInfo[index].answerType; //객관식
quizResult.innerHTML = quizInfo[index].answerEx; //해설
const quizChoice = quizSelects.querySelectorAll(".choice");
for (let i = 0; i < quizChoice.length; i++) {
quizChoice[i].setAttribute("onclick", "choiceSelected(this)");
}
//문제, 해설 숨기기
quizResult.style.display = "none";
quizConfirm.style.display = "none";
}
updateQuiz(quizCount);
const choiceSelected = (answer) => {
let userAnswer = answer.textContent; //사용자가 체크한 정답
let currentAnswer = quizInfo[quizCount].answerResult; //문제 정답
if (userAnswer == currentAnswer) {
console.log("정답")
quizView.classList.add("like");
quizScore++
console.log(quizScore)
} else {
console.log("오답")
quizView.classList.add("dislike");
quizResult.style.display = "block";
}
quizConfirm.style.display = "block";
}
03. 정답 확인
마지막 문제에 사용자가 맞힌 정답수를 확인하고 합격 / 불합격 여부를 알 수 있습니다.
const answerQuiz = () => {
//마지막 문제
if (quizInfo.length - 1 == quizCount) {
if (quizScore >= quizCount * 0.6) {
quizConfirm.textContent = `총 ${quizInfo.length}문제 중에 ${quizScore}문제를 맞췄습니다. 합격입니다.😍`
} else
quizConfirm.textContent = `총 ${quizInfo.length}문제 중에 ${quizScore}문제를 맞췄습니다. 불합격입니다.😭`
}
quizCount++;
updateQuiz(quizCount);
quizView.classList.remove("like", "dislike")
}
quizConfirm.addEventListener("click", answerQuiz);
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SLIDER Effect 02 (3) | 2022.08.29 |
|---|---|
| SLIDER Effect 01 (3) | 2022.08.29 |
| SEARCH Effect 03 (3) | 2022.08.22 |
| QUIZ Effect 05 (2) | 2022.08.18 |
| SEARCH Effect 02 (3) | 2022.08.17 |
댓글