728x90
퀴즈퀴즈 사이트 만들기 ! ( 객관식유형 * 6문제 한번에 만들기 ver.2 )
이번엔 객관식 퀴즈 6문제가 있는 사이트를 만들어볼까해요
저번엔 각각 나오게 하였지만 이번엔 정답확인후 1문제씩 나오도록 할거에요 !
전체 소스는 요기
객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요
<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="wrapper">
<div class="dog__wrap ">
<div class="dog__total"></div>
<div class="true">정답입니다!</div>
<div class="false">오답입니다!</div>
<div class="card-container">
<div class="dog">
<!-- 강아지표현 -->
</div>
</div>
</div>
</div>
</div>
<div class="quiz__choice">
<!-- 객관식보기-->
</div>
<div class="quiz__answer">
<button class="confirm">점수 확인하기</button>
<button class="next">다음 문제</button>
</div>
<div class="quiz__desc">
</div>
</div>
</div>
</div>
<!-- <div class="quiz__check">정답 확인하기</div> -->
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:getgrovy@gmail.com">getgrovy@gmail.com</a>
</footer>html은 <script>에서 입력하기 때문에 위에처럼 간단한 해졌어요!
시험 정보 & 문제 & 보기 등등은 계속 반복되기때문에 <script>에서 반복해 줄거에요 !
그래서
아래처럼 값을 가진
quizInfo 배열 형태로 6문제를 만들었어요 !
const quizInfo = [
{
infoType:"웹디자인기능사",
infoTime:"2012년 2회",
infoNumber:"20120201",
infoQuestion: "입체에 대한 설명으로 옳지 않은 것은?",
infoChoice: [
"소극적 입체는 현실적 형, 확실히 지각되는 형을 말한다." ,"입체는 면이 이동한 자취이다.","두 면과 각도를 가진 방향으로 이동하거나 면의 회전에 의해 생긴다.","순수한 입체는 구, 원통, 육면체 등과 같은 형이다"
],
infoAnswer: "소극적 입체는 현실적 형, 확실히 지각되는 형을 말한다.",
infoDesc: "입체는 3차원 함수를 생각하면 쉬워요 ! 점, 선, 공간 <br>>>즉 공간 or 입체적인 느낌을 주는게 아닌것 찾기"
},
..........
,{
infoType:"웹디자인기능사",
infoTime:"2012년 2회",
infoNumber:"20120206",
infoQuestion: "색채를 과학적으로 정리하여 스펙트럼을 7색으로 분리한 사람은?",
infoChoice: [
"뉴턴" ,"먼셀","오스트발트","돈더스"
],
infoAnswer: "뉴턴",
infoDesc: "색7뉴턴 뉴턴새ㄱ71로 외웠어요 ^^ "
}
];위 문제를 + body 소스를 화면에 로딩될때 & 다음문제로 넘어갈때 넣어줄거에요
updateQuiz 함수를 호출해서 문제를 출력해줍니다. !
const updateQuiz = (index) =>{
//시험 정보가져오기
let typeTag = `
<span>${quizInfo[index].infoType}</span>
<em>${quizInfo[index].infoTime}</em>
`;
//문제 정보가져오기
let qustionTag= `
<em>${index+1}</em>.
<span>${quizInfo[index].infoQuestion}</span>
`;
//객관식 정보 가져오기
let choiceTag = `
<label for="choice1">
<input type="radio" id="choice1" name="choice" value="1">
<span class="choice">${quizInfo[index].infoChoice[0]}</span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span class="choice">${quizInfo[index].infoChoice[1]}</span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span class="choice">${quizInfo[index].infoChoice[2]}</span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span class="choice">${quizInfo[index].infoChoice[3]}</span>
</label>
`;
// 정답 해설 가져오기
let descTag =`
정답 : ${quizInfo[index].infoAnswer}<br>
해설 : ${quizInfo[index].infoDesc}<br>
`;
//가져온 정보를 innerHTML로 넣어준다
quizTitle.innerHTML=typeTag;
quizChoice.innerHTML=choiceTag;
quizQuestion.innerHTML=qustionTag;
quizDesc.innerHTML=descTag;
//상단에 문제갯수를 넣어 넣어준다
//총문제는 quizInfo 배열의 길이
//quizCount값은 quizInfo[quizCount] 이렇게 문제를 가져오기때문에 실질적인 문제의 count이다
dogTot.innerHTML=`남은문제 : ${quizInfo.length-quizCount-1}`;
//보기 선택자
const quizChoiceSpan = document.querySelectorAll(".quiz__choice span");
//정답 정답 해설 숨기기
quizDesc.style.display="none";
quizAnswer.style.display="none";
quizConfirm.style.display="none";
//강아지 초기화
dogWrap.classList.remove("dislike", "like");
//보기 선택자에서 setAttribute를 통해
//클릭시 choiceSelected(this)함수를 실행시킨다.
for(let i=0 ; i < quizChoiceSpan.length ; i++){
quizChoiceSpan[i].setAttribute("onclick", "choiceSelected(this)");
}
};choiceSelected(this)함수를 호출시킬때
this를 써서 객관식 답을 클릭 할때 마다 자신의 값을 가져오도록 하였어요 !
onclick이벤트를 스크립트로 추가한거에요 !
그래서 아래와 같이 설정할수있답니다
객관식 답안을 체크하는 로직 !
function choiceSelected(answer){
//유저가 선택한 답을 가져오는 userAnswer
let userAnswer = answer.textContent;
//배열에 들어있는 답을 가져오는 currentAnswer
let currentAnswer = quizInfo[quizCount].infoAnswer;
dogReset();
if(userAnswer == currentAnswer){
//정답일경우 quizScore 더해줘서 맞은갯수를 count 해줄거에요
dogWrap.classList.add("like");
quizScore++
}else {
dogWrap.classList.add("dislike");
}
//마지막문제일경우 점수확인하는 로직
if(quizCount == quizInfo.length-1 ){
quizDesc.style.display="block";
quizAnswer.style.display="block";
quizNext.style.display="none";
quizConfirm.style.display="block";
dogTot.innerHTML=`모든 문제를 풀었습니다. 점수를확인해주세여`;
}else{
quizDesc.style.display="block";
quizAnswer.style.display="block";
}
}
객관식 마지막문제엔 아래와 같이 문구를 넣어주고
몇 문제 맞췄는지& 점수가 얼만지 나오게했어요 !
오늘두 고생하셨어요 !