Instruction: Click the button in the dialog box labeled "OK".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-dialog-2.html

<::before><::after> Close

Est urna sagittis, lobortis lectus. Fermentum.

<::before><::after>

Cancel  OK

#area { height: 100px; display: block; }
#dialog { height: auto !important; }
.ui-dialog { font-size: 10px; }
.ui-dialog .ui-dialog-titlebar { padding: 2px 3px; height: 15px; }
.ui-button { outline: 0; }

var BUTTONS = ['Cancel', 'OK', 'x'];

var resetUI = function(div){
  if(div.html().length > 0) $('#dialog').dialog('destroy');
  div.empty(); // clear previous problem, if any
  $.resetUniqueId();
}

// generate the dialog box, the contents inside it, and some
// randomized margins to move it around the div.
var generateDialog = function(div){
  var html = '<p>' + ui_utils.generateWords(4,8) + '</p>';
  div.append(html);
  var expectedButton = core.sample(BUTTONS);

  $('#dialog').dialog({
    height: 0,
    width: 0,
    position: {my: 'center', at: 'center', of: document.getElementById('area')},
    buttons: [
      { text: 'Cancel', click: function(e) {
        var r = e.target.innerHTML === expectedButton ? 1.0 : -1.0;
        core.endEpisode(r, r > 0);
      } },
      { text: 'OK', click: function(e) {
        var r = e.target.innerHTML === expectedButton ? 1.0 : -1.0;
        core.endEpisode(r, r > 0);
      } }
    ]
  });

  $('.ui-dialog')[0].style.margin = core.randi(15,25) + 'px ' + core.randi(5,10) + 'px';
  $('.ui-dialog')[0].style.width = core.randi(115,140) + 'px';

  return expectedButton;
}

