본문 바로가기
대학교/2.웹프로그래밍

[명품 웹 프로그래밍] 10장 연습문제

by Jcoder 2017. 6. 3.

3번, 6번, 8번 실습문제 제출하세요.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>산수를 풀어봅시다</title>
	<style>
		@import "CSS_JS/8.css";	
	</style>
	<script src="CSS_JS/8.js">
	</script>	
	</head>
	<body onload="ontime(), make()">
		<h3>산수 문제를 풀어 봅시다.</h3>
		문제는 자동으로 생성되며, 10초가 지나면 자동 채점됩니다.
		<div>
			남은 시간 <span id="time">0</span>
		</div>
		<hr>
		<form>
			<table>
				<tr>	
					<td class="one"></td>
					<td><input class="two" type="text" size="6"></td>
				</tr>
				<tr>
					<td class="one"></td>
					<td><input class="two" type="text" size="6"></td>
				</tr>
				<tr>
					<td class="one"></td>
					<td><input class="two" type="text" size="6"></td>
				</tr>
				<tr>
					<td class="one"></td>
					<td><input class="two" type="text" size="6"></td>
				</tr>
				<tr>
					<td><button type="button" onclick="ontime(), make()">다시</button></td>
					<td><span id="grade">0</span>&nbsp;&nbsp;&nbsp;&nbsp;</td>
				</tr>
			</table>
		</form>
	</body>
</html>

8.css
		td
		{
			padding-left : 13px;
			padding-right : 13px;
		}
8.js
		var show=null, count;
		function ontime()	//시간 카운트
		{
			document.getElementById("grade").innerHTML = 0;
			var time = document.getElementById("time");
			count = 10;
			if(show != null)
				clearTimeout(show);
			outtime(time);
		}
		function outtime(cls)	//점점 시간이 줄어드는 함수
		{
			count--;
			cls.innerHTML = count;
			if(count != 0)
				show = setTimeout("outtime(time)", 1000);
			else 
				correct();	// 0이 되면 채점을 하는 함수
		}
		function make()	//문제 만들기 함수
		{
			var one = document.getElementsByClassName("one");
			var two = document.getElementsByClassName("two");
			for(i=0; i<one.length; i++)
			{
				var num1 = Math.floor(Math.random()*99);	//첫 번째 랜덤 넘버
				var num2 = Math.floor(Math.random()*99);	//두 번째 랜던 넘버
				var op = Math.floor(Math.random()*4);		// 연산자를 랜덤으로 하기 위해서 상수화를 하고 switch를 써서 연산자를 정한다.
				var operator;
				
				switch(op)
				{
					case 0 : operator = "+"; 
						break;
					case 1 : operator = "-"; 
						break;
					case 2 : operator = "*"; 
						break;
					case 3 : operator = "/"; 
						break;
				}
				one[i].innerHTML = num1 + operator + num2;	// 문제 출력
			}
		}
		function correct()	//채점 함수
		{
			var countgrade = 0;	// 채점 개수
			var one = document.getElementsByClassName("one");
			var two = document.getElementsByClassName("two");
			for(i=0; i<one.length; i++)
			{
				var question = one[i].innerHTML;
				var answer = two[i].value;
				var correct = Math.floor(eval(question));
				if(parseInt(answer) == correct)	//정답이면 개수 +1
					countgrade += 1;
				else if(answer=="")	//비어 있으면 틀림
					one[i].style.textDecoration = "line-through";
				else if(isNaN(answer))// 숫자가 아니면 틀림
					one[i].style.textDecoration = "line-through";
				else// 정답이 틀리면 틀림
					one[i].style.textDecoration = "line-through";
			}
			document.getElementById("grade").innerHTML = countgrade;	// 정답 개수 출력


저작자표시

'대학교 > 2.웹프로그래밍' 카테고리의 다른 글

학과 홈페이지  (0) 2018.05.14
자기소개 홈페이지  (0) 2018.05.14
[명품 웹 프로그래밍] 9장 연습문제 //html 계산기 만들기  (0) 2017.06.03
[명품 웹 프로그래밍] 8장 연습문제  (3) 2017.06.03
[명품 웹 프로그래밍] 7장 연습문제  (0) 2017.06.03

관련글

티스토리툴바