<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#top {
width: 800px;
height: 100px;
background-color: red;
}
#left {
width: 100px;
height: 800px;
background-color: orange;
float: left;
}
#mid {
width: 700px;
height: 800px;
background-color: yellow;
float: left;
}
#mid_mid {
width: 700px;
height: 700px;
background-color: thistle;
}
#mid_bot {
width: 700px;
height: 100px;
background-color: blue;
}
#bot {
width: 800px;
height: 100px;
background-color: green;
clear: left;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="mid">
<div id="mid_mid">
</div>
<div id="mid_bot">
<input type="text" placeholder="답 입력" id="answer">
<input type="button" id="btn_answer" value="확인">
</div>
</div>
<div id="bot"></div>
<script>
var currentAnswer = 1;
var midMid;
var answer;
var btnAnswer;
var playerAnswer; //answer.value값을 담기 위한 전역변수
// 문제 제목,내용,정답
var m_t_01 = "빈 칸에 들어갈 내용은?";
var m_t_02 = "소프트웨어 아키텍처의 활용에 대한 내용 중 틀린 것은?";
var m_c_01 = "( ______ )는 개발하고자 하는 소프트웨어의 사전 작업을 통하여 소프트웨어 개발을 쉽게 하도록 기본 틀을 만드는 것으로, 복잡한 개발을 체계적으로 접근하기 위 한 밑그림이라 할 수 있다. 학술적인 정의로는 권도형(2004)에 따르면 소프트웨어를 구 성하는 컴포넌트들의 상호 작용 및 관계, 각각의 특성을 기반으로 컴포넌트들이 상호 유기적으로 결합하는 소프트웨어의 진화를 위한 여러 가지 원칙들의 집합이라고 할 수 있다.";
var m_c_02 = "1. 비교적 간단한 소프트웨어를 개발할 때에는 완성해야 하는 목적과 기능을 중점으로 설계하여도 품질에는 큰 문제가 없다. <br> "
+ "2. 소프트웨어의 기능이 복잡, 다양해짐에 따라, 그 기능을 목적에 알맞게 정의하여 분류하여야 하는 명제를 안게 되었다. <br>"
+ "3. 분류된 기능이 세분화되면 상호 간에 유기적으로 통합하는 과정이 매우 쉬워진다. <br>"
+ "4. 완전한 소프트웨어를 개발하기 위하여 각각의 기능적 특성을 사전에 파악하여 요구 분석 단계부터 설계 단계까지 분류된 기능과 함께 종합적인 시각으로 판단하는 것이 매우 필요해진다. <br>";
var m_a_01 = "고양이";
var m_a_02 = "개";
//--------------------------------------------------------------------
//배열선언 문제
var arr1 = ["빈 칸에 들어갈 내용은?", "고양이"];
var arr2 = ["소프트웨어 아키텍처의 활용에 대한 내용 중 틀린 것은?", "1. 비교적 간단한 소프트웨어를 개발할 때에는 완성해야 하는 목적과 기능을 중점으로 설계하여도 품질에는 큰 문제가 없다. <br> ", "2. 소프트웨어의 기능이 복잡, 다양해짐에 따라, 그 기능을 목적에 알맞게 정의하여 분류하여야 하는 명제를 안게 되었다. <br>", "3. 분류된 기능이 세분화되면 상호 간에 유기적으로 통합하는 과정이 매우 쉬워진다. <br>", "4. 완전한 소프트웨어를 개발하기 위하여 각각의 기능적 특성을 사전에 파악하여 요구 분석 단계부터 설계 단계까지 분류된 기능과 함께 종합적인 시각으로 판단하는 것이 매우 필요해진다. <br>"];
function btnClick() {
switch (currentAnswer) {
case 1:
//todo 플레이어 답과 컴퓨터의 답을 비교하기. playerAnswer , m_a_01
playerAnswer = answer.value;
if (playerAnswer == m_a_01) {
alert("정답");
} else {
alert("오답");
}
// 두번째 문제 내기
midMid.innerHTML = m_t_02;
midMid.innerHTML = m_c_02;
break;
case 2:
// 두번째 문제의 처리
// 2번문제에 대한 플레이어의 답과 컴퓨터의 답을 비교
playerAnswer = answer.value; //2번째 플레이어가 입력한 답을 인풋박스로부터 가져오기
if (playerAnswer == m_a_02) {
alert("정답");
} else {
alert("오답");
}
break;
}
currentAnswer = currentAnswer + 1;
}
window.onload = function () {
midMid = document.getElementById("mid_mid"); //문제 내용 표시 영역
answer = document.getElementById("answer"); //문제 답 입력 표시 영역
btnAnswer = document.getElementById("btn_answer"); // 답 전송 버튼 표시 영역
btnAnswer.onclick = btnClick; //클릭하면, btnClick 함수로!
midMid.innerHTML = m_t_01; //midTop에 m_t_01에 저장되어 있는 제목을 뿌려준다.
midMid.innerHTML = m_c_01; //midMid에 m_c_01에 저장되어 있는 내용을 뿌려준다.
}
</script>
</body>
</html>
'구트아카데미 > 3. 자바스크립트' 카테고리의 다른 글
| 자바스크립트. 함수 리턴 (0) | 2021.06.28 |
|---|---|
| [자바스크립트] 가위바위보 게임 (0) | 2021.06.26 |
| [자바스크립트] 주사위게임 (0) | 2021.06.23 |
| [자바스크립트] 계산기 만들기 (0) | 2021.06.22 |
| [자바스크립트] 주사위 게임 (0) | 2021.06.22 |