Программа проверки умножения и деления — как сделать на js или php?

Question

[alekseyizmaylov]

Добрый день,
подскажите пожалуйста как реализовать на JS или РНР такую задачу
(может быть она совсем не сложная, но я всего лишь пока начинающий любитель программирования):
Необходимо разработать программу, тестирующую знания школьником таблицы умножения.
Это должен быть большой экран (дизайн не буду описывать)
Программа предлагает решить пример, например 3 * 8 и просит дать ответ, школьник на этом же экране вводит ответ и на этом же экране выходит сообщение правильно или нет, начисляет очки, выводит тут же общий счет, потом на этот кран выводится новый пример и так до конца, пока не будет набрано определенное количество очков, т.е. вся игра идет на одном экране без всяких обновлений.
Принцип самой программы понятен - уже сделал ее на Python, работает через окно командной строки, но так как игра для школьника, то хочется оформить ее красиво, с большими цифрами, веселыми картинками, звуковым сопровождением и т.д. До изучения GUI в Python еще не дошел, но раньше уже делал сайты, писал небольшие оконные приложения на РНР, поэтому мне кажется, что через РНР или JS реализовать такую программу проще.
Подскажите пожалуйста, как это сделать - главный вопрос чтобы вся игра шла в одном окне, как я пока что думаю для этого больше подойдет JS, но вот смотрю в книгу и пока не пойму как......

Answer 1

[Aleksey Solovyev]

https://jsfiddle.net/re3jg7f2/

вот накидал такую за пару минут, но там все очень плохо в плане кода.... но смысл будет понятен, наверно

ps раскидал по панелям код https://jsfiddle.net/re3jg7f2/1/

Comments

[alekseyizmaylov]

Круто,
особенно то, что за пару минут )
есть маленький недочет - пока меняется выражение, если быстро нажимать Enter можно добавить себе много лишних очков )

[Aleksey Solovyev]

alekseyizmaylov, ой) надо бы доработать.... но на самом деле там выкинуть половину кода надо. Продумать архитектуру приложения (написать с самого начала и правильно)
Но главное тут, что нет нужды в php. все можно реализовать на html/css/js.
А называется это SPA (single page application). Стоит посмотреть в сторону react/vuejs

[alekseyizmaylov]

уже вот сижу читаю раздел DOM, я в правильном направлении двинулся? )

Answer 2

[Robot Chappie]

на коленке за мин 10 сделал. может то что вам надо https://output.jsbin.com/zexojifiyo

Comments

[alekseyizmaylov]

Здорово, просто и сердито )
Умоляю, дайте правильное направление - в JS синтаксис я уже изучил, писал код, задачи для Нетологии решал с циклами, ветвлениями и т.д., формы в html тоже делать умею, css изучал, рабочий сайт верстал - как мне все это увязать???? что мне дальше в JS нужно изучить?

[Robot Chappie]

alekseyizmaylov пройдитесь по всем главам вот тут https://learn.javascript.ru и если все освоите, то проблем у вас с JS не будет, там как раз есть куча тем связанные с событиями, управлением DOM и т.п

Answer 3

[Александр Гонтарев]

однозначно JS

1) пхп это серверный язык, интерактив без перезагрузки не сделать
2) для пхп нужен сервер
3) на js можно написать даже в одном файле test.html, передать его другу и радоваться результату
4) на js не то что можно, а даже нужно делать весь интерактив без перезагрузок, иначе все переменные обнулятся если куда-то не сохранить

Comments

[alekseyizmaylov]

Александр, можно подробнее? ) Что мне почитать, изучить? Как JS работает уже читал, код писал - как мне все это с окном увязать? DOM читал, тоже пока не пойму как..... С окнами PHP как я понял гораздо проще работает, но там получается, что в одном окне не удержишься....

[Александр Гонтарев]

alekseyizmaylov, ну вот грубо говоря, приложение на js это как запустить .exe программу, которая что-то делает, реагирует на события пользователя когда он жмакает по кнопкам, а пхп это серверный язык, он не может так работать как js, его задача это получить данные, обработать, сохранить и вернуть что-то в ответ,

[alekseyizmaylov]

Вы можете поделиться ссылками на полезные видео или книги или статьи по созданию таких приложений? А то у меня уже две книги JS, там много теории, но нет примеров и трудно разобраться поэтому.

[Александр Гонтарев]

alekseyizmaylov, мне кажется, что лучше всего это написать какое нибудь маленько приложение, это может быть TodoList или Змейка-игра, просто выбрать что-то не супер простое, но и не огромное, и смотреть в интернетах как реализовывать

Answer 4

[one_day]

вот здесь можете посмотреть похожий пример

Comments

[one_day]

для умножения

jquery

function sum(a, b) {
    return a * b;
}

function getNumber() {
    return Math.round(Math.random()*9);
}

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()
        }
    });
}