var genProblem = function() {
  // generate the task
  var div = $('#dialog');
  resetUI(div);
  var expectedButton = generateDialog(div);

  $('#query').html('Click the button in the dialog box labeled "' + expectedButton + '".');

  $('.ui-dialog-titlebar button.ui-button').on('click', function(e){
    var r = expectedButton === 'x' ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

window.onload = function() {
  core.startEpisode();
}

ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable ui-resizable

position: absolute; height: auto; width: 139px; top: 40px; left: 2px; display: block; margin: 21px 9px;

width: auto; min-height: 0px; max-height: none; height: 0px;

Executing browser actions:

Executing browser actions: click("28")

In order to accomplish my goal I need to click on the "OK" button in the dialog box.

Executing browser actions:

Executing browser actions: click("28")

In order to accomplish the goal, the next action should be to click the button labeled "OK" in the dialog box.

Executing browser actions:

Executing browser actions: click("28")

In order to accomplish my goal I need to click on the button labeled "OK" in the dialog box.

Executing browser actions:

Executing browser actions: click("28")

Executing browser actions:

Agent reached maximum number of iterations


Instruction: Click on the link "Nisl".

Click on the link "Nisl".

Click on the link "Nisl".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-link.html

Nisl  sit  magna.  Turpis sollicitudin.  Euismod  in egestas massa  luctus  dolor aliquet nam. Nunc ullamcorper. Ultrices sed eu turpis viverra.

.alink { text-decoration: underline; color: blue; cursor: pointer; }

// since we randomly generate links, run this in a while loop
// until we produce text that definitely contains a link,
// otherwise the script will error out and fail.
var createLinks = function(div){
  var linkCreated = false;
  while(!linkCreated){
    var txt =  ui_utils.generateWords(20).split(/\s/g);
    for(var j=0;j<txt.length; j++){
      if(Math.random() < 0.2){
        txt[j] = '' + txt[j] + '';
        linkCreated = true;
      }
    }
  }

  div.html(txt.join(' '));
  return txt;
}

// hook handlers to all generated links
var createClickEvents = function(){
  var elements = document.getElementsByClassName('alink');
  var correctIndex = core.randi(0, elements.length);
  var correctText = elements[correctIndex].innerHTML;
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.innerHTML === correctText) {
      d3.select(e).on('click', function(){ core.endEpisode(1.0, true); })
    } else {
      d3.select(e).on('click', function(){ core.endEpisode(-1.0); })
    }
  }

  return correctText;
}

var genProblem = function() {
  // generate the task
  var div = d3.select('#area');
  div.html(''); // clear previous problem, if any
  var correctText = createLinks(div);

  var any = core.getOpt(core.QueryString, 'any', false); // click Any link?
  var correctText = createClickEvents();

  // generate query text in the UI
  d3.select('#query').html('Click on the link "' + correctText + '".');
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions: click("Nisl")

In order to accomplish my goal I need to click on the link "Nisl".

ValueError: Could not find element with bid "Nisl"


Instruction: Select Moll>Dory>Rivalee

Select Moll>Dory>Rivalee

Select Moll>Dory>Rivalee

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-menu.html

  * <::marker>

Charmion

  * <::marker>

Wanda

  * <::marker>

Susie

  * <::marker>

Moll

    * Elisha

      * Sherye

      * Irene

      * Jeniece

      * Hildagard

    * Ag

      * Gwendolyn

      * Odille

      * Alexine

      * Georgia

    * Dory

      * Rivalee

      * Danny

      * Lyndsie

      * Ottilie

    * Ira

      * Doroteya

      * Gabriell

      * Teresita

#area { padding: 5px; }
.ui-menu { background-color: #F0F0F0; width: 50px; }

var ITEMS;
var P = 0;
var CANDIDATES = [];

var enterUL = function(div, depth, prefix) {
  if(depth >= 3) return;

  var ul = div.append('ul');
  if(depth === 0) ul.attr('id', 'menu');

  var n = core.randi(2, 5);
  for(var i=0;i<n;i++) {
    var li = ul.append('li');
    var item = ITEMS[P];
    li.append('div').html(item);
    new_prefix = prefix + (depth === 0 ? item : '>' + item);
    P++;

    if(core.randf(0,1) < 0.5) {
      enterUL(li, depth + 1, new_prefix);
    } else {
      // this <li> element is a root node, add it as candidate
      CANDIDATES.push({full: new_prefix, leaf: item});
    }
  }
}

var genProblem = function() {
  var div = d3.select('#area');
  div.html('');
  $.resetUniqueId();

  P = 0;
  CANDIDATES = [];
  ITEMS = ui_utils.PEOPLE_NAMES.slice();
  core.shuffle(ITEMS);

  enterUL(div, 0, '');

  var ix = core.randi(0, CANDIDATES.length);
  var gtitem = CANDIDATES[ix];
  d3.select('#query').html('Select ' + gtitem.full);

  $('#menu').menu({
    select: function(event, ui) {
      var clicked_text = ui.item.find('div').html();
      var r = clicked_text === gtitem.leaf ? 1.0 : -1.0;
      core.endEpisode(r, r>0);
    }
  });
}

window.onload = function() {
  core.startEpisode();
}

ui-menu ui-widget ui-widget-content ui-front

Executing browser actions:

Executing browser actions: click('25')

In order to accomplish the goal of selecting Moll > Dory > Rivalee, the next action should be to click on the 'Moll' menuitem.

Therefore, the next action should be:

  * <::marker>

Charmion

  * <::marker>

Wanda

  * <::marker>

Susie

  * <::marker>

Moll

    * <::marker>

Elisha

      * Sherye

      * Irene

      * Jeniece

      * Hildagard

    * <::marker>

Ag

      * Gwendolyn

      * Odille

      * Alexine

      * Georgia

    * <::marker>

Dory

      * Rivalee

      * Danny

      * Lyndsie

      * Ottilie

    * <::marker>

Ira

      * Doroteya

      * Gabriell

      * Teresita

Executing browser actions:

Executing browser actions: click('53')

In order to accomplish the goal of selecting Moll > Dory > Rivalee, the next action should be to click on the menu items in the following order:

1. Moll
2. Dory
3. Rivalee

Therefore, the next action should be:

  * <::marker>

Charmion

  * <::marker>

Wanda

  * <::marker>

Susie

  * <::marker>

Moll

    * <::marker>

Elisha

      * Sherye

      * Irene

      * Jeniece

      * Hildagard

    * <::marker>

Ag

      * Gwendolyn

      * Odille

      * Alexine

      * Georgia

    * <::marker>

Dory

      * <::marker>

Rivalee

      * <::marker>

Danny

      * <::marker>

Lyndsie

      * <::marker>

Ottilie

    * <::marker>

Ira

      * Doroteya

      * Gabriell

      * Teresita

Executing browser actions:

Executing browser actions: click('57')

In order to accomplish the goal of selecting Moll > Dory > Rivalee, the next action should be:

Executing browser actions:

Executing browser actions: click('19')

In order to accomplish the goal of selecting Moll > Dory > Rivalee, the correct next action based on the current observation of the page is:

Executing browser actions:

Agent reached maximum number of iterations


Instruction: Click the "Menu" button, and then find and click on the item with the "ui-icon-zoomout" icon.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-menu-2.html

Menu

  * Save

  * Playback

    * Prev

    * Stop

    * Play

    * Next

  * Print...

  * Zoom In

  * Zoom Out

#area { height: 150px; padding: 5px; position: relative; width: 150px; }
#open-menu { cursor: pointer; position: absolute; bottom: 25px; left: 5px; }
#menu { display: none; cursor: pointer; }
.ui-menu { background-color: #F0F0F0; width: 72px; }

var PROBLEM_SET = {
  'Save': 'ui-icon-disk',
  'Prev': 'ui-icon-seek-start',
  'Stop': 'ui-icon-stop',
  'Play': 'ui-icon-play',
  'Next': 'ui-icon-seek-end',
  'Zoom In': 'ui-icon-zoomin',
  'Zoom Out': 'ui-icon-zoomout'
};

var displayProblem = function(expectedLabel){
  if(core.sample([true, false])){
    $('#query').html('Click the "Menu" button, and then find and click on the item labeled "' + expectedLabel + '".');
  } else {
    var iconHtml =  '';
    $('#query').html('Click the "Menu" button, and then find and click on the item with the ' + iconHtml + ' icon.');
  }
}

var bindClickEvents = function(expectedLabel){
  $('.ui-menu-item').unbind();
  $('.ui-menu-item').on('click', function(){
    // ignore the event that gets triggered from nested menus.
    if($(this).find('.ui-menu').length > 0) return;

    var text = $(this).text();
    var r = text === expectedLabel ? 1.0 : -1.0
    core.endEpisode(r, r>0);
  });
}

var setupUI = function(){
  $('#menu').menu();
  $('#open-menu').on('click', function(){
    $('#menu').toggle();
  });
}

var genProblem = function() {
  $('#menu').hide();
  var keys = Object.keys(PROBLEM_SET);
  var expectedLabel = core.sample(keys);

  displayProblem(expectedLabel);
  bindClickEvents(expectedLabel);
}

window.onload = function() {
  setupUI();
  core.startEpisode();
}

ui-menu ui-widget ui-widget-content ui-menu-icons

Executing browser actions:

Executing browser actions:

Executing browser actions:

Executing browser actions: click("16")

In order to accomplish my goal, I need to click on the "Menu" button first and then find and click on the item with the "ui-icon-zoomout" icon.

Menu

  * <::marker>

Save

  * <::marker>

Playback

    * Prev

    * Stop

    * Play

    * Next

  * <::marker>

Print...

  * <::marker>

Zoom In

  * <::marker>

Zoom Out

Executing browser actions:

Executing browser actions: click("16")
click("44")

In order to accomplish my goal, I need to click on the "Menu" button, then click on the item with the "ui-icon-zoomout" icon.

TimeoutError: Timeout 500ms exceeded.
=========================== logs ===========================
waiting for get_by_test_id("44")
  locator resolved to
…

attempting click action
  waiting for element to be visible, enabled and stable
    element is not visible - waiting...
============================================================

Executing browser actions: click("16")

In order to accomplish the goal, I need to click on the "Menu" button first and then find and click on the item with the "ui-icon-zoomout" icon.

Therefore, the next action should be:

Executing browser actions:

Too many errors encountered. Task failed.

No observation

Agent reached maximum number of iterations


Instruction: Select 9SRsds and click Submit.

Select 9SRsds and click Submit.

Select 9SRsds and click Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-option.html

BsE9gj
gz
9SRsds
7VyFad
Rwo
VzhLzQE

Submit

var createElements = function(div){
  var n = core.randi(2, 7);
  var clickNames = [];
  for(var i=0;i<n;i++) {
    var chname = ui_utils.generateString(2,8);
    var label = div.append('label')
    label.append('input').attr('type', 'radio').attr('id', 'ch'+i).attr('name', 'radio');
    label[0][0].innerHTML += chname;
    div.append('br');
    clickNames.push(chname);
  }
  var ix = core.randi(0, n);
  var qstr = clickNames[ix];
  return {query: qstr, index: ix};
}

var genProblem = function() {
  var div = d3.select('#boxes');
  div.html('');

  var correctElement = createElements(div);

  d3.select('#query').html('Select ' + correctElement.query + ' and click Submit.');

  d3.select('#subbtn').on('click', function(){
    var r = d3.select('#ch'+correctElement.index)[0][0].checked ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

window.onload = function() {
  core.startEpisode();
}

gz

labelledby

gz

Rwo

Rwo

VzhLzQE

VzhLzQE

Executing browser actions: click('9SRsds')
click('36')

In order to accomplish the goal, you need to select the option '9SRsds' and then click on the 'Submit' button.

gz

gz

Rwo

Rwo

VzhLzQE

VzhLzQE

Error: Error: Selector "internal:testid=[bid="9"s] >> :scope" resolved to <script bid="9" browsergym_set_of_marks="0" browsergym_v…></script>, <iframe> was expected

In order to accomplish the goal of selecting '9SRsds' and clicking Submit, the correct action to take is:

gz

gz

Rwo

Rwo

VzhLzQE

VzhLzQE

gz

gz

Rwo

Rwo

VzhLzQE

VzhLzQE

Executing browser actions: select_option('9SRsds', True)
click('36')

In order to accomplish the goal, you need to select the radio button with bid '9SRsds' and then click on the 'Submit' button.

gz

gz

Rwo

Rwo

VzhLzQE

VzhLzQE

Executing browser actions: select_option('24', True)

In order to accomplish the goal, the correct action is to select the option '9SRsds' and then click on the 'Submit' button.

gz

gz

Rwo

Rwo

VzhLzQE

VzhLzQE

Error: options[0].valueOrLabel: expected string, got boolean

Executing browser actions: select_option('24', '9SRsds')

In order to accomplish the goal of selecting 9SRsds and clicking Submit, the next action should be:

gz

gz

Rwo

Rwo

VzhLzQE

VzhLzQE

Error: Error: Element is not a <select> element
=========================== logs ===========================
waiting for get_by_test_id("24")
  locator resolved to <input id="ch2" bid="24" value="on" type="radio" name="…/>
  selecting specified option(s)
  Element is not a <select> element
============================================================

No observation

All done! What's next on the agenda?

No observation


Instruction: Expand the pie menu below and click on the item labeled "H".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-pie.html

L  H  J  Created with Raphaël 2.1.2  Z  \+

#piemenu > svg { width: 100%; height: 100%; }
#piemenu { height: 150px; width: 150px; margin:auto; }
@media (max-width: 150px) { #piemenu { height: 100px; width: 100px; } }

[class|=wheelnav-piemenu-slice-basic] { fill: #497F4C; stroke: none; }
[class|=wheelnav-piemenu-slice-selected] { fill: #497F4C; stroke: none; }
[class|=wheelnav-piemenu-slice-hover] { fill: #497F4C;  stroke: none; fill-opacity: 0.77; cursor: pointer; }

[class|=wheelnav-piemenu-title-basic] { fill: #333; stroke: none; }
[class|=wheelnav-piemenu-title-selected] { fill: #fff; stroke: none; }
[class|=wheelnav-piemenu-title-hover] { fill: #222; stroke: none; cursor: pointer; }

.wheelnav-piemenu-spreader-in,
.wheelnav-piemenu-spreader-out { fill: #444; stroke: #444; stroke-width: 2; cursor: pointer; }
.wheelnav-piemenu-spreadertitle-in,
.wheelnav-piemenu-spreadertitle-out { fill: #eee; stroke: #444; cursor: pointer; }

var createItems = function(){
  var alphanumericList = core.shuffle(ui_utils.alphanumericList.slice());
  var setLength = core.randi(4,9)*-1;
  var problemSet = alphanumericList.splice(setLength);
  var wheel = new wheelnav('divWheel');
  wheel.spreaderEnable = true;
  wheel.currentPercent = 0;
  wheel.createWheel(problemSet);

  var expectedItem = core.sample(problemSet);

  return {items: wheel, expectedItem: expectedItem, problemSet: problemSet};
}

var genProblem = function() {
  var wheel = createItems();

  d3.select('#query').html('Expand the pie menu below and click on the item labeled "' + wheel.expectedItem + '".');

  var clickEvent = function(){
    var r = wheel.problemSet[this.itemIndex] === wheel.expectedItem ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
    // add some slight delay to removing the nav wheel, otherwise
    // it looks like it disappears a bit too suddenly.
    setTimeout(function(){wheel.items.removeWheel();}, 50);
  }

  // binding click events normally causes some weird delay and events sometimes not
  // properly triggering, so do this instead.
  var wheelElems = wheel.items;
  for(var i=0;i<wheelElems.navItems.length;i++){
    wheelElems.navItems[i].navigateFunction = clickEvent;
  }
}

window.onload = function() {
  core.startEpisode();
}

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; fill-opacity: 1;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font: 100 24px Impact, Charcoal, sans-serif; cursor: pointer;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default; fill-opacity: 1;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font: 100 24px Impact, Charcoal, sans-serif; cursor: default;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font: 100 32px Impact, Charcoal, sans-serif; cursor: pointer;

Executing browser actions:

Executing browser actions:

Executing browser actions: click('H')

In order to accomplish my goal, I need to click on the item labeled "H" in the pie menu.

ValueError: Could not find element with bid "H"

Executing browser actions:

Executing browser actions: click('H')

Executing browser actions:

No observation

All done! What's next on the agenda?

No observation


Instruction: Expand the pie menu below and click on the item labeled "E".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-pie-nodelay.html

E  B  I  c  z  Created with Raphaël 2.1.2  q  \+

var createItems = function(){
  var alphanumericList = core.shuffle(ui_utils.alphanumericList.slice());
  var setLength = core.randi(4,9)*-1;
  var problemSet = alphanumericList.splice(setLength);
  var wheel = new wheelnav('divWheel');
  wheel.spreaderEnable = true;
  wheel.currentPercent = 0;
  wheel.animatetime = 0;
  wheel.animateeffect = 'linear';
  wheel.createWheel(problemSet);

  var expectedItem = core.sample(problemSet);

  return {items: wheel, expectedItem: expectedItem, problemSet: problemSet};
}

var genProblem = function() {
  var wheel = createItems();

  d3.select('#query').html('Expand the pie menu below and click on the item labeled "' + wheel.expectedItem + '".');

  var clickEvent = function(){
    var r = wheel.problemSet[this.itemIndex] === wheel.expectedItem ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
    // add some slight delay to removing the nav wheel, otherwise
    // it looks like it disappears a bit too suddenly.
    setTimeout(function(){wheel.items.removeWheel();}, 50);
  }

  // binding click events normally causes some weird delay and events sometimes not
  // properly triggering, so do this instead.
  var wheelElems = wheel.items;
  for(var i=0;i<wheelElems.navItems.length;i++){
    wheelElems.navItems[i].navigateFunction = clickEvent;
  }
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions: click('18')

In order to accomplish my goal, I need to expand the pie menu and click on the item labeled "E".

Executing browser actions:

Executing browser actions: click('E')

In order to accomplish my goal, I need to click on the item labeled "E" in the pie menu.

ValueError: Could not find element with bid "E"

Executing browser actions:

Executing browser actions: click('E')

In order to accomplish the goal of expanding the pie menu and clicking on the item labeled "E", the next action should be to click on the item labeled "E" in the pie menu.

Executing browser actions:

Executing browser actions: click('E')

No observation

All done! What's next on the agenda?

No observation


Instruction: Select Guatemala, Sint Maarten from the scroll list and click Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-scroll-list.html

Reunion  Sao Tome and Principe  Nigeria  Myanmar  Andorra  Albania  Paraguay  Sint Maarten  Georgia  Guatemala  Submit

select { margin-top: 5px; height: 90px; }
button { margin-top: 5px; }

core.EPISODE_MAX_TIME = 15000; // set episode interval to 15 seconds
var MAX_CHOSEN = 2;
var countries = [];

var correctOptions = function(htmlCollection, expectedColection){
  for(var i=0;i<htmlCollection.length;i++){
    var option = htmlCollection[i].value;
    if(expectedColection.indexOf(option) === -1) return false;
  }
  return true;
}

var createScrollList = function(div){
  var ITEMS = core.randf(0,1) < 0.5 ? ui_utils.PEOPLE_NAMES : ui_utils.COUNTRIES;
  ITEMS = ITEMS.slice();
  core.shuffle(ITEMS);

  var sel = div.append('select').attr('id', 'options').attr('style', 'width:150px;').attr('multiple', '');
  var n = core.randi(8, 12);
  for(var i=0;i<n;i++) {
    sel.append('option').html(ITEMS[i]);
  }

  var expected = [];
  var gt_txt = '';
  while(expected.length < MAX_CHOSEN){
    var ix = core.randi(0, n); // ground truth index
    if(expected.indexOf(ITEMS[ix]) !== -1) continue;
    expected.push(ITEMS[ix]);
    if (expected.length > 1)  gt_txt += ', '
    gt_txt += ITEMS[ix];
    if(core.sample([true, false]) === true) break;
  }

  return {gt_txt: gt_txt, expected: expected};
}

var bindSubmit = function(div, scrollList){
  var btn = div.append('button').html('Submit');
  btn.attr('class', 'secondary-action');
  btn.on('click', function(){
    var sel = document.getElementById('options').selectedOptions;
    var expectedLength = sel.length === scrollList.expected.length;
    var expectedOptions = correctOptions(sel, scrollList.expected);

    var r = expectedLength && expectedOptions ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

var genProblem = function() {
  var div = d3.select('#area');
  div.html('');

  var scrollList = createScrollList(div);

  d3.select('#query').html('Select ' + scrollList.gt_txt + ' from the scroll list and click Submit.');
  bindSubmit(div, scrollList);
}

window.onload = function() {
  d3.selectAll('option').each(function(d){
    countries.push(this.innerHTML);
  });

  core.startEpisode();
}

Executing browser actions: select_option('13', 'Guatemala')

To accomplish the goal, we need to select 'Guatemala' and 'Sint Maarten' from the scroll list and then click 'Submit'.

1. Select 'Guatemala':

Executing browser actions: select_option('13', 'Sint Maarten')

In order to accomplish the goal, the next action should be to select the option 'Sint Maarten' from the list.

Executing browser actions:

Executing browser actions: click('24')

In order to accomplish the goal of selecting Guatemala, Sint Maarten from the scroll list and clicking Submit, the next action should be to click the 'Submit' button.

Executing browser actions:

Executing browser actions: click('24')

In order to accomplish the goal, the correct action to take is to click the 'Submit' button.

Executing browser actions:

Executing browser actions: click('24')

In order to accomplish the goal, the next action should be to click the 'Submit' button.

Executing browser actions:

select_option('13', ['Guatemala', 'Sint Maarten'])

click('24'))

Agent reached maximum number of iterations


Instruction: Select all the shades of red and press Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-shades.html

Submit

#area span { display:inline-block; margin:12px; width:12px; height:12px; border-radius:2px; }
#area span.selected { border: 2px solid black; margin: 10px; }
#submit { float: right; margin: 5px 20px;}

core.EPISODE_MAX_TIME = 15000;  // set episode interval to 15 seconds
var COLORS = ['red', 'green', 'blue'];
var COLOR_HUES = [0, 120, 240];
var NUM_OF_SHADES = 12;

function createSpan( hsl, color ){
  var span = document.createElement('span');
  span.setAttribute('data-color', color);
  var colorsDIV = document.getElementById('area');
  span.style.backgroundColor = hsl;
  colorsDIV.appendChild(span);
}

function createSubmit(){
  var button = document.createElement('button');
  button.setAttribute('id', 'submit');
  button.setAttribute('class', 'secondary-action');
  button.innerHTML = 'Submit';
  document.getElementById('area').appendChild(button);
}

function generateShade(color, hue){
  var colorsDIV = document.getElementById('area');
  var hsl = 'hsl(' + hue + ', ' + core.randi(30,90) + '%, ' + core.randi(30, 90) + '%)';
  createSpan(hsl, color);
}

var generateShades = function(){
  var randIndex = core.randi(0, COLORS.length);
  var expectedColor = COLORS[randIndex];
  var expectedClicks = 0;

  // determine how many of each color should be generated.
  var shades = [];
  var shuffled_colors = core.shuffle([0,1,2]);
  for(var c=0;c<COLORS.length;c++){
    var currIndex = shuffled_colors[c];
    var newShades = (c+1) !== COLORS.length ? core.randi(3,6) : (NUM_OF_SHADES - shades.length);
    while(newShades>0){
      shades.push(currIndex);
      newShades -= 1;
      if(currIndex === randIndex) expectedClicks += 1;
    }
  }

  // randomize the order of colors
  var shuffledShades = core.shuffle(shades);
  for(var s=0;s<NUM_OF_SHADES;s++) {
    var currColor = shuffledShades[s];
    generateShade(COLORS[currColor], COLOR_HUES[currColor]);
  }

  return { expectedColor: expectedColor, expectedClicks: expectedClicks }
}

var bindClickEvents = function(problemSet){
  d3.selectAll('#area span').on('click', function(){
    var elemClass = this.getAttribute('class');
    (elemClass == 'selected') ? this.removeAttribute('class') : this.setAttribute('class', 'selected');
  });

  // only reward a positive score if *all* shades are correctly identified.
  d3.select('#area button').on('click', function(){
    var correctColors = d3.selectAll('span.selected')[0]
      .every(function(v,i){return v.getAttribute('data-color') == problemSet.expectedColor;});
    var correctAmount = d3.selectAll('span.selected')[0].length === problemSet.expectedClicks;
    var r = correctColors && correctAmount ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

var genProblem = function() {
  // reset the  UI
  d3.select('#query').html('');
  document.getElementById('area').innerHTML = '';

  var problemSet = generateShades();
  createSubmit();

  d3.select('#query').html('Select all the shades of ' + problemSet.expectedColor + ' and press Submit.')
  bindClickEvents(problemSet);
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

select_option('1', 'Dark Red')
select_option('2', 'Crimson')
select_option('3', 'Firebrick')
click('25'))

Submit

Executing browser actions:

select_option('1', ['Crimson', 'Dark Red', 'Firebrick']))

Submit

Executing browser actions:

Submit

Executing browser actions:

In order to accomplish my goal, I need to select all the shades of red before clicking on the 'Submit' button.

I will use the following actions:
- click('red1')
- click('red2')
- click('red3')
- click('red4')
- click('red5')
- click('red6')
- click('red7')
- click('red8')
- click('red9')
- click('red10')
- click('red11')
- click('red12')
- click('red13')
- click('Submit'))

Submit

Executing browser actions: python
click('red1')
click('red2')
click('red3')
click('red4')
click('red5')

In order to accomplish my goal, I need to select all the shades of red.

To do this, I will use the `click` action to click on each shade of red on the page.

1. Click on the first shade of red.
2. Click on the second shade of red.
3. Click on the third shade of red.
4. Click on the fourth shade of red.
5. Click on the fifth shade of red.

Submit

ValueError: Could not find element with bid "red1"

Executing browser actions:

In order to accomplish my goal of selecting all the shades of red and pressing Submit, I need to select the shades of red first. Looking at the current state of the page, I can see that there are no specific elements or identifiers for the shades of red. Therefore, I should inspect the page to identify the shades of red and then select them accordingly. Let's start by inspecting the page to find the shades of red.)

Submit

Too many errors encountered. Task failed.

No observation

All done! What's next on the agenda?

No observation


Instruction: Click on a o

Click on a o

Click on a o

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-shape.html

0  Q  U  B  V  2  O  o  C  5  j  Z  3  q

#area_svg { width: 160px; height: 160px; }

// generate a new random grid of shapes
var createShapes = function(){
  var grid = shapes.genGrid();
  var svg_elt = d3.select('#area_svg');
  shapes.renderGrid(svg_elt, grid); // instantiate the actual SVG shapes

  return grid;
}

var chooseShape = function(grid){
  var gtix = core.randi(0, grid.shapes.length);
  var gtdesc = shapes.generalDesc(grid.shapes[gtix]);
  d3.select('#query').html('Click on a ' + gtdesc.text); // render query
  return gtdesc;
}

var bindClickEvents = function(grid, gtdesc){
  // attach handlers to correct behavior
  for(var i=0,n=grid.shapes.length;i<n;i++) {
    var s = grid.shapes[i];
    var click_reward = shapes.shapeMatchesText(s, gtdesc) ? 1.0 : -1.0;
    s.svg_shape.on('click', function(x) {
      return function(){ core.endEpisode(x, x > 0); d3.event.stopPropagation(); }
    }(click_reward)); // close over click_reward
  }

  // attach chandler to default click in random spot (penalize)
  grid.svg.on("click", function(){ core.endEpisode(-1); });
}

// create a problem instance
var genProblem = function() {
  var grid = createShapes()
  var gtdesc = chooseShape(grid);
  bindClickEvents(grid, gtdesc);
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

Executing browser actions: click("2")

In order to accomplish my goal I need to click on the button with bid '2'.

TimeoutError: Timeout 500ms exceeded.
=========================== logs ===========================
waiting for get_by_test_id("2")
  locator resolved to <title bid="2" browsergym_set_of_marks="0" browsergym_v…>Click Shape Task</title>
attempting click action
  waiting for element to be visible, enabled and stable
    element is not visible - waiting...
============================================================

Executing browser actions: click("2")

In order to accomplish my goal, I need to click on the button with bid "2".

Executing browser actions: click("O")

In order to accomplish my goal I need to click on the button with text "O".

ValueError: Could not find element with bid "O"

Executing browser actions: click("O")

Executing browser actions: click("O")

No observation

All done! What's next on the agenda?

No observation


Instruction: Click on Tab #2.

Click on Tab #2.

Click on Tab #2.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-tab.html

<::before><::after>
  * Tab #1
  * Tab #2
  * Tab #3

Interdum tincidunt urna odio aliquam cursus at penatibus arcu malesuada. Natoque commodo eget massa facilisis dignissim praesent. Cursus id tortor.

Sit. Magna duis. Facilisi integer. Mattis egestas non cum donec mattis enim lorem suspendisse dapibus porttitor malesuada. Nunc sed integer.

Sit scelerisque pharetra ut ipsum fringilla porta etiam porttitor ut consequat cras integer amet,. Nunc augue. Id sed vulputate consectetur.

#area h3 { background: #007fff; border: 1px solid #003eff; border-radius: 3px; color: #ffffff; cursor: pointer; font-weight: normal; margin: 2px; padding: 1px; }
#area div { margin: 2px; }
#area li { width: 40px; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 5px; }

var TABS = `

Tab #1

Tab #2

Tab #3

`

var resetUI = function(div){
  if(div.html().length > 0){ $('#area').tabs('destroy'); }
  div.empty(); // clear previous problem, if any
  $.resetUniqueId();
}

var createTabs = function(div){
  div.append(TABS);
  for(var i=0;i<3;i++){
    var html = '

' + ui_utils.generateWords(20) + '

';
    div.append(html);
  }

  $('#area').tabs();
}

var chooseTab = function(){
  var expectedTab = core.randi(1,4);
  if(expectedTab === 2) $('#query').html('Click on Tab #2.');
  else if(expectedTab == 3) {
    $('#query').html('Click on Tab #3.');
    $('#area').tabs({active: core.sample([0,1])});
  } else {
    $('#query').html('Click on Tab #1.');
    $('#area').tabs({active: core.sample([1,2])});
  }

  return expectedTab;
}

var genProblem = function() {
  // generate the task
  var div = $('#area');
  resetUI(div);
  createTabs(div);
  var expectedTab = chooseTab();

  $('#area ul a').on('click', function(){
    var tabId = this.getAttribute('href');
    var r = tabId === ('#tabs-' + expectedTab) ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  })
}

window.onload = function() {
  core.startEpisode();
}

ui-tabs ui-corner-all ui-widget ui-widget-content

ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header

ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('21')

In order to accomplish the goal of clicking on Tab #2, the action to be taken is:

ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-state-hover ui-state-focus ui-tabs-active ui-state-active

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('20')

In order to accomplish my goal I need to click on Tab #2.

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('20')

In order to accomplish my goal, I need to click on Tab #2.

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('20')

In order to accomplish the goal of clicking on Tab #2, the next action should be:

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('20')

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Agent reached maximum number of iterations


Instruction: Switch between the tabs to find and click on the link "congue".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-tab-2.html

<::before><::after>
  * Tab #1
  * Tab #2
  * Tab #3

Vel  lobortis  nunc in mattis eget viverra facilisis.  Egestas  in. Sit. Parturient vitae. Platea  congue  rhoncus auctor. Tempus, velit  eget.

Varius pulvinar purus  feugiat  elit  quisque  tortor  eget tellus id. Posuere  ut.  In aliquam  aliquet  enim  gravida  tellus  sed  congue.

Consectetur ornare neque. At purus  ac  magna  a.  Nunc. Eget. A facilisis leo eget  amet.  Lacus aliquet magna  vitae.  Eget.

#area h3 { background: #007fff; border: 1px solid #003eff; border-radius: 3px; color: #ffffff; cursor: pointer; font-weight: normal; margin: 2px; padding: 1px; }
#area div { margin: 2px; }
#area li { width: 40px; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 5px; }
#area .alink { color: #0000EE; cursor: pointer; text-decoration: underline; }

var TABS = `

Tab #1

Tab #2

Tab #3

`

var generateLinks = function(div){
  // since we randomly generate links, run this in a while loop
  // until we produce text that know for sure contains a link,
  // otherwise the script will error out and fail.
  var linkCreated = false;
  while(!linkCreated){
    div.empty(); // clear previous problem, if any
    div.append(TABS);
    for(var i=0;i<3;i++){
      var txt =  ui_utils.generateWords(20).split(/\s/g);
      for(var j=0;j<txt.length; j++){
        if(Math.random() < 0.2){
          txt[j] = '' + txt[j] + '';
          linkCreated = true;
        }
      }
      var html = '

' + txt.join(' ') + '

';
      div.append(html);
    }
  }

  // turn the HTML into jQuery tabs!
  $('#area').tabs();
}

var bindClickEvents = function(){
  var elements = document.getElementsByClassName('alink');
  var correctIndex = core.randi(0, elements.length);
  var correctText = elements[correctIndex].innerHTML;
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.innerHTML === correctText) {
      d3.select(e).on('click', function(){ core.endEpisode(1.0, true); })
    } else {
      d3.select(e).on('click', function(){ core.endEpisode(-1.0); })
    }
  }

  return correctText;
}

var genProblem = function() {
  // generate the task
  var div = $('#area');
  if(div.html().length > 0){ $('#area').tabs('destroy'); }
  $.resetUniqueId();

  generateLinks(div);

  var any = core.getOpt(core.QueryString, 'any', false); // click Any link?
  var correctText = bindClickEvents();

  // generate query text in the UI
  d3.select('#query').html('Switch between the tabs to find and click on the link "' + correctText + '".');
}

window.onload = function() {
  core.startEpisode();
}

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('19')

To accomplish the goal of clicking on the link "congue", we need to switch to the tab where the link is located. The link "congue" is in the content of Tab #1. Therefore, we should click on Tab #1 to access the link.

ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active ui-state-hover ui-state-focus

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('22')
click('23')

In order to accomplish the goal of clicking on the "congue" link, the next action should be to click on the tab for "Tab #3" and then click on the link "congue".

Tab #3

Tab #3

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #3

Tab #3

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('22')

In order to accomplish the goal of clicking on the "congue" link, we need to switch to Tab #3 and then click on the link.

Tab #3

Tab #3

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #3

Tab #3

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('23')

In order to accomplish the goal of clicking on the link "congue", I need to click on the link with bid 23.

Tab #3

Tab #3

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions:

Tab #3

Tab #3

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Executing browser actions: click('41')

In order to accomplish the goal of clicking on the link "congue", I need to click on the link inside the tabpanel with the id '41'.

Tab #3

Tab #3

Tab #1

Tab #1

Tab #2

Tab #2

Tab #3

Tab #3

Agent reached maximum number of iterations


Instruction: Switch between the tabs to find and click on the link "felis,".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-tab-2-easy.html

<::before><::after>
  * Tab #1

Aenean.  Vel  porttitor  lorem nec, magnis auctor mi  odio.  A aliquet. Velit non risus. Neque, donec velit  felis,  viverra  dolor.

var TABS = `

Tab #1

`

var generateLinks = function(div){
  // since we randomly generate links, run this in a while loop
  // until we produce text that know for sure contains a link,
  // otherwise the script will error out and fail.
  var linkCreated = false;
  while(!linkCreated){
    div.empty(); // clear previous problem, if any
    div.append(TABS);
    for(var i=0;i<1;i++){
      var txt =  ui_utils.generateWords(20).split(/\s/g);
      for(var j=0;j<txt.length; j++){
        if(Math.random() < 0.2){
          txt[j] = '' + txt[j] + '';
          linkCreated = true;
        }
      }
      var html = '

' + txt.join(' ') + '

';
      div.append(html);
    }
  }

  // turn the HTML into jQuery tabs!
  $('#area').tabs();
}

var bindClickEvents = function(){
  var elements = document.getElementsByClassName('alink');
  var correctIndex = core.randi(0, elements.length);
  var correctText = elements[correctIndex].innerHTML;
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.innerHTML === correctText) {
      d3.select(e).on('click', function(){ core.endEpisode(1.0, true); })
    } else {
      d3.select(e).on('click', function(){ core.endEpisode(-1.0); })
    }
  }

  return correctText;
}

var genProblem = function() {
  // generate the task
  var div = $('#area');
  if(div.html().length > 0){ $('#area').tabs('destroy'); }
  $.resetUniqueId();

  generateLinks(div);

  var any = core.getOpt(core.QueryString, 'any', false); // click Any link?
  var correctText = bindClickEvents();

  // generate query text in the UI
  d3.select('#query').html('Switch between the tabs to find and click on the link "' + correctText + '".');
}

window.onload = function() {
  core.startEpisode();
}

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions: click("21")

In order to accomplish the goal of clicking on the link "felis," in the current tab, you should click on the link with bid 21.

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions: click("19")

In order to accomplish the goal of clicking on the link "felis," in the current tab, the next action should be to click on the link with bid 19.

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions: click("21")

In order to accomplish my goal, I need to click on the link "felis" within the current tab.

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions: click("18")

In order to accomplish my goal, I need to switch to the second tab to find and click on the link "felis".

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Executing browser actions: click("21")

In order to accomplish the goal of clicking on the link "felis," I need to click on the link with bid 21.

Tab #1

Tab #1

Tab #1

Tab #1

Agent reached maximum number of iterations


Instruction: Switch between the tabs to find and click on the link "Ac,".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-tab-2-hard.html

<::before><::after>
  * 1
  * 2
  * 3
  * 4
  * 5
  * 6

Tempor sollicitudin amet, lectus at  eget  donec  vitae lacus,.  Pretium  gravida ridiculus vel facilisis ullamcorper tincidunt  egestas.  Cursus quis ornare.

Vel lectus vestibulum mi elementum a. Lacus,. Rhoncus. Nunc,  blandit  vestibulum adipiscing. Vulputate  neque,  elit neque.  Habitant  sed pharetra  ornare.

Convallis rhoncus vitae.  Ac,  montes,.  Integer ipsum nisl, mauris tristique  ut  nunc.  Amet  massa, varius sed vulputate  maecenas  et  consequat.

Convallis amet. Sed ac purus pretium commodo sed ullamcorper.  Dui  lacus,  sed. Egestas. Mattis. Scelerisque  ipsum  consectetur tincidunt in  netus.

Ligula lacus  mauris.  Nisl  vitae  nibh  adipiscing. Elementum,  amet  nullam. Eget quam. Blandit nisi. Venenatis. Nec, sit.  Cras.  Vel  dui.

Suspendisse urna sed at. Tellus. Tincidunt eleifend scelerisque.  Mollis.  Nulla  nibh velit in quis. Adipiscing. Leo, eget. Pellentesque tristique eu.

#area h3 { background: #007fff; border: 1px solid #003eff; border-radius: 3px; color: #ffffff; cursor: pointer; font-weight: normal; margin: 2px; padding: 1px; }
#area div { margin: 2px; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 5px; }
#area .alink { color: #0000EE; cursor: pointer; text-decoration: underline; }

core.EPISODE_MAX_TIME = 20000; // 20 seconds

var generateLinks = function(div){
  // since we randomly generate links, run this in a while loop
  // until we produce text that know for sure contains a link,
  // otherwise the script will error out and fail.
  var linkCreated = false;
  while(!linkCreated){
    div.empty(); // clear previous problem, if any
    var numTabs = core.randi(2, 7);
    var wrapper = $('
').appendTo(div);
    for(var i=1;i<=numTabs;i++){
      var tab = $('').attr('href', '#tabs-' + i).text('' + i)
        .appendTo($('
').appendTo(wrapper));
      var txt = ui_utils.generateWords(20).split(/\s/g);
      for(var j=0;j<txt.length; j++){
        if(Math.random() < 0.2){
          txt[j] = '' + txt[j] + '';
          linkCreated = true;
        }
      }
      var html = '

' + txt.join(' ') + '

';
      div.append(html);
    }
  }

  // turn the HTML into jQuery tabs!
  $('#area').tabs();
}

var bindClickEvents = function(){
  var elements = document.getElementsByClassName('alink');
  var correctIndex = core.randi(0, elements.length);
  var correctText = elements[correctIndex].innerHTML;
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.innerHTML === correctText) {
      d3.select(e).on('click', function(){ core.endEpisode(1.0, true); })
    } else {
      d3.select(e).on('click', function(){ core.endEpisode(-1.0); })
    }
  }

  return correctText;
}

var genProblem = function() {
  // generate the task
  var div = $('#area');
  if(div.html().length > 0){ $('#area').tabs('destroy'); }
  $.resetUniqueId();

  generateLinks(div);

  var any = core.getOpt(core.QueryString, 'any', false); // click Any link?
  var correctText = bindClickEvents();

  // generate query text in the UI
  d3.select('#query').html('Switch between the tabs to find and click on the link "' + correctText + '".');
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions: click('20')

To accomplish the goal of clicking on the link "Ac," you need to switch to the tab associated with the link. In this case, you should click on tab '2' to access the link "Ac,".

ui-tabs ui-corner-all ui-widget ui-widget-content

ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header

ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-state-hover ui-state-focus ui-tabs-active ui-state-active

Executing browser actions:

Executing browser actions: click('22')

In order to accomplish the goal of switching between the tabs to find and click on the link "Ac," the next action should be to click on tab 3 where the link "Ac," might be located.

Executing browser actions: click('22')

In order to accomplish the goal of clicking on the link "Ac," in the tabpanel, the next action should be to click on tab '3' to switch to that tab.

Executing browser actions:

Executing browser actions: click('22')

In order to accomplish the goal of clicking on the link "Ac," I should click on the tab with the link inside. The link "Ac," is located in tab 3. Therefore, the next action should be:

Executing browser actions:

Executing browser actions: click('23')

In order to accomplish the goal of clicking on the link "Ac," in the tabpanel, the next action should be to click on the link within the currently selected tabpanel.

Executing browser actions:

Agent reached maximum number of iterations


Instruction: Switch between the tabs to find and click on the link "Amet,".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-tab-2-medium.html

<::before><::after>
  * Tab #1
  * Tab #2

Ultrices laoreet. Ac ultricies et convallis dui. Rutrum  eleifend  risus nibh scelerisque.  Amet,  sed. Aenean convallis integer. Gravida pretium lorem.

#area h3 { background: #007fff; border: 1px solid #003eff; border-radius: 3px; color: #ffffff; cursor: pointer; font-weight: normal; margin: 2px; padding: 1px; }
#area div { margin: 2px; }
#area li { width: 40px; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 5px; }
#area .alink { color: #0000EE; cursor: pointer; text-decoration: underline; }

var TABS = `

Tab #1

Tab #2

`

var generateLinks = function(div){
  // since we randomly generate links, run this in a while loop
  // until we produce text that know for sure contains a link,
  // otherwise the script will error out and fail.
  var linkCreated = false;
  while(!linkCreated){
    div.empty(); // clear previous problem, if any
    div.append(TABS);
    for(var i=0;i<2;i++){
      var txt =  ui_utils.generateWords(20).split(/\s/g);
      for(var j=0;j<txt.length; j++){
        if(Math.random() < 0.2){
          txt[j] = '' + txt[j] + '';
          linkCreated = true;
        }
      }
      var html = '

' + txt.join(' ') + '

';
      div.append(html);
    }
  }

  // turn the HTML into jQuery tabs!
  $('#area').tabs();
}

var bindClickEvents = function(){
  var elements = document.getElementsByClassName('alink');
  var correctIndex = core.randi(0, elements.length);
  var correctText = elements[correctIndex].innerHTML;

  // Remove everything from the 2nd tab
  $('#tabs-2').empty();

  var elements = document.getElementsByClassName('alink'), hasCorrect = false;
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.innerHTML === correctText) {
      d3.select(e).on('click', function(){ core.endEpisode(1.0, true); })
      hasCorrect = true;
    } else {
      d3.select(e).on('click', function(){ core.endEpisode(-1.0); })
    }
  }

  var tabs = document.getElementsByClassName('ui-tab');
  if (!hasCorrect) {
    d3.select(tabs[1]).on('click', function(){ core.endEpisode(1.0, true); })
  } else {
    d3.select(tabs[1]).on('click', function(){ core.endEpisode(-1.0); })
  }

  return correctText;
}

var genProblem = function() {
  // generate the task
  var div = $('#area');
  if(div.html().length > 0){ $('#area').tabs('destroy'); }
  $.resetUniqueId();

  generateLinks(div);

  var any = core.getOpt(core.QueryString, 'any', false); // click Any link?
  var correctText = bindClickEvents();

  // generate query text in the UI
  d3.select('#query').html('Switch between the tabs to find and click on the link "' + correctText + '".');
}

window.onload = function() {
  core.startEpisode();
}

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions: click('19')

In order to accomplish the goal of clicking on the link "Amet," in the current tab, the following action needs to be performed:

ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active ui-state-hover ui-state-focus

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions: click('23')

In order to accomplish my goal, I need to click on the link "Amet," within the current tab.

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions: click('23')

In order to accomplish my goal I need to click on the link "Amet," in the tabpanel.

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions: click('21')

In order to accomplish my goal of clicking on the link "Amet," I need to click on the tab for 'Tab #2' and then click on the link within the tab.

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions:

Tab #2

Tab #2

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions: click('19')

In order to accomplish my goal, I need to switch to the tab with the link "Amet" by clicking on the tab associated with the link.

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Executing browser actions:

Tab #1

Tab #1

Tab #1

Tab #1

Tab #2

Tab #2

Agent reached maximum number of iterations


Instruction: Click the button.

Click the button.

Click the button.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-test.html

Click Me!

var genProblem = function() {
  var w = core.randi(35, 100);
  var L = core.randi(0, 160 - w - 2);
  var U = core.randi(0, 160 - w - 2);

  var btn = d3.select('#subbtn');
  btn.attr('style', 'margin-left:'+L+'px; margin-top:'+U+'px; width:'+w+'px; height:'+w+'px;');
  btn.on('click', function(){ core.endEpisode(1.0, true); });
}

window.onload = function() {
  core.startEpisode();
}

margin-left:28px; margin-top:112px; width:38px; height:38px;

Executing browser actions:

Click Me!

Executing browser actions: click("13")

In order to accomplish my goal I need to click on the button with bid 13.

Click Me!

Executing browser actions:

Click Me!

Executing browser actions: click("13")

Click Me!

Executing browser actions:

Click Me!

Executing browser actions:

Click Me!

Executing browser actions: click("13")

Click Me!

Executing browser actions:

Click Me!

Executing browser actions: click("13")

Click Me!

Agent reached maximum number of iterations


Instruction: Click button ONE.

Click button ONE.

Click button ONE.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-test-2.html

ONE  TWO

#subbtn { width: 40px; height: 40px; }
#subbtn2 { width: 40px; height: 40px; }

var genProblem = function() {
  var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var btn = d3.select('#subbtn');
  btn.attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  btn.on('click', function(){ core.endEpisode(1.0, true); });

  var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var btn = d3.select('#subbtn2');
  btn.attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  btn.on('click', function(){ core.endEpisode(-1.0, false); });
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

ONE  TWO

Executing browser actions: click("13")

In order to accomplish my goal, I need to click on button 'ONE'.

ONE  TWO

Executing browser actions:

ONE  TWO

Executing browser actions: click("14")

In order to accomplish my goal I need to click on the button with bid 14

ONE  TWO

Executing browser actions:

ONE  TWO

Executing browser actions: click("13")

In order to accomplish my goal I need to click on button 'ONE'.

ONE  TWO

Executing browser actions:

ONE  TWO

Executing browser actions: click("13")

In order to accomplish my goal, I need to click on button 'ONE' again.

ONE  TWO

Executing browser actions:

ONE  TWO

Agent reached maximum number of iterations


Instruction: Click button ONE.

Click button ONE.

Click button ONE.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-test-transfer.html

ONE  TWO

var genProblem = function() {
  var correct = (WOB_DATA_MODE == 'test') ? 'TWO' : 'ONE';

  var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var btn = d3.select('#subbtn');
  btn.attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  btn.on('click', null);
  btn.on('click', function(){
    core.endEpisode(correct == 'ONE' ? 1.0 : -1.0, correct == 'ONE');
  });

  var L = core.randi(0, 118); var U = core.randi(0, 118) + 50;
  var btn = d3.select('#subbtn2');
  btn.attr('style', 'position:absolute; left:'+L+'px; top:'+U+'px');
  btn.on('click', null);
  btn.on('click', function(){
    core.endEpisode(correct == 'TWO' ? 1.0 : -1.0, correct == 'TWO');
  });

  d3.select('#query').html('Click button ' + correct + '.');
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

ONE  TWO

Executing browser actions: click("13")

ONE  TWO

Executing browser actions:

ONE  TWO

Executing browser actions: click("13")

In order to accomplish my goal, I need to click on the button with bid 13.

ONE  TWO

Executing browser actions:

ONE  TWO

Executing browser actions: click("13")

ONE  TWO

Executing browser actions:

ONE  TWO

Executing browser actions: click("13")

ONE  TWO

Executing browser actions:

ONE  TWO

Agent reached maximum number of iterations


Instruction: Click on a "textarea" widget.

Click on a "textarea" widget.

Click on a "textarea" widget.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/click-widget.html

P97iQ

1

35Xbv

gSTQW

Z

#area .widget { margin: 5px 0;}
#area textarea { height: 20px; }
#area input[type=input] { width: 120px !important; }

var ELEMENT_NAMES = ['radio', 'checkbox', 'text', 'textarea', 'button'];
var ELEMENT_HTML = {
  'radio': {'start': '
<input type="radio" data-type="radio" name="radio">',
    'end': '
'},
  'checkbox': {'start':'
<input type="checkbox" data-type="checkbox">',
    'end':'
'},
  'text': {'start': '
<input type="input" data-type="text" value="',
    'end':'">
'},
  'textarea': {'start':'
<textarea data-type="textarea">',
    'end':'</textarea>
'},
  'button': {'start': '
<button data-type="button">',
    'end':'</button>
'}
};
var NUM_ELEMENTS = 5;

var createWidgets = function(){
  // generate query text in the UI
  var elements = []
  for(var i=0;i<NUM_ELEMENTS;i++){
    randIndex = core.randi(0,ELEMENT_NAMES.length);
    var elemName = ELEMENT_NAMES[randIndex];
    var randomText = ui_utils.generateString(1,6);
    $('#area').append(ELEMENT_HTML[elemName]['start'] + randomText + ELEMENT_HTML[elemName]['end']);
    elements.push(elemName);
  }

  return elements;
}

var bindClickEvents = function(elements){
  var randomElement = core.sample(elements);
  $('#area .widget').on('click', function(){
    var elemType = $(this).find('input, textarea, button')[0].getAttribute('data-type');
    var r = elemType === randomElement ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  })

  return randomElement;
}

var genProblem = function() {
  $('#area').empty();
  var elements = createWidgets();
  var chosenElement = bindClickEvents(elements);

  $('#query').html('Click on a "' + chosenElement + '" widget.');
}

window.onload = function() {
  core.startEpisode();
}

Z

Z

Executing browser actions:

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions: click('19')

In order to accomplish my goal I need to click on the textarea widget.

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions:

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions: focus('21')

In order to accomplish the goal of clicking on a "textarea" widget, the next action should be to focus on the textarea widget with bid '21'.

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions:

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions: click('21')

In order to accomplish my goal I need to click on the textarea widget with bid 21.

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions:

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions: click('21')

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Executing browser actions:

P97iQ

1

35Xbv

gSTQW

Z

Z

Z

Agent reached maximum number of iterations


Instruction: Copy the text in the textarea below, paste it into the textbox and press Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/copy-paste.html

Submit

#answer-input { width: 150px; margin: 3px 0 3px 0; }

var TEXT_AREA = '<textarea id="to-copy"></textarea>';
var ANSWER_INPUT = '<input id="answer-input" type="text">';

// reset the UI, randomly place the textarea and input fields, randomize textarea height
var setupTextArea = function(){
  var problemType = core.randi(0,2);
  if (problemType===0) document.getElementById('container').innerHTML = TEXT_AREA + ANSWER_INPUT;
  else document.getElementById('container').innerHTML = ANSWER_INPUT + TEXT_AREA;
  var textAreaHeight = core.randi(6,15)*5;
  var textAreaWidth = core.randi(11,30)*5;
  document.getElementById('to-copy').setAttribute('style', 'height: ' + textAreaHeight + 'px; width: ' + textAreaWidth + 'px;');
}

// generate paragraph of text in text area
var randomizeTextArea = function(){
  var firstWord = true;
  var txt = '';
  var n = core.randi(6, 10);
  var expectedIndex = core.randi(0,n);

  for(var i=0;i<n;i++) {
    var ri = core.randi(0, ui_utils.lorem_words.length);
    var w = ui_utils.lorem_words[ri];
    if(firstWord) { w = ui_utils.txtCapitalize(w); firstWord = false;}
    if(Math.random() < 0.2) { txt += w + '. '; firstWord = true; }
    else { txt += w + ' '; }
  }

  var expectedText = txt;

  d3.select('#area textarea')[0][0].value = expectedText;
  return expectedText;
}

var genProblem = function() {
  setupTextArea();
  var expectedText = randomizeTextArea();

  // create the query
  d3.select('#query').html('Copy the text in the textarea below, paste it into the textbox and press Submit.');

  d3.select('#subbtn').on('click', function(){
    var ans = document.getElementById('answer-input').value;
    var r = ans === expectedText ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

fill('14', 'Volutpat facilisi et dolor,. Sed enim, ullamcorper malesuada sed '))

Submit

Executing browser actions:

Submit

Executing browser actions:

Submit

Executing browser actions: fill('14', 'Volutpat facilisi et dolor,. Sed enim, ullamcorper malesuada sed ')

In order to accomplish my goal I need to copy the text in the textbox and paste it into the textarea.

Submit

Executing browser actions:

Submit

Executing browser actions: click("16")

In order to accomplish my goal I need to click on the button with bid 16

Submit

Executing browser actions:

fill('14', 'Volutpat facilisi et dolor,. Sed enim, ullamcorper malesuada sed ')

click("16"))

Submit

Executing browser actions: noop()

Submit

Executing browser actions:

Submit

Agent reached maximum number of iterations


Instruction: Copy the text from the 1st text area below and paste it into the text input, then press Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/copy-paste-2.html

Submit

var TEXTAREAS = 3; // # of text areas to work with
var POSITIONS = ['', '1st', '2nd', '3rd'];

var genWords = function(){
  // generate paragraph of text
  var firstWord = true;
  var txt = '';
  var n = core.randi(6, 10);
  var expectedIndex = core.randi(0,n);

  for(var i=0;i<n;i++) {
    var ri = core.randi(0, ui_utils.lorem_words.length);
    var w = ui_utils.lorem_words[ri];
    if(firstWord) { w = ui_utils.txtCapitalize(w); firstWord = false;}
    if(Math.random() < 0.2) { txt += w + '. '; firstWord = true; }
    else { txt += w + ' '; }
  }
  return txt;
}

var setupTextAreas = function(){
  // reset the UI, randomly place the textarea and input fields, randomize textarea height
  for(i=1;i<=TEXTAREAS;i++){
    var textAreaID = 'text-' + i;
    document.getElementById(textAreaID).value = '';
    var textAreaWidth = core.randi(11,30)*5;
    document.getElementById(textAreaID).setAttribute('style', 'width: ' + textAreaWidth + 'px;');
  }
  document.getElementById('answer-input').value = '';
  var expectedText = '';
  var expectedArea = core.randi(1,4);

}

var chooseText = function(){
  var expectedText = '';
  var expectedArea = core.randi(1,4);

  for(i=1;i<=TEXTAREAS;i++){
    var txt = genWords();
    if(i === expectedArea) expectedText = txt;
    document.getElementById('text-'+i).value = txt;
  }

  return { expectedText: expectedText, expectedArea: expectedArea };
}

var bindClickEvents = function(chosenText){
  d3.select('#subbtn').on('click', function(){
    var ans = document.getElementById('answer-input').value;
    var r = ans === chosenText.expectedText ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

var genProblem = function() {
  setupTextAreas();
  var chosenText = chooseText();

  // create the query
  d3.select('#query').html('Copy the text from the ' + POSITIONS[chosenText.expectedArea] + ' text area below and paste it into the text input, then press Submit.');

  bindClickEvents(chosenText);
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

fill('Justo, ac. Nec amet,. Urna. Rhoncus consectetur. Tempor dictum '))

Submit

Executing browser actions: fill('13', 'Justo, ac. Nec amet,. Urna. Rhoncus consectetur. Tempor dictum ')

In order to accomplish my goal I need to copy the text from the 1st text area and paste it into the text input, then press Submit.

Submit

Executing browser actions:

Submit

Executing browser actions: click("19")

In order to accomplish my goal I need to click on the button with bid 19

Submit

Executing browser actions:

Submit

Executing browser actions: fill('15', 'Mi. Pellentesque vivamus morbi euismod. Non ')

In order to accomplish my goal I need to copy the text from the 1st text area below and paste it into the text input, then press Submit.

Submit

Executing browser actions:

fill('17', 'Vitae. Urna aliquam sed feugiat facilisi scelerisque '))

Submit

Executing browser actions: fill('18', 'Justo, ac. Nec amet,. Urna. Rhoncus consectetur. Tempor dictum ')

Submit

Executing browser actions:

Submit

Agent reached maximum number of iterations


Instruction: How many large red items are there?

How many large red items are there?

How many large red items are there?

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/count-shape.html

4  y  i  9  5

1  0  5  7  4

#area { position: relative; height: 154px; width: 154px; }
#area_svg { width: 154px; height: 130px; }
#count-buttons { position: absolute; left: 6px; bottom: 2px; }
#count-buttons button { margin: 0 2px; }
button { width: 25px; }

shapes.SZ_Y = 6;
shapes.MAX_NUM_SHAPES = 10; // override variables from shapes.js (since counting is hard)

var createGrid = function(){
  // generate a new random grid of shapes
  d3.select('#count-buttons').html('');
  var grid = shapes.genGrid();
  var svg_elt = d3.select('#area_svg');
  shapes.renderGrid(svg_elt, grid); // instantiate the actual SVG shapes

  return grid;
}

var chooseShape = function(grid){
  // generate the problem instance
  if(core.randf(0,1) < 0.3) {
    var gtdesc = shapes.sampleDesc(); // answer could be 0
  } else {
    var gtix = core.randi(0, grid.shapes.length); // answer is 1+
    var gtdesc = shapes.generalDesc(grid.shapes[gtix]);
  }
  var gtshapes = grid.shapes.filter(function(x) { return shapes.shapeMatchesText(x, gtdesc); });

  return { gtdesc: gtdesc, gtshapes: gtshapes };
}

var bindClickEvents = function(grid, problemSet, query){
  var gtix = core.randi(0,5);
  var used = {};
  for(var query=0;query<5;query++) {
    if(gtix === query) {
      var c = problemSet.gtshapes.length; // true answer
    } else {
      while(true) {
        var c = core.randi(0,10);
        if(c !== problemSet.gtshapes.length && !used.hasOwnProperty(c)) { used[c] = 1; break; }
      }
    }
    // attach button and create a click handler
    var btn = d3.select('#count-buttons').append('button').html(c);
    var click_reward = gtix === query ? 1.0 : -1.0;
    btn.on('click', function(x) {
      return function(){ core.endEpisode(x, x > 0); d3.event.stopPropagation(); }
    }(click_reward)); // close over click_reward
  }

  // attach chandler to default click in random spot (penalize)
  grid.svg.on('click', function(){ core.endEpisode(-1); });
}

// create a problem instance
var genProblem = function() {
  var grid = createGrid();
  var problemSet = chooseShape(grid);
  var q = d3.select('#query').html('')

  q.append('div').html('How many ' + problemSet.gtdesc.text + 's are there?');
  var d = q.append('div');
  bindClickEvents(grid, problemSet, q);
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

4  y  i  9  5

1  0  5  7  4

Executing browser actions:

Counting the large red items on the page requires observing the elements. Let's focus on finding the large red items.

To count the large red items, we need to interact with the elements on the page. Let's hover over the items to identify the large red ones.

Let's hover over each item to identify the large red items.)

4  y  i  9  5

1  0  5  7  4

Executing browser actions: hover('13')

Counting the large red items on the page requires observing the elements. Based on the current Accessibility Tree, there are no specific details about large red items. To accurately count the large red items, it's necessary to visually inspect the page elements.

To achieve the goal, the next action should involve inspecting the page visually to identify the large red items. Let's hover over the items to determine their characteristics.

4  y  i  9  5

1  0  5  7  4

Executing browser actions:

4  y  i  9  5

1  0  5  7  4

Executing browser actions:

4  y  i  9  5

1  0  5  7  4

Executing browser actions: send_msg_to_user("0")

Counting the large red items on the page, we observe that there are no large red items present.

Therefore, the answer to the goal question "How many large red items are there?" is:

4  y  i  9  5

1  0  5  7  4

No observation

All done! What's next on the agenda?

No observation


Instruction: Press the button that correctly denotes how many sides the shape has.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/count-sides.html

3  4  5  6  7

area { text-align: center; }
canvas { display: block; }
#form { display: block; text-align: center; margin: 15px; }
#form button { display: inline-block; padding: 5px; text-align: center; width: 20px; }
input { width: 60px; padding: 2px; text-align: center; }

var resetCanvas = function(){
  var c = document.getElementById('c');
  c.width = 150;
  c.height = 100;
  var ctx = c.getContext('2d');

  // reset the canvas and randomly rotate it, so that the shape will
  // also be rotated.
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.translate(75,50);
  ctx.rotate(core.randi(0,181)*Math.PI/180);

  return ctx;
}

// this draws a random shape (triangle, square, pentagon, hexagon, heptagon) on the canvas
var drawShape = function(ctx){
  var numberOfSides = core.randi(3,8),
    size = 35,
    Xcenter = 0,
    Ycenter = 0;

  ctx.beginPath();
  ctx.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));

  for(var i=1; i<=numberOfSides;i+=1) {
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
  }

  // outline the color in black. (can change this to randomize color for variety)
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 3;
  ctx.stroke();

  return numberOfSides;
}

var bindClickEvents = function(numberOfSides){
  d3.selectAll('#form button').on('click', function(event, ui) { // end dragging
    var userCount = this.getAttribute('data-sides');
    var r = userCount === numberOfSides.toString() ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

var genProblem = function() {
  var ctx = resetCanvas();
  var numberOfSides = drawShape(ctx);
  bindClickEvents(numberOfSides);
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

3  4  5  6  7

Executing browser actions: click("14")

In order to accomplish my goal, I need to click on the button that denotes a shape with 4 sides.

3  4  5  6  7

Executing browser actions:

3  4  5  6  7

Executing browser actions: click("17")

In order to accomplish my goal I need to click on the button with bid 17

3  4  5  6  7

Executing browser actions:

3  4  5  6  7

Executing browser actions: click("18")

In order to accomplish my goal I need to click on the button with bid 18.

3  4  5  6  7

Executing browser actions:

3  4  5  6  7

Executing browser actions: click("16")

In order to accomplish the goal of pressing the button that correctly denotes how many sides the shape has, the next action should be to click on the button with bid 16.

3  4  5  6  7

Executing browser actions:

3  4  5  6  7

Agent reached maximum number of iterations


Instruction: Create a 30 mins event named "Party", between 4PM and 8PM.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/daily-calendar.html

12am

1am

2am

3am

4am

5am

6am

7am

8am

9am

10am

11am

12pm

1pm

2pm

3pm

4pm

5pm

6pm

7pm

8pm

9pm

10pm

11pm

Meeting

Food

Gym

  #area { height: 156px; overflow-y: scroll; user-select: none; position: relative; }
  .hour { height: 40px; display: block; width: 140px; border-top: 1px solid #b5b5b5; }
  .hour .hour-label { height: 40px; width: 20%; display: inline-block; vertical-align: top; }
  .hour .calendar { height: 40px; width: 78%; display: inline-block; background-color: #f7f7f7; z-index: 1; }
  .hour .calendar div { height: 49%; }
  .hour .calendar div:nth-child(2) { border-top: 1px dotted #b5b5b5; }

  #area .event { position: absolute; z-index: 999; display: block; margin-left: 21%; width: 100px;
    border: 1px solid black; }

  .event.event0 { background-color: #87f776; } /* green */
  .event.event1 { background-color: #afe4f7; } /* blue */
  .event.event2 { background-color: #f7afb6; } /* red */
  .event.event3 { background-color: #f7f2af; } /* yellow*/

  #newEvent { position: absolute; z-index: 999; border: 1px solid black; display: block; margin-left: 21%;
    width: 100px; background-color: #f4c842; }

  #create-event { background-color: #fff; border: 1px solid #000; position: absolute;
    padding: 5px; z-index: 1000; height: 70px; margin-left: 5px; overflow: hidden; }
  #create-event > div { margin-bottom: 5px; }
  #create-event #controls button { display: inline-block; margin: 2px; width: 55px; }
  #event-name { z-index: 9999; } /* need this to auto-focus on creation! */

core.EPISODE_MAX_TIME = 20000;

var EVENT_PADDING = 10;
var HALF_HOUR_HEIGHT = 20; // in pixels
var CALENDAR_TIMES = [
  '12am',
  '1am',
  '2am',
  '3am',
  '4am',
  '5am',
  '6am',
  '7am',
  '8am',
  '9am',
  '10am',
  '11am',
  '12pm',
  '1pm',
  '2pm',
  '3pm',
  '4pm',
  '5pm',
  '6pm',
  '7pm',
  '8pm',
  '9pm',
  '10pm',
  '11pm',
];

var PROBLEM_HOURS = [
  '0.5 hours',
  '1 hour',
  '1.5 hours',
]
var PROBLEM_MINS = [
  '30 mins',
  '60 mins',
  '90 mins',
]
var PROBLEM_ACTIONS = ['Phonecall', 'Food', 'Party', 'Meeting', 'Gym']

var HOUR_TEMPLATE = `

`

var EVENT_NAME_TEMPLATE = `

    <input id="event-name" type="text" placeholder="Event name">

       to

      <button class="cancel">Cancel</button>
      <button class="create">Create</button>

`

var isDragging = false;

var drawCalendar = function(){
  for(var i=0;i<CALENDAR_TIMES.length; i++){
    drawHour(CALENDAR_TIMES[i], i);
  }
}

var drawHour = function(hour, index){
  var div = document.createElement('div');
  div.innerHTML = HOUR_TEMPLATE;
  div.getElementsByClassName('hour-label')[0].innerHTML = hour;
  div.setAttribute('class', 'hour');
  div.setAttribute('data-hour', index);

  div.getElementsByClassName('half-hour')[0].setAttribute('id', 'hh-'+(index*2));
  div.getElementsByClassName('half-hour')[1].setAttribute('id', 'hh-'+(index*2 +1));

  $('#area').append(div);
}

var renderEvent = function(startingHalfHour, endingHalfHour, divId, userCreatedEvent){
  if(startingHalfHour === undefined || endingHalfHour === undefined){
    return;
  }

  var div = document.createElement('div');
  div.setAttribute('id', divId);
  div.setAttribute('class', 'event event' + core.randi(0,3));

  if(divId === 'newEvent'){
    $('#newEvent').remove();
    div.innerHTML = 'New event';
  } else {
    div.innerHTML = core.sample(PROBLEM_ACTIONS);
  }

  var startIndex = parseInt(startingHalfHour.split('hh-')[1], 10);
  var endIndex = parseInt(endingHalfHour.split('hh-')[1], 10) + 1;
  var duration = endIndex - startIndex;
  div.setAttribute('data-duration', duration);
  if(userCreatedEvent){
    div.setAttribute('data-start', startIndex);
    div.setAttribute('data-end', endIndex);
  }

  // additional 0.33333px padding for borders, and flat +2px for padding in #area.
  var top = startIndex * HALF_HOUR_HEIGHT + (0.42*startIndex) + 4;
  var height = (endIndex - startIndex) * HALF_HOUR_HEIGHT;
  if(height > 0 && height < HALF_HOUR_HEIGHT) height = HALF_HOUR_HEIGHT;
  else if(height ===0) return;
  else if(height <0){
    top = endIndex * HALF_HOUR_HEIGHT + (0.42*endIndex) + 4;
    var height = (startIndex - endIndex) * HALF_HOUR_HEIGHT;
  }
  var cssPosition = 'top: ' + top + 'px; height: ' + height + 'px;'
  div.setAttribute('style', cssPosition);
  $('#area').append(div);
  $('#event-name').focus();
}

var nameNewEvent = function(startIndex, endIndex, expectedAnswer){
  var div = document.createElement('div');
  div.innerHTML = EVENT_NAME_TEMPLATE;
  div.setAttribute('id', 'create-event');

  var startInt = parseInt(startIndex, 10);
  var endInt = (parseInt(endIndex,10)+1);

  div.getElementsByTagName('label')[0].innerHTML = indexToTime(startInt);
  div.getElementsByTagName('label')[2].innerHTML = indexToTime(endInt);

  var style = $('#newEvent').attr('style').split(';')[0];
  div.setAttribute('style', style + ';');
  $('#area').append(div);

  bindEventButtons(expectedAnswer);
}

var indexToTime = function(index){
  var halvedIndex = index/2;
  var roundedIndex = parseInt(halvedIndex)%CALENDAR_TIMES.length;
  var decimal = halvedIndex%1;

  if(decimal === 0){ return CALENDAR_TIMES[roundedIndex]}
  else {
    var timeRegex = CALENDAR_TIMES[roundedIndex].split(/(am|pm)/gi);
    return timeRegex[0] + ':30' +  timeRegex[1];
  }
}

var bindEventButtons = function(expectedAnswer){
  $('#controls .cancel').on('click', function(){
    $('#create-event').remove();
    $('#newEvent').remove();
  });

  $('#controls .create').on('click', function(){
    var eventName = $('#create-event input').val();
    $('#create-event').remove();
    $('#newEvent').text(eventName);
    rewardEpisode(expectedAnswer);
  });
}

var renderRandomEvents = function(){
  var HOURS = [
    ['hh-12', 'hh-13', 'hh-14', 'hh-15', 'hh-16', 'hh-17', 'hh-18', 'hh-19',], // 6AM - 10AM
    ['hh-24', 'hh-25', 'hh-26', 'hh-27', 'hh-28', 'hh-29', 'hh-30', 'hh-31',], // 12AM - 4PM
    ['hh-36', 'hh-37', 'hh-38', 'hh-39', 'hh-40', 'hh-41', 'hh-42', 'hh-43',], // 6PM - 10PM
  ]

  for(var i=0;i<HOURS.length;i++){
    var length = HOURS[i].length;
    var startIndex = core.randi(0, length-1);
    var endIndex = (startIndex+1) === (length-1) ? (startIndex + 1) : (startIndex + core.sample([1,2]));
    var eventName = 'randomEvent' + i;
    renderEvent(HOURS[i][startIndex], HOURS[i][endIndex], eventName);
  }
}

var enableEventCreation = function(expectedAnswer){

  var startingHalfHour, endingHalfHour, startIndex, endIndex;

  isDragging = false;
  $(".half-hour")
  .mousedown(function(e) {
    e.preventDefault();
    startingHalfHour = $(this).attr('id');
    startIndex = startingHalfHour.split('hh-')[1];
    if($('#newEvent').length === 0) isDragging = true;
  })
  .mousemove(function(e){
    e.preventDefault();
    if(isDragging === true){
      endingHalfHour = $(this).attr('id');
      renderEvent(startingHalfHour, endingHalfHour, 'newEvent', true);

      // bind the mouseup event to the new event div instead of the half-hour div.
      $('#newEvent').mouseup(function(e) {
        e.preventDefault();
        var wasDragging = isDragging;
        isDragging = false;
        if(wasDragging){
          endIndex = endingHalfHour.split('hh-')[1];
          nameNewEvent(startIndex, endIndex, expectedAnswer);
        }

      });
    }
  });
}

var expectedDateWindow = function(){
  var TIME_WINDOWS = [
    {
      display: '8AM and 12PM',
      startRange: 'hh-16', // inclusive
      endRange: 'hh-24' // non-inclusive
    },
    {
      display: '12PM and 4PM',
      startRange: 'hh-24', // inclusive
      endRange: 'hh-32' // non-inclusive
    },
    {
      display: '4PM and 8PM',
      startRange: 'hh-32', // inclusive
      endRange: 'hh-40' // non-inclusive
    },
  ]

  var expectedDuration = core.randi(0,3);
  var durationDisplay = core.sample([PROBLEM_MINS[expectedDuration], PROBLEM_HOURS[expectedDuration]]);
  var expectedName = core.sample(PROBLEM_ACTIONS);

  var expectedAnswer = core.sample(TIME_WINDOWS);
  expectedAnswer.name = expectedName;
  expectedAnswer.duration = expectedDuration + 1;

  $('#query').html('Create a ' + durationDisplay + ' event named "' +
    expectedAnswer.name + '", between ' + expectedAnswer.display  + '.')

  return expectedAnswer;
}

var eventsOverlap = function(){
  var $createdEvent = $('#newEvent');
  var createdTop = parseInt($createdEvent.css('top'), 10);
  var createdHeight = parseInt($createdEvent.css('height'), 10);

  var createdStart  = parseInt($createdEvent.attr('data-start'), 10);
  var createdDuration = parseInt($createdEvent.attr('data-duration'), 10);

  var events = $('.event').not('#newEvent');
  for(var i=0;i<events.length;i++){
    var $event = $(events[i]);
    var eventStart = parseInt($event.attr('data-start'), 10);
    var eventDuration = parseInt($event.attr('data-duration'), 10);

    var topOverlap = createdStart >= eventStart && createdStart <= (eventStart + eventDuration);
    var bottomOverlap = (createdStart + createdDuration) >= eventStart && (createdStart + createdDuration) <= (eventStart + eventDuration);

    // check top of created event
    if(topOverlap) return true;
    // check bottom of created event
    else if(bottomOverlap) return true;
  }

  return false;
}

var durationMatches = function(expectedDuration, createdDuration){
  var diff = Math.abs(createdDuration-expectedDuration)/expectedDuration;
  if(diff > 0.03) return false;
  return true
}

var correctEventWindow = function(expectedAnswer){
  var $event = $('#newEvent')
  var eventDuration = parseInt($event.attr('data-duration'), 10);
  var eventStart = parseInt($event.attr('data-start'), 10);

  var startRange = parseInt(expectedAnswer.startRange.split('hh-')[1], 10);
  var endRange = parseInt(expectedAnswer.endRange.split('hh-')[1], 10);
  // check duration
  if(eventDuration !== expectedAnswer.duration) return false;
  // ensure event starts after expected start time
  else if(startRange > (eventStart + eventDuration)) return false;
  // ensure event ends before expected start time. pad by 5px just in case.
  else if(endRange < (eventStart + eventDuration)) return false;

  return true;
}

var rewardEpisode = function(expectedAnswer){
  var eventName = $('#newEvent').text();
  if(expectedAnswer.name.toLowerCase() !== eventName.toLowerCase()) core.endEpisode(-1.0);
  else if(eventsOverlap()) core.endEpisode(-1.0);
  else if(!correctEventWindow(expectedAnswer)) core.endEpisode(-1.0);

  core.endEpisode(1.0, true);
}

var genProblem = function() {
  $('#area').empty().scrollTop(0);

  drawCalendar();
  renderRandomEvents();

  var expectedAnswer = expectedDateWindow()

  enableEventCreation(expectedAnswer);
}

window.onload = function() {
  core.startEpisode();
}

In order to accomplish the goal of creating a 30 mins event named "Party" between 4PM and 8PM, the best next action would be to select the time slots between 4PM and 8PM and create the event.

Error: Error: Selector "internal:testid=[bid="4"s] >> :scope" resolved to <script bid="4" src="../core/core.js" browsergym_set_of_…></script>, <iframe> was expected

In order to accomplish the goal of creating a 30 mins event named "Party" between 4PM and 8PM, the correct action to take is to select the time slot between 4PM and 8PM and then fill it with the event name "Party".

Executing browser actions: select_option('4:30pm', 'Party')

In order to accomplish the goal of creating a 30 mins event named "Party" between 4PM and 8PM, the next action should be to select the time slot of 4:30 PM for the event "Party".

In order to accomplish the goal of creating a 30 mins event named "Party" between 4PM and 8PM, the next action should be to select the time slot between 4PM and 8PM for the event "Party".

Executing browser actions: select_option('4pm', 'Party')
fill('event_name_input_bid', 'Party')

In order to accomplish the goal of creating a 30 mins event named "Party" between 4PM and 8PM, the next action should be to select the time slot between 4PM and 8PM and then fill the event name as "Party".

Executing browser actions:

In order to accomplish the goal of creating a 30 mins event named "Party" between 4PM and 8PM, the next action should be to:
- select_option('4:30pm', 'Party'))

Too many errors encountered. Task failed.

No observation

All done! What's next on the agenda?

No observation


Instruction: Drag the smaller box so that it is completely inside the larger box.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/drag-box.html

s

L

Submit

#draggable { width: 154px; height: 100px; position: relative; }
#subbtn { display: block; margin-top: 5px; }
#draggableSmall { position: absolute; width: 20px; height: 20px; padding: 3px; border: 1px solid black; background-color: red; z-index: 20;}
#draggableLarge { position: absolute; width: 50px; height: 50px; padding: 3px; border: 1px solid black; background-color: blue; z-index: 2;}

var SMALL_BOX_SIDE = 20;
var LARGE_BOX_SIDE = 50;
var SIDE_DIFF = LARGE_BOX_SIDE - SMALL_BOX_SIDE;
var DRAGGABLE_HEIGHT = 100;
var DRAGGABLE_WIDTH = 154;

function randomizeSquareLocs(){
  $('#draggableSmall').css('top', Math.floor((Math.random() * (DRAGGABLE_HEIGHT - SMALL_BOX_SIDE - 5))) + 'px');
  $('#draggableSmall').css('left', Math.floor((Math.random() * (DRAGGABLE_WIDTH - SMALL_BOX_SIDE - 5))) + 'px');

  $('#draggableLarge').css('top', Math.floor((Math.random() * (DRAGGABLE_HEIGHT - LARGE_BOX_SIDE - 5))) + 'px');
  $('#draggableLarge').css('left', Math.floor((Math.random() * (DRAGGABLE_WIDTH - LARGE_BOX_SIDE - 5))) + 'px');
};

function pxToInt(elementId, pos){
  return parseInt($(elementId).css(pos),10);
}

function smallBoxContained(){
  var diffHeight = pxToInt('#draggableSmall', 'top') - pxToInt('#draggableLarge', 'top');
  var diffWidth = pxToInt('#draggableSmall', 'left') - pxToInt('#draggableLarge', 'left');
  return (diffHeight > 0 && diffHeight < SIDE_DIFF) && (diffWidth > 0 && diffWidth < SIDE_DIFF);
}

var genProblem = function() {
  $('#draggable').empty();
  $('#draggable').append('
s
');
  $('#draggable').append('
L
');

  $('#draggableSmall').draggable();
  $('#draggableLarge').draggable();

  randomizeSquareLocs();

  d3.select('#query').html('Drag the smaller box so that it is completely inside the larger box.')
  d3.select('#subbtn').on('click', function(event, ui) { // end dragging
    var r = smallBoxContained() ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  })
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

To accomplish the goal of dragging the smaller box completely inside the larger box, you should perform the following action:

drag_and_drop('smaller_box', 'larger_box'))

s

L

Submit

Executing browser actions: drag_and_drop('smaller_box', 'larger_box')

In order to accomplish my goal of dragging the smaller box completely inside the larger box, I need to drag the smaller box to the desired position within the larger box.

s

L

Submit

ValueError: Could not find element with bid "smaller_box"

Executing browser actions: scroll(0, 50)

I will need to drag the smaller box so that it is completely inside the larger box. To do this, I should adjust the coordinates of the smaller box to position it correctly within the larger box. Let's scroll the smaller box to move it inside the larger box.

s

L

Submit

Executing browser actions:

s

L

Submit

The last action was incorrect.

To ensure the smaller box is completely inside the larger box, we need to adjust the position of the smaller box.

Let's drag the smaller box to be completely inside the larger box:

s

L

Submit

Executing browser actions:

Since the previous action of dragging the smaller box into the larger box did not work, let's try a different approach. We can manually move the smaller box inside the larger box by clicking and dragging it.

# Action:
click('smaller_box')
drag_and_drop('smaller_box', 'larger_box'))

s

L

Submit

In order to accomplish the goal of dragging the smaller box completely inside the larger box, the next action should be to adjust the position of the smaller box within the larger box. To do this, we should drag the smaller box again to ensure it is fully inside the larger box.

s

L

Submit

No observation

All done! What's next on the agenda?

No observation


Instruction: Drag the circle right then press Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/drag-circle.html

Submit

#area svg { height: 130px; width: 160px; }
#area svg circle:hover { cursor: pointer; }
#subbtn { margin-left: 30px; }

var DIRECTIONS = ['left', 'right', 'up', 'down'];

var createCircle = function(svg){
  // create the circle
  var circleRadius = core.randi(13,20);
  // change circle color for additional variation.
  var circleColor = core.sample(['blue', 'red', 'black', 'green', 'yellow', 'orange', 'white']);
  var generatedCircle = { cx: core.randi(20+circleRadius,140-circleRadius), cy: core.randi(20+circleRadius,
    100-circleRadius), r: circleRadius, stroke: 'black', fill: circleColor, class: 'black-circle' };
  shapes.drawCircles([ generatedCircle ], svg);
  d3.selectAll('circle').call(shapes.drag);
}

var bindClickEvent = function(expectedDirection){
  // get the current and initial coords of the circle and reward
  // agent based on directive
  d3.select('#subbtn').on('click', function(){
    var currentCircle = d3.select('circle')[0][0];
    var currentCoords = shapes.gridCoords(currentCircle);
    var initialCoords = currentCircle.getBBox();

    var dragged = false;
    if(expectedDirection === 'up' && currentCoords.y < initialCoords.y) dragged = true;
    else if(expectedDirection === 'down' && currentCoords.y > initialCoords.y) dragged = true;
    else if(expectedDirection === 'left' && currentCoords.x < initialCoords.x) dragged = true;
    else if(expectedDirection === 'right' && currentCoords.x > initialCoords.x) dragged = true;

    var r = dragged ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

var genProblem = function() {
  // clear the UI.
  var svg = d3.select('svg');
  svg.selectAll('*').remove();

  var expectedDirection = core.sample(DIRECTIONS);
  d3.select('#query').html('Drag the circle ' +  expectedDirection + ' then press Submit.');

  createCircle(svg);
  bindClickEvent(expectedDirection);
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions:

Submit

Executing browser actions: drag_and_drop('13', '14')

Submit

Executing browser actions:

Submit

In order to accomplish my goal I need to drag the circle to the right.

Submit

Executing browser actions:

Submit

Submit

Executing browser actions:

Submit

Executing browser actions: scroll(100, 0)

In order to accomplish my goal, I need to drag the circle to the right before pressing Submit.

Submit

Executing browser actions:

Submit

Agent reached maximum number of iterations


Instruction: Move the cube around so that "2" is the active side facing the user.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/drag-cube.html

1

2

3

4

5

6

Submit

body { user-select: none; }
#subbtn { -webkit-user-select: none; margin: 7px 30px; }
.bold { font-weight: bold; }

// thank you to Jordan Leigh via http://jordizle.com and http://codepen.io/jordizle/pen/haIdo/
// for the inspiration for this problem!

core.EPISODE_MAX_TIME = 15000; // set episode interval to 15 seconds

var genProblem = function() {
  //reset the cube
  cubePuzzle.reset();
  var q = core.randi(1,7).toString();
  d3.select('#query').html('Move the cube around so that "' + q + '" is the active side facing the user.');

  // reward awarder
  d3.select('#subbtn').on('click', function(){
    var t = document.body.getElementsByClassName('active')[0].innerHTML;
    var r = t === q ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

window.onload = function(){
  cubePuzzle.setup();
  core.startEpisode();
}

Executing browser actions: click('2')

In order to accomplish the goal of moving the cube around so that "2" is the active side facing the user, the following action should be taken:

1

2

3

4

5

6

Submit

TimeoutError: Timeout 500ms exceeded.
=========================== logs ===========================
waiting for get_by_test_id("2")
  locator resolved to <title bid="2" browsergym_set_of_marks="0" browsergym_v…>Drag Cube Task</title>
attempting click action
  waiting for element to be visible, enabled and stable
    element is not visible - waiting...
============================================================

Executing browser actions: click('2')

In order to accomplish the goal of moving the cube around so that "2" is the active side facing the user, the correct action would be to click on the "2" side of the cube.

1

2

3

4

5

6

Submit

Executing browser actions: click('2')

In order to accomplish the goal of moving the cube around so that "2" is the active side facing the user, the next action should be to click on the "2" side of the cube.

1

2

3

4

5

6

Submit

Executing browser actions: click('2')

1

2

3

4

5

6

Submit

Executing browser actions: click('2')

1

2

3

4

5

6

Submit

Executing browser actions: click('2')

1

2

3

4

5

6

Submit


Instruction: Drag Bunni to the 2nd position.

Drag Bunni to the 2nd position.

Drag Bunni to the 2nd position.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/drag-items.html

  * Bunni

  * Mari

  * Coralyn

  * Brandice

  * Constantia

/* taken from jqueryui docs and adjusted a bit */
#sortable { list-style-type: none; margin: 0; padding: 0; width: 90%; margin-top:5px; margin-left: 5px;}
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.3em; height: 14px; font-size: 12px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

var OLDIX;
var genProblem = function() {
  var ITEMS = core.shuffle(ui_utils.PEOPLE_NAMES.slice());

  // build items with d3js
  var ul = d3.select('#sortable');
  ul.html('');
  var n = 5;
  for(var i=0;i<n;i++) {
    var li = ul.append('li').attr('class', 'ui-state-default');
    var span = li.append('span').attr('class', 'ui-icon ui-icon-arrowthick-2-n-s')
    li.append('div').html(ITEMS[i]);
  }

  var ix = core.randi(0,n) + 1; // ground truth item index, 1-indexed
  var poss = [];

  if (ix !== 1) { poss.push(['to the top.', 1]); }
  if (ix !== n) { poss.push(['to the bottom.', n]); }
  if (ix !== n) { poss.push(['down by one position.', ix+1]); }
  if (ix !== 1) { poss.push(['up by one position.', ix-1]); }
  for(var i=1;i<n+1;i++) {
    var itxt = '';
    if(i === 1) { itxt = 'st'; }
    else if(i === 2) { itxt = 'nd'; }
    else if(i === 3) { itxt = 'rd'; }
    else { itxt = 'th'; }

    if(i !== ix) {
      poss.push(['to the ' + i + itxt + ' position.', i]);
    }
  }

  // generate a query
  var s = core.sample(poss);
  var target_description = s[0];
  var target_index = s[1];
  d3.select('#query').html('Drag ' + ITEMS[ix-1] + ' ' + target_description);

  // make sortable with jqueryui and create a rewarder
  $.resetUniqueId();
  $('#sortable').sortable({
    start: function(event, ui) { // start dragging
      OLDIX = ui.item.index() + 1; // have to remember this
    },
    stop: function(event, ui) { // end dragging
      var newix = ui.item.index() + 1;
      var r = (target_index === newix && OLDIX == ix) ? 1.0 : -1.0;
      core.endEpisode(r, r>0);
    }
  });
  $('#sortable').disableSelection();
}

window.onload = function() {
  core.startEpisode();
}

Executing browser actions: drag_and_drop('18', '21')

To drag Bunni to the 2nd position, you need to perform the following action:

Executing browser actions: drag_and_drop('24', '21')

In order to accomplish my goal I need to drag Bunni to the 2nd position.

  * Bunni

  * Coralyn

  * Mari

  * Brandice

  * Constantia

Executing browser actions: drag_and_drop('30', '24')

To drag Bunni to the 2nd position, you should perform the following action:

  * Bunni

  * Constantia

  * Coralyn

  * Mari

  * Brandice

Executing browser actions: drag_and_drop('17', '30')

  * Bunni

  * Coralyn

  * Constantia

  * Mari

  * Brandice

Executing browser actions: drag_and_drop('17', '24')

Executing browser actions: drag_and_drop('18', '24')

In order to accomplish the goal of dragging Bunni to the 2nd position, the next action should be to drag Bunni to the 2nd position after Coralyn.

Executing browser actions: drag_and_drop('18', '30')

To drag Bunni to the 2nd position, the next action should be to drag and drop Bunni to the 2nd position after Constantia.

Agent reached maximum number of iterations