문제는 10문제 출제
맞추면 blue / 틀리면 pink
정답률도 프린트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단 맞추기</title>
</head>
<body>
<h3>
문제는 10문제 출제 <br>
맞추면 blue / 틀리면 pink <br>
정답률도 프린트
</h3>
<button type="button" id="start">문제 출제</button>
<ol id="q"></ol>
<button type="button" id="end">정답!</button>
<h3 id="result"></h3>
<script>
// 랜덤 단
function makeDan(){
return Math.floor(Math.random()*8)+2;
}
// 랜덤 곱할 숫자
function makeNum(){
return Math.floor(Math.random()*9)+1;
}
let comAns = []; //정답을 담는 배열 생성
let printQuiz = document.getElementById('q');
//문제 출제
document.getElementById('start').addEventListener('click',()=>{
let str=" ";
for(let i=0; i<10; i++){
let dan = makeDan();
let num = makeNum();
comAns[i] = dan*num;
str += `<li> ${dan} X ${num} = <input type="text" id="userAns${i}"></li>`;
}
printQuiz.innerHTML = str;
})
//결과 출력 (비교)
document.getElementById('end').addEventListener('click',()=>{
let scorePoint = 0; //정답 수
let scoreRate = 0; // 정답률
for(let i=0; i<10; i++){
let userAns = Number(document.getElementById(`userAns${i}`).value);
if(userAns == comAns[i]){
document.getElementById(`userAns${i}`).style.backgroundColor = 'aliceblue';
scorePoint++;
} else {
document.getElementById(`userAns${i}`).style.backgroundColor = 'pink';
}
}
scoreRate = ((scorePoint/comAns.length)*100).toFixed(2);
document.getElementById('result').innerText = `정답수: ${scorePoint}개 / 정답률 : ${scoreRate}% `;
})
</script>
</body>
</html>
'HTML.CSS.JS > JS' 카테고리의 다른 글
| [JS] day13_async_promiseChain 데이터 가져오기 2 (0) | 2023.04.20 |
|---|---|
| [JS] day13_async_await 데이터 불러오기 (0) | 2023.04.20 |
| [JS] popup 팝업창 (0) | 2023.04.20 |
| [JS] BOM, DOM 높이 / 너비 (0) | 2023.04.20 |
| [JS] json으로 값을 받아와서 원하는 모양을 나눠 출력 (0) | 2023.04.20 |