[문제]
문제에 나오는 수는 랜덤으로 뽑아짐 (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 id="head">문제는 자동으로 생성되며, 10초가 지나면 자동 채점</h1>
<h2 id="head2">남은 시간 <span id="ltime">0</span></h2>
<p><span id="f1">식1 </span> <input type="text" id="ans1"></p>
<p><span id="f2">식2 </span> <input type="text" id="ans2"></p>
<p><span id="f3">식3 </span> <input type="text" id="ans3"></p>
<p><span id="f4">식4 </span> <input type="text" id="ans4"></p>
<button id="re">다시</button> <a>정답: <span id="result">0</span>개</a>
<script>
let ltime = document.getElementById("ltime")
let f1 = document.getElementById("f1")
let f2 = document.getElementById("f2")
let f3 = document.getElementById("f3")
let f4 = document.getElementById("f4")
let ans1 = document.getElementById("ans1")
let ans2 = document.getElementById("ans2")
let ans3 = document.getElementById("ans3")
let ans4 = document.getElementById("ans4")
let result = document.getElementById("result")
let re = document.getElementById("re")
for(let i =1; i<=4; i++){
let n = Math.floor(Math.random()*100+1);
let m = Math.floor(Math.random()*100+1);
let k = Math.floor(Math.random()*4+1);
let h = ""
let sik = ""
if(k==1){
h="+"
}else if(k==2){
h="-"
}else if(k==3){
h="*"
}else{
h="/"
}
sik=`${n}${h}${m}`
if(i==1){
f1.innerText=sik
}else if(i==2){
f2.innerText=sik
}else if(i==3){
f3.innerText=sik
}else if(i==4){
f4.innerText=sik
}
}
let t = 10;
setInterval(()=>{
if(t>=0){
ltime.innerHTML = t
t--
}
},1000)
setTimeout(()=>{
let sum =0
if(eval(f1.innerText)!=ans1.value){
f1.style.textDecoration="line-through"
ans1.style.color="red"
ans1.value = eval(f1.innerText)
sum++
}
if(eval(f2.innerText)!=ans2.value){
f2.style.textDecoration="line-through"
ans2.style.color="red"
ans2.value = eval(f2.innerText)
sum++
}
if(eval(f3.innerText)!=ans3.value){
f3.style.textDecoration="line-through"
ans3.style.color="red"
ans3.value = eval(f3.innerText)
sum++
}
if(eval(f4.innerText)!=ans4.value){
f4.style.textDecoration="line-through"
ans4.style.color="red"
ans4.value = eval(f4.innerText)
sum++
}
result.innerHTML=4-sum
}, 10000)
re.addEventListener("click", function(){
location.reload()
})
</script>
</body>
</html>
나는 부자가 될래!😼🐰❤️