Math for Kids

index.html

<h1>+ - * / (1..<span data-bind="text: max"></span>)</h1>
        
        
<div data-bind="foreach: examples">
  <p>
    <span data-bind="text: first"></span>    
    <span data-bind="text: operator"></span>    
    <span data-bind="text: second"></span>    
    =    
    <input data-bind="value: guess, valueUpdate: 'input'" 
      placeholder="?"></input>    
    <span data-bind="visible: ok">&#x2714;</span>
  </p>  
</div>
        
<button data-bind="click: $root.test">Test</button>

<ol data-bind="foreach: messages">
  <li data-bind="text: $data"></li>
</ol>

MulDivPlusMinus.java

package dew.demo.muldiv;

import java.util.Random;
import net.java.html.json.ComputedProperty;
import net.java.html.json.Function;
import net.java.html.json.Model;
import net.java.html.json.Property;

/** Represents a computational quiz.
 */
@Model(className = "Data", properties = {
  @Property(name = "examples", type = Example.class, array = true),
  @Property(name = "messages", type = String.class, array = true),
  @Property(name = "max", type = int.class)
})
final class MulDivPlusMinus {
  @Model(className = "Example", properties = {
    @Property(name = "first", type = int.class),
    @Property(name = "second", type = int.class),
    @Property(name = "operator", type = Operation.class),
    @Property(name = "guess", type = String.class)
  })
  static class ExampleModel {
    @ComputedProperty static boolean ok(
      int first, int second, Operation operator, String guess
    ) {
      return operator.test(first, second, guess) == null;
    }
  }
    
  @Function static void test(Data model) {
    model.getMessages().clear();
    for (Example e : model.getExamples()) {
      String err = e.getOperator().test(
        e.getFirst(), e.getSecond(), e.getGuess()
      );
      if (err != null) {
        model.getMessages().add(err);
      }
    }
    if (model.getMessages().isEmpty()) {
      model.getMessages().add("OK!");
      model.setMax(model.getMax() * 2);
      initialize(model);
    }
  }
    
  public static enum Operation {
    PLUS("+"), MINUS("-"), MUL("*"), DIV("/");

    private String symbol;
    Operation(String symbol) {
      this.symbol = symbol;
    }
        
    public String test(int first, int second, String result) {
      int res;
      try {
        res = Integer.parseInt(result);
      } catch (NumberFormatException ex) {
        return "Not a number: " + result;
      }
      int exp;
      switch (this) {
        case PLUS: exp = first + second; break;
        case MINUS: exp = first - second; break;
        case MUL: exp = first * second; break;
        case DIV: exp = first / second; break;
        default:
          throw new IllegalStateException();
      }
      if (exp == res) {
        return null;
      }
      return first + " " + this + " " + second + " != " + result;
    }

    @Override
    public String toString() {
      return symbol;
    }
  }
    
  static void initialize(Data d) {
    d.getExamples().clear();
    if (d.getMax() < 10) {
      d.setMax(10);
    }
    Random r = new Random();
    for (int i = 0; i < 5; i++) {
      int first = r.nextInt(d.getMax());
      int second = r.nextInt(d.getMax());
      Example e;
      switch (r.nextInt(4)) {
         case 0: {
           e = new Example(first, second, Operation.PLUS, "");
           break;
         }
         case 1: {
           e = new Example(
             first + second, second, Operation.MINUS, ""
           );
           break;
         }
         case 2: {
           e = new Example(first, second, Operation.MUL, "");
           break;
         }
         default: {
           if (second == 0) {
             second = 1;
           }
           e = new Example(first * second, second, Operation.DIV, "");
           break;
         }
      }
      d.getExamples().add(e);
    }
  }
  
  // initialize
  static {
    Data d = new Data();
    initialize(d);
    d.applyBindings();
  }
}

You can view and play with this application at http://dew.apidesign.org/dew/#7263102