Instruction: Resize the textarea so that the width is smaller than its initial size then press Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/resize-textarea.html

Submit

#area { position: relative; height: 156px; width: 156px; }
#tt { display: block; position: absolute; }
#submit { display: block; position: absolute; bottom: 10px; right: 10px; }
.ui-wrapper { padding-right: 0px !important; padding-bottom: 0px !important; }

// use jQuery instead of D3 since chrome has an issue
// where the textarea cannot be resized smaller than its
// initial state. jQuery resizable lets us work around this.
var TEXTAREA = `<textarea id="tt"></textarea>`
var SUBMIT = `<button id="submit" class="secondary-action">Submit</button>`
var directions = ['smaller', 'larger'];
var dimensions = ['width', 'height'];

var randomizeTextArea = function(){
  var textAreaHeight = core.randi(10, 15)*5;
  var textAreaWidth = core.randi(10, 20)*5;
  var leftPadding = core.randi(1,8)*5;
  var topPadding = core.randi(1,8)*5;
  document.getElementById('tt').setAttribute('style', 'height: ' + textAreaHeight + 'px; width: ' + textAreaWidth + 'px; top:' + topPadding + 'px; left: ' + leftPadding + 'px;');

  // resize after setting attributes, otherwise resize cursor
  // will be misaligned with textarea
  $('#tt').resizable();

  return { height: textAreaHeight, width: textAreaWidth };
}

var bindClickEvent = function(resizeDim, resizeDir, textAreaDims){
  $('#submit').on('click', function(){
    if(resizeDim === 'height'){
      var newHeight = $('#tt').height();
      var r = (resizeDir === 'larger' && newHeight > textAreaDims.height)
        || (resizeDir === 'smaller' && newHeight < textAreaDims.height) ? 1.0 : -1.0;
    } else if (resizeDim === 'width') {
      var newWidth = $('#tt').width();
      var r = (resizeDir === 'larger' && newWidth > textAreaDims.width)
        || (resizeDir === 'smaller' && newWidth < textAreaDims.width) ? 1.0 : -1.0;
    }

    core.endEpisode(r, r > 0);
  });
}

var genProblem = function() {
  $('#area').html('');
  $('#area').append(TEXTAREA + SUBMIT);

  var textAreaDims = randomizeTextArea();

  var resizeDim = core.sample(dimensions);
  var resizeDir = core.sample(directions);

  $('#query').html('Resize the textarea so that the ' + resizeDim + ' is ' + resizeDir + ' than its initial size then press Submit.');

  bindClickEvent(resizeDim, resizeDir, textAreaDims);
}

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

overflow: hidden; position: absolute; width: 66px; height: 56px; top: 30px; left: 25px; margin: 0px; padding-right: 7px; padding-bottom: 16px;

height: 50px; width: 60px; top: 30px; left: 25px; margin: 0px; resize: none; position: static; zoom: 1; display: block;

ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se

Executing browser actions:

Submit

Executing browser actions: noop()

In order to accomplish my goal, I need to resize the textarea so that the width is smaller than its initial size. Then, I should press the Submit button.

# Action:
resize the textarea to make it smaller

Submit

Executing browser actions:

resize the textarea to make the width smaller than its initial size. Then, press Submit.)

Submit

Executing browser actions: drag_and_drop('15', '15')

Submit

Executing browser actions:

press('15', 'Control+a')
press('15', 'Control+Shift+<')
click('19'))

Submit

Executing browser actions: fill('15', 'smaller text')

In order to accomplish my goal, I need to resize the textarea to make its width smaller than its initial size and then press the Submit button.

Submit

Executing browser actions:

Submit

Executing browser actions: focus('15')

In order to accomplish my goal, I need to resize the textarea to make its width smaller than its initial size and then press Submit.

To resize the textarea, I should focus on the textarea with bid '15' and adjust its width. Then, I can click on the Submit button with bid '19'.

Submit

Executing browser actions:

Submit

Agent reached maximum number of iterations


Instruction: Add a third point to create a right angle, then press submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/right-angle.html

Submit

#area { position: relative; height: 160px; width: 160px; }
#area svg { width: 150px; height: 130px; }
#subbtn { left: 30px; bottom: 5px; position: absolute; }

var RADIUS_PADDING = 3; // 3px for circle radius
var QUERY_PADDING = 50; // 50px for #query height

function graphClicked(event) {
  var x = event.pageX;
  var y = event.pageY;

  var divWidth = document.getElementById('svg-grid').clientWidth;
  var divHeight = document.getElementById('svg-grid').clientHeight;

  var svg = d3.select('svg');

  d3.selectAll('.blue').remove();

  shapes.drawCircles([{ class: 'blue', id: 'blue-circle', cx: x, cy: (y-QUERY_PADDING), r:3,
    fill: 'blue' }], svg);

  var blueCircle = d3.select('#blue-circle')[0][0].getBBox();
  var initCircle = d3.selectAll('#init-blue')[0][0].getBBox();

  shapes.drawLines([{ stroke: 'blue', class: 'blue', x1: (blueCircle.x + RADIUS_PADDING),
    x2: (initCircle.x + RADIUS_PADDING), y1: (blueCircle.y + RADIUS_PADDING),
    y2: (initCircle.y + RADIUS_PADDING) }], svg);
}

// instead of drawing a single, random, valid point on the grid,
// it's probably easier to generate a line denoting all acceptable
// points on the grid.
var drawAnswers = function(pointA, pointB){
  var svg = d3.select('svg');

  shapes.drawCircles([
    { class: 'green', id: 'pointA', cx: (pointA.x + RADIUS_PADDING),
      cy: (pointA.y + RADIUS_PADDING), r: 3, fill: 'green' },
    { class: 'green', id: 'pointB', cx: (pointB.x + RADIUS_PADDING),
      cy: (pointB.y + RADIUS_PADDING), r: 3, fill: 'green' }
    ], svg);

  shapes.drawLines([{ stroke: 'green', class: 'green', x1: (pointA.x + RADIUS_PADDING),
    x2: (pointB.x + RADIUS_PADDING), y1: (pointA.y + RADIUS_PADDING), y2: (pointB.y + RADIUS_PADDING)
    }], svg);
}

var computeDistances = function(){
  var pointA = d3.select('#init-black')[0][0].getBBox();
  var pointVertex = d3.select('#init-blue')[0][0].getBBox();
  var correctPoint = showPerpendicular(pointA, pointVertex);

  // error handle for submitting without any shapes
  if(d3.select('#blue-circle')[0][0] === null) {
    core.endEpisode(-1, false);
    return;
  }
  var pointB = d3.select('#blue-circle')[0][0].getBBox();
  var userAngle = findAngle(pointA,pointB, pointVertex);
  var expectedAngle = 90;
  var diff = Math.abs(expectedAngle-userAngle);

  if(diff < 45) core.endEpisode((expectedAngle-diff)/expectedAngle, true);
  else core.endEpisode(-1.0, false);
}

// given pointA, pointB and the vertex that is joined to both of these points,
// return the angle made by all three points.
var findAngle = function(pointA,pointB, pointVertex) {
  var pAV = Math.sqrt(Math.pow(pointVertex.x-pointA.x,2) + Math.pow(pointVertex.y-pointA.y,2));
  var pBV = Math.sqrt(Math.pow(pointVertex.x-pointB.x,2) + Math.pow(pointVertex.y-pointB.y,2));
  var pApB = Math.sqrt(Math.pow(pointB.x-pointA.x,2) + Math.pow(pointB.y-pointA.y,2));
  var radAngle = Math.acos((pBV*pBV+pAV*pAV-pApB*pApB)/(2*pBV*pAV));
  return (radAngle*180)/ Math.PI; // return in degrees
}

// find two perpendicular points to create the line denoting
// where the correct answer lies, then draw the answer.
var showPerpendicular = function(pointA, pointVertex){
  var slope = (pointVertex.y - pointA.y) / (pointVertex.x - pointA.x);
  var inverseSlope = -1/slope;

  var yAxis = pointVertex.y - inverseSlope*pointVertex.x; //  y=mx+b => b=y-mx

  var perpendicularPointA = {};
  perpendicularPointA.x = (-10 - yAxis)/inverseSlope; // y=mx+b => (y-b)/m = x
  perpendicularPointA.y = -10;

  var perpendicularPointB = {};
  perpendicularPointB.x = (140 - yAxis)/inverseSlope;
  perpendicularPointB.y = 140;

  drawAnswers(perpendicularPointA, perpendicularPointB);
}

var generateCircles = function(){
  var jsonCircles = []
  jsonCircles.push({ cx: core.randi(5,135), cy: core.randi(10, 120), fill: 'black', id: 'init-black',
    r: 3.5, class: 'black-circle' });

  while(jsonCircles.length === 1){
    var newCircle = { cx: core.randi(5, 135), cy: core.randi(10,125), fill: 'blue', id: 'init-blue',
      r: 3.5, class: 'black-circle'}

    var xDiff = Math.abs(newCircle.cx - jsonCircles[0].cx);
    var yDiff = Math.abs(newCircle.cy - jsonCircles[0].cy);
    if(xDiff < 30 && yDiff < 30) continue;
    else jsonCircles.push(newCircle);
  }

  return jsonCircles;
}

var setupProblem = function(svg){
  jsonCircles = generateCircles();

  shapes.drawCircles(jsonCircles, svg);
  shapes.drawLines([{ x1: jsonCircles[0].cx, x2: jsonCircles[1].cx, y1: jsonCircles[0].cy,
    y2: jsonCircles[1].cy }], svg);
}

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

  setupProblem(svg);
  svg.on('click', function(){ graphClicked(event); });

  d3.select('#subbtn').on('click', function(){
    computeDistances();
  });
}

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

Executing browser actions:

Submit

Executing browser actions: click("13")

To create a right angle, we need to add a third point. Let's click on the image to add the third point for the right angle.

Submit

Executing browser actions:

Submit

Executing browser actions: click("13")

In order to accomplish my goal, I need to add a third point to create a right angle. I will click on the image with bid 13.

Submit

Executing browser actions:

Submit

Executing browser actions: click("13")

In order to accomplish my goal of creating a right angle, I need to click on the image with bid 13 to add a third point.

Submit

Executing browser actions:

Submit

Executing browser actions: click("13")

In order to accomplish my goal of creating a right angle, I need to add a third point. Let's click on the image to add the third point.

Submit

Executing browser actions:

Submit

Agent reached maximum number of iterations


Instruction: Find the last word in the text area, enter it into the text field and hit Submit.

No observation

Executing browser actions: noop()

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

Consequat, enim faucibus. Non, dolor eu arcu pulvinar enim elementum aliquet non. Et et egestas. Aliquet sed enim, sagittis sodales adipiscing mollis lacus, fringilla enim aliquet. Turpis facilisi morbi vitae consequat risus, in tellus, commodo. Massa, ut nulla amet et bibendum nisl pellentesque lacus. Ac. Fermentum lorem gravida. Nisl tristique vel at enim commodo viverra et. Tristique eu,. Sed ultrices dignissim. Eu dignissim. Amet. Enim, magnis porttitor cras. Feugiat. Submit

#area #text-area { margin-top: 2px; width: 150px; height: 95px; font-size: 10px; }
#answer-input { width: 150px; margin: 3px 0 3px 0; }

