스터디 문제(자동 체점)
ibm x redhat ai 과정 JS
문제에 나오는 수는 랜덤으로 뽑아짐 (1~100까지) 임의로 주기
사칙연산도 랜덤 (+, - , *, / )
10초 지난 후 정답이 틀리면 옆에 빨간색으로 답이뜨고, 취소선 으로 표시
정답만 맨 밑에 개수 출력된다.
(남은시간 부분에 10 9 8 7 6 5 4 3 2 1 0 이런 식으로 초가 하나씩 줄어든다)
다시 버튼을 누르면 reload (새로고침) 되면서 . - 새로운 문제가 랜덤으로 뜬다
( location.reload())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>문제는 자동으로 생성되며, 10초가 지나면 자동 채점</h1>
<h2>남은시간 <span id="timer">10</span></h2>
<hr>
<span id="sik1"></span> <input type="text" id="t1"> <span id="ans1"></span> <br>
<span id="sik2"></span> <input type="text" id="t2"> <span id="ans2"></span> <br>
<span id="sik3"></span> <input type="text" id="t3"> <span id="ans3"></span> <br>
<span id="sik4"></span> <input type="text" id="t4"> <span id="ans4"></span> <br>
<button type="button" id="btn">다시</button> 정답 : <span id="result">0</span>개
</body>
<script>
let t = 10;
let correctCount = 0;
let timer = document.getElementById("timer");
let btn = document.getElementById("btn");
let answers = [];
const operators = ['+', '-', '*', '/'];
for (let i = 1; i <= 4; i++) {
let n1 = Math.floor(Math.random() * 100 + 1);
let n2 = Math.floor(Math.random() * 100 + 1);
let op = operators[Math.floor(Math.random() * operators.length)];
let expression = n1 + " " + op + " " + n2;
document.getElementById("sik" + i).innerText = expression;
let res = 0;
if(op === '+') res = n1 + n2;
else if(op === '-') res = n1 - n2;
else if(op === '*') res = n1 * n2;
else if(op === '/') res = parseFloat((n1 / n2).toFixed(2));
answers.push(res);
}
let countdown = setInterval(() => {
if (t >= 0) {
timer.innerHTML = t;
if (t === 0) {
clearInterval(countdown);
check();
}
t--;
}
}, 1000);
function check() {
for (let i = 1; i <= 4; i++) {
let userInput = document.getElementById("t" + i).value;
let sikElement = document.getElementById("sik" + i);
let ansElement = document.getElementById("ans" + i);
let inputField = document.getElementById("t" + i);
inputField.disabled = true; //입력창 잠금
if (parseFloat(userInput) === answers[i-1]) {
correctCount++;
} else {
sikElement.style.textDecoration = "line-through";
ansElement.innerText = " 오답! 정답: " + answers[i-1];
ansElement.style.color = "red";
}
}
document.getElementById("result").innerText = correctCount;
}
btn.addEventListener("click", function() {
location.reload();
});
</script>
</html>
ibm-redhat ai 과정