2006년 09월 10일
405lab의 해리슨의 질문으로 시작된 간단한 자바스크립트 요청
1. 초기 질문 : 보기가 o,x형태의 퀴즈에서 맞으면 "딩동~맞았습니다.", 틀리면 "댕~틀렸습니다."라는 사운드가 재생되는 플래시를 레이어로 연결. 3번이상 레이어가 나오면 소리가 안남.
2. 파일을 넘겨 받음 : 자바스크립트의 문제가 아닌 플래시의 재생이 끝나버려서 생기는 문제임을 파악.
3. 처리 : 플래시파일을 이미 불러온채로 레이어를 보여주고 없애는 상황(현재문제)에서 div 레이어를 이용해서 플래시를 항상 재생하도록 할것
기존의 레이어를 지우고 새롭게 다음과 같이 레이어를 구성했다.
<div id="answer_check" style="position:absolute;height:65px;DISPLAY:none; z-index:1; left: 248px; top: 17px; width: 141px; cursor:hand;" onClick="answer_check_div_close();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="answer_img"></div></td>
</tr>
<tr>
<td><div id="answer_flash"></div></td>
</tr>
</table>
</div>
그리고 자바스크립트는 아래와 같이 구성
function result() { //정답보기
var currect_a = 맞았을때 플래시;
var incurrect_a = 틀렸을때 플래시;
var currect_img = 맞았을때 이미지;
var incurrect_img = 틀렸을때 이미지;
var answer_check = document.getElementById("answer_check");
var answer_flash = document.getElementById("answer_flash");
var answer_img = document.getElementById("answer_img");
if(document.frm.mun1.value == "") {
alert("아직 풀지 않은 문제가 있습니다.
문제를 다 푼 후 정답을 확인해 주세요.");
} else {
if(document.frm.mun1.value == okdap1){
crnum(okdap1,1);
answer_flash.innerHTML = currect_a;
answer_img.innerHTML = currect_img;
} else {
xnum(document.frm.mun1.value,1);
answer_flash.innerHTML = incurrect_a;
answer_img.innerHTML = incurrect_img;
}
answer_check.style.display = "block";
}
}
function answer_check_div_close() {
var answer_check = document.getElementById("answer_check");
var answer_flash = document.getElementById("answer_flash");
var answer_img = document.getElementById("answer_img");
answer_img.innerHTML = "";
answer_flash.innerHTML = "";
answer_check.style.display = "none";
}
얼마전에 산 ajax관련 책 덕에 위와같은 레이어 구성도 유효하게 되었다는것을 알았고 그것을 당장 써먹어보니 재미있다는 생각도 든다.
비록 수준은 그렇게 높은 편은 아니지만, 어쩐지 AJAX의 세계로 한걸음 걸어든것같아 기쁘다.(이게?)
PS : 언젠가 얘기했지만... 저런 변수명 정말 개인적으로 저질이다.
dap : 이게 답이라는 변수명
또다른 스크립트 함수명
onum, cnum, crnum, rnum... 이게 뭐냐고...
PS2 : 오히려 더 복잡하게 된게 아닌가 싶기도 하지만.....문제 해결을 위한 어쩔수없는 방법이었다고나 할까...
# by ITSME | 2006/09/10 20:28 | 트랙백(100) | 덧글(73)