- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
퀴즈이펙트 완성 화면 입니다.
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>퀴즈 이펙트06</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz</a><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">5</a></li>
</ul>
</header>
<!-- //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_quection">
</div>
<div class="quiz_view">
<div class='dog_wrap'>
<p></p>
<span></span>
<div class="ture">정답입니다.</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" value="1" name="choice">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" value="2" name="choice">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" value="3" name="choice">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" value="4" name="choice">
<span></span>
</label>
-->
</div>
<div class="quiz_answer">
<button class="next">다음 문제</button>
</div>
</div>
<div class="quiz_desc"></div>
<div class="quiz_info">??점</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:ture403@gmail.com">ture403@gmail.com</a>
</footer>
<!-- //footer -->
</body>- dog_wrap 안에있는 p 와 span 태그는 총 갯수와 맞힌 갯수를 표출해 줄려고 만들었습니다.
- 기존 html이랑 별 다를게 없습니다.
JS 코드입니다.
const quizInfo = [
{
infoType : "정보처리 기능사",
infoTime : "2011년도 5회",
infoNumber : "20110501",
infoQuection : "JK 플립플롭(Flip Flop)에서 보수가 출력되기 위한 J, K의 입력 상태는?",
infoChoice : ["J=1, K=0","J=0, K=1","J=1, K=1","J=0, K=0"],
infoAnswer :"J=1, K=1",
infoDesc : "JK 플리플롭은 만능 플리플롭이라고 불리울 만큼 기능이 많으며 모든 플리플롭의 기능을 대체할수 있습니다.특히 J=1, K=1 일때 T 플립플롭 즉 보수, 반전 기능으로 작동 합니다."
},{
infoType : "정보처리 기능사",
infoTime : "2011년도 5회",
infoNumber : "20110502",
infoQuection : "보기의 도형과 관련 있는 것은?",
infoChoice : ["OR게이트","버퍼(buffer)","NAND게이트 ", "인버터(Invert)"],
infoAnswer :"인버터(Invert)",
infoDesc : "인버터(Invert), NOT 게이트 입니다."
},{
infoType : "정보처리 기능사",
infoTime : "2011년도 5회",
infoNumber : "201105013",
infoQuection : "중앙처리장치(CPU)에 해당하는 부분을 하나의 대규모 집적회로의 칩에 내장시켜 기능을 수행하게 하는 것은?",
infoChoice : ["마이크로프로세서", "컴파일러", "소프트웨어", "레지스터"],
infoAnswer :"마이크로프로세서",
infoDesc : "마이크로프로세서란 하나의 칩안에 CPU의 각종 기능을 모두 내장한 형태를 말합니다."
},{
infoType : "정보처리 기능사",
infoTime : "2011년도 5회",
infoNumber : "201105014",
infoQuection : "명령의 오퍼랜드 부분에 실제 데이터가 기록되어 있어 메모리 참조를 하지 않고 데이터를 처리하는 방식으로 수행 시간이 빠르지만 오퍼랜드 길이가 한정되어 실제 데이터의 길이에 제약을 받는 주소지정 방식은?",
infoChoice : ["Direct Addressing", "Indirect Addressing", "Relative Addressing", "Immediate Addressing"],
infoAnswer :"Immediate Addressing",
infoDesc : "메모리를 참조 하지 않는다고 하였으므로 묵시적 또는 즉시주소 방식중 하나 입니다..이때 스택에 관한 언급이 없으므로 즉시주소방식(Immediate Addressing) 입니다."
},{
infoType : "정보처리 기능사",
infoTime : "2011년도 5회",
infoNumber : "20110505",
infoQuection : "명령어의 주소(Address)부를 연산 주소(Address)로 이용하는 주소지정방식은?",
infoChoice : ["상대 Addressing 방식", "절대 Addressing 방식", "간접 Addressing 방식", "직접 Addressing 방식"],
infoAnswer :"직접 Addressing 방식",
infoDesc : "레지스터에 저장된 값을 연산하는 것은 '연산 명령어' 입니다."
},{
infoType : "정보처리 기능사",
infoTime : "2011년도 5회",
infoNumber : "20110506",
infoQuection : "연산자의 기능과 거리가 먼 것은?",
infoChoice : ["주소지정 기능","제어 기능","함수연산 기능","입/출력 기능"],
infoAnswer :"주소지정 기능",
infoDesc : "명령어 = 명령어 코드부 + 명령어 주소부Instruction = Op_Code + Operand연산자의 기능과 거리가 먼것은이라고 하였으므로 주소와 관련된 이야기를 찾으시면 됩니다."
}
];
//선택자
const quizWrap = document.querySelector(".quiz_wrap");
const quizTitle = quizWrap.querySelector(".quiz_title");
const quizQuection = quizWrap.querySelector(".quiz_quection");
const quziChoice = quizWrap.querySelector(".quiz_choice");
const dogWrap = quizWrap.querySelector(".dog_wrap");
const quizNext = quizWrap.querySelector(".quiz_answer .next");
const quizAnswer = quizWrap.querySelector(".quiz_answer");
const quizDesc = quizWrap.querySelector(".quiz_desc");
const dowWrapP = quizWrap.querySelector(".dog_wrap p");
const dowWrapspan = quizWrap.querySelector(".dog_wrap span");
const quizReulstAnswer = quizWrap.querySelector(".quiz_info");
let quizCount = 0;
let quizScore = 0;
let z;
// 문제 출력
const updateQuiz = (index , number)=>{
let typeTag = `
<span>${quizInfo[index].infoType}</span>
<em>${quizInfo[index].infoTime}</em>
`;
let qusectionTag = `
<em>${index+1}</em>.
<span>${quizInfo[index].infoQuection}</span>
`;
let choiceTag = `
<label for="choice1">
<input type="radio" id="choice1" value="1" name="choice">
<span>${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" value="2" name="choice">
<span>${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" value="3" name="choice">
<span>${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" value="4" name="choice">
<span>${quizInfo[index].infoChoice[3]}</span>
</label>
`;
let descTag = `
정답은 ${quizInfo[index].infoAnswer} 입니다.<br>
${quizInfo[index].infoDesc}
`;
quizTitle.innerHTML = typeTag;
quizQuection.innerHTML = qusectionTag;
quziChoice.innerHTML = choiceTag;
quizDesc.innerHTML = descTag;
// 갯수
dowWrapP.textContent = `총갯수 : ${quizCount+1}개 / ${quizInfo.length}개`;
// 보기 선택자
const quizChoiceSpan = quizWrap.querySelectorAll(".quiz_choice span");
const quizChoiceInput = quizWrap.querySelectorAll(".quiz_choice input");
// quizChoiceSpan.forEach((span,num)=> {
// span.setAttribute("onclick", "choiceSelected(this)");
// quizChoiceInput[num].disabled = "true";
// });
for(let i=0; i<quizChoiceSpan.length; i++){
quizChoiceSpan[i].setAttribute("onclick", "choiceSelected(this)");
// quizChoiceInput[i].disabled = "true";
}
// 다음버튼, 해설 숨기기
quizAnswer.style.display ="none";
quizDesc.style.display = "none";
// 갯수 표시
};
updateQuiz(quizCount);
// 객관식 선택
function choiceSelected(answer){
let userAnswer = answer.textContent; //사용자 정답
let currentAnswer = quizInfo[quizCount].infoAnswer; //문제 정답
if( userAnswer == currentAnswer){
quizScore++
dogWrap.classList.add("like");
} else {
dogWrap.classList.add("dislike");
}
dowWrapspan.textContent = `정답갯수 : ${quizScore}`;
quizAnswer.style.display ="block";
quizDesc.style.display = "block";
}
// 정답 확인
quizNext.addEventListener("click", () =>{
if(quizCount == quizInfo.length-1){
quizReulstAnswer.textContent= Math.ceil((quizScore / quizInfo.length) * 100) + "점";
} else {
quizCount++;
updateQuiz(quizCount);
}
dogWrap.classList.remove("like","dislike");
dowWrapP.textContent = `총갯수 : ${quizCount+1}개 / ${quizInfo.length}개`;
})- quzinfo에 문제를 담았습니다.
- 변수 updateQuiz함수를 넣었습니다. 그안에 html안에 넣을 html 코드를 넣었습니다.
- 갯수를 표현하기 위해서 총갯수 quizCount 값과 quizinfo에 갯수를 넣었습니다.
- quizAnswer는 정답을 보여줄떄 표출할꺼여서 display ="none"으로 했습니다.
- choiceSelected의 함수는 정답이 맞는지 확인하는 함수 입니다.
- 사용자 정답과 문제 정답을 변수에 넣고 그 값들이 같으면 quizScore를 증가시켜 문제 정답 갯수를 만들었습니다.
- quizNext 클릭할때 updateQuiz호출시키고 quizCount값을 증가시켰습니다.
- if문을 써서 quizCount랑 quizinfo갯수-1 값이 같으면 문제 점수를 표출했습니다.
퀴즈 이펙트 5번입니다.
https://ture403.tistory.com/54
퀴즈 이펙트 5번 입니다.
퀴즈 이펙트 5번 입니다. 완성된 화면 입니다. html코드입니다. Quiz객관식 확인하기(여러문제) 유형 1 2 3 4 5 ture403@gmail.com 다중으로 문제를 만들때 일일이 HTML에 입력해서 표출하는건 너무 노다가
ture403.tistory.com
코드 풀 화면 입니다.
https://ture403.github.io/web2023/javascript/quiz/quizEffect06.html
퀴즈 이펙트06
정답입니다. 틀렸습니다! 다음 문제
ture403.github.io
작성 코드 입니다.
https://github.com/ture403/web2023/blob/main/javascript/quiz/quizEffect06.html