메인메뉴 바로가기

HOME으로 가기


Javascript

사용자함수 | 퀴즈게임: 카드뒤집기

본문

 

 

<div id="box_q">

<h3>Question</h3>

<p>※ 문제 나오는 곳</p>

</div>

 

<div id="btn_qa"><!--  자바스크립트 사용 버튼 삽입 --></div>

 

<div id="box_a">

<h3>Answer</h3>

<p>※ 답 확인하는 곳</p>

</div>

 

 

-----------------------------------------------------

 

 

//질문답변카드 객체형함수

var QA = {

data : {
Q1: "우리나라 겨울철에 주로 영향을 주는 기단은?" ,
A1: "시베리아 기단",

Q2: "달에서 무거운 우주복을 입고도 가볍게 활동할 수 있는 이유는 달에서는 지구보다 ○○이 작기 때문이다." ,
A2: "중력",

Q3: "지구 위에서 낙하하는 물체의 속력이 증가하는 정도를 무엇이라 하는가?" ,
A3: "중력가속도",

Q4: "우리 몸의 체온이 일정하게 유지되도록 하는 뇌는 어디인가?" ,
A4: "간뇌",

Q5: "그리스문자의 처음은 알파. 그럼 마지막 문자는?" ,
A5: "오메가",

Q6: "가벼우면서도 단단하고 부식이 잘 되지 않는 금속으로 특히 항공기 제작에 많이 사용되는 원소는 무엇인가? " ,
A6: "티타늄",
Q7: "연날리기를 할 때, 연줄을 감았다 풀었다 하는 기구를 무엇이라 하는가?" ,
A7: "얼레",
Q8: "행성이 별 주위를 도는 것 또는 위성이 행성 주위를 도는 것을 무엇이라고 하는가?" ,
A8: "공전",
Q9: "물을 전기분해해서 얻을 수 있고 우주선 발사로켓의 연료로 사용되는 원소는 무엇인가?" ,
A9: "수소",
Q10: "하루동안 별자리의 위치가 달라지는 까닭은 지구의 무엇 때문인가?" ,
A10: "자전"
},

now : { qa : null, no : null }, //현재 선택된 버튼종류와 번호 저장소
btn : { Q : null, A : null }, //버튼객체 저장소

//초기 시작함수
init : function(){
this.resetBtn();
},

//버튼리셋
resetBtn : function(){

var num = [];
var cnt = 0;
for(var key in this.data) num[cnt++] = key;

//랜덤하게 QA버튼 생성
for( var i=0; i<cnt; i++){
var rand = Math.floor( Math.random()*num.length );
$("#btn_qa").append("<button id='"+num[rand]+"' value='"+num[rand]+"' class='"+num[rand].substr(0,1)+"'>"+num[rand].substr(0,1)+"</button>");
num.splice(rand,1);
}

//버튼 클릭 이벤트핸들러
$("#btn_qa>button").click(function(){

var v = $(this).val();
//같은 Q종류버튼 연달아 클릭시 무효화..
if( QA.now.qa == v.substr(0,1) && QA.now.no != v.substring(1) ) return false;

$(this).toggleClass("on");

//선택된 버튼객체 저장( 
if( $(this).hasClass("on") ){
QA.btn[v.substr(0,1)] = this;
QA.setMent( v, 1 );
}else{
QA.btn[v.substr(0,1)] = null;
QA.setMent( v );
}
});

},

//문제 및 답변 화면에 표시 
setMent : function(v, mode){
if(v.substr(0,1)=="Q") {
if(mode) {
$("#box_q>p").html(this.data[v]);
$("#box_q>p").effect( "highlight", 1000); //문제 표시 모션
$("#btn_qa>button.Q").css({"opacity":"0.1"}); //문제선택 시 다른 Q버튼 비활성표시
$(QA.btn.Q).css({"opacity":"1"}); //선택된 Q버튼 활성표시
this.resultAnswer("Q",v.substring(1));
}else{
$("#box_q>p").html("-");
$("#btn_qa>button.Q").css({"opacity":"1"}); //Q취소되면 모든Q버튼 활성표시
this.now.qa = null; 
this.now.no = null; 
}
}else{
if(mode) {
$("#box_a>p").html(this.data[v]);
$("#box_a>p").effect( "highlight", 1000); //답 표시 모션
this.resultAnswer("A",v.substring(1));
}else{
$("#box_a>p").html("-");
this.now.qa = null; 
this.now.no = null; 
}
}
},

//답변 결과처리
resultAnswer : function(qa,no){
console.log("this.now.qa : "+this.now.qa);
console.log("this.now.no : "+this.now.no);
console.log("qa : "+qa+", no : "+no);

if(qa == "A") {
if( this.now.qa=="Q" && this.now.no == no) {
alert("정답!!");
this.passBtn();
}else{
//alert("틀렸어용!!");
this.restoreBtn(0,1);
}
}else if(qa == "Q"){
if(this.now.qa == "Q" && this.now.no != null) {
alert("답을 선택하세요!!");
this.restoreBtn(1,0);
}else{
this.now.no = no; 
this.restoreBtn(0,0,"Q");
}
}else{
if(this.now.qa == "A"){
alert("문제를 선택하세요!!");
this.restoreBtn(0,1);
}else{
this.restoreBtn(0,0,"Q");
}
}
},

//결과에 따른 버튼상태 복귀
restoreBtn : function(q,a,now){
if(q){
$(QA.btn.Q).removeClass("on");
QA.btn.Q = null;
}
if(a){
$(QA.btn.A).removeClass("on");
$(QA.btn.A).effect( "highlight", 500);
QA.btn.A = null;
}
if(now) this.now.qa = now; 
},

//통과한 버튼은 사라짐.
passBtn : function(){

//깜빡이 모션
$(QA.btn.Q).effect( "pulsate", 700, function(){
$(QA.btn.Q).addClass("h");
});
$(QA.btn.A).effect( "pulsate", 700, function(){
$(QA.btn.A).addClass("h");
});

this.now.qa = null;
this.now.no = null;

$("#btn_qa>button.Q").css({"opacity":"1"}); //초기값으로 모든 Q버튼 활성표시

}
}

QA.init();
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기