클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성된 모습
이번 퀴즈 사이트는 "다음 문제" 버튼을 누르면
정답체크와 다음 문제가 나오는 형태입니다.
HTML코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀴즈 이펙트02</title>
<!-- css -->
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/quiz.css"/>
<!-- 폰트(둥근모) -->
<link href="https://webfontworld.github.io/DungGeunMo/DungGeunMo.css" rel="stylesheet">
<link href="https://webfontworld.github.io/PyeongChang/PyeongChang.css" rel="stylesheet">
</head>
<body>
<header id="header">
<h1>
<a href="../assets/javascript/javascript14.html">Quiz</a><span>객관식 확인하기(여러문제) 유형</span> <em></em>
</h1>
<ul>
<li><a href="quizEffect01.html">1</a></li>
<li><a href="quizEffect02.html">2</a></li>
<li><a href="quizEffect03.html">3</a></li>
<li><a href="quizEffect04.html">4</a></li>
<li><a href="quizEffect05.html">5</a></li>
<li class="active"><a href="quizEffect06.html">6</a></li>
</ul>
</header>
<!-- testAnGyonam -->
<!-- //header -->
<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="" onclick="함수이름()" -->
<div class="quiz__answer">
<button class="next">다음 문제</button>
</div>
<div class="quiz__desc">
</div>
</div>
<div class="hap__desc">
<p>맞춘개수</p>
<div class="hap">
<span>0개 / </span> <em></em>
</div>
</div>
<div class="score">
<span>총 : 0점</span>
</div>
<div class="number">
<span>현재 : 1번</span>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->
</body>
</html>코드 설명
1. div태그 중 .quiz__wrap은 "시험 종류", "시험 문제", "문제 내용", "버튼" 전부다 가지는 div태그 입니다.
2. div태그 중 .quiz__title은 "시험종류"와 "시험회차"를 가지고 있습니다.
3. div태그 중 .quiz__question은 "시험 번호"와 "시험 문제"를 가지고 있습니다.
4. div태그 중 .quiz__view은 "강아지 이미지"와 "정답","오답" 이미지를 가지고 있습니다.
5. div태그 중 .quiz__choice은 "시험 내용", "radio버튼"을 가지고 있습니다.
6. div태그 중 .quiz__answer은 "다음 문제 버튼"을 가지고 있습니다.
7. div태그 중 .quiz__desc은 "답", "문제 설명"을 가지고 있습니다.
8. div 태그 중 .hap__desc은 "문제 갯수 / 총 문제 개수"를 가지고 있습니다.
9. div 태그 중 .score은 "맞춘거에 대한 총 점수"를 가지고 있습니다.
10. div태그 중 .number은 "현재 풀고 있는 문제 번호"를 가지고 있습니다.
JAVASCRIPT코드
<script>
// 문제 정보
const quizInfo = [
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110101",
// 이미지 나오게 할 떄 : infoQuestion: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?<br><img style='width:300px' src=''>",
infoQuestion: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?",
infoChoice: [
"빨강색", "노랑색", "검정색","녹색"
],
infoAnswer: "녹색",
infoDesc : "DMA : 다이렉트 메모리 엑세스의 약자로 CPU를 통하지 않고 입출력장치와 기억장치간에 데이터를 주고 받는 방식"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110102",
infoQuestion: "입체파(Cubism)의 대표적인 화가는?",
infoChoice: [
"피카소","쿠르베","찰스 자보","도미에"
],
infoAnswer: "피카소",
infoDesc : "순차처리는 magnetic tape 자기테이프 입니다"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110103",
infoQuestion: "디자인 원리 중 율동의 요소에 해당하지 않는 것은?",
infoChoice: [
"반복", "비례", "강조", "변칙"
],
infoAnswer: "비례",
infoDesc : "16진수를 8 4 2 1 방식을 이용하여 2진수로 변환한뒤 64 32 16 8 4 2 1 방식으로 10진수로 읽어주면 됩니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110104",
infoQuestion: "디자인의 조건 중 합목적성에 대한 예시로 가장 올바른 것은?",
infoChoice: [
"화려한 집이 살기에 편리하다.", "주로 장식이 많은 의자가 앉기에 편리하다.", "의자를 디자인할 때는 앉을 사람의 몸의 치수, 체중을 고려해야 한다.",
"아름다운 구두가 신기에 편하다."
],
infoAnswer: "의자를 디자인할 때는 앉을 사람의 몸의 치수, 체중을 고려해야 한다.",
infoDesc : "MAR : 번지(주소)기억 MBR : 버퍼(임시기억) <br> IR : 명령어레지스터(명령어를 읽어서 저장) <br> PC : 프로그램카운터(다음수행 명령번지 기억) <br> 명령어해독기 : IR 내용 해독 ACC : 누산기(연산결과 일시(임시)저장) <br> 데이터레지스터 : 데이터 임시저장 <br> 상태 레지스터 : CPU상태 저장(PSW) <br> 보수기 : 보수로 바꾸는 장치"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110105",
infoQuestion: "관용색명의 특징으로 볼 수 없는 것은?",
infoChoice: [
"시대나 유행에 따라서 다소 변하기도 하므로 정확한 색의 전 달이 어렵다.",
"무수히 많은 색 이름과 그 어원을 가지고 있어서 한꺼번에 습득하기가 어렵다",
"어느 특정한 색을 여러 가지 언어로 표현하고 있기 때문에 복잡하고 혼동하기 쉽다.",
"몇 가지의 기본적인 색 이름에 수식어, 색상의 형용사를 덧붙여서 부른다."
],
infoAnswer: "몇 가지의 기본적인 색 이름에 수식어, 색상의 형용사를 덧붙여서 부른다.",
infoDesc : "캐중주 : 캐시메모리는 중앙처리장치와(CPU) 주기억장치 사이"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110106",
infoQuestion: "색체 지각의 3요소가 아닌 것은?",
infoChoice: [
"색채", "빛(광원)", "물체", "시각(눈)"
],
infoAnswer: "색채",
infoDesc : "캐시메모리는 하드웨어로만 구성되며 전원이 꺼질경우 내용이 사라지는 SRAM입니다. CPU와 주기억장치 사이에서 속도 차이를 보완하기 위해서 사용됩니다."
},
];
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizQiestion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelector(".quiz__choice");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizNext = quizWrap.querySelector(".quiz__answer .next");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const qHap = quizWrap.querySelector(".quiz .hap");
const qHapsapn = quizWrap.querySelector(".quiz .hap span");
const qHapem = quizWrap.querySelector(".quiz .hap em");
const Score = quizWrap.querySelector(".quiz .score");
const num = quizWrap.querySelector(".quiz .number");
let quizCount = 0;
let quizScore = 0;
// 총 맞은 갯수
let hap = 0;
let result = quizInfo.length + "개";
qHapem.innerHTML = result;
// 점수
let score = 0;
// 몇문제 맞혔고 + 몇점인지 / 현재 몇번 문제를 풀고 있는지 나와야 함.[총 몇문제 / 현재 몇문제] /
// 함수 : 실행문, 재활용, 그룹화
const updateQuiz = (index) => {
let typeTag = `
<span>${quizInfo[index].infoType}</span>
<em>${quizInfo[index].infoTime}</em>
`;
let questionTag = `
<em>${index+1}</em>.
<span>${quizInfo[index].infoQuestion}</span>
`;
let choiceTage = `
<label for="choice1">
<input type="radio" id="choice1" class="select" name="choice" value="1">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" class="select" name="choice" value="2">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" class="select" name="choice" value="3">
<span>${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" class="select" name="choice" value="4">
<span>${quizInfo[index].infoChoice[3]}</span>
</label>
`;
let descTag = `
<span>정답은 ${quizInfo[index].infoAnswer}<br></span>
<span>${quizInfo[index].infoDesc}</span>
`;
quizTitle.innerHTML = typeTag;
quizQiestion.innerHTML = questionTag;
quizChoice.innerHTML = choiceTage;
quizDesc.innerHTML = descTag;
num.innerHTML = "현재 :" + " " + (index+1) + "번";
// 보기 선택자
const quizChoiceSpan = quizWrap.querySelectorAll(".quiz__choice span");
const quizChoiceInput = quizWrap.querySelectorAll(".quiz__choice input");
// quizChoiceSpan.forEach((span, num) => {
// span.setAttribute("onclick", "choiceSelected(this)");
// });
// getAttribute : 속성에 접근한다.
// JavaScript에서 해당 속성에 접근하여 추가 작업을 필요로 할 때 사용.
// setAttribute : JavaScript를 이용해 태그의 속성 값을 변경.
// 해당 속성이 없다면, 속성이 추가된다.
// 이 속성은 HTML 문서에 직접 적용된다.
// removeAttribute : 속성을 지워버린다.
for(let i=0; i<quizChoiceSpan.length; i++){
quizChoiceSpan[i].setAttribute("onclick", "choiceSelected(this)");
// disabled :
// quizChoiceInput[i].disabled = "true";
}
// 다음 버튼, 해설 숨기기
quizAnswer.style.display = "none";
quizDesc.style.display = "none";
};
// 객관식 선택하기
function choiceSelected(answer){
let userAnswer = answer.textContent; //사용자 정답
let currentAnswer = quizInfo[quizCount].infoAnswer; //문제 정답
console.log(userAnswer);
if(userAnswer == currentAnswer){
console.log("정답입니다.");
dogWrap.classList.add("like");
dogWrap.classList.remove("dislike");
Score.innerHTML = "총 : " + (score+=10) + "점";
qHapsapn.innerHTML = (hap+=1) + "개";
}
else{
console.log("오답입니다");
dogWrap.classList.add("dislike");
dogWrap.classList.remove("like");
}
// 다음 버튼, 해설 보이게 하기
quizAnswer.style.display = "block";
quizDesc.style.display = "block";
}
updateQuiz(quizCount);
// 정답 확인
quizNext.addEventListener("click", () => {
quizCount++;
updateQuiz(quizCount);
console.log(quizCount);
// dogWrap.classList.remove("like", "dislike");
});
</script>코드 설명
1.
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizQiestion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelector(".quiz__choice");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizNext = quizWrap.querySelector(".quiz__answer .next");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const qHap = quizWrap.querySelector(".quiz .hap");
const qHapsapn = quizWrap.querySelector(".quiz .hap span");
const qHapem = quizWrap.querySelector(".quiz .hap em");
const Score = quizWrap.querySelector(".quiz .score");
const num = quizWrap.querySelector(".quiz .number");document.querySelector("대상");으로 원하는 클래스, 아이디, 태그를 찾습니다.
2.
let typeTag = `
<span>${quizInfo[index].infoType}</span>
<em>${quizInfo[index].infoTime}</em>
`;
let questionTag = `
<em>${index+1}</em>.
<span>${quizInfo[index].infoQuestion}</span>
`;
let choiceTage = `
<label for="choice1">
<input type="radio" id="choice1" class="select" name="choice" value="1">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" class="select" name="choice" value="2">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" class="select" name="choice" value="3">
<span>${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" class="select" name="choice" value="4">
<span>${quizInfo[index].infoChoice[3]}</span>
</label>
`;
let descTag = `
<span>정답은 ${quizInfo[index].infoAnswer}<br></span>
<span>${quizInfo[index].infoDesc}</span>
`;백틱을 사용하여 문제와 관련된 정보를 호출하고 html태그와 같이 변수에 저장을 합니다.
3.
quizTitle.innerHTML = typeTag;
quizQiestion.innerHTML = questionTag;
quizChoice.innerHTML = choiceTage;
quizDesc.innerHTML = descTag;
num.innerHTML = "현재 :" + " " + (index+1) + "번";2번에서 변수에 저장한 데이터들을 querySelector로 찾은 대상에 innerHTML로 데이터를 옮깁니다.
그럼 HTML태그로 출력이 되어서 자료가 나타납니다.
4.
for(let i=0; i<quizChoiceSpan.length; i++){
quizChoiceSpan[i].setAttribute("onclick", "choiceSelected(this)");
// disabled :
// quizChoiceInput[i].disabled = "true";
}const quizChoiceSpan = quizWrap.querySelectorAll(".quiz__choice span");으로 클래스 안에 있는 태그를 찾습니다.
그리고 span태그를 클릭 했을때. span태그를 가져옵니다.
5.
function choiceSelected(answer){
let userAnswer = answer.textContent; //사용자 정답
let currentAnswer = quizInfo[quizCount].infoAnswer; //문제 정답
console.log(userAnswer);
if(userAnswer == currentAnswer){
console.log("정답입니다.");
dogWrap.classList.add("like");
dogWrap.classList.remove("dislike");
Score.innerHTML = "총 : " + (score+=10) + "점";
qHapsapn.innerHTML = (hap+=1) + "개";
}
else{
console.log("오답입니다");
dogWrap.classList.add("dislike");
dogWrap.classList.remove("like");
}
// 다음 버튼, 해설 보이게 하기
quizAnswer.style.display = "block";
quizDesc.style.display = "block";
}let userAnswer은 4번에서 가져온 span태그 중에서 textContent의 값을 저장합니다.
let currentAnswer은 문제 정답과 관련된 정보를 가져와서 저장합니다.
span태그를 눌렀을때 span태그가 가지고 있는 값과 문제의 정답이 같으면 설정한 내용들이 실행이 됩니다.
false가 나면 else문이 실행이 됩니다.
6.
// 정답 확인
quizNext.addEventListener("click", () => {
quizCount++;
updateQuiz(quizCount);
console.log(quizCount);
// dogWrap.classList.remove("like", "dislike");
});const quizNext = quizWrap.querySelector(".quiz__answer .next");에 있는 .next클래스(button태그)를 가져옵니다.
그리고 이 버튼 태그를 클릭하면 다음 문제가 나오게 만들었습니다.
| getAttribute | 속성값을 가져옵니다. |
| setAttribute | 태그의 속성값을 변경 |
| removeAttribute | 속성을 지웁니다. |
