<div class="notebook">

<div class="nb-cell program" data-background="true" name="p1">
age(bart, 12).
age(lisa, 9).
</div>

<div class="nb-cell html" name="htm1">
<div class="panel panel-default">
  <div class="panel-body">
    <div class="form-group">
      <label>Who's age do you want to know?</label>
      <div class="input-group">
        <input class="form-control">
        <div class="input-group-btn">
          <button type="button" class="btn btn-primary">Find</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

  notebook.$(".btn-primary").on("click", function() {
    notebook.run("myQuery", { Question: notebook.$("input").val() });
    console.log(notebook.$("input").val());
  });
  
  notebook.bindQuery(function(q) {
    q.run({Question: notebook.$("input").val()});
  });

</script>
</div>

<div class="nb-cell query" name="myQuery">
atom_string(Name, Question), age(Name, Answer).
</div>

</div>