function Riddle(title, body, tag, imageUrl){
  this.title = title;
  this.body = body;
  this.tag = tag;
  this.imageUrl = imageUrl;
}

var riddle = new Riddle('Robots on a Line', '\n<p>\n  Two robots are placed at different points on a straight line of infinite length.  When they are first placed down,\n  they each spray out some oil to mark their starting points.\n</p>\n<p>\n  You must program each robot to ensure that the robots will eventually crash into each other.  A program can consist\n  of the following four instructions:\n  <ul>\n    <li>Go left one space</li>\n    <li>Go right one space</li>\n    <li>Skip the next instruction if there is oil in my current spot</li>\n    <li>Go to a label</li>\n  </ul>\n  [Note that a "label" is a name that refers to a line of your code.  For example, you could label the third line\n  of your program "surveying".  Then, the instruction "goto surveying" would jump to line 3 and start executing\n  from there on the next cycle.]\n</p>\n<p>\n  A robot will carry out one instruction per second.  Both robots need not have the same program.\n  Note that you won\'t know ahead of time which robot is on the left and which is on the right.\n</p>\n', 'robots-on-a-line', 'robots-on-a-line.png');

function showRiddle(curRiddle){
  var elem = document.getElementById('riddle_body');
  elem.innerHTML = curRiddle.body;
  var elem = document.getElementById('riddle_title');
  elem.innerHTML = curRiddle.title;
  var elem = document.getElementById('riddle_image');
  if ((curRiddle.imageUrl == null) || (curRiddle.imageUrl == '')){
    elem.innerHTML = '';
  }else{
    elem.innerHTML = '<img style="width:50px;" src="http://www.bigriddles.com/images/riddles/' + curRiddle.imageUrl + '"/>';  
  }
  
  var elem = document.getElementById('riddle_solution');
  elem.innerHTML = '<a href="http://www.bigriddles.com/riddle/' + curRiddle.tag + '">Click here to see the solution.</a>';
}

document.write('&lt;style&gt;\r\n.bigriddles_widget{\r\n  position: relative;\r\n  width:325px;\r\n  padding: 3px 0px 5px 0px;\r\n  border:2px solid #003399;\r\n  color:black;\r\n  background-color:white;\r\n  text-align:right;\r\n}\r\n.bigriddles_widget #riddle_title{\r\n  font-size:130%;\r\n  font-weight:bold;\r\n  padding:1px 5px 1px 5px;\r\n  text-align: left;\r\n}\r\n.bigriddles_widget #riddle_section{\r\n  padding:5px;\r\n  height: 175px;\r\n  overflow: auto;\r\n  text-align: left;\r\n}\r\n.bigriddles_widget #riddle_solution{\r\n  font-weight:bold;\r\n  margin-top:10px;\r\n}\r\n.bigriddles_widget #riddle_nav{\r\n  padding:3px 5px 3px 5px;\r\n  text-align:center;\r\n}\r\n.bigriddles_widget .riddles_signoff{\r\n  font-size:80%;\r\n}\r\n.bigriddles_widget .horiz_sep{\r\n  width:100%;\r\n  height:1px;\r\n  padding:0px;\r\n  margin:0px;\r\n  border-top:1px solid #003399;\r\n}\r\n.bigriddles_widget .smaller{\r\n  font-size:80%;\r\n}\r\n.bigriddles_widget a{\r\n  color: #003399;\r\n  text-decoration: none;\r\n}\r\n.bigriddles_widget a:visited{\r\n  color: #003399;\r\n  text-decoration: none;\r\n}\r\n.bigriddles_widget td{\r\n  color: black;\r\n}\r\n.bigriddles_widget li{\r\n  color: black;\r\n}\r\n&lt;/style&gt;\r\n\r\n&lt;div class=&#34;smaller&#34; style=&#34;float:left;padding:0px 0px 1px 3px;&#34;&gt;\r\n  &lt;a href=&#34;http://www.bigriddles.com&#34;&gt;\r\n    &lt;img src=&#34;http://www.bigriddles.com/images/icon1.png&#34; style=&#34;border:none;&#34; /&gt;\r\n  &lt;/a&gt;\r\n&lt;/div&gt;\r\n&lt;div class=&#34;smaller&#34; style=&#34;float:left;padding-left:3px;&#34;&gt;\r\n  &lt;a href=&#34;http://www.bigriddles.com&#34;&gt;BigRiddles.com&lt;/a&gt;\r\n&lt;/div&gt;\r\n&lt;div class=&#34;smaller&#34; style=&#34;float:right;padding-right:3px;font-weight:bold;&#34;&gt;\r\n  Riddle of the Day\r\n&lt;/div&gt;\r\n&lt;div style=&#34;clear:both;&#34;&gt;&lt;/div&gt;\r\n\r\n&lt;div class=&#34;horiz_sep&#34;&gt;&lt;/div&gt;\r\n&lt;div id=&#34;riddle_title&#34;&gt;&lt;/div&gt;\r\n\r\n&lt;div id=&#34;riddle_section&#34;&gt;\r\n  &lt;div id=&#34;riddle_image&#34; style=&#34;float:right;&#34;&gt;&lt;/div&gt;\r\n  &lt;div id=&#34;riddle_body&#34;&gt;&lt;/div&gt;\r\n  &lt;div id=&#34;riddle_solution&#34;&gt;&lt;/div&gt;\r\n  &lt;div style=&#34;clear:both;&#34;&gt;&lt;/div&gt;\r\n&lt;/div&gt;\r\n     \r\n&lt;div class=&#34;horiz_sep&#34;&gt;&lt;/div&gt;\r\n\r\n&lt;span class=&#34;smaller&#34;&gt;\r\n  &amp;nbsp;&lt;a href=&#34;http://www.bigriddles.com/widgets&#34;&gt;Get this widget&lt;/a&gt; |\r\n&lt;/span&gt;\r\n  \r\n');
showRiddle(riddle);