728x90
- 오늘은 객관식 문제를 풀 수 있는 사이트를 만들어 보겠습니다.
- 바로 코드로 넘어가 보도록하죠
<!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>퀴즈 이펙트03</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 class="active"><a href="quizEffect04.html">4</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<div class="qiuz__header">
<h2 class="quiz__title"></h2>
</div>
<div class="qiuz__main">
<div class="qiuz__question">
</div>
<div class="qiuz__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" name="choice" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span></span>
</label>
</div>
<div class="quiz__answer">
<button class="confirm">정답 확인하기</button>
</div>
<div class="quiz__desc"></div>
</div>
</div>
<!-- // 1번 문제 -->
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:im.kebab00@gmail.com">im.kebab00@gmail.com</a>
</footer>
<!-- //footer -->
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title"); // 시험 종목&시간
const quizQuestion = quizWrap.querySelector(".qiuz__question") // 문제 질문
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span") // 보기
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input") // 보기
const quizDesc = quizWrap.querySelector(".quiz__desc") // 정답 해설
const quizAnswer = quizWrap.querySelector(".quiz__answer"); //정답공간
const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm"); //정답버튼
const dogWrap = quizWrap.querySelector(".dog__wrap");
// 문제 정보
const quizInfo = [
{
infoType : "웹디자인 기능사" ,
infoTime : "2016년 4회" ,
infoNumber : "1",
infoQuestion : "다음 중 디자인의 기본 요소들로 옳은 것은?",
infoChoice : ["선, 색채, 공간, 수량", "점, 선, 면, 질감","시간, 수량, 구조, 공간", "면, 구조, 공간, 수량"],
infoAnswer: "2",
infoDesc : "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다.",
}
]
// 문제 출력
function updateQuiz(){
quizTitle.innerHTML = quizInfo[0].infoType +" "+ quizInfo[0].infoTime;
quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber +"</em>. "+quizInfo[0].infoQuestion;
quizDesc.innerHTML = quizInfo[0].infoDesc;
for(let i=0; i<4; i++){
quizChoice[i].innerHTML = quizInfo[0].infoChoice[i];
};
// 해설 숨기기
quizDesc.style.display = "none";
}
// 정답 확인
function answerQuiz(){
// 사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
for(let i=0; i<quizChoice.length; i++){
if(quizSelect[i].checked == true){ // 사용자가 보기를 체크한 상태
if(quizSelect[i].value == quizInfo[0].infoAnswer){
dogWrap.classList.add("like");
} else{
dogWrap.classList.add("dislike");
}
// 해설보이기
quizDesc.style.display = "block";
// 정답숨기기
quizAnswer.style.display = "none";
}
}
}
quizConfirm.addEventListener("click",answerQuiz);
updateQuiz(); //문제 출력
</script>
</body>
</html>- 먼저 HTML부분에 달라진 부분이 있습니다. 바로 <label>,<input>,<span>태그들을 이용해서 선택할 상자들을 만들어 주었습니다.
- <input>태그의 type에 button,checkbox등의 속성을 넣으면 원하는 방식으로 데이터를 입력받을 수 있습니다.
- 그리고 id는 다르게 했지만 name은 같은 값을 주어 4개 중에 하나만 선택이 가능하도록 만들어 주었습니다.
- value는 눌렀을 때 입력되는 데이터를 JavaScript 등의 스크립트에서 수집하거나 서버로 전송하는 등의 작업에 사용됩니다.
- 이렇게 input 태그를 통해서 주관식 문제를 객관식 문제로 바꾸어주었습니다.
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title"); // 시험 종목&시간
const quizQuestion = quizWrap.querySelector(".qiuz__question") // 문제 질문
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span") // 보기
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input") // 보기
const quizDesc = quizWrap.querySelector(".quiz__desc") // 정답 해설
const quizAnswer = quizWrap.querySelector(".quiz__answer"); //정답공간
const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm"); //정답버튼
const dogWrap = quizWrap.querySelector(".dog__wrap");
// 문제 정보
const quizInfo = [
{
infoType : "웹디자인 기능사" ,
infoTime : "2016년 4회" ,
infoNumber : "1",
infoQuestion : "다음 중 디자인의 기본 요소들로 옳은 것은?",
infoChoice : ["선, 색채, 공간, 수량", "점, 선, 면, 질감","시간, 수량, 구조, 공간", "면, 구조, 공간, 수량"],
infoAnswer: "2",
infoDesc : "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다.",
}
]
// 문제 출력
function updateQuiz(){
quizTitle.innerHTML = quizInfo[0].infoType +" "+ quizInfo[0].infoTime;
quizQuestion.innerHTML = "<em>"+quizInfo[0].infoNumber +"</em>. "+quizInfo[0].infoQuestion;
quizDesc.innerHTML = quizInfo[0].infoDesc;
for(let i=0; i<4; i++){
quizChoice[i].innerHTML = quizInfo[0].infoChoice[i];
};
// 해설 숨기기
quizDesc.style.display = "none";
}
// 정답 확인
function answerQuiz(){
// 사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
for(let i=0; i<quizChoice.length; i++){
if(quizSelect[i].checked == true){ // 사용자가 보기를 체크한 상태
if(quizSelect[i].value == quizInfo[0].infoAnswer){
dogWrap.classList.add("like");
} else{
dogWrap.classList.add("dislike");
}
// 해설보이기
quizDesc.style.display = "block";
// 정답숨기기
quizAnswer.style.display = "none";
}
}
}
quizConfirm.addEventListener("click",answerQuiz);
updateQuiz(); //문제 출력
</script>
- 스크립트 부분입니다. 선택자를 보게되면 객관식의 선택하는 부분을 제외한 나머지 부분은 하나이기 때문에 querySelector를 써주었습니다.
- 그리고 quiz.Info 배열 안에 객체를 넣고 그 안에 문제에 대한 정보를 넣어주었습니다.
- 그 후 문제를 출력해 주었는데 updateQuiz라는 함수 안에 문제를 입력하는 실행문을 넣고 함수를 실행시켜 주었습니다.
- 선택하는 부분은 4개가 나오기 때문에 4개를 따로 적지않고 for문을 통해서 4번 반복시켜주었습니다.
- 그리고 정답을 확인하는 함수를 만들어 주었습니다.
- quizSelect[].checked 는 사용자가 보기를 체크하였는지 아닌지에 따라 true/false값을 알려줍니다.
- 그 안에 i 값을 넣어주어 사용자가 몇 번을 선택하였는지 알려주는 것입니다. 그리고 그 선택한 값에 정답인지 아닌지는 뒤에 if문을 통해 판단을 하게 됩니다. 만약 선택한 답이 정답이면 강아지에게 like라는 클라스 값이 부여되어 웃는 강아지가 되고 틀렸을 땐 dislike라는 클라스 값이 부여되어 우는 강아지가 됩니다.
- 그리고 마지막으로 quizConfirm.addEventListener("click",answerQuiz); 를 써서 클릭되었을 때 함수가 실행되도록 해주면 끝입니다.
- 강아지가 참 귀엽네요 ㅎㅎ