mowen/nassi-shneiderman.html

## nassi-shneiderman.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>jQuery Prototype</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" language="javascript" src="jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript" language="javascript" src="nassi-shneiderman.js"></script>
    <style type="text/css">
      .block { border: 1px solid #000; text-align: center; }
      ul.options { list-style-type: none; }
      .options li { display: inline; margin: 2em; }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
	  var html = Qire.RetryProfile.render(
	      new Block(1,
			'Sub to determine Wiki-article.',
			'Select favourite genre',
			[ new Option('History', 2),
			  new Option('Science', 3),
			  new Option('Geography', 4),
			  new Option('Other', 5) ]),
	      new Block(2,
			'Click history link',
			'',
			[]),
	      new Block(3,
			'Click the science link',
			'',
			[]),
	      new Block(4,
			'Click the Geography link',
			'Select a country',
			[ new Option('England', 6),
			  new Option('France', 6),
			  new Option('Germany', 6) ]),
	      new Block(6,
			'Move there',
			'',
			[])
	  );
	  $('.demo').prepend(html);
	  $('.block')
	  .mouseenter(function (event) {
	      event.stopPropagation();
	      $(event.currentTarget).animate({ width: '+=50',
					       height: '+=50',
					       fontSize: '+=2' }, 'fast');
	  })
	  .mouseleave(function (event) {
	      event.stopPropagation();
	      $(event.currentTarget).animate({ width: '-=50',
					       height: '-=50',
					       fontSize: '-=2' }, 'fast');
	  });
      });
    </script>
    </head>
    <body>
      <div class="demo">
      </div>
    </body>
</html>

## nassi-shneiderman.js
/**
 * Blocks should only be added via a function in Qire.RetryProfile so that they can
 * be registered automatically. The render method should take a parameter which
 * contains details of the parent, so that the parameters can be used in the option.
 */

var Qire = {};

Qire.RetryProfile = function () {
    var blocks = {};

    return {
	render: function(process) {
	    return process.render();
	},

	registerBlock: function (block) {
	    blocks[block.id] = block;
	},

	getBlock: function(id) {
	    return blocks[id];
	}
    };
}();

function Block(id, title, label, options) {
    this.id = id;
    this.title = title;
    this.label = label;
    this.options = options;
    Qire.RetryProfile.registerBlock(this);
}

Block.prototype = {
    _renderOptions: function() {
	var html = '';

	for (var option in this.options) {
	    html += this.options[option].render();
	}

	return html;
    },

    render: function() {
	return '<div class="block">' +
	    '<h3>' + this.title + '</h3>' +
	    '<p>' + this.label + '</p>' +
	    '<table class="options">' + this._renderOptions() + '</table>' +
	    '</div>';
    }
};

function Option(label, outcome) {
    this.label = label;
    this.outcome = outcome;
}

Option.prototype = {
    render: function() {
	return '<tr class="option"><td>' + this.label + '</td>' +
	    '<td>' + this._renderOutcome() + '</td>' +
	    '</tr>';
    },

    _renderOutcome: function() {
	var outcomeBlock = Qire.RetryProfile.getBlock(this.outcome);
	return (outcomeBlock !== undefined) ? outcomeBlock.render() : '';
    }
};
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>jQuery Prototype</title>
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
	<script type="text/javascript" language="javascript" src="jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" language="javascript" src="jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
	<script type="text/javascript" language="javascript" src="nassi-shneiderman.js"></script>
	<style type="text/css">
	.block { border: 1px solid #000; text-align: center; }
	ul.options { list-style-type: none; }
	.options li { display: inline; margin: 2em; }
	</style>
	<script type="text/javascript">
	$(document).ready(function() {
	var html = Qire.RetryProfile.render(
	new Block(1,
	'Sub to determine Wiki-article.',
	'Select favourite genre',
	[ new Option('History', 2),
	new Option('Science', 3),
	new Option('Geography', 4),
	new Option('Other', 5) ]),
	new Block(2,
	'Click history link',
	'',
	[]),
	new Block(3,
	'Click the science link',
	'',
	[]),
	new Block(4,
	'Click the Geography link',
	'Select a country',
	[ new Option('England', 6),
	new Option('France', 6),
	new Option('Germany', 6) ]),
	new Block(6,
	'Move there',
	'',
	[])
	);
	$('.demo').prepend(html);
	$('.block')
	.mouseenter(function (event) {
	event.stopPropagation();
	$(event.currentTarget).animate({ width: '+=50',
	height: '+=50',
	fontSize: '+=2' }, 'fast');
	})
	.mouseleave(function (event) {
	event.stopPropagation();
	$(event.currentTarget).animate({ width: '-=50',
	height: '-=50',
	fontSize: '-=2' }, 'fast');
	});
	});
	</script>
	</head>
	<body>
	<div class="demo">
	</div>
	</body>
	</html>
	/**
	* Blocks should only be added via a function in Qire.RetryProfile so that they can
	* be registered automatically. The render method should take a parameter which
	* contains details of the parent, so that the parameters can be used in the option.
	*/

	var Qire = {};

	Qire.RetryProfile = function () {
	var blocks = {};

	return {
	render: function(process) {
	return process.render();
	},

	registerBlock: function (block) {
	blocks[block.id] = block;
	},

	getBlock: function(id) {
	return blocks[id];
	}
	};
	}();

	function Block(id, title, label, options) {
	this.id = id;
	this.title = title;
	this.label = label;
	this.options = options;
	Qire.RetryProfile.registerBlock(this);
	}

	Block.prototype = {
	_renderOptions: function() {
	var html = '';

	for (var option in this.options) {
	html += this.options[option].render();
	}

	return html;
	},

	render: function() {
	return '<div class="block">' +
	'<h3>' + this.title + '</h3>' +
	'<p>' + this.label + '</p>' +
	'<table class="options">' + this._renderOptions() + '</table>' +
	'</div>';
	}
	};

	function Option(label, outcome) {
	this.label = label;
	this.outcome = outcome;
	}

	Option.prototype = {
	render: function() {
	return '<tr class="option"><td>' + this.label + '</td>' +
	'<td>' + this._renderOutcome() + '</td>' +
	'</tr>';
	},

	_renderOutcome: function() {
	var outcomeBlock = Qire.RetryProfile.getBlock(this.outcome);
	return (outcomeBlock !== undefined) ? outcomeBlock.render() : '';
	}
	};