В общем, хочу сделать тест вроде этого:
math.kuznetsov.net.ru/.
Допустим, пользователь выбирает уровень: лёгкий (сложение и вычитание числе до 100), средний(сложение и вычитание числе до 500), сложный(сложение и вычитание числе до 1000).
Даже не представляю как всё это можно сотворить. Понятно, что создаём в JS скрипте два рандомных числа:
var a = Math.round(Math.random() * (100 - 0) + 0);
var b = Math.round(Math.random() * (100 - 0) + 0);
Как встроить эти переменные в HTML код, чтобы они отобразились под кнопкой:
<div id="starter"><input type="button" id="start" value="Начать"></div>
При нажатии на эту кнопку должны появляться под ней примеры.
var start = document.getElementById('start');
start.onclick = function () {
alert(a "+" b "=");
};
Потом, после знака равно, по-видимому, надо поставить
<input type="text">
чтобы PHP скрипт подхватывал значения формы и выводил правильные/неправильные ответы + время, за которое человек решил все примеры.
В общем, как это всё провернуть? Хотя бы подтолкните, сейчас вообще ничего не работает :D
Что не так?
<html>
<head>
<title>Jjjasdgj'</title>
<script>
function sum(a, b) {
return a + b;
}
function getNumber() {
return Math.round(Math.random()*99);
}
function addLine(a, b) {
var line = '<div><span class="a">'+ a + ' + </span><span class="b">' + b + ' =</span><input class="result"> <b class="bingo"></b></div>';
$('#starter').append(line);
}
function checkResultAndGoNext(val, a, b) {
if(val == sum(a, b)) {
}
}
$('#start').on('click', function() {
var a = getNumber(),
b = getNumber();
addLine(a, b);
bindKeyup();
});
function bindKeyup() {
$('.result').on('keyup', function() {
var val = $(this).val(),
a = parseInt($(this).parent().find('.a').text()),
b = parseInt($(this).parent().find('.b').text())
if(val == sum(a, b)) {
$(this).attr('disabled', true);
$('.bingo').text('Урааа, ответ верный!!!11');
a = getNumber();
b = getNumber();
addLine(a, b)
bindKeyup()
}
});
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div id="starter">
<input type="button" id="start" value="Начать">
</div>
</body>
</html>