var genProblem = function() {
  // reset the UI
  document.getElementById('text-area').scrollTop = 0; // scroll up the text area
  document.getElementById('answer-input').value = '';

  var txt = ui_utils.generateWords(20,150);
  var words = txt.split(/[\s]/g);
  var expectedWord = words[words.length-1].replace('.', '');
  d3.select('#text-area').html(txt);

  // create the query
  d3.select('#query').html('Find the last word in the text area, enter it into the text field and hit Submit.');

  d3.select('#subbtn').on('click', function(){
    var ans = document.getElementById('answer-input').value;
    adjustedAnswer = ans.replace(/[^a-zA-Z0-9]/g, '');

    // don't penalize for whitespace or punctuation.
    var r = adjustedAnswer === expectedWord ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

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

Executing browser actions:

Executing browser actions:

Executing browser actions: fill('13', 'Feugiat')
click('15')

In order to accomplish the goal, the last word in the text area needs to be extracted, entered into the text field, and then the Submit button needs to be clicked.

The last word in the text area is 'Feugiat'.

I will fill the text field with this word and then click the Submit button.

Executing browser actions:

In order to accomplish my goal, I need to find the last word in the text area and enter it into the text field before hitting Submit.

The last word in the text area is 'Feugiat'. I will fill this word into the text field and then click Submit.

Executing browser actions:

Executing browser actions: fill('14', 'Feugiat')

In order to accomplish my goal, I need to find the last word in the text area and enter it into the text field and hit Submit.

The last word in the text area is 'Feugiat'.

Therefore, the next action should be to fill the text field with 'Feugiat' and then click the Submit button.

Executing browser actions:

In order to accomplish the goal, the last word in the text area needs to be entered into the text field and then the Submit button needs to be clicked.

The last word in the text area is 'Feugiat'.

Therefore, the next action should be to fill the text field with 'Feugiat' and then click the Submit button.

Agent reached maximum number of iterations


Instruction: Scroll the textarea to the top of the text hit submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/scroll-text-2.html

Tempus adipiscing mattis imperdiet. Phasellus. Egestas. Egestas sit sed. Viverra egestas. Sit. Eu. A scelerisque eleifend. Amet, metus justo, et eu aliquam. Dui. Porttitor phasellus ut ac. Vestibulum at non in lacus. Imperdiet risus,. Enim eget tortor metus, dignissim habitant fermentum morbi amet feugiat lobortis. Orci amet. Vitae, pellentesque massa tincidunt nunc. Viverra nunc sollicitudin quam adipiscing ultrices. Submit

#area #text-area { margin-top: 5px; width: 150px; height: 100px; font-size: 10px; }

var SCROLL_DIR = ['bottom', 'top'];

var generateText = function(){
  // generate text into textarea
  var firstWord = true;
  var txt = ui_utils.generateWords(50, 150)
  d3.select('#text-area').html(txt);
}

var genProblem = function() {
  // reset the UI
  document.getElementById('text-area').scrollTop = 0; // scroll up the text area

  generateText();

  // true for scroll down, false for scroll up.
  var scrollDirection = core.randi(0,2);
  var textAreaHeight = document.getElementById('text-area').scrollHeight;
  var expectedHeight = (scrollDirection === 0) ? (textAreaHeight + document.getElementById('text-area').offsetHeight) : 0;
  // attempt to position the scroll posiiton near the middle of the text area.
  document.getElementById('text-area').scrollTop = parseInt(textAreaHeight/2) - 25;

  // create the query
  d3.select('#query').html('Scroll the textarea to the ' + SCROLL_DIR[scrollDirection] + ' of the text hit submit.');

  d3.select('#subbtn').on('click', function(){
    var textArea = document.getElementById('text-area');
    var expectedHeight = (scrollDirection === 0) ? textArea.scrollHeight : textArea.offsetHeight;
    var currentHeight = textArea.offsetHeight + textArea.scrollTop;
    var heightDiff = Math.abs(currentHeight - expectedHeight);

    // be a little generous and allow 10pixel difference so they don't have to be exactly precise.
    var r = (heightDiff < 10) ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

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

Executing browser actions:

Executing browser actions: python
focus('13')
scroll(0, -200)
click('14')

To accomplish the goal of scrolling the textarea to the top of the text and then hitting submit, the following actions should be taken:

1. Focus on the textarea to ensure the scrolling action is applied correctly.
2. Scroll the textarea to the top.
3. Click the "Submit" button.

Executing browser actions:

Executing browser actions:

Executing browser actions:

Executing browser actions:

Executing browser actions: scroll(0, -200)

In order to accomplish the goal of scrolling the textarea to the top of the text and then submitting, the next action should be to scroll the textarea to the top.

Executing browser actions:

Too many errors encountered. Task failed.

No observation

Agent reached maximum number of iterations


Instruction: Use the textbox to enter "Briana" and press "Search", then find and click the 3rd search result.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/search-engine.html

Search

#area { height: 156px; position: relative; }
#area input { width: 80px !important; }
#search-bar { margin: 2px; }
#page-content { margin: 2px; }
#page-content a { color: #0000EE; font-size: 10px; font-weight: bold; text-decoration: underline; }
#page-content a:visited { color: #0000EE; }
.search-url { color: #006621; }
#pagination { font-size: 15px; margin: 0; position: absolute; bottom: 2px; }

/* styling for the pagination widget */
.pagination > li { display: inline; margin: 0 2px; }
.pagination a:visited { color: #0000EE !important; }
.disabled { display: none !important; }
.page-item.active a { color: #000000; text-decoration: none; }
.page-item.first, .page-item.last { display: none !important; }

core.EPISODE_MAX_TIME = 20000;
var DIV_TEMPLATE =
  `

`
var TOTAL_RESULTS = 9;
var POSITION = ['', 'st', 'nd', 'rd'];
var DOMAINS = ['com', 'net', 'org', 'ca', 'us', 'gov', 'pizza', 'gg', 'tv', 'co.uk', 'it', 'eu', 'hk', 'mx', 'se', 'jp', 'io', 'rocks'];

var createSearchElem = function(result, index){
  var div = document.createElement('div');
  div.innerHTML = DIV_TEMPLATE;
  div.getElementsByClassName('search-title')[0].innerHTML = result.title;
  div.getElementsByClassName('search-title')[0].setAttribute('data-result', index);
  div.getElementsByClassName('search-url')[0].innerHTML = result.url;
  div.getElementsByClassName('search-desc')[0].innerHTML = result.desc;
  $('#page-content').append(div);
}

var generateSearch = function(){
  var results = [];
  var names = core.shuffle(ui_utils.FIFTY_NAMES.slice());
  for(var i=0;i<TOTAL_RESULTS;i++){
    var result = {}
    var subdomain = core.sample(ui_utils.lorem_words).replace(',', '');
    var domain = core.sample(ui_utils.lorem_words).replace(',', '');
    result.title = core.sample(names);
    result.url = 'https://' + core.sample(['www.', '']) + core.sample(['', subdomain]) + domain +  '.' + core.sample(DOMAINS);
    result.desc = ui_utils.generateWords(core.randi(2,4));
    results.push(result);
  }
  return results;
}

var resetUI = function(){
  $('#search-text').val('');
  $('#search').unbind();
  $('#page-content').empty();
  $('#pagination').empty();
}

var searchEngine = function(){
  var results = generateSearch();
  var expectedSearch = core.sample(core.shuffle(ui_utils.FIFTY_NAMES.slice()));
  var expectedIndex = core.randi(0,9);
  results[expectedIndex].title = expectedSearch;

  var pos = (expectedIndex+1) + 'th';
  if(expectedIndex < 3) pos = (expectedIndex+1) + POSITION[expectedIndex+1];
  return { results: results, expectedSearch: expectedSearch, expectedIndex: expectedIndex, pos: pos };
}

var bindClickEvents = function(problemSet){
  $('#search').on('click', function(){
    // clear the existing pagination modal, and rebuild it on click
    $('#pagination').twbsPagination('destroy');

    $('#pagination').twbsPagination({
      totalPages: 3,
      visiblePages: 3,

      onPageClick: function (event, page) {
        $('#page-content').empty();
        var userSearch = $('#search-text').val();

        // generate fake results when the user's search doesn't match.
        if(userSearch.toLowerCase() !== problemSet.expectedSearch.toLowerCase()){
          var fakeResults = generateSearch().slice(0, 3);
          for(var p=0;p<3;p++) createSearchElem(fakeResults[p], -1);
        } else {
          $('#page-content').empty();
          var startIndex = (page-1)*3;
          var currentResults = problemSet.results.slice(startIndex, startIndex+3);
          for(var p=0;p<3;p++) createSearchElem(currentResults[p], startIndex+p);
        }

        $('#page-content a').unbind();
        $('#page-content a').on('click', function(){
          if(userSearch.toLowerCase() !== problemSet.expectedSearch.toLowerCase()) core.endEpisode(-1.0);
          else {
            var linkIndex = this.getAttribute('data-result');
            var r = linkIndex === problemSet.expectedIndex.toString() ? 1.0 : -1.0;
            core.endEpisode(r, r > 0);
          }
        });

      },
      prev: '<',
      next: '>'
    });
  });
}

var genProblem = function() {
  resetUI();
  var problemSet = searchEngine();

  $('#query').html('Use the textbox to enter "' + problemSet.expectedSearch + '" and press "Search", then find and click the ' + problemSet.pos + ' search result.');

  bindClickEvents(problemSet);
}

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

Executing browser actions:

Search

Executing browser actions: fill('15', 'Briana')

In order to accomplish my goal, I need to fill the textbox with the name "Briana" and then click on the "Search" button.

Search

Executing browser actions:

Search

Executing browser actions: click("16")

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

Search

Marcella

https://www.porttitor.gg

Tempus odio.

Enola

https://www.molestievarius.gov

Quis velit fermentum.

Briana

https://ultrices.gg

Aliquam urna.

  * First
  * <
  * 1
  * 2
  * 3
  * >
  * Last

Executing browser actions:

Executing browser actions:

Executing browser actions:

Executing browser actions:

No observation

Agent reached maximum number of iterations


Instruction: Click the cancel button.

Click the cancel button.

Click the cancel button.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/sign-agreement.html

##  User agreement

Orci neque ipsum, nec, rutrum in lectus risus in lorem aliquam faucibus orci non feugiat id proin. Quis duis vitae vestibulum nisl commodo phasellus consectetur egestas etiam vestibulum consectetur suscipit augue. Lorem et id vestibulum tortor leo eu. Lorem dignissim risus ut. Quam dolor sed in mattis fames felis aliquet ipsum amet, tortor quam a quis ut volutpat cras hendrerit neque, parturient mauris,. Maecenas venenatis, tempor venenatis, eleifend lectus hendrerit odio. Et porttitor in laoreet at vitae metus, lacus volutpat praesent adipiscing fusce scelerisque feugiat urna malesuada in turpis ac nunc dolor. Suspendisse faucibus imperdiet phasellus. Ut velit sit purus, ut dignissim fermentum ullamcorper sodales senectus nunc eu. Enim. Nunc et morbi ornare. Nulla iaculis quam risus vel posuere gravida. Et adipiscing quam eget lorem et sagittis. Vitae mi tellus. Nisl sit tellus tempus, nisl posuere vitae quam arcu diam lacinia et amet mauris aliquet risus. Vel. Suspendisse habitasse porta dolor. Fermentum in imperdiet. Morbi pretium. Cancel  Agree

#area { margin: 1px; }
#area h2 { font-size: 10px; margin: 0px 1px; }
#area #text-area { height: 70px; width: 140px; }
#area input { margin: 1px; }
#area button { display: inline-block; margin: 2px; }

core.EPISODE_MAX_TIME = 10000;
var HEIGHT = 85;
var TEMPLATE = `

User agreement

  <textarea id="text-area" disabled></textarea>
  <input type="text" id="name" placeholder="Name" disabled>
  <button id="cancel">Cancel</button>
  <button id="agree" disabled>Agree</button>
`

var generateScroll = function(){
  document.getElementById('text-area').scrollTop = 0; // scroll up the text area

  var txt = ui_utils.generateWords(150,300);
  var words = txt.split(/[\s]/g);
  var expectedWord = words[words.length-1].replace('.', '');
  $('#text-area').html(txt);

  $('#text-area').on('scroll', function(){
    if (this.scrollHeight <= (this.scrollTop+HEIGHT+10)) {
        $('button, input').removeAttr('disabled');
    }
  });
}

var clickCancel = function(){
  $('#query').html('Click the cancel button.');
  $('#cancel').on('click', function(){ core.endEpisode(1.0, true); });
  $('#agree').on('click', function(){ core.endEpisode(-1.0, false); });
}

var signAndAgree = function(){
  var expectedName = core.sample(ui_utils.FIFTY_NAMES);
  $('#query').html('Scroll to the bottom of the textarea, enter the name "' + expectedName +'" then press "Agree"');

  $('#cancel').on('click', function(){ core.endEpisode(-1.0, false); });
  $('#agree').on('click', function(){
    var userName = $('#name').val();
    var reward = expectedName === userName ? 1.0 : -1.0;
    core.endEpisode(reward, reward > 0);
  });
}

var signAndCancel = function(){
  var expectedName = core.sample(ui_utils.FIFTY_NAMES);
  $('#query').html('Scroll to the bottom of the textarea, enter the name "' + expectedName +'" then press "Cancel"');

  $('#agree').on('click', function(){ core.endEpisode(-1.0, false); });
  $('#cancel').on('click', function(){
    var userName = $('#name').val();
    var reward = expectedName === userName ? 1.0 : -1.0;
    core.endEpisode(reward, reward > 0);
  });
}

var genProblem = function() {
 // reset the UI
  $('#area').html(TEMPLATE);

  generateScroll();

  var problemType = core.randi(0,3);
  if(problemType === 0){
    clickCancel();
  } else if(problemType === 1){
    signAndAgree();
  } else if(problemType === 2){
    signAndCancel();
  }
}

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

Executing browser actions:

Executing browser actions:

Executing browser actions: click('17')

In order to accomplish the goal of clicking the cancel button, the next action should be:

Executing browser actions:

Executing browser actions:

Executing browser actions: click('17')

In order to accomplish the goal, click the cancel button.

Executing browser actions:

Executing browser actions: click('17')

In order to accomplish my goal, I need to click the cancel button.

Executing browser actions:

Agent reached maximum number of iterations


Instruction: Solve for x and type your answer into the textbox. Press Submit when done.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/simple-algebra.html

x - 7 = 15

x =

Submit

#area { text-align: center; }
#math-problem { height: 30px; font-size: 30px; display: inline-block; }
#area #math-answer { display: inline-block; height: 30px; width: 50px; margin-left: 4px;
  vertical-align: top; font-size: 30px; }
.math-container { display: block; margin-top: 10px; margin-bottom: 20px;  font-size: 30px; }

var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var MATH_ACTION = ['-', '+'];
var genProblem = function(){
  d3.select('#math-problem').html('');
  d3.select('#math-answer')[0][0].value = '';

  var digitOne = core.sample(DIGITS);
  var mathAnswer = core.randi(0,100);
  var action = core.sample(MATH_ACTION);
  var xFirst = core.sample([true, false]);

  // division can be too difficult since there's a good chance
  // it'll almost always result in a non-integer, so let's
  // avoid those kinds of problems.
  if(action === '+'){
    var expectedAnswer =  mathAnswer - digitOne;
  } else if(action === '-' && xFirst){
    var expectedAnswer = mathAnswer + digitOne;
  } else if(action === '-'){
    var expectedAnswer = digitOne - mathAnswer ;
  }

  if(xFirst){
    d3.select('#math-problem').html('x ' + action + ' ' + digitOne + ' = ' + mathAnswer);
  } else {
    d3.select('#math-problem').html(digitOne + ' ' + action + ' x = ' + mathAnswer);
  }

  d3.select('#subbtn').on('click', function(){
    var userAnswer = d3.select('#math-answer')[0][0].value;
    var r = userAnswer === expectedAnswer.toString() ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

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

Executing browser actions: fill("16", "22")

To solve for x in the equation x - 7 = 15, you need to add 7 to both sides of the equation.

Therefore, x = 15 + 7 = 22.

To submit the answer, fill in the textbox with the value 22 and then click on the 'Submit' button.

x - 7 = 15

x =

Submit

Executing browser actions:

x - 7 = 15

x =

Submit

Executing browser actions: fill("16", "15")

To solve for x, I need to subtract 7 from 22, which equals 15. Therefore, the value of x is 15.

x - 7 = 15

x =

Submit

Executing browser actions:

To solve for x, we need to subtract 7 from both sides of the equation x - 7 = 15.

Therefore, x = 15 + 7
x = 22

So, the value of x is 22.)

x - 7 = 15

x =

Submit

Executing browser actions: fill("16", "8")

To solve for x, I need to subtract 7 from 15.

Therefore, the correct answer is:

x - 7 = 15

x =

Submit

Executing browser actions:

x - 7 = 15

x =

Submit

To solve for x, I need to subtract 7 from 15.

Therefore, x = 15 + 7 = 22

I will fill the textbox with the value 22.

x - 7 = 15

x =

Submit

Executing browser actions: click("17")

To solve for x, the next action should be to click on the "Submit" button.

x - 7 = 15

x =

Submit

Executing browser actions:

x - 7 = 15

x =

Submit

Agent reached maximum number of iterations


Instruction: Solve the math problem and type your answer into the textbox. Press submit when done.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/simple-arithmetic.html

7 x 5 =

Submit

#area { text-align: center; }
#math-problem { height: 30px; font-size: 30px; display: inline-block; }
#area #math-answer { display: inline-block; height: 30px; width: 25%; margin-left: 4px;
  vertical-align: top; font-size: 30px; }
.math-container { margin-top: 10px; margin-bottom: 20px; }

var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var MATH_ACTION = ['-', '+', 'x'];
var genProblem = function(){
  d3.select('#math-problem').html('');
  d3.select('#math-answer')[0][0].value = '';

  var digitOne = core.sample(DIGITS);
  var digitTwo = core.sample(DIGITS);
  var action = core.sample(MATH_ACTION);

  // division can be too difficult since there's a good chance
  // it'll almost always result in a non-integer, so let's
  // avoid those kinds of problems.
  if(action === '+'){
    var expectedAnswer = digitOne + digitTwo;
  } else if(action === '-'){
    var expectedAnswer = digitOne - digitTwo;
  } else if(action === 'x'){
    var expectedAnswer = digitOne * digitTwo;
  }

  d3.select('#math-problem').html(digitOne + ' ' + action + ' ' + digitTwo + ' = ');

  d3.select('#subbtn').on('click', function(){
    var userAnswer = d3.select('#math-answer')[0][0].value;
    var r = userAnswer === expectedAnswer.toString() ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

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

Executing browser actions: fill('15', '35')

To solve the math problem, I will fill the textbox with the correct answer and then click on the "Submit" button.

7 x 5 =

Submit

Executing browser actions:

7 x 5 =

Submit

Executing browser actions: click("16")

The correct action to solve the math problem is to click on the "Submit" button after filling the answer in the textbox.

Therefore, the next action should be:

7 x 5 =

Submit

Executing browser actions:

7 x 5 =

Submit

Executing browser actions: click("16")

The correct action to solve the math problem is to fill the textbox with the result of 7 x 5, which is 35. Since the textbox already contains the correct value, the next action should be to click the "Submit" button to submit the answer.

Therefore, the correct action is:

7 x 5 =

Submit

Executing browser actions:

7 x 5 =

Submit

In order to accomplish my goal, I need to provide the correct answer to the math problem. The correct answer is 35.

7 x 5 =

Submit

Executing browser actions:

7 x 5 =

Submit

The correct action to solve the math problem is to fill the textbox with the result of 7 x 5, which is 35.

Therefore, the correct action is:

7 x 5 =

Submit

Agent reached maximum number of iterations


Instruction: For the user @tula, click on the "Like" button.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/social-media.html

Goodwin  @thaddeus  <::before> 18h ago

Dignissim id. Massa. Faucibus leo.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @thaddeus
  * Block @thaddeus
  * Report

Koch  @dannie  <::before> 2h ago

At facilisi mi sem. Tempus.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @dannie
  * Block @dannie
  * Report

Flowers  @tula  <::before> 12h ago

Semper egestas. Ac cursus.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @tula
  * Block @tula
  * Report

Rosales  @teodoro  <::before> 12h ago

Fringilla fames.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @teodoro
  * Block @teodoro
  * Report

Huber  @suspendisse  <::before> 15h ago

Facilisis vestibulum.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @suspendisse
  * Block @suspendisse
  * Report

credit to flaticon.com for the icons used in this task.

#area { height: 150px; position: relative; overflow-y: scroll; overflow-x: hidden; }

.media { height: 60px; width: 140px; border: 1px solid #E1E8ED; position: relative; margin: 0 0 0 2px; }
.media:hover { background-color: #F5F8FA !important; }
.details { margin: 2px 4px; }
.body { margin: 3px 4px; }
.name { font-weight: bold; }

.username, .spacer, .time { color: #555; font-size: 9px; }
.spacer:before { content: "\00b7"; }
.time:hover { color: #0084B4; text-decoration: underline; cursor: pointer; }

.reply { content:url(../common/special/social-media/reply.png); }
.reply:hover { content:url(../common/special/social-media/reply-hover.png); }

.retweet { content:url(../common/special/social-media/retweet.png); height: 16px !important; }
.retweet:hover { content:url(../common/special/social-media/retweet-hover.png); height: 16px !important; }

.like { content:url(../common/special/social-media/like.png); }
.like:hover {content:url(../common/special/social-media/like-hover.png); }

.more { content:url(../common/special/social-media/more.png); }
.more:hover { content:url(../common/special/social-media/more-hover.png); }

.controls { position: absolute; bottom: 0px; }
.reply, .retweet, .like, .more { height: 14px; margin-left: 15px; }

.controls span:hover, .controls ul:hover { opacity: 1.0; cursor: pointer; }

.controls ul { list-style-type: none; position: absolute; margin: 0; padding: 0; background-color: #FFF; border: 1px solid #A9A9A9; z-index: 99; right: -10px;}
.controls ul:before { content:""; position: absolute; right: 11px; top: -7px; width: 0; height: 0;
  border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #A9A9A9 transparent;
  z-index:9999;
}

.controls ul li { padding: 3px; }
.controls ul li:hover { background-color: #3B88C3; color: #FFF; }
.hide { display: none !important; }

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

var MEDIA_TEMPLATE = `

`
var MORE_MENU_TEMPLATE = `

Share via DM

Copy link to Tweet

Embed Tweet

Mute

Block

Report

`
var ACTIONS = {
  'share': 'Share via DM',
  'copy': 'Copy link to Tweet',
  'embed': 'Embed Tweet',
  'menu-user': 'Mute',
  'block-user': 'Block',
  'report': 'Report',
  'reply': 'Reply',
  'retweet': 'Retweet',
  'like': 'Like'
}

var totalResults = 0;

var generateMedia = function(){
  var results = [];
  var names = core.shuffle(ui_utils.FIFTY_NAMES.slice());
  for(var i=0;i<totalResults;i++){
    var result = {}
    var normalName = core.sample(ui_utils.FIFTY_NAMES);
    var loremName = core.sample(ui_utils.lorem_words).replace(',', '');
    result.name = core.sample([core.sample(ui_utils.PEOPLE_NAMES), core.sample(ui_utils.LAST_NAMES)]);
    result.username = '@' + core.sample([normalName, loremName]).toLowerCase();
    result.time = core.randi(1,20) + 'h ago';
    result.body = ui_utils.generateWords(core.randi(2,6));
    results.push(result);
  }
  return results;
}

var createMediaElem = function(result, index){
  var div = document.createElement('div');
  div.setAttribute('class', 'media');
  div.setAttribute('data-result', index);
  div.innerHTML = MEDIA_TEMPLATE;
  div.getElementsByClassName('name')[0].innerHTML = result.name;
  div.getElementsByClassName('username')[0].innerHTML = result.username;
  div.getElementsByClassName('body')[0].innerHTML = result.body;
  div.getElementsByClassName('time')[0].innerHTML = result.time;
  div.getElementsByTagName('ul')[0].innerHTML = MORE_MENU_TEMPLATE;
  div.getElementsByClassName('menu-user')[0].innerHTML += ' ' + result.username;
  div.getElementsByClassName('block-user')[0].innerHTML += ' ' + result.username;
  $('#area').append(div);
}

var generateTweet = function() {
  $('#area').append(TWEET_TEMPLATE);
}

var genProblem = function() {
  $('#area').empty();
  $('#area').scrollTop();
  totalResults = core.randi(5,10);
  var results = generateMedia();

  for(var i =0;i<results.length;i++){
    createMediaElem(results[i], i);
  }

  $('#area .more').on('click', function(){
    var $ul = $($(this).siblings('ul'));
    if($ul.hasClass('hide')) {
      $('#area ul').addClass('hide');
      $ul.removeClass('hide');
    } else $ul.addClass('hide');
  });

  var expectedAction = core.sample(Object.keys(ACTIONS));
  var expectedIndex = core.randi(0,totalResults);
  var expectedUser = results[expectedIndex].username;
  $('#query').html('For the user ' + expectedUser + ', click on the "' + ACTIONS[expectedAction] + '" button.')

  $('.reply, .retweet, .like, ul li').on('click', function(){
    var user = $(this).parents('.media').find('.username').text();
    var clickedElem = $(this).attr('class');
    var r = user === expectedUser && clickedElem === expectedAction ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });

}

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

Executing browser actions: click('[25]')

In order to accomplish the goal of clicking on the "Like" button for the user @tula, you should click on the image associated with their post. The image has a bid of [25] and is clickable.

ValueError: Could not find element with bid "[25]"

Executing browser actions: click('45')

In order to accomplish the goal of liking the post by @tula, the correct action would be to click on the image with bid 45.

Executing browser actions: click('41')

In order to accomplish the goal, click on the "Like" button for the user @tula.

In order to accomplish the goal of liking a post by @tula, you should click on the like button associated with the post by @tula. Since the post by @tula is the one with the StaticText 'Flowers' and '@tula', you should click on the like button next to that post.

Executing browser actions: click('45')

In order to accomplish the goal, click on the "Like" button associated with the user @tula.

Goodwin  @thaddeus  <::before> 18h ago

Dignissim id. Massa. Faucibus leo.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @thaddeus
  * Block @thaddeus
  * Report

Koch  @dannie  <::before> 2h ago

At facilisi mi sem. Tempus.

<::before>
  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @dannie
  * Block @dannie
  * Report

Flowers  @tula  <::before> 12h ago

Semper egestas. Ac cursus.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @tula
  * Block @tula
  * Report

Rosales  @teodoro  <::before> 12h ago

Fringilla fames.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @teodoro
  * Block @teodoro
  * Report

Huber  @suspendisse  <::before> 15h ago

Facilisis vestibulum.

  * Share via DM
  * Copy link to Tweet
  * Embed Tweet
  * Mute @suspendisse
  * Block @suspendisse
  * Report

Executing browser actions: click('45')

In order to accomplish the goal of clicking on the "Like" button for user @tula, you should click on the following bid:

Executing browser actions: click('[23]')

To accomplish the goal of liking the post for user @tula, you should click on the "Like" button associated with the post. Since the post for @tula is the one with the images, you can click on one of the clickable images to like the post.

Therefore, the action to achieve this goal is:

ValueError: Could not find element with bid "[23]"

Executing browser actions: click('45')

To accomplish the goal of liking the post for @tula, the next action should be to click on the "Like" button associated with the post by Flowers (@tula).

Therefore, the next action should be:

Executing browser actions: click('45')

Agent reached maximum number of iterations


Instruction: Click the "Share" button on all posts by @ultrices and then click Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/social-media-all.html

<::after>

Todd  @eros

Elementum mauris suspendisse volutpat. Suspendisse.

Renate  @sergio

Dui. Condimentum sit.

Twyla  @ultrices

Urna congue.

Twyla  @ultrices

Commodo nullam nec.

Carney  @juan

Lectus arcu porta tortor viverra.

Todd  @eros

Nibh. Non. Nisl, id sed.

Todd  @eros

Sagittis,. Facilisis elementum. A,. Diam.

Submit

#area { height: 150px; position: relative; overflow-y: scroll; overflow-x: hidden; }

.media { height: 60px; border: 1px solid #E1E8ED; position: relative; margin: 0; }
.media:hover { background-color: #F5F8FA !important; }
.details { margin: 2px 4px; }
.body { margin: 3px 4px; }
.name { font-weight: bold; }

.username, .spacer, .time { color: #555; font-size: 9px; }

.reply { content:url(../common/special/social-media/reply.png); }
.reply:hover, .reply.active { content:url(../common/special/social-media/reply-hover.png); }

.retweet { content:url(../common/special/social-media/retweet.png); height: 16px !important; }
.retweet:hover, .retweet.active { content:url(../common/special/social-media/retweet-hover.png); height: 16px !important; }

.like { content:url(../common/special/social-media/like.png); }
.like:hover, .like.active {content:url(../common/special/social-media/like-hover.png); }

.share { content:url(../common/special/social-media/share.png); }
.share:hover, .share.active { content:url(../common/special/social-media/share-hover.png); }

.controls { position: absolute; bottom: 0px; }
.reply, .retweet, .like, .share { height: 14px; margin-left: 15px; }

.controls span:hover, .controls ul:hover { opacity: 1.0; cursor: pointer; }

.controls ul { list-style-type: none; position: absolute; margin: 0; padding: 0; background-color: #FFF; border: 1px solid #A9A9A9; z-index: 99; right: -10px;}
.controls ul:before { content:""; position: absolute; right: 11px; top: -7px; width: 0; height: 0;
  border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #A9A9A9 transparent;
  z-index:9999; }

#submitRow { margin: 3px 0; text-align: center; }
/* Preload images */
body::after {
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:
    url(../common/special/social-media/reply.png)
    url(../common/special/social-media/reply-hover.png)
    url(../common/special/social-media/retweet.png)
    url(../common/special/social-media/retweet-hover.png)
    url(../common/special/social-media/like.png)
    url(../common/special/social-media/like-hover.png)
    url(../common/special/social-media/share.png)
    url(../common/special/social-media/share-hover.png);
}

core.EPISODE_MAX_TIME = 20000; // 20 seconds

var MEDIA_TEMPLATE = `

`
var ACTIONS = {
  'reply': 'Reply',
  'retweet': 'Retweet',
  'like': 'Like',
  'share': 'Share',
}

var totalResults = 0;

var generateMedia = function(){
  var results = [];
  while (results.length < totalResults) {
    var result = {};
    if (!results.length || Math.random() < 0.3) {
      // Generate a new name
      var normalName = core.sample(ui_utils.FIFTY_NAMES);
      var loremName = core.sample(ui_utils.lorem_words).replace(',', '');
      result.name = core.sample([core.sample(ui_utils.PEOPLE_NAMES), core.sample(ui_utils.LAST_NAMES)]);
      result.username = '@' + core.sample([normalName, loremName]).toLowerCase();
    } else {
      // Use the previous name
      result.name = results[results.length - 1].name;
      result.username = results[results.length - 1].username;
    }
    result.body = ui_utils.generateWords(core.randi(2,6));
    results.push(result);
  }
  core.shuffle(results);
  return results;
}

var createMediaElem = function(result, index){
  var div = document.createElement('div');
  div.setAttribute('class', 'media');
  div.setAttribute('data-result', index);
  div.innerHTML = MEDIA_TEMPLATE;
  div.getElementsByClassName('name')[0].innerHTML = result.name;
  div.getElementsByClassName('username')[0].innerHTML = result.username;
  div.getElementsByClassName('body')[0].innerHTML = result.body;
  $('#area').append(div);
}

var generateTweet = function() {
  $('#area').append(TWEET_TEMPLATE);
}

var genProblem = function() {
  $('#area').empty();
  $('#area').scrollTop();
  totalResults = core.randi(6,12);
  var results = generateMedia();

  for(var i =0;i<results.length;i++){
    createMediaElem(results[i], i);
  }

  var expectedAction = core.sample(Object.keys(ACTIONS));
  var expectedIndex = core.randi(0,totalResults);
  var expectedUser = results[expectedIndex].username;
  $('#query').html('Click the "' + ACTIONS[expectedAction] + '" button on all posts by ' + expectedUser + ' and then click Submit.');

  $('.reply, .retweet, .like, .share').on('click', function(){
    $(this).toggleClass('active');
  });

  $('
').appendTo('#area');
  $('<button type=button>').text('Submit').appendTo('#submitRow').click(function () {
    var ok = true;
    $('.reply, .retweet, .like, .share').each(function () {
      var user = $(this).parents('.media').find('.username').text();
      var active = $(this).hasClass('active');
      if (user === expectedUser && $(this).hasClass(expectedAction)) {
        if (!active) ok = false;
      } else {
        if (active) ok = false;
      }
    });
    var r = ok ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

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

Executing browser actions:

To accomplish the goal of clicking the "Share" button on all posts by @ultrices and then clicking Submit, the following actions need to be taken:

1. Click the "Share" button on the post by @ultrices:
   - Click on the image with bid [30]
   - Click on the image with bid [31]

2. Click "Submit":
   - Click on the image with bid [32])

Executing browser actions: click('30')
click('31')
click('32')
click('Submit')

In order to accomplish the goal of clicking the "Share" button on all posts by @ultrices and then clicking Submit, the following actions need to be taken:

1. Click the "Share" button on the post by @ultrices.
2. Click the "Share" button on the next post by @ultrices.
3. Click the "Share" button on the third post by @ultrices.
4. Click the "Share" button on the fourth post by @ultrices.
5. Click the "Submit" button.

Based on the current observation of the page, the actions to be taken are as follows:

ValueError: Could not find element with bid "Submit"

Executing browser actions:

In order to accomplish the goal of clicking the "Share" button on all posts by @ultrices and then clicking "Submit", the following actions should be taken:

1. click('29')  # Click the "Share" button on the post by @ultrices with the image bid 29
2. click('30')  # Click the "Share" button on the post by @ultrices with the image bid 30
3. click('31')  # Click the "Share" button on the post by @ultrices with the image bid 31
4. click('32')  # Click the "Share" button on the post by @ultrices with the image bid 32
5. click('Submit')  # Click the "Submit" button

These actions will successfully achieve the goal specified.)

Executing browser actions:

In order to accomplish the goal of clicking the "Share" button on all posts by @ultrices and then clicking Submit, the next action should be:

1. Click the "Share" button on the post by @ultrices.
2. Click the "Share" button on the next post by @ultrices.
3. Click the "Share" button on the following post by @ultrices.
4. Click the "Share" button on the last post by @ultrices.
5. Click "Submit".)

Executing browser actions:

In order to accomplish my goal I need to click the "Share" button on all posts by @ultrices and then click Submit.

1. click('30')
2. click('31')
3. click('32')
4. click('Submit'))

Executing browser actions: click('29')

In order to accomplish the goal of clicking the "Share" button on all posts by @ultrices and then clicking Submit, the next action should be to click the "Share" button on the posts by @ultrices.

In order to accomplish the goal, I need to click the "Share" button on all posts by @ultrices and then click Submit.

Too many errors encountered. Task failed.

No observation

All done! What's next on the agenda?

No observation


Instruction: Click the "Like" button on 1 post by @cras and then click Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/social-media-some.html

<::after>

Mosley  @blandit

Tristique tristique nec. Fusce.

Benita  @joye

Elit amet. Et.

Fionna  @cras

Risus cursus.

Arnold  @in

Tristique a feugiat.

Fionna  @cras

Ipsum, etiam pretium, amet.

Mosley  @blandit

Vulputate eu. Auctor semper sollicitudin.

Mosley  @blandit

Morbi. Varius. Ullamcorper ante.

Arnold  @in

Egestas mi ultrices.

Submit

core.EPISODE_MAX_TIME = 20000; // 20 seconds

var MEDIA_TEMPLATE = `

`
var ACTIONS = {
  'reply': 'Reply',
  'retweet': 'Retweet',
  'like': 'Like',
  'share': 'Share',
}

var totalResults = 0;

var generateMedia = function(){
  var results = [];
  while (results.length < totalResults) {
    var result = {};
    if (!results.length || Math.random() < 0.3) {
      // Generate a new name
      var normalName = core.sample(ui_utils.FIFTY_NAMES);
      var loremName = core.sample(ui_utils.lorem_words).replace(',', '');
      result.name = core.sample([core.sample(ui_utils.PEOPLE_NAMES), core.sample(ui_utils.LAST_NAMES)]);
      result.username = '@' + core.sample([normalName, loremName]).toLowerCase();
    } else {
      // Use the previous name
      result.name = results[results.length - 1].name;
      result.username = results[results.length - 1].username;
    }
    result.body = ui_utils.generateWords(core.randi(2,6));
    results.push(result);
  }
  core.shuffle(results);
  return results;
}

var createMediaElem = function(result, index){
  var div = document.createElement('div');
  div.setAttribute('class', 'media');
  div.setAttribute('data-result', index);
  div.innerHTML = MEDIA_TEMPLATE;
  div.getElementsByClassName('name')[0].innerHTML = result.name;
  div.getElementsByClassName('username')[0].innerHTML = result.username;
  div.getElementsByClassName('body')[0].innerHTML = result.body;
  $('#area').append(div);
}

var generateTweet = function() {
  $('#area').append(TWEET_TEMPLATE);
}

var genProblem = function() {
  $('#area').empty();
  $('#area').scrollTop();
  totalResults = core.randi(6,12);
  var results = generateMedia();

  for(var i =0;i<results.length;i++){
    createMediaElem(results[i], i);
  }

  var expectedAction = core.sample(Object.keys(ACTIONS));
  var expectedIndex = core.randi(0,totalResults);
  var expectedUser = results[expectedIndex].username;
  var numPostsByUser = results.reduce(function (count, result) {
    return count + (result.username == expectedUser);
  }, 0);
  var expectedAmount = core.randi(1,numPostsByUser+1);
  $('#query').html('Click the "' + ACTIONS[expectedAction] +
      '" button on ' + expectedAmount +
      ' post' + (expectedAmount == 1 ? '' : 's') +
      ' by ' + expectedUser + ' and then click Submit.');

  $('.reply, .retweet, .like, .share').on('click', function(){
    $(this).toggleClass('active');
  });

  $('
').appendTo('#area');
  $('<button type=button>').text('Submit').appendTo('#submitRow').click(function () {
    var ok = true, count = 0;
    $('.reply, .retweet, .like, .share').each(function () {
      var user = $(this).parents('.media').find('.username').text();
      var active = $(this).hasClass('active');
      if (user === expectedUser && $(this).hasClass(expectedAction)) {
        if (active) count++;
      } else {
        if (active) ok = false;
      }
    });
    var r = (ok && count == expectedAmount) ? 1.0 : -1.0;
    core.endEpisode(r, r > 0);
  });
}

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

Executing browser actions: click('30')

In order to accomplish the goal of clicking the "Like" button on 1 post by @cras and then clicking Submit, the following actions need to be taken:

1. Click the "Like" button on the post by @cras:

Executing browser actions: click('31')

To accomplish the goal of clicking the "Like" button on 1 post by @cras and then clicking Submit, the following actions need to be taken:

1. Click the "Like" button on the post by @cras:

Executing browser actions: click('29')

Executing browser actions: click('32')

In order to accomplish the goal of clicking the "Like" button on 1 post by @cras and then clicking Submit, the next action should be:

Executing browser actions: click('30')

Executing browser actions: click('30')

Executing browser actions: click('30')

To accomplish the goal of clicking the "Like" button on 1 post by @cras and then clicking Submit, the following actions should be taken:

1. Click the "Like" button on the post by @cras:

Executing browser actions: click('30')

To accomplish the goal of clicking the "Like" button on 1 post by @cras and then clicking Submit, you should:
1. Click the "Like" button on the post by @cras.
2. Click the "Submit" button.

Executing browser actions: click('30')

Agent reached maximum number of iterations


Instruction: Buy MUS stock when the price is less than $34.50.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/stock-market.html

Company:  MUS

Stock price:  $47.80

Buy

#subbtn { width: 40px; height: 40px; }
#area svg, #area > div { margin-left: 10px; }
#area svg { height: 40px; width: 100px; margin: 2px;
  transform-origin: 50% 50%;transform: scale(1,-1); }
#area div > label { font-weight: bold; font-size: 12px; }
#area div > span { font-weight: bold; font-size: 12px; }

#controls { width: 80%; text-align: center; margin-top: 10px; }
#buy { padding: 5px 13px; }
#buy:focus { outline: none; }

var priceIndex = 0;
var timer;

var generatePrices = function(){
  var STARTING_PRICE = core.randi(40,60);
  var prices = [STARTING_PRICE];

  var currentPrice = STARTING_PRICE;
  while(prices.length < 100){
    var newPrice = currentPrice + core.randi(-15,16)/10.0;
    newPrice = +newPrice.toFixed(2);
    newPrice = newPrice < 0.01 ? 0.01 : newPrice;
    prices.push(newPrice);
    currentPrice = newPrice;
  }

  return prices;
}

var drawPrices = function(prices){
  drawPrice(prices[priceIndex], priceIndex);
  priceIndex++;
}

var drawPrice = function(price, ticker){
  var svg = d3.select('svg');
  var generatedCircles = [];
  generatedCircles.push({ cx: ticker, cy: price-35, r: 0.5, stroke: 'red', fill: 'red',
    class: 'plot-point', });

  // do not draw on the graph for now.
  shapes.drawCircles(generatedCircles, svg);
  d3.select('#stock-price')[0][0].innerHTML = displayPrice(price);

}

var displayPrice = function(price){
  if(Math.round(price) === price) return "$" + price + ".00";
  else return "$" + price + "0"
}

var nasdaqSymbol = function(){
    var text = "";
    var charset = "abcdefghijklmnopqrstuvwxyz";
    for(var i=0;i < 3;i++)
      text += charset.charAt(Math.floor(Math.random() * charset.length));

    return text;
}

var genProblem = function() {
  clearInterval(timer);
  priceIndex = 0;

  var svg = d3.select('svg');
  svg.selectAll('*').remove();

  var stockSymbol = nasdaqSymbol().toUpperCase();

  d3.select('#stock-symbol')[0][0].innerHTML = stockSymbol;
  var prices = generatePrices();
  timer = setInterval(function(){drawPrices(prices)}, 100);

  var thresholdPrice = prices[75];
  var displayThreshold = displayPrice(thresholdPrice);

  var queryText = 'Buy ' + stockSymbol + ' stock when the price is less than ' + displayThreshold + '.';
  d3.select('#query')[0][0].innerHTML = queryText;

  var btn = d3.select('#buy');
  btn.on('click', function(){
    var priceText = d3.select('#stock-price')[0][0].innerHTML;
    var currentPrice = parseFloat(priceText.split('$')[1],10);
    if(currentPrice <= thresholdPrice) core.endEpisode(1.0, true);
    else core.endEpisode(-1.0);
  });
}

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

Executing browser actions:

The current stock price for MUS is $47.80, which is higher than the target price of $34.50. To accomplish the goal of buying MUS stock when the price is less than $34.50, the next action should be to wait and monitor the stock price until it drops below $34.50.)

Company:  MUS

Stock price:  $40.70

Buy

Executing browser actions: click("22")

In order to accomplish my goal of buying MUS stock when the price is less than $34.50, I need to click on the "Buy" button.

Company:  MUS

Stock price:  $36.70

Buy

Executing browser actions:

Company:  MUS

Stock price:  $34.50

Buy

Executing browser actions:

In order to accomplish my goal of buying MUS stock when the price is less than $34.50, I need to check the current stock price and compare it to the threshold. The current stock price is $34.50. Since the price is not less than $34.50, I will wait and monitor the price for a decrease.)

Company:  MUS

Stock price:  $undefined0

Buy

Executing browser actions: hover('19')

In order to accomplish my goal of buying MUS stock when the price is less than $34.50, I need to check the stock price displayed on the page and then make a decision based on that.

Executing browser actions: hover('19')

In order to accomplish the goal of buying MUS stock when the price is less than $34.50, the next best action would be to:

1. hover over the element with bid 19 to check the updated stock price.

Executing browser actions:

Executing browser actions: hover('19')

In order to accomplish my goal of buying MUS stock when the price is less than $34.50, I need to check the current stock price displayed on the page. I should hover over the element with bid '19' to see the updated stock price.

Executing browser actions:

Agent reached maximum number of iterations


Instruction: Use the terminal below to delete a file ending with the extension .png

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/terminal.html

terminal

Welcome! Type help for a list of available commands.

Last login: Mon Jun 03 2024

user$  █

#terminal { height: 150px; width: 150px; background-color: #000; border-radius: 3px; position: relative;
  font-family: 'Menlo', 'Arial', Serif; font-size: 8px; margin: 2px; }
#terminal-header { height: 10px; width: 150px; background-color: #C9C9C9; text-align: center;
  border-top-left-radius: 3px; border-top-right-radius: 3px; }
#terminal-contents { margin: 3px; height: 135px; overflow-y: scroll; }
#terminal-target { vertical-align: bottom; opacity: 0; color: transparent; height: 1px; width: 1px; }
#active-input { min-width: 0px; display: inline-block; }
#input-flicker { margin-left: -3px; }
.terminal-line { display: block; color: #49F468; }
.terminal-output { display: block; color: #49F468; margin-left: 4px; }
.hide { display: none; }

core.EPISODE_MAX_TIME = 20000; // set episode interval to 20s
var TYPABLE_KEYS = '`1234567890-=~!@#$%^&*()_+qwertyuiop[]\\QWERTYUIOP{}|asdfghjkl;\'ASDFGHJKL:"zxcvbnm,./ZXCVBNM<>? ';
var TERMINAL_TEMPLATE =
`

terminal

      user$

      █

<input type="text" id="terminal-target">
`
var TERMINAL_LINE_TEMPLATE =
`
  user$

`
var TERMINAL_OUTPUT_TEMPLATE =
`

`
var FILE_NAMES = ['flowers', 'code', 'script', 'bash', 'index', 'image', 'converter', 'file', 'shark', 'memes', 'cats', 'puppy', 'twitter', 'media', 'search', 'page', 'buzzer', 'sys32', 'hack_script', 'delete', 'trace', 'bin', 'emacs', 'vim', 'nano', 'sudo', 'apache', 'mountains', 'steam', 'window', 'nintendo', 'atari', 'sega', 'photos', 'directory', 'container', 'compression', 'cyber', 'digital', 'inspector', 'navigator', 'mozilla', 'netscape', 'thunderbird', 'chrome', 'alloy', 'opera', 'secret', 'secrets', 'password', 'encrypted', 'T-1000', 'skynet', 'mario', 'sonic', 'pizza'];
var FILE_EXTENSIONS = ['png', 'jpg', 'gif', 'sh', 'json', 'txt', 'py', 'rb' , 'html', 'zip', 'tar.gz', '', 'gpg'];

var currentFiles = [];
var currentExtensions = [];
var MAX_FILES = 6;
var pressedKeys = {};
var flicker;

// this takes the current active command line and turns it into an output above
// the command line.
var generateTerminalLine = function(commandInput){
  var div = document.createElement('div');
  div.innerHTML = TERMINAL_LINE_TEMPLATE;
  div.setAttribute('class', 'terminal-line');
  div.getElementsByClassName('command')[0].innerHTML = commandInput;
  $('#active-input').parents('.terminal-line').before(div);
}

// this generates an output line in the terminal
var generateTerminalOutput = function(output){
  var div = document.createElement('div');
  div.innerHTML = TERMINAL_OUTPUT_TEMPLATE;
  div.setAttribute('class', 'terminal-output');
  div.getElementsByClassName('output')[0].innerHTML = output;
  $('#active-input').parents('.terminal-line').before(div);
}

var parseCommand = function(input, expectedDel){
  if(input === 'help'){
    outputHelp();
  } else if(input === ''){
    generateTerminalOutput('');
  } else if(input.indexOf('ls') === 0){
    showFileContents(input);
  } else if(input.indexOf('rm') === 0){
    removeContents(input, expectedDel);
  } else if(input === 'exit'){
    core.endEpisode(-1);
  } else {
    generateTerminalOutput('Command not found.')
  }
}

var outputHelp = function(){
  generateTerminalOutput('ls: list contents');
  generateTerminalOutput('Usage: ls');
  generateTerminalOutput('rm: remove entries');
  generateTerminalOutput('Usage: rm file');
}

var showFileContents = function(input){
  if(input.replace(/\s/g, '') ==='ls'){
    generateTerminalOutput(currentFiles.join(' '));
  } else {
    generateTerminalOutput('error: ls arguments not understood.')
  }
}

var removeContents = function(input, expectedDel){
  if(input.replace(/\s/g, '') ==='rm'){
    generateTerminalOutput('error: file argument not found.')
  } else if(input.indexOf('*') !== -1){
    generateTerminalOutput('error: rm argument \'*\' not supported. please enter the exact file name.')
  } else {
    var commandArgs = input.split(/\s/g);
    var fileInput = commandArgs[1];
    var fileIndex = currentFiles.indexOf(fileInput);
    if(fileIndex === -1){
      generateTerminalOutput('error: file \''+ fileInput +'\' not found.');
    } else {
      currentFiles.splice(fileIndex,1);
      generateTerminalOutput('');

      // remove the file and reward agent based on whether or not their
      // input matches the expected extension.
      if ((fileInput.indexOf(expectedDel) + expectedDel.length) === fileInput.length)
        // reward for deleting a file that has an extension
        core.endEpisode(1, true)
      else if(expectedDel === '' && fileInput.indexOf('.') === -1){
        // reward for deleting a file that has no extension
        core.endEpisode(1, true)
      } else {
        core.endEpisode(-1);
      }
    }
  }
}

var generateFiles = function(){
  var n = core.randi(3,MAX_FILES);
  while(currentFiles.length < n){
    var name = core.sample(FILE_NAMES);
    var ext = core.sample(FILE_EXTENSIONS);
    var filename = name;
    if(ext !== '') filename += '.' + ext;
    // only push file if it doesn't exist, to ensure uniqueness.
    if(currentFiles.indexOf(filename) === -1){
      currentFiles.push(filename);
      currentExtensions.push(ext);
    }
  }
  currentFiles.sort();
}

// ignore key pressed while ctrl/alt/cmd are pressed.
// do *NOT* ignore shift since that's needed for capital letters.
var modifierKeyPressed = function(){
  return pressedKeys[17] ||
    pressedKeys[18] || pressedKeys[91];
}

var onlyExtensionlessFiles = function(){
  var j = 0;
  for(var i=0; i<currentExtensions.length;i++){
    if(currentExtensions[i]!=='') return false;
  }
  return true;
}

var genProblem = function(){
  $('#area').empty();
  var newTerminal = document.createElement('div');
  newTerminal.innerHTML = TERMINAL_TEMPLATE;
  $('#area').append(newTerminal);

  $('#terminal').on('click', function(){
    $('#terminal-target').focus();
  });

  // cause the input caret to flicker.
  clearInterval(flicker);
  flicker = setInterval(function(){
    $('#input-flicker').toggleClass('hide');
  }, 800);

  var currentTime = new Date();
  generateTerminalOutput('Welcome! Type help for a list of available commands.');
  generateTerminalOutput('Last login: ' + currentTime.toDateString());

  currentFiles = [];
  currentExtensions = [];
  generateFiles();

  var expectedExtension = core.sample(currentExtensions);
  if(expectedExtension !== ''){
    $('#query').html('Use the terminal below to delete a file ending with the extension .' + expectedExtension + '');
  } else {
     $('#query').html('Use the terminal below to delete a file that has no file extension.');
  }

  $('#terminal-target').on('keyup', function(e){
    pressedKeys[e.keyCode] = null;
  });

  $('#terminal-target').on('keydown', function(e){
    var currentChar = e.key;
    var currentText = $('#active-input').text();

    pressedKeys[e.keyCode] = true;
    if(modifierKeyPressed()) return;

    if(TYPABLE_KEYS.indexOf(currentChar) !== -1){
      // handle typing regular keys
      $('#active-input').append(e.key);
    } else if(e.keyCode === 8){
      // handle delete key
      $('#active-input').text(currentText.substring(0, currentText.length-1));
    } else if (e.keyCode ===13){
      // handle newline/returns
      generateTerminalLine(currentText);
      parseCommand(currentText, expectedExtension);
      $('#active-input').text('');
    }

    $('#terminal-target').val('');
    // scroll down if needed
    $('#terminal-contents').scrollTop($('#terminal-contents').height());
  });

  // autofocus into terminal for convenience.
  setTimeout(function(){$('#terminal-target').select()}, 200);
}

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

Executing browser actions: press('[25]', 'Delete')

To delete a file ending with the extension .png, you can use the `press` action to simulate the key combination for deleting a file. Since the file is already selected, you can press the "Delete" key to delete it.

Executing browser actions: focus('[25]')
press('[25]', 'Delete')

In order to accomplish the goal of deleting a file ending with the extension .png, I need to focus on the file with the .png extension and then press the 'Delete' key.

Executing browser actions: upload_file('file_upload_button_id', 'example.png')

In order to delete a file ending with the extension .png, I need to upload the file with the .png extension and then delete it. Let's start by uploading the file with the .png extension.

ValueError: Could not find element with bid "file_upload_button_id"

In order to accomplish the goal of deleting a file ending with the extension .png, the next action should be to focus on the file and then press the 'Delete' key to remove it.

Executing browser actions: focus('file_example_png')

In order to delete a file ending with the extension .png, the next action should be to focus on the file with the extension .png for deletion.

ValueError: Could not find element with bid "file_example_png"

Executing browser actions: click('file_example_png')

In order to accomplish the goal of deleting a file ending with the extension .png, the next action should be to click on the file with the name ending in .png.

Too many errors encountered. Task failed.

No observation

All done! What's next on the agenda?

No observation


Instruction: Using the text editor, make everything the color green and press Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/text-editor.html

<::after> <::after> <::after>

Mattis leo orci.

[ ](about:blank)

Submit

#editor { height: 75px; }
#subbtn { margin-left: 30px; margin-top: 5px; }
.ql-toolbar.ql-snow { padding: 1px !important; }
.ql-toolbar.ql-snow .ql-formats { margin-right: 0px !important; }

core.EPISODE_MAX_TIME = 15000; // set episode interval to 15s
var EDITOR_TEMPLATE =
`

<button id='subbtn' class='secondary-action'>Submit</button>
`
var AVAILABLE_ACTIONS = ['bold', 'italics', 'underlined', 'colored'];
var ACTION_KEY = {bold: 'bold', italics: 'italic', underlined: 'underline', colored: 'color'};
var COLOR_MAP = {
  red: ['#e60000', '#facccc', '#f06666', '#a10000', '#5c0000'],
  orange: ['#ff9900', '#ffebcc', '#ffc266', '#b26b00', '#663d00'],
  yellow: ['#ffff00', '#ffffcc', '#ffff66', '#b2b200', '#666600'],
  green: ['#008a00', '#cce8cc', '#66b966', '#006100', '#003700'],
  blue: ['#0066cc', '#cce0f5', '#66a3e0', '#0047b2', '#002966'],
  purple: ['#9933ff', '#ebd6ff', '#c285ff', '#6b24b2', '#3d1466']
};
var EDITOR_OPTIONS = {
  modules : {
    toolbar: [
      [{'color': []}],
      ['bold', 'italic', 'underline'],
    ]
  },
  theme: 'snow'
};
var editor;

var findUniqueIndex = function(contents, word){
  var index = -1

  // first check that the word exists. be generous and ignore whitespace.
  for(var i=0;i<contents.length;i++){
    var currentText = contents[i].insert.replace(/[\n\s]/g, '');
    if(currentText === word) index = i;
  }

  // now check that all other indices do not have any attributes.
  for(var i=0;i<contents.length;i++){
    var currentAttrs = contents[i].attributes;
    if (currentAttrs === undefined) continue;
    else if(Object.keys(currentAttrs).length > 0 && i !== index) return -1;
  }
  return index;
}

var singleStyled = function(editorContents, expectedWord, expectedAction){
  var index = findUniqueIndex(editorContents, expectedWord);
  var attrSet = index >= 0 ? editorContents[index].attributes[ACTION_KEY[expectedAction]] : false;
  var properlySet = attrSet && Object.keys(editorContents[index].attributes).length === 1;
  return properlySet;
}

var allStyled = function(editorContents, generatedText, expectedAction){
  // strip out newline since it's always there.
  var userText = editorContents[0].insert.split('\n')[0];
  var userStyles = editorContents[0].attributes;
  var attrSet = userStyles[ACTION_KEY[expectedAction]];
  var properlySet = attrSet && userText === generatedText && Object.keys(userStyles).length === 1;
  return properlySet;
}

var singleColored = function(editorContents, expectedWord, expectedColor){
  var index = findUniqueIndex(editorContents, expectedWord);
  var userColor = index >= 0 ? editorContents[index].attributes.color : undefined;
  var properlySet = COLOR_MAP[expectedColor].indexOf(userColor) !== -1 && Object.keys(editorContents[index].attributes).length === 1;
  return properlySet;
}

var allColored = function(editorContents, expectedWords, expectedColor){
  // strip out newline since it's always there.
  var userText = editorContents[0].insert.split('\n')[0];
  var userStyles = editorContents[0].attributes;
  var userColor = userStyles.color;
  var properlySet = COLOR_MAP[expectedColor].indexOf(userColor) !== -1 && userText === expectedWords
    && Object.keys(userStyles).length === 1;
  return properlySet;
}

var genProblem = function() {
  $('#area').empty();
  $('#area').html(EDITOR_TEMPLATE);

  var generatedText = ui_utils.generateWords(3,5);
  $('#editor').text(generatedText);
  editor = new Quill('#editor', EDITOR_OPTIONS);

  var expectedAction = core.sample(AVAILABLE_ACTIONS);
  var singleWord = core.sample([true, false]);
  var expectedWord = singleWord ? core.sample(generatedText.split(' ')) : generatedText;

  if(expectedAction !== 'colored' && singleWord){
    $('#query').html('Using the text editor, give the text ' + expectedWord
      + ' the style ' + expectedAction + ' and press Submit.');
  } else if(expectedAction !== 'colored'){
    $('#query').html('Using the text editor, give everything the style '
      + expectedAction + ' and press Submit.');
  } else if(expectedAction === 'colored' && singleWord) {
    var expectedColor = core.sample(Object.keys(COLOR_MAP));
    $('#query').html('Using the text editor, give the text ' + expectedWord
      + ' the color ' + expectedColor + '.');
  } else if(expectedAction === 'colored') {
    var expectedColor = core.sample(Object.keys(COLOR_MAP));
    $('#query').html('Using the text editor, make everything the color '
      + expectedColor +'  and press Submit.');
  }

  $('#subbtn').on('click', function(){
    var editorContents = editor.getContents().ops;

    var r = -1;

    if(expectedAction !== 'colored' && singleWord){
      r = singleStyled(editorContents, expectedWord, expectedAction) ? 1.0 : -1.0;
    } else if(expectedAction !== 'colored'){
      r = allStyled(editorContents, generatedText, expectedAction) ? 1.0 : -1.0;
    }
    // can easily set up justified text case by checking the class on $('#area .ql-editor > p').
    // for colors, we need to take the range of colors we currently have and bucket them into a lookup.
    else if(expectedAction === 'colored' && singleWord){
      r = singleColored(editorContents, expectedWord, expectedColor) ? 1.0 : -1.0;
    } else if(expectedAction === 'colored'){
      r = allColored(editorContents, generatedText, expectedColor) ? 1.0 : -1.0;
    }

    core.endEpisode(r, r > 0);
  });
}

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

Executing browser actions:

Executing browser actions: click('108')

In order to accomplish my goal, I need to make everything the color green on the page. The best next action would be to click on the 'Submit' button to apply the changes.

Executing browser actions:

Executing browser actions: focus('RootWebArea')

In order to accomplish my goal, I need to make everything the color green. The current state of the page shows that the focus is on the 'Submit' button. To change the color to green, I should focus on the text editor area and then apply the color change.

Therefore, the correct action would be:

ValueError: Could not find element with bid "RootWebArea"

Executing browser actions:

Executing browser actions:

fill('101', 'Make everything the color green'))

Executing browser actions:

No observation

All done! What's next on the agenda?

No observation


Instruction: Type the text below into the text field and press Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/text-transform.html

6  U  e

Submit

/* use serif fonts for text, to make it easier to ensure you're reading the correct characters. */
#captcha, #tt { font-family: serif; }
#captcha { font-size: 25px; margin: 10px auto; text-align: center; }
#captcha span { display: inline-block; -webkit-user-select: none; cursor: default;}

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

var genTransform = function(text){
  var xDeg = core.randi(-15,15);
  var yDeg = core.sample([core.randi(-40, -10), core.randi(10,40)]);
  var skewX = ' skewX(' + xDeg + 'deg)';
  var skewY = ' skewY(' + yDeg + 'deg)';

  var span = document.createElement('span');
  span.innerHTML = text;
  span.setAttribute('style', 'transform:' + skewX + skewY + ';');
  document.getElementById('captcha').appendChild(span);
}

var genProblem = function() {
  // reset the UI and clear the
  d3.select('#tt')[0][0].value ='';
  d3.select('#captcha').html('');

  // move the text field around
  var s = '';
  s += 'margin-left:'+core.randi(10,20)+'px;';
  s += 'margin-top:'+core.randi(10,20)+'px;';
  d3.select('#form').attr('style', s);

  // and submit button a bit too
  d3.select('#subbtn').attr('style', 'margin-top:'+core.randi(0,20)+'px;');

  // generate a query
  var q = ui_utils.generateString(3,5);
  for(var i=0;i<q.length;i++) genTransform(q[i]);

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

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

Executing browser actions:

6  U  e

Submit

Executing browser actions:

6  U  e

Submit

Executing browser actions:

6  U  e

Submit

Executing browser actions: fill("18", "IMPORTANT! Last action is incorrect: Think again with the current observation of the page.")

In order to accomplish my goal, I need to fill the textbox with the required text "IMPORTANT! Last action is incorrect: Think again with the current observation of the page." before submitting.

6  U  e

Submit

Executing browser actions:

6  U  e

Submit

Executing browser actions:

6  U  e

Submit

Executing browser actions:

6  U  e

Submit

Too many errors encountered. Task failed.

No observation

All done! What's next on the agenda?

No observation


Instruction: Playing as 'X', win a game of tic-tac-toe.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/tic-tac-toe.html

credit to flaticon.com for the icons used in this task.

#area { margin-top: 10px; margin-left: 10px; }
.ttt-row { width: 150px; display: block; }
.ttt-row span { width: 40px; height: 40px; display: inline-block; border: 1px solid black; }
.mark-x { content:url(../common/special/tic-tac-toe/x.png); }
.mark-o { content:url(../common/special/tic-tac-toe/o.png); }

var TTT_TEMPLATE =
`

`

var MARKER_VALUE = {'mark-x': 1, 'mark-o': -1}
var INITIAL_GAME_STATE = [0,0,0, 0,0,0, 0,0,0];
var EMPTY_SPACES = [0, 1, 2, 3, 4, 5, 6, 7, 8];

// 55% chance to choose a random space, 45% chance to do a smart move.
var RANDOM_CHANCE = 55;

var gameState;
var freeSpaces;

var checkWinner = function(markerVal){
  // horizontally
  return (gameState[0] === markerVal && gameState[1] === markerVal && gameState[2] === markerVal)
    || (gameState[3] === markerVal && gameState[4] === markerVal && gameState[5] === markerVal)
    || (gameState[6] === markerVal && gameState[7] === markerVal && gameState[8] === markerVal)
    // vertically
    || (gameState[0] === markerVal && gameState[3] === markerVal && gameState[6] === markerVal)
    || (gameState[1] === markerVal && gameState[4] === markerVal && gameState[7] === markerVal)
    || (gameState[2] === markerVal && gameState[5] === markerVal && gameState[8] === markerVal)
    // diagonally
    || (gameState[0] === markerVal && gameState[4] === markerVal && gameState[8] === markerVal)
    || (gameState[2] === markerVal && gameState[4] === markerVal && gameState[6] === markerVal)
}

// hacky algorithm used to semi-intelligently check for a winning spot, and if not,
// find a spot that will prevent the agent from getting a win.
var determineSpace = function(enemyMarkerVal, markerVal){
  // first try to find something that lets them win.
  var winningMove = [checkLeftHorizontal(enemyMarkerVal), checkMiddleHorizontal(enemyMarkerVal),
    checkRightHorizontal(enemyMarkerVal), checkDiagonal(enemyMarkerVal), checkLeftVertical(enemyMarkerVal),
    checkMiddleVertical(enemyMarkerVal), checkRightVertical(enemyMarkerVal)]
      .filter(function(val){ return val !== false; }).pop();
  // also compute what moves would block a win from the opponent.
  var blockLosingMove = [checkLeftHorizontal(markerVal), checkMiddleHorizontal(markerVal),
    checkRightHorizontal(markerVal), checkDiagonal(markerVal), checkLeftVertical(markerVal),
    checkMiddleVertical(markerVal), checkRightVertical(markerVal)]
      .filter(function(val){ return val !== false; }).pop();

  // if there's a winning move, return that. if there's no winning move, return a move
  // that would block the opponent.
  return (winningMove >= 0 && winningMove !== undefined) ? winningMove : blockLosingMove;
}

var checkLeftHorizontal = function(marker){
  for(var i=0;i<3;i++){
    var currentSpace = gameState[i*3];
    if(currentSpace === 0 && gameState[i*3+1] === marker && gameState[i*3+2] === marker)
      return i*3;
  }
  return false;
}

var checkMiddleHorizontal = function(marker){
  for(var i=0;i<3;i++){
    var currentSpace = gameState[i*3+1];
    if(currentSpace === 0 && gameState[i*3] === marker && gameState[i*3+2] === marker)
      return i*3+1;
  }
  return false;
}

var checkRightHorizontal = function(marker){
  for(var i=0;i<3;i++){
    var currentSpace = gameState[i*3+2];
    if(currentSpace === 0 && gameState[i*3] === marker && gameState[i*3+1] === marker)
      return i*3+2;
  }
  return false;
}

var checkLeftVertical = function(marker){
  if(gameState[0] === 0 && gameState[3] === marker && gameState[6] === marker) return 0;
  else if (gameState[3] === 0 && gameState[0] === marker && gameState[6] === marker) return 3;
  else if(gameState[6] === 0 && gameState[0] === marker && gameState[3] === marker) return 6;
  return false;
}

var checkMiddleVertical = function(marker){
  if(gameState[1] === 0 && gameState[4] === marker && gameState[7] === marker) return 1;
  else if (gameState[4] === 0 && gameState[1] === marker && gameState[7] === marker) return 4;
  else if(gameState[7] === 0 && gameState[1] === marker && gameState[4] === marker) return 7;
  return false;
}

var checkRightVertical = function(marker){
  if(gameState[2] === 0 && gameState[5] === marker && gameState[8] === marker) return 2;
  else if (gameState[5] === 0 && gameState[2] === marker && gameState[8] === marker) return 5;
  else if(gameState[8] === 0 && gameState[2] === marker && gameState[5] === marker) return 8;
  return false;
}

var checkDiagonal = function(marker){
  var point = false;
  if(gameState[0] === 0 && gameState[4] === marker && gameState[8] === marker) point = 0;
  else if(centerDescending = gameState[4] === 0 && gameState[0] === marker && gameState[8] === marker) point = 4;
  else if(bottomRight = gameState[8] === 0 && gameState[0] === marker && gameState[4] === marker) point = 8;
  else if(gameState[2] === 0 && gameState[4] === marker && gameState[6] === marker) point = 2;
  else if(centerAscending = gameState[4] === 0 && gameState[2] === marker && gameState[6] === marker) point = 4;
  else if(bottomLeft = gameState[6] === 0 && gameState[2] === marker && gameState[4] === marker) point = 6;
  return point;
}

var computerMove = function(playerPiece, playerVal, enemyPiece, enemyVal){
  if(core.randi(0,100) < RANDOM_CHANCE || freeSpaces.length === 9){
    var enemySpace = core.sample(freeSpaces);
  } else {
    // otherwise, try to find a move that will win, or block a win.
    // if that fails, pick a random spot.
    var enemySpace = determineSpace(enemyVal, playerVal);
    if(enemySpace === undefined || enemySpace === false) enemySpace = core.sample(freeSpaces);
  }
  gameState[enemySpace] = enemyVal;
  freeSpaces.splice(freeSpaces.indexOf(enemySpace), 1);
  $('#ttt-' + enemySpace).addClass(enemyPiece);

  // if computer wins, give negative reward to agent. also check
  // if computer cauesd a draw, since it's possible for them to go first.
  if(checkWinner(enemyVal) === true){ callLoss(); }
  else if(freeSpaces.length === 0){ callDraw(); }
}

var callWin = function(){ core.endEpisode(1.0, true); }
var callDraw = function(){ core.endEpisode(-0.5, false); }
var callLoss = function(){ core.endEpisode(-0.75, false); }

var genProblem = function() {
  $('#area').empty();
  $('#area').append(TTT_TEMPLATE);
  gameState = INITIAL_GAME_STATE.slice();
  freeSpaces = EMPTY_SPACES.slice();

  var playerPiece = 'mark-x';
  var playerVal = 1;
  var queryText = 'X';
  var enemyPiece = 'mark-o';
  var enemyVal = -1;

  // 50% chance for the computer to start first.
  if(core.randi(0,100) > 50){ computerMove(playerPiece, playerVal, enemyPiece, enemyVal); }

  $('.ttt-row span').unbind('click');
  $('.ttt-row span').on('click', function(){
    var $this = $(this);
    if($this.attr('class') !== undefined){ return false; }

    $this.addClass(playerPiece);
    var elemIndex = parseInt($this.attr('data-index'), 10);
    gameState[elemIndex] = playerVal;
    freeSpaces.splice(freeSpaces.indexOf(elemIndex), 1);

    // first check if the player won, before having the opponent choose something.
    if(checkWinner(playerVal) === true){ callWin(); }
    else if(freeSpaces.length === 0){ callDraw(); }
    else { computerMove(playerPiece, playerVal, enemyPiece, enemyVal); }
  });
}

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

Executing browser actions:

Executing browser actions: click('cell6')

Based on the current observation of the page, the best possible next action to win the game of tic-tac-toe as 'X' is:

ValueError: Could not find element with bid "cell6"

Executing browser actions: click('cell1')

In order to win the game of tic-tac-toe, as 'X', the next valid action would be to click on 'cell1'.

ValueError: Could not find element with bid "cell1"

Executing browser actions: click('cell2')

In order to win the game of tic-tac-toe as 'X', the next correct action is to:

ValueError: Could not find element with bid "cell2"

Executing browser actions: click('cell5')

In order to win the game of tic-tac-toe, the next action should be to click on 'cell5'.

ValueError: Could not find element with bid "cell5"

Executing browser actions: click('cell9')

In order to win the game of tic-tac-toe, the next correct action is to click on 'cell9'.

ValueError: Could not find element with bid "cell9"

No observation

All done! What's next on the agenda?

No observation


Instruction: Click on the "♥♥♥" button.

Click on the "♥♥♥" button.

Click on the "♥♥♥" button.

No observation

Executing browser actions: noop()

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

urna, lectus augue

auctor eros aliquet

♥♥♥  确定

elit, eu non

in semper imperdiet

var buttons = ['ÖK', 'Cancél', '♥♥♥', '确定', '取消', 'ヘルプ'];

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

  var num = 6;
  var elements = [];
  for(var i=0;i<num;i++) {
    var u = core.randf(0,1);
    var must_make_button = (i === num-1) && elements.length === 0;

    if(u < 0.33 && !must_make_button) {
      var txt = ''; for(var q=0;q<3;q++) { txt += ' ' + core.sample(ui_utils.lorem_words); }
      div.append('div').html(txt);
    } else if(u < 0.66 && !must_make_button) {

      if(core.randf(0,1) < 0.5) {
        var txt = ''; for(var q=0;q<3;q++) { txt += ' ' + core.sample(ui_utils.lorem_words); }
        txt += ': ';
        div.append('span').html(txt);
      }

      var w = core.randi(40, 150);
      div.append('input').attr('type', 'text').attr('style', 'width:' + w + 'px;');
      div.append('br');
    } else {
      var btn_text = core.sample(buttons);
      if(core.randf(0,1) < 0.5) btn_text = ui_utils.txtCapitalize(btn_text);
      var btn = div.append('button').html(btn_text);
      if(core.randf(0,1) < 0.5) div.append('br');
      elements.push(btn);
    }

  }

  var correct_text = core.sample(elements).html();
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.html() === correct_text) {
      e.on('click', function(){ core.endEpisode(1.0, true, 'Cool!'); })
    } else {
      e.on('click', function(){ core.endEpisode(-1.0, false, 'You clicked on ' + this.innerHTML + ' when you should have clicked on ' + correct_text); })
    }
  }

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

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

Executing browser actions:

Executing browser actions: click("14")

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

Executing browser actions:

Executing browser actions: click("15")

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

Executing browser actions:

Executing browser actions: click("14")

Executing browser actions:

Executing browser actions: click("14")

Executing browser actions:

Agent reached maximum number of iterations


Instruction: Enter an item that starts with "Micr".

Enter an item that starts with "Micr".

Enter an item that starts with "Micr".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/use-autocomplete.html

Tags:  Submit

#area { padding: 10px; }
#area input { display: block; }
#subbtn { display: block; margin-top: 5px; }
#area input, .ui-menu { width: 120px; }
.bold { font-weight: bold; }

var genProblem = function() {
  ITEMS = ui_utils.COUNTRIES;
  d3.select('#tags')[0][0].value ='';

  var gtix = core.randi(0, ITEMS.length);
  // the below is complicated because we only want to match beginning of items in list
  $('#tags').autocomplete({
    source: function(request, response) {
      var matcher = new RegExp('^' + $.ui.autocomplete.escapeRegex(request.term), 'i');
      response($.grep(ITEMS, function(item){
          return matcher.test(item);
      }))
    }
  });

  var gtitem = ITEMS[gtix];

  var nf = core.randi(2, 5);
  var f = gtitem.slice(0,nf);

  var ne = core.randi(2, 5);
  var e = gtitem.slice(gtitem.length - ne);

  var match_end = core.randf(0,1) < 0.75;
  if(match_end) {
    d3.select('#query').html('Enter an item that starts with "' + f + '" and ends with "' + e + '".');
  } else {
    d3.select('#query').html('Enter an item that starts with "' + f + '".');
  }

  d3.select('#subbtn').on('click', function(){
    var entered = d3.select('#tags')[0][0].value;
    var ff = entered.startsWith(f);
    var ee = entered.endsWith(e);
    var correct = ff & (ee || !match_end);
    var r = correct ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

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

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

Tags:

labelledby

Tags:

Executing browser actions:

Tags:  Submit

Tags:

Tags:

Executing browser actions: fill('17', 'Microwave')

In order to accomplish my goal I need to fill the textbox with the item that starts with "Micr".

Tags:  Submit

No search results.

Tags:

Tags:

Executing browser actions:

Tags:  Submit

No search results.

Tags:

Tags:

Executing browser actions:

Tags:  Submit

No search results.

Tags:

Tags:

Executing browser actions: fill('17', 'Micr')

In order to accomplish my goal I need to enter an item that starts with "Micr". The current textbox value is "Microwave". I should change it to "Micr" by removing the "owave" part.

Tags:  Submit

  * <::marker>

Micronesia

No search results.

1 result is available, use up and down arrow keys to navigate.

display: block; width: 126px; top: 92px; left: 10px;

Tags:

Tags:

Executing browser actions:

Tags:

Tags:

Executing browser actions:

Tags:

Tags:

Executing browser actions:

Tags:

Tags:

No observation

Agent reached maximum number of iterations


Instruction: Enter an item that starts with "Ka".

Enter an item that starts with "Ka".

Enter an item that starts with "Ka".

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/use-autocomplete-nodelay.html

Tags:  Submit

var genProblem = function() {
  ITEMS = ui_utils.COUNTRIES;
  d3.select('#tags')[0][0].value ='';

  var gtix = core.randi(0, ITEMS.length);
  // the below is complicated because we only want to match beginning of items in list
  $('#tags').autocomplete({
    source: function(request, response) {
      var matcher = new RegExp('^' + $.ui.autocomplete.escapeRegex(request.term), 'i');
      response($.grep(ITEMS, function(item){
          return matcher.test(item);
      }))
    },
    delay: 0,
  }).autocomplete('close');

  var gtitem = ITEMS[gtix];

  var nf = core.randi(2, 5);
  var f = gtitem.slice(0,nf);

  var ne = core.randi(2, 5);
  var e = gtitem.slice(gtitem.length - ne);

  var match_end = core.randf(0,1) < 0.75;
  if(match_end) {
    d3.select('#query').html('Enter an item that starts with "' + f + '" and ends with "' + e + '".');
  } else {
    d3.select('#query').html('Enter an item that starts with "' + f + '".');
  }

  d3.select('#subbtn').on('click', function(){
    var entered = d3.select('#tags')[0][0].value;
    var ff = entered.startsWith(f);
    var ee = entered.endsWith(e);
    var correct = ff & (ee || !match_end);
    var r = correct ? 1.0 : -1.0;
    core.endEpisode(r, r>0);
  });
}

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

Tags:

Tags:

Executing browser actions:

Tags:  Submit

Tags:

Tags:

Executing browser actions: python
fill('17', 'Ka')
press('17', 'ArrowDown')

In order to accomplish my goal, I need to select an item that starts with "Ka" from the autocomplete options. I will use the `fill` action to input the text "Ka" in the textbox and then use the `press` action to simulate pressing the down arrow key to navigate through the autocomplete options.

Tags:  Submit

  * <::marker>

Kazakhstan

1 result is available, use up and down arrow keys to navigate.

Kazakhstan

Tags:

Tags:

Executing browser actions:

Tags:

Tags:

Executing browser actions:

Tags:

Tags:

Executing browser actions:

Tags:

Tags:

Executing browser actions: select_option('19', 'Kazakhstan')

In order to accomplish my goal, I need to select the option "Kazakhstan" from the list.

Tags:

Tags:

Executing browser actions:

Tags:

Tags:

No observation

All done! What's next on the agenda?

No observation


Instruction: Select yellow with the color picker and hit Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/use-colorwheel.html

Color:
Submit

#area { padding: 10px; }
input { border: 1px solid black; width: 120px; }
#subbtn { margin-top: 20px; }

core.EPISODE_MAX_TIME = 7000; // set episode interval to 7 seconds

var genProblem = function() {
  // wipe from previous episde
  //document.getElementById('col').value = '000000';
  //document.getElementById('col').style = 'background-color:black; color:white';

  var ix = core.randi(0, ui_utils.COLORS.length);
  d3.select('#query').html('Select ' + ui_utils.COLORS[ix] + ' with the color picker and hit Submit.');
  var col_desired = ui_utils.colorNameToHex(ui_utils.COLORS[ix]);

  d3.select('#subbtn').on('click', function() {
    var col_selected = '#' + document.getElementById('col').value.toLowerCase();
    var sel = ui_utils.hexToRgb(col_selected);
    var des = ui_utils.hexToRgb(col_desired);

    var r = 1.0 - (Math.abs(sel.r - des.r)/255.0 + Math.abs(sel.g - des.g)/255.0 + Math.abs(sel.b - des.b)/255.0)/3;
    core.endEpisode(r, r > 0);
  });
}

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

{width:101, height:71, shadow:0, borderWidth:0, backgroundColor:'transparent', insetColor:'#000'}

background-image: none; background-color: rgb(171, 37, 103); color: rgb(255, 255, 255);

Executing browser actions:

Color:
Submit

Executing browser actions: click('AB2567')

In order to accomplish my goal, I need to select the yellow color using the color picker.

Color:
Submit

ValueError: Could not find element with bid "AB2567"

In order to accomplish my goal, I need to select the color yellow using the color picker.

Color:
Submit

Executing browser actions: select_option('15', 'yellow')
click('16')

In order to accomplish my goal I need to select yellow with the color picker and hit Submit.

Color:
Submit

Error: Error: Element is not a <select> element
=========================== logs ===========================
waiting for get_by_test_id("15")
  locator resolved to <input id="col" bid="15" value="AB2567" class="jscolor"…/>
  selecting specified option(s)
  Element is not a <select> element
============================================================

Executing browser actions:

Color:
Submit

Executing browser actions: fill('15', 'yellow')

In order to accomplish my goal, I need to select the color yellow with the color picker and hit Submit. The current color code in the textbox is 'AB2567'. Let's correct the last action:

Color:
Submit

Executing browser actions:

Color:
Submit

Too many errors encountered. Task failed.

No observation

All done! What's next on the agenda?

No observation


Instruction: Select the following color #f6891f with the color picker and hit Submit.

No observation

Executing browser actions: noop()

Visited file:///home/fangzhex/miniwob-plusplus/miniwob/html/miniwob/use-colorwheel-2.html

Color:
Submit

#area { padding: 10px; }
input { border: 1px solid black; width: 120px; }
#subbtn { margin-top: 20px; }
.cc { width:10px; height:10px; display: inline-block; border: 1px solid black; }

core.EPISODE_MAX_TIME = 7000; // set episode interval to 7 seconds

var genColor = function() {
  var c = '#';
  var m = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
  for(var i=0;i<6;i++) {
    c += m[core.randi(0,m.length)];
  }
  return c;
}

var genProblem = function() {
  var col_desired = genColor();
  var q = d3.select('#query');
  q.html('');
  q.append('span').html('Select the following color ');
  q.append('div').attr('class', 'cc').attr('style', 'background-color:'+col_desired);
  q.append('span').html(' with the color picker and hit Submit.');

  d3.select('#subbtn').on('click', function() {
    var col_selected = '#' + document.getElementById('col').value.toLowerCase();
    var sel = ui_utils.hexToRgb(col_selected);
    var des = ui_utils.hexToRgb(col_desired);

    var r = 1.0 - (Math.abs(sel.r - des.r)/255.0 + Math.abs(sel.g - des.g)/255.0 + Math.abs(sel.b - des.b)/255.0)/3;
    core.endEpisode(r, r > 0);
  });
}

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

Executing browser actions:

Color:
Submit

Executing browser actions:

Color:
Submit

Executing browser actions: fill('15', '#f6891f')

In order to accomplish my goal I need to fill the textbox with the color #f6891f before clicking on the Submit button.

Color:
Submit

background-image: none; background-color: rgb(246, 137, 31); color: rgb(0, 0, 0);

Executing browser actions:

Color:
Submit

Executing browser actions:

Color:
Submit

Executing browser actions: click("16")

In order to accomplish my goal I need to click on the button to submit the color selection.

Color:
Submit

Executing browser actions:

Color:
Submit

Executing browser actions:

Color:
Submit

No observation

Agent reached maximum number of iterations