퀴즈 프로그램 도와 주세요ㅠ.ㅠ
본문
그누보드를 이용해서 퀴즈를 만들고 있습니다~
원본소스
https://codepen.io/tgallimore/pen/xwGOXB?q=quiz&limit=all&type=type-pens
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<div class="quiz">
<h3 class="quiz-question">Q1: 다음 중에서 <부치는> 것은?</h3>
<ul data-quiz-question="1">
<li class="quiz-answer" data-quiz-answer="a">a. 우표</li>
<li class="quiz-answer" data-quiz-answer="b">b. 짐</li>
<li class="quiz-answer" data-quiz-answer="c">c. 밥풀</li>
</ul>
<h3 class="quiz-question">Q2: 삼결삽은 황사예방 등 먼지제거에 좋은 음식이다.(O.X)</h3>
<ul data-quiz-question="2">
<li class="quiz-answer" data-quiz-answer="a">O</li>
<li class="quiz-answer" data-quiz-answer="b">X</li>
</ul>
<h3 class="quiz-question">Q3: 축구에서 드로잉한 공이 그대로 들어가면 골로 인정된다. (O,X)</h3>
<ul data-quiz-question="3">
<li class="quiz-answer" data-quiz-answer="a">O</li>
<li class="quiz-answer" data-quiz-answer="b">X</li>
</ul>
<h3 class="quiz-question">Q4: 서방님의 '서방'의 본래 뜻은 벼슬을 한 남자를 뜻한다. (O,X)
답은? </h3>
<ul data-quiz-question="4">
<li class="quiz-answer" data-quiz-answer="a">O</li>
<li class="quiz-answer" data-quiz-answer="b">X</li>
</ul>
<h3 class="quiz-question">Q5: 소설이자 디즈니 애니메이션으로도 나온 <정글북>의 주인공은?</h3>
<ul data-quiz-question="5">
<li class="quiz-answer" data-quiz-answer="a">a. 아시아인</li>
<li class="quiz-answer" data-quiz-answer="b">b. 유럽인</li>
<li class="quiz-answer" data-quiz-answer="c">c. 아메리카인</li>
</ul>
<h3 class="quiz-question">Q6:속담 <벙어리 웃는 뜻은 (____) 욕하자는 뜻이다> 빈칸은?</h3>
<ul data-quiz-question="6">
<li class="quiz-answer" data-quiz-answer="a">a. 양반</li>
<li class="quiz-answer" data-quiz-answer="b">b. 수다쟁이</li>
<li class="quiz-answer" data-quiz-answer="c">c. 청맹과니</li>
</ul>
<h3 class="quiz-question">Q7: 축구에서 가장 흥미진진한 게임 스코어는 3대2 이다. (O,X)
답은?</h3>
<ul data-quiz-question="7">
<li class="quiz-answer" data-quiz-answer="a">O</li>
<li class="quiz-answer" data-quiz-answer="b">X</li>
</ul>
</div>
<div class="quiz-result"></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="<?php echo G5_URL;?>/page/q3/js/index.js"></script>
</body>
</html>
<link rel="stylesheet" href="<?php echo G5_URL;?>/page/q3/css/style.css">
index.js
var Quiz = function(){
var self = this;
this.init = function(){
self._bindEvents();
}
this.correctAnswers = [
{ question: 1, answer: 'b' },
{ question: 2, answer: 'b' },
{ question: 3, answer: 'b' },
{ question: 4, answer: 'b' },
{ question: 5, answer: 'a' },
{ question: 6, answer: 'a' },
{ question: 7, answer: 'a' },
]
this._pickAnswer = function($answer, $answers){
$answers.find('.quiz-answer').removeClass('active');
$answer.addClass('active');
}
this._calcResult = function(){
var numberOfCorrectAnswers = 0;
$('ul[data-quiz-question]').each(function(i){
var $this = $(this),
chosenAnswer = $this.find('.quiz-answer.active').data('quiz-answer'),
correctAnswer;
for ( var j = 0; j < self.correctAnswers.length; j++ ) {
var a = self.correctAnswers[j];
if ( a.question == $this.data('quiz-question') ) {
correctAnswer = a.answer;
}
}
if ( chosenAnswer == correctAnswer ) {
numberOfCorrectAnswers++;
// highlight this as correct answer
$this.find('.quiz-answer.active').addClass('correct');
}
else {
$this.find('.quiz-answer[data-quiz-answer="'+correctAnswer+'"]').addClass('correct');
$this.find('.quiz-answer.active').addClass('incorrect');
}
});
}
this._isComplete = function(){
var answersComplete = 0;
$('ul[data-quiz-question]').each(function(){
if ( $(this).find('.quiz-answer.active').length ) {
answersComplete++;
}
});
if ( answersComplete >= 7 ) {
return true;
}
else {
return false;
}
}
this._showResult = function(result){
$('.quiz-result').addClass(result.code).html(result.text);
}
this._bindEvents = function(){
$('.quiz-answer').on('click', function(){
var $this = $(this),
$answers = $this.closest('ul[data-quiz-question]');
self._pickAnswer($this, $answers);
if ( self._isComplete() ) {
// scroll to answer section
$('html, body').animate({
scrollTop: $('.quiz-result').offset().top
});
self._showResult( self._calcResult() );
$('.quiz-answer').off('click');
}
});
}
}
var quiz = new Quiz();
quiz.init();
style.css
body {
margin: 0;
padding: 20px;
}
.quiz {
padding: 10px
margin: 0 auto;
}
.quiz ul {
list-style: none;
padding: 0;
margin: 0;
}
.quiz-question {
font-weight: bold;
display: block;
padding: 30px 0 10px 0;
margin: 0;
}
.quiz-answer {
margin: 0;
padding: 10px;
background: #f7f7f7;
margin-bottom: 5px;
cursor: pointer;
}
.quiz-answer:hover {
background: #eee;
}
.quiz-answer:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #ccc;
background: #fff;
vertical-align: middle;
margin-right: 10px;
}
.quiz-answer.active:before {
background-color: #333;
border-color: #333;
}
.quiz-answer.correct:before {
background-color: green;
border-color: green;
}
.quiz-answer.incorrect:before {
background-color: red;
border-color: red;
}
.quiz-answer.active.correct:before {
outline: 2px solid green;
outline-offset: 2px;
}
.quiz-result {
max-width: 960px;
margin: 0 auto;
font-weight: bold;
text-align: center;
color: #fff;
padding: 20px;
}
.quiz-result.good {
background: green;
}
.quiz-result.mid {
background: orange;
}
.quiz-result.bad {
background: red;
}
오답일 경우 "불은색"
정답일경우"초록색"
으로 표시가 되고있습니다
이부분에서 오답일 경우
해설 내용을 보여 주려 합니다
정답을 구분하는 부분은
this.correctAnswers = [
{ question: 1, answer: 'b' },
{ question: 2, answer: 'b' },
{ question: 3, answer: 'b' },
{ question: 4, answer: 'b' },
{ question: 5, answer: 'a' },
{ question: 6, answer: 'a' },
{ question: 7, answer: 'a' },
이부분에 무언가의 값을주고
index.html에서 뿌려 주면 될거 같은데....
실력이 부족해서...
답변 2
{ question: 1, answer: 'b' , 부연설명: '내용' },추가하신후
틀렸을경우 아래 추가니깐
$this.find('.quiz-answer.active').addClass('incorrect');
적당한 자리잡아서 보여주면되겠네요
정답이 노출되어있으니 display:block 처리해줘도될듯하구요
알려 주신대로~~^.^
this.correctAnswers = [
{ question: 1, answer: 'b',부연설명: '내용'},
{ question: 2, answer: 'b' },
{ question: 3, answer: 'b' },
{ question: 4, answer: 'b' },
{ question: 5, answer: 'a' },
{ question: 6, answer: 'a' },
{ question: 7, answer: 'a' },
이렇게 적용을 해보았습니다~^.^
그런데...
$this.find('.quiz-answer.active').addClass('incorrect');
이부분은 어떻게 해야할찌.... 제가 너무 초보라....
그루구.... display:block 처리는 어떻게 해야할찌.....
염치없지만... 한번더 부탁드려두 될까요?
.incorrect {display:block}이렇게 하면되지 않아요? css로 해서 논 블록 처리 가능해요
제가 초보라... 이해가부족해서...
css에서
.incorrect {display:block}
이렇게 처리하고
index.html 에서
BlueAngel 님께서
알려주신
부가설명(해설)부분을 불러 오는 방법을 잘 몰라서...
혹시 알려 주실수?
구글링 검색을 통해
오답 일 경우
index.js파일에
부분을 추가하였더니 answer: 'b' 값(정답값) 만 가져 오는데...
예) 정답:b
오답 일 경우
else {
$this.find('.quiz-answer[data-quiz-answer="'+correctAnswer+'"]').addClass('correct');
$this.find('.quiz-answer.active').addClass('incorrect');
var msgHTML = '[정답:"'+correctAnswer+'"]';
$(this).append(msgHTML);
index.js파일에
this.correctAnswers = [
{ question: 1, answer: 'b' , 부연설명: '내용' },
{ question: 2, answer: 'b' },
{ question: 3, answer: 'b' },
{ question: 4, answer: 'b' },
{ question: 5, answer: 'a' },
{ question: 6, answer: 'a' },
{ question: 7, answer: 'a' },
var msgHTML = '[정답:"'+correctAnswer+'"]';
$(this).append(msgHTML);
부분을 추가하였더니 answer: 'b' 값(정답값) 만 가져 오는데...
예) 정답:b
뒷에있는 " 부연설명: '내용' " 이부분은 도저희 가져오는 방법을 몰라서
해매고 있습니다...
도와 주세요
ㅠ.ㅠ
답변을 작성하시기 전에 로그인 해주세요.
