나는 가능한 한 간결하게하려고 노력할 것이지만, 내 깊이를 벗어났습니다 (나는 아기 수영장에 있어야합니다 :)
나는 부사가 있어야 할 곳에 공백이있는 임의의 문장을 제시하는 내 아들을위한 간단한 웹 사이트를 만들려고합니다. 그런 다음 사용자는 아래에 제시된 3 개의 무작위 단어 중 부사 인 것을 추측해야합니다. 그런 다음 내 문제가있는 채점 시스템을 구현하려고했습니다.
버튼이 정적 일 때 정상적으로 작동했지만 응답 버튼에 이벤트 리스너를 무작위로 추가하고 추가하기 때문에 점수에 1 개가 아닌 2 개가 추가됩니다. 문제 코드는 하단에 있습니다 (// 버튼에 이벤트 리스너 추가).
또 다른 문제는 누군가가 첫 번째 질문에 잘못 대답하면 내 코드에 '정의되지 않은 정답'이 있다는 것입니다. '정답 0 개'라고 말할 수 없습니다.
<head>
<title>Adverb Kings</title>
</head>
<body>
<h1>Adverb Kings</h1>
<div id="sentence"></div>
<div>
<button type="button" onclick="right()"></button>
<button type="button" onclick="wrong()"></button>
<button type="button" onclick="wrong()"></button>
<div id="result"></div>
<div id="correct"></div>
<div id="attempted"></div>
</div>
<script>
//define right functions
function right() {
correctAlert();
correctAnswer();
answersAttempted();
}
//define wrong functions
function wrong() {
incorrectAlert();
answersAttempted();
}
//alert correct
function correctAlert() {
var element = document.getElementById("result");
element.classList.add("correct");
element.innerHTML = "Correct";
}
//alert incorrect
function incorrectAlert() {
var element = document.getElementById("result");
element.classList.add("incorrect");
element.innerHTML = "Incorrect, try again.";
}
//tracking correct answers
function correctAnswer() {
if (sessionStorage.correct) {sessionStorage.correct = Number(sessionStorage.correct)+1;
} else {
sessionStorage.correct = 1;
}
}
//tracking attempted questions count
function answersAttempted() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.attempts) {
sessionStorage.attempts = Number(sessionStorage.attempts)+1;
} else {
sessionStorage.attempts = 1;
}
document.getElementById("attempted").innerHTML = "You have attempted " + sessionStorage.attempts + " question(s) in this session and got " + sessionStorage.correct + " correct" ;
} else {
document.getElementById("attempted").innerHTML = "Sorry, your browser does not support web storage...";
}
}
//create sentence array
var sentence;
sentence = ['The people _______ went crazy about the new game options', 'The man _______ slipped his hands around his desk handle', 'He _______ typed a new password for his school account'];
//randomise sentence array
var el = document.getElementById('sentence');
el.textContent = sentence[Math.floor(Math.random() * sentence.length)];
//set order of words in order to randomise
var orders = [0, 1, 2];
shuffle(orders);
//add event listeners to buttons
var buttons = document.getElementsByTagName("button");
buttons[orders[0]].addEventListener('click', right);
buttons[orders[1]].addEventListener('click', wrong);
buttons[orders[2]].addEventListener('click', wrong);
//create and randomise adverb array
var adverbs = ['slowly', 'quickly', 'insanely'];
buttons[orders[0]].textContent = adverbs[Math.floor(Math.random() * adverbs.length)];
//create and randomise other words
var other1 = ['burger', 'insane', 'ugly'];
buttons[orders[1]].textContent = other1[Math.floor(Math.random() * other1.length)];
var other2 = ['sausage', 'fist', 'gun'];
buttons[orders[2]].textContent = other2[Math.floor(Math.random() * other2.length)];
//shuffle position of adverb
function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}
</script>
</body>
</html>```
HTML과 JS 모두에서 이벤트 리스너를 추가하고 있습니다.
HTML에서 버튼의 onclick = "..."부분을 제거하면 모두 괜찮습니다.
숫자가 정의되지 않도록하려면 함수를 호출하기 전에 sessionStorage.correct를 0으로 설정합니다.
<script>
sessionStorage.correct = 0;
...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다