자바스크립트 사칙 연산 퀴즈

Notice

Recent Posts

Recent Comments

Link

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

개키우는개발자 : )

자바스크립트 사칙 연산 퀴즈 본문

JavaScript/Code Note

자바스크립트 사칙 연산 퀴즈

DOGvelopers 2019. 5. 11. 08:41

예전에 지인의 과제를 도와드렸던 문제입니다.

html , css를 너무 대충한 느낌이..ㅋㅋ 양해 좀요 ^^

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>Dogveloper</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="js/script.js"></script>
        <style>
            .name{text-align: right;}
            ol{padding:0;}
            ol > li{color:#888;padding:5px;}
            ol > li::after{clear: both;content:"";display: block;}
            label{padding-left:15px;color:#333;}
            .fail{background-color:red;color:#fff;}
            strong{color:red;}
            #resultarea p{text-align: left !important;color: #888;font-size: 0.8em;margin-top: 0;}
        </style>
	</head>
	<body>
		<div id="wrapper">
            <section>
                <form>
                    <fieldset>
                        <legend>사칙 연산 퀴즈</legend>
                        <p>자신의 이름과 제시된 연산의 답을 입력 한 후<br/>완료 버튼을 눌러주세요.</p>
                        <div class="name">
                            <label for="name">이름 : </label>
                            <input type="text" id="name" name="name"/>
                        </div>
                        <ol>
                            <li>
                                <label for="add">5 + 6 = </label>
                                <input type="number"/>  
                            </li>
                            <li>
                                <label for="sub">8 - 3 = </label>
                                <input type="number"/>  
                            </li>
                            <li>
                                <label for="multi">7 x 6 = </label>
                                <input type="number"/>  
                            </li>
                            <li>
                                <label for="div">15 ÷ 3 = </label>
                                <input type="number"/>  
                            </li>
                            <li>
                                <label for="asmd">8 + 6 - 3 x 2 ÷ 2 = </label>
                                <input type="number"/>  
                            </li>
                        </ol>
                        <div style="text-align: center;">
                            <input type="button" name="button" value="완료">
                        </div>
                    </fieldset>
                </form>
            </section>
            <section>
                <form>
                    <fieldset id="resultarea">

                    </fieldset>
                </form>
            </section>
		</div>
	</body>
</html>

그때 당시 제가 풀었던 방식입니다.

window.addEventListener("click", init, false);


function init () {
    document.forms[0].elements[7].addEventListener("click", quizCheck, false);
}

function quizCheck(){
    var examineeName = document.forms[0].name.value; // 응시자 이름
    var answer = [5+6,8-3,7*6,15/3,8+6-(3*2)/2]; //시험 문제의 정답
    var correct = 0; //정답 개수 카운트
    var questionElement = new Array; // 5개의 문제가 차례로 들어가는 변수
    var today = new Date(); // 날짜 작성을 위한 변수
    var year = today.getFullYear()
    var month = today.getMonth()+1
    var date = today.getDate()
    var dayLabel = today.getDay()
    var week = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
    var weekToday = week[dayLabel];
    var outputString =""; //최정 출력될 HTML 문자열을 위한 변수
    
    console.log(year);
    console.log(month);
    console.log(date);
    console.log(dayLabel);
    console.log(weekToday);
    
    for(var i=0;i < 5; i++){
        questionElement.push(document.forms[0].elements[i+2].value);
        if(answer[i] == questionElement[i] ){
                correct += 1;
                document.forms[0].elements[i+2].classList.remove("fail");
           }else{
               document.forms[0].elements[i+2].classList.add("fail");
           }
        }
    var sum = 20 * correct;
    
    outputString = "<p>"+examineeName+" 님의</p>";
    outputString += "<p>"+year+"년 "+month+"월 "+date+"일 "+weekToday+" 계산 퀴즈 결과</p>";
    outputString += "<p>총 "+answer.length+"문제 중 "+(answer.length-correct)+"문제를 틀렸습니다.</p>";
    outputString += "<p>틀린 답은 빨간색으로 표시 하였습니다.</p>";
    outputString += "<p>최종 점수는 <strong>"+sum+"점</strong> 입니다.</p>";
    document.getElementById('resultarea').innerHTML = outputString;
    document.getElementById('resultarea').style.visibility = 'visible';
}

결과물입니다.