2つの数字があります。ユーザーが回答を入力し、Enterキーまたは[次へ]ボタン(フォームをアクティブ化)をクリックします
次のすべてのアクションはjavascriptでロードされるため、フォームは常に「falseを返す」ようにします。ユーザーが正しい答えを入力し続ける限り、それは機能しますが、間違った答えを入力すると、最初に「ねえ、これは何ですか?」と表示されます。ボックスですが、ユーザーが再度応答しようとすると、ページ全体が再ロードされます:/
あなたはここでそれを見ることができます: http ://skolresurser.se/matematik/simple/
HTML
<form id="theChallenge">
<h1>
<span class="first">2</span>
<span style="position: relative; top: 0.24em; margin: 0 6px;">*</span>
<span class="second">6</span>
<span style="margin-left: 0.13em; font-size: 0.8em; position: relative; top: -0.13em; margin-right: -0.60em;">=</span>
</h1>
<div id="notReally" style="display: none;">
<h2>Not reeaaaaally:</h2>
<span id="actually"></span>
</div>
<input type="number" class="answerInput"><br>
<button class="2btn btn-large btn-success checkAnswer" href="#">Next</button>
</form>
JS:
$(function() {
function biggestNumber() {
return Math.max.apply(this, arguments);
}
$("#theChallenge").submit(function() {
first = $(".first").text();
second = $(".second").text();
correctAnswer = parseInt($(".first").text()) * parseInt($(".second").text()); //parseInt = omvandla text till siffra.. och slå ihop de två alternativen! och detta är då vårt rätta svar
theAnswer = $(".answerInput").val() //Vad har användaren skrivit in för svar?
alert('first' + first);
//Check if answer is correct
if (theAnswer == correctAnswer) {
//Create new numbers
var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
$('.first').text(randomNum);
var randomNum = 1 + Math.ceil(Math.random() * 12); /* Pick random number between 1 and 12 */
$('.second').text(randomNum);
} else {
//Show the person doing the test that
$("#notReally").slideDown('fast');
$("h1").slideUp('medium');
biggestNumber = biggestNumber(first, second); //en funktion som är inlagd längre upp!!
if (biggestNumber == first) { //Om största numret = första numret, då är det, det andra numret vi vill stapla upp, annars är det ju första siffran vi vill stapla upp "största siffran antalet gånger".
theOtherNumber = second;
} else {
theOtherNumber = first;
}
staplaUpp = theOtherNumber; //Börja med att lägga in den mindre siffran en gång först, och sedan för varje till " +siffran "
for (var i = 0; i < biggestNumber - 1; i++) { //För varje antal det finns av den mindre siffran, stapla upp den med plus emellan!
staplaUpp = staplaUpp + '<span style="margin:0 0.2em;">+</span>' + theOtherNumber;
}
$("#actually").append(staplaUpp);
}
$(".answerInput").val('');
alert('first' + first);
return false;
});
});