Как сделать такой тест?

В общем, хочу сделать тест вроде этого: 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>
  • Вопрос задан
  • 4549 просмотров
Решения вопроса 1
@Kuzzy
Вот, на скорую руку jsfiddle.net/9m7z9
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rumkin
@rumkin
Во-первых:
var a = Math.round(Math.random()*99);
var b = Math.round(Math.random()*(99-a));

Так вы всегда получите сумму до 100.

После кнопки добавляем элементы:
<span id="formula"></span>
<input type="text" id="answer"/>


Затем:
var button=document.getElementById('start'); // Кнопка
var formula=document.getElementById('formula'); // Формула
var answer=document.getElementById('answer'); // Тестовое поле

var a,b;
button.onclick = function () {
     a = Math.round(Math.random()*99);
     b = Math.round(Math.random()*(99-a));
     formula.textContent=a + ' + ' + b + ' = ' ;
};
answer.onkeyup=function(){
    if (this.value-0 === a+b) alert('Ok');
}

Дальше сами разберетесь.

Во-вторых, можно обойтись без PHP.
В-третьих, так обработчики событий никто давно не навешивает.

Время можете засекать по секундам (до тысячной доли) с помощью Date.now() прямо в браузере.

jsfiddle.net/z3dyR/2
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы