728x90
반응형
HTML
<main id="main">
<div class="quiz__wrap__cbt">
<div class="cbt__header">
<h2>2020년 1회 정보처리기능사 기출문제</h2>
</div>
<div class="cbt__conts">
<div class="cbt__quiz">
<!-- <div class="cbt">
<div class="cbt__question"><span>1 </span>.객체지향 프로그램에서 데이터를 추상화하는 단위는?</div>
<div class="cbt__question__img"><img src="img/gineungsaJC2023_01_01.jpg" alt="기능사"></div>
<div class="cbt__selects">
<input type="radio" id="select1">
<label for="select1"><span>클래스</span></label>
<input type="radio" id="select2">
<label for="select2"><span>메소드</span></label>
<input type="radio" id="select3">
<label for="select3"><span>상속</span></label>
<input type="radio" id="select4">
<label for="select4"><span>메시지</span></label>
</div>
<div class="cbt__desc">객체지향언어는 이다.</div>
<div class="cbt__answer"></div>
</div> -->
</div>
</div>
<div class="cbt__aside">
<div class="timesubmit">
<div class="cbt__time">남은 시간</div>
<button class="cbt__submit">답안지 제출하기</button>
</div>
<div class="quiz__score"></div>
<div class="cbt__info">
<div>
<div class="cbt__title">수험자 : <em class="cbt__name"></em></div>
<div class="cbt__score">
<span>전체 문제수 : <em class="cbt_length">0</em>문항<br></span>
<span>남은 문제수 : <em class="cbt__rest">0</em>문항</span>
</div>
</div>
<div class="cbt__omr">
<!-- <div class="omr">
<strong>1</strong>
<input type="radio" id="omr0_1">
<label for="omr0_1">
<span class="label-inner">1</span>
</label>
<input type="radio" id="omr0_2">
<label for="omr0_2">
<span class="label-inner">2</span>
</label>
<input type="radio" id="omr0_3">
<label for="omr0_3">
<span class="label-inner">3</span>
</label>
<input type="radio" id="omr0_4">
<label for="omr0_4">
<span class="label-inner">4</span>
</label>
</div> -->
</div>
</div>
</div>
<div class="cbt__start">
<div class="cbt__modal1">
<h2>기능사 시험 도전하기</h2>
<div class="cbt__choice">
<select name="cbtTime" id="cbtTime" onchange="changSelect(this)">
<option value="gineungsaJC2008_04">정보처리기능사 2008년 4회</option>
<option value="gineungsaJC2008_05">정보처리기능사 2008년 5회</option>
<option value="gineungsaJC2009_01">정보처리기능사 2009년 1회</option>
<option value="gineungsaJC2009_05">정보처리기능사 2009년 5회</option>
<option value="gineungsaJC2010_02">정보처리기능사 2010년 2회</option>
<option value="gineungsaJC2010_05">정보처리기능사 2010년 5회</option>
<option value="gineungsaJC2011_01">정보처리기능사 2011년 1회</option>
<option value="gineungsaJC2011_02">정보처리기능사 2011년 2회</option>
<option value="gineungsaJC2011_04">정보처리기능사 2011년 4회</option>
<option value="gineungsaJC2011_05">정보처리기능사 2011년 5회</option>
</select>
<select name="cbtTime" id="cbtTime" onchange="changSelect(this)">
<option value="gineungsaWD2013_05">웹디자인기능사 2013년 5회</option>
<option value="gineungsaWD2014_01">웹디자인기능사 2014년 1회</option>
<option value="gineungsaWD2014_04">웹디자인기능사 2014년 4회</option>
<option value="gineungsaWD2014_05">웹디자인기능사 2014년 5회</option>
<option value="gineungsaWD2015_01">웹디자인기능사 2015년 1회</option>
<option value="gineungsaWD2015_03">웹디자인기능사 2015년 3회</option>
<option value="gineungsaWD2015_04">웹디자인기능사 2015년 4회</option>
<option value="gineungsaWD2015_05">웹디자인기능사 2015년 5회</option>
<option value="gineungsaWD2016_01">웹디자인기능사 2016년 1회</option>
<option value="gineungsaWD2016_04">웹디자인기능사 2016년 4회</option>
</select>
</div>
<div class="cbt__view">
당신의 이름은 <input type="text" class="name">입니다.<br>
당신은 <span class="subject">기능사</span>를 선택했습니다.
</div>
<button class="cbt__start__btn">시작하기</button>
</div>
</div>
</div>
</main>
JAVASCRIPT
<script>
const cbtViewSubject = document.querySelector (".cbt__view .subject");
const cbtHeader = document.querySelector (".cbt__header h2");
const cbtStartBtn = document.querySelector (".cbt__start__btn");
const cbtTime = document.querySelector(".cbt__time");
const name = document.querySelector(".name");
const quizscored = document.querySelector(".quiz__score");
let quizScore = 0; //맞힌 문제수
let questionTime = "";
let questionTimeRemain = "615";
//시작하기
const startQuiz = () => {
const names = name.value;
document.querySelector(".cbt__name").innerText = names;
cbtStart.classList.add("hide"); //모달창 제거
quizscored.classList.add("hide"); //점수판 제거
//시간 설정
questionTime = setInterval(reduceTime, 1000);
}우선 선택자를 추가하였고 모달창에서 시작 버튼을 눌렀을 때 calss가 name인 곳에서 value값을 가져와 class가 cbt__na
me곳에 넣어 주도록 하였습니다. 그후 시간설정을 넣었습니다.
// 시간설정
const reduceTime = () => {
questionTimeRemain--;
if(questionTimeRemain == 0) endQuiz();
cbtTime.innerHTML = displayTime();
}
//시간 표시
const displayTime = () => {
if(questionTimeRemain <= 0){
return "0분 00초";
} else {
let minutes = Math.floor(questionTimeRemain / 60);
let seconds = questionTimeRemain % 60;
if(seconds < 10){
return minutes + "분" + "0" + seconds + "초";
}
return minutes + "분" + seconds + "초";
}
}
//게임 끝
const endQuiz = () => {
alert("시험이 끝났습니다.")
}
cbtStartBtn.addEventListener("click", startQuiz); //시작버튼
cbtSubmit.addEventListener("click", answerQuiz);
// dataQuestion();
</script>시간설정에서 reduceTime() 가 반복될때 마다 questionTimeRemain를 -1씩하여 감소를 해주고,
questionTimeRemain 값이 0이 될때 endQuiz()함수를 실행 합니다. 그후 시간표시 방식을 cbtTime 선택자에게 넘겨주면
시간 표시의 방식에 맞게 값을 불러 옵니다.
//문제 선택2
const changSelect = (e) => {
let selectValue = e.value;
let selectText = e.options[e.selectedIndex].text;
cbtViewSubject.innerHTML =selectText;
cbtHeader.innerHTML =selectText;
dataQuestion(selectValue);
} //데이터 가져오기
const dataQuestion = (value) => {
fetch(`https://kebab000.github.io/web2023/gineungsaJSON/${value}.json`) //json을가져옴
.then(res => res.json()) //fetch에서 가져온것을 res.json로 변경 하여 가져온후 실행
.then(items => { //가져온 json을 items로 변경보기체크 밑에 문제 선택을 만들어 class가 cbt__choice 인곳에 changSelect()를 가져와 곳의 value값과 text값을 변수로 저장하고 선택자로 지정 해논곳에 그값을 출력 하고 있습니다. 그 후 변수로 저장한 value값을 데이터 가져오기의 함수에 저장시켜 처음에 문제 선택을 했을때 value값에 맞는 json 데이터를 가져오도록 하였습니다.
// 정답 확인
const answerQuiz = () => {
const cbtSelects = document.querySelectorAll(".cbt__selects");
questionAll.forEach((question, number) => {
const quizSelectsWrap = cbtSelects[number];
const userSelector = `input[name=select${number}]:checked`;
const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
const numberAnswer = userAnswer ? userAnswer.slice(-1) : undefined;
// console.log(numberAnswer)
if (numberAnswer == question.answer) {
console.log("정답");
quizScore++;
cbtSelects[number].parentElement.classList.add("good");
} else {
console.log("오답");
cbtSelects[number].parentElement.classList.add("bad");
const label = cbtSelects[number].querySelectorAll("label");
label[question.answer].classList.add("correct");
}
//설명 숨기기
const quizDesc = document.querySelectorAll(".cbt__desc");
if (quizDesc[number].innerText == "undefined") {
quizDesc[number].classList.add("hide");
} else quizDesc[number].classList.remove("hide");
});
quizscored.innerText = Math.ceil((quizScore / questionLength) * 100) + "점 입니다.";
document.querySelector(".timesubmit").classList.add("hide")
quizscored.classList.remove("hide")
}사용자의 답과 실제 답이 맞았을때 quizScore를+1해주고 더해준 quizScore만큼 과문제의 총갯수를 나누고 *100을 하여 소수점은 math.ceil로 없애주었습니다. 그후 그값을 quizscored라는 선택자에게 보내줍니다.
정답확인을 눌렀을대 선택자가 timesubmit이라는 클라스에 hide를 넣어 없애주고 그자리를 quizscored가 나오게 해줍니다.
| setInterval() | JavaScript에서 제공되는 함수 중 하나로, 일정한 시간 간격으로 지정한 작업을 반복 실행할 수 있도록 해줍니다. setInterval() 함수는 두 개의 인수를 받습니다. 첫 번째 인수는 실행할 함수 또는 코드 블록이며, 두 번째 인수는 실행 간격을 밀리초 단위로 지정합니다. 예를 들어, setInterval(myFunction, 1000)은 myFunction() 함수를 1초마다 실행합니다. |