0
저는 JavaScript에 익숙하지 않지만 약간의 수학 퀴즈를 연구 중입니다. 사용자 (1 학년 학생)가 한 번에 하나의 질문에 답한 다음 모든 사용자의 답변이 팝업에 표시되며 사용자의 대답이 올바른지 여부에 대한 피드백도 표시됩니다. 나는 그다지 잘 할 수 있지만, 내 인생에서 "입력"을 누를 때 양식 제출 방법을 결정할 수는 없습니다.JavaScript : 입력시 양식 제출
도움이 될 것입니다.
HTML :
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Math Worksheet</title>
<script src="addition.js"></script>
<link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="formSec">
<table id="addProblem" width="150" border="0" cellspacing="0" cellpadding="10">
<tr>
<td colspan="3" align="center"><h2>Problem <span id="outOf">1</span> of 12</h2></td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="1" align="right"><input id="carryOver"></td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right" id="firstNum">48</td>
</tr>
<tr>
<td>+</td>
<td colspan="2" align="right" id="secondNum">16</td>
</tr>
<tr>
<td colspan="3"><hr id="sepLine"></td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="right"><input onKeyPress="return checkSubmit(event)" id="userAnswer" type="text"></td>
</tr>
<tr>
<td colspan="3"><input id="submit" type="button" onClick="submitAnswer()" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
자바 스크립트 :
// first number in addition problem
var numOne = [48,39,16,43,37,23,44,13,37,28,48,16];
// second number in addition problem
var numTwo = [16,22,25,18,46,49,18,39,25,17,9,28];
// counter variable
var i = 0;
// array for user answers
var answers = [];
// arrays to display validity
var valid = [];
var equality = [];
// submit when "enter" is pressed
function checkSubmit(e) {
if(e && e.keyCode == 13)
{
document.forms[0].submit();
}
}
// check and store answer's validity
function submitAnswer() {
var guessed = Number(document.getElementById('userAnswer').value);
var checkAnswer = 'Correct!';
if (guessed != numOne[i]+numTwo[i]) {
checkAnswer = 'Incorrect!\nThe answer is'+' '+Number(numOne[i]+numTwo[i])+'.';
valid[i] = 'Incorrect';
equality[i] = ' ≠ ';
} else if (guessed == numOne[i]+numTwo[i]) {
valid[i] = 'Correct';
equality[i] = ' = ';
}
if(confirm(checkAnswer) && i<11) {
// next problem
i++;
document.getElementById('outOf').innerHTML=i+1;
document.getElementById('firstNum').innerHTML=numOne[i];
document.getElementById('secondNum').innerHTML=numTwo[i];
// saves user's answer
answers.push(document.getElementById('userAnswer').value);
// reset the answer and carry over to blank
document.getElementById('userAnswer').value = '';
document.getElementById('carryOver').value = '';
// return focus to answer box
document.getElementById('userAnswer').focus();
} else if(i==11) { // create popup window with user's answers
var results=window.open('','name','height=650,width=1000');
answers.push(document.getElementById('userAnswer').value);
results.document.write('<html><head><title>Math Worksheet Results</title>');
results.document.write('<link rel="stylesheet" href="style.css">');
results.document.write('<link href="http://fonts.googleapis.com/css?family=Englebert" rel="stylesheet" type="text/css">');
results.document.write('</head><body><div id="resultsMain">');
results.document.write('<header><h1>Student Results</h1></header><div id="results">');
results.document.write('<div class="prob"><p class="probNum">1. ' + valid[0] + '</p><p class="userProb">');
results.document.write(numOne[0] + ' + ' + numTwo[0] + equality[0] + answers[0] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">2. ' + valid[1] + '</p><p class="userProb">');
results.document.write(numOne[1] + ' + ' + numTwo[1] + equality[1] + answers[1] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">3. ' + valid[2] + '</p><p class="userProb">');
results.document.write(numOne[2] + ' + ' + numTwo[2] + equality[2] + answers[2] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">4. ' + valid[3] + '</p><p class="userProb">');
results.document.write(numOne[3] + ' + ' + numTwo[3] + equality[3] + answers[3] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">5. ' + valid[4] + '</p><p class="userProb">');
results.document.write(numOne[4] + ' + ' + numTwo[4] + equality[4] + answers[4] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">6. ' + valid[5] + '</p><p class="userProb">');
results.document.write(numOne[5] + ' + ' + numTwo[5] + equality[5] + answers[5] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">7. ' + valid[6] + '</p><p class="userProb">');
results.document.write(numOne[6] + ' + ' + numTwo[6] + equality[6] + answers[6] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">8. ' + valid[7] + '</p><p class="userProb">');
results.document.write(numOne[7] + ' + ' + numTwo[7] + equality[7] + answers[7] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">9. ' + valid[8] + '</p><p class="userProb">');
results.document.write(numOne[8] + ' + ' + numTwo[8] + equality[8] + answers[8] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">10. ' + valid[9] + '</p><p class="userProb">');
results.document.write(numOne[9] + ' + ' + numTwo[9] + equality[9] + answers[9] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">11. ' + valid[10] + '</p><p class="userProb">');
results.document.write(numOne[10] + ' + ' + numTwo[10] + equality[10] + answers[10] + '</p></div>');
results.document.write('<div class="prob"><p class="probNum">12. ' + valid[11] + '</p><p class="userProb">');
results.document.write(numOne[11] + ' + ' + numTwo[11] + equality[11] + answers[11] + '</p></div>');
results.document.write('<br class="clear"></div></div></body></html>');
results.document.close();
}
}
여기처럼 : 당신은 당신이 폼 태그의 onsubmit 이벤트를 추가 할 필요가 Enter 키를 누르면
submitAnswer()이 execuded되도록하려면http://jsfiddle.net/sfarsaci/pEJxd/
를 입력 그것 '가치'와 다른 페이지에 표시되는 값을 얻을? – jhyap
예. 지금 바로 "제출"을 클릭하여 다음 질문으로 이동해야합니다. 계속 전진하기 위해 입력 필드에서 "Enter"키를 누르면됩니다. – lindsey
다른 페이지로 '리디렉션'해야합니까? – jhyap