konijn/jsbin.IToMURiM.html

## jsbin.IToMURiM.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ISEE Math Challenge Generator" />
<meta charset=utf-8 />
<title></title>
</head>
<body>

</body>
</html>

## jsbin.IToMURiM.js
/* Mini App for generating  */
javascript:void((function()
{ /* Minor syntactic sugar */
  function extend( o , extension )
  {
    for( key in extension )
      o[key] = extension[key];
    return o;
  }
  Math.range = function( from , to )
  {
    return Math.floor( ( Math.random() * to ) + from );
  };
  var model =
  {
    title   : 'ISEE Preparation App',
    student : 'Anonymous',
    scores  : {},
    test    : {},
    tests   :
    {
      'Exponents' :
      {
        generate : function( options)
        {
          var base = Math.range(0,11), exponent = Math.range(0,3);
          return { question : 'What is ' + base + ' <sup>' + exponent + '</sup>?' ,
                   answer : Math.pow( base, exponent ) };
        }
      }
    },
    addResult : function( name, correctAnswer )
    {
      this.scores[name] = this.scores[name] || { count : 0 , correct : 0 };
      this.scores[name].count++;
      if( correctAnswer )
        this.scores[name].correct++;
      this.storeResults();
    },
    getScore : function( testName )
    {
      return this.scores[name] || { count : 0 , correct : 0 };
    },
    getScores : function()
    {
      return Object.keys( this.tests ).map( function( testName )
      {
        return extend( model.getScore( testName ) , { name : testName } );
      });
    },
    storeResults : function()
    {
      var data = { student : model.name , scores : model.scores };
      localStorage[model.name] = JSON.stringify( data );
    },
    loadStudent : function()
    { //Paranoid much? Yes..
      var blank = { student : 'Anonymous', scores : {} };
      var data  = JSON.parse( localStorage[model.student] || '""' ) || blank;
      model.student = data.student || 'Anonymous';
      model.scores  = data.scores  || {};
    }
  };
  var view =
  {
    setStyles : function()
    {
      var style = document.createElement( 'style' ),
          underline   = 'text-decoration:underline;',
          linkCursor  = 'cursor: pointer; cursor: hand;',
          tableBorder = 'border: 1px solid black;';
      document.head.appendChild( style );
      style.sheet.addRule( 'table' , 'border-collapse:collapse;' );
      style.sheet.addRule( 'td'    , tableBorder + "padding-left:10px;" );
      style.sheet.addRule( 'th'    , tableBorder + 'width:120px' );
      style.sheet.addRule( '.action' , underline + linkCursor + 'color: CornflowerBlue;' );
    },
    setTitle : function( s )
    {
      document.title = s;
      return this;
    },
    clear : function()
    {
      document.body.innerHTML = "";
      return this;
    },
    showScores : function( scores )
    { //Minor hack, html building
      var s = '<table>' +
              '<tr><th>Test name</th><th>Tests Taken</th><th>Tests Passed</th><th></th></tr>' +
              scores.map( function(score)
              {
                return '<tr>' +
                       '<td>' + score.name + '</td>' +
                       '<td>' + score.count + '</td>' +
                       '<td>' + score.correct + '</td>' +
                       '<td><span class="action" id="' + score.name + '">Test</span></td>' +
                       '</tr>';
              } ).join('\n') +
              '</table>';
      //console.log( s );
      document.body.innerHTML += s;
      return this;
    },
    showStudent : function( name )
    {
      document.body.innerHTML += ( '<div><b>Student: <b>' + name + '</div><br>' );
      return this;
    }
  };
  var controller =
  {
    init : function()
    {
      view.setStyles();
      view.clear();
      view.setTitle( model.title );
      model.loadStudent();
      view.showStudent( model.student );
      view.showScores( model.getScores() );
      this.wireTestLinks();
      return this;
    },
    wireTestLinks : function()
    {
      var elements = document.querySelectorAll(".action") , i, e;
      for( i = 0 ; i < elements.length ; i++ )
      {
        e = elements[i];
        console.log( e , ' is wired' );
        e.addEventListener( "click", this.onTestClick );
      }
    },
    onTestClick : function(e)
    {
      //console.log( e , this ,this.id );
      model.test = extend( model.tests[ this.id ].generate() , { name : this.id } );
      view.clear();
      console.log( model.test );

    }
  }.init();
})());
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="ISEE Math Challenge Generator" />
	<meta charset=utf-8 />
	<title></title>
	</head>
	<body>

	</body>
	</html>
	/* Mini App for generating */
	javascript:void((function()
	{ /* Minor syntactic sugar */
	function extend( o , extension )
	{
	for( key in extension )
	o[key] = extension[key];
	return o;
	}
	Math.range = function( from , to )
	{
	return Math.floor( ( Math.random() * to ) + from );
	};
	var model =
	{
	title : 'ISEE Preparation App',
	student : 'Anonymous',
	scores : {},
	test : {},
	tests :
	{
	'Exponents' :
	{
	generate : function( options)
	{
	var base = Math.range(0,11), exponent = Math.range(0,3);
	return { question : 'What is ' + base + ' <sup>' + exponent + '</sup>?' ,
	answer : Math.pow( base, exponent ) };
	}
	}
	},
	addResult : function( name, correctAnswer )
	{
	this.scores[name] = this.scores[name] \|\| { count : 0 , correct : 0 };
	this.scores[name].count++;
	if( correctAnswer )
	this.scores[name].correct++;
	this.storeResults();
	},
	getScore : function( testName )
	{
	return this.scores[name] \|\| { count : 0 , correct : 0 };
	},
	getScores : function()
	{
	return Object.keys( this.tests ).map( function( testName )
	{
	return extend( model.getScore( testName ) , { name : testName } );
	});
	},
	storeResults : function()
	{
	var data = { student : model.name , scores : model.scores };
	localStorage[model.name] = JSON.stringify( data );
	},
	loadStudent : function()
	{ //Paranoid much? Yes..
	var blank = { student : 'Anonymous', scores : {} };
	var data = JSON.parse( localStorage[model.student] \|\| '""' ) \|\| blank;
	model.student = data.student \|\| 'Anonymous';
	model.scores = data.scores \|\| {};
	}
	};
	var view =
	{
	setStyles : function()
	{
	var style = document.createElement( 'style' ),
	underline = 'text-decoration:underline;',
	linkCursor = 'cursor: pointer; cursor: hand;',
	tableBorder = 'border: 1px solid black;';
	document.head.appendChild( style );
	style.sheet.addRule( 'table' , 'border-collapse:collapse;' );
	style.sheet.addRule( 'td' , tableBorder + "padding-left:10px;" );
	style.sheet.addRule( 'th' , tableBorder + 'width:120px' );
	style.sheet.addRule( '.action' , underline + linkCursor + 'color: CornflowerBlue;' );
	},
	setTitle : function( s )
	{
	document.title = s;
	return this;
	},
	clear : function()
	{
	document.body.innerHTML = "";
	return this;
	},
	showScores : function( scores )
	{ //Minor hack, html building
	var s = '<table>' +
	'<tr><th>Test name</th><th>Tests Taken</th><th>Tests Passed</th><th></th></tr>' +
	scores.map( function(score)
	{
	return '<tr>' +
	'<td>' + score.name + '</td>' +
	'<td>' + score.count + '</td>' +
	'<td>' + score.correct + '</td>' +
	'<td><span class="action" id="' + score.name + '">Test</span></td>' +
	'</tr>';
	} ).join('\n') +
	'</table>';
	//console.log( s );
	document.body.innerHTML += s;
	return this;
	},
	showStudent : function( name )
	{
	document.body.innerHTML += ( '<div><b>Student: <b>' + name + '</div><br>' );
	return this;
	}
	};
	var controller =
	{
	init : function()
	{
	view.setStyles();
	view.clear();
	view.setTitle( model.title );
	model.loadStudent();
	view.showStudent( model.student );
	view.showScores( model.getScores() );
	this.wireTestLinks();
	return this;
	},
	wireTestLinks : function()
	{
	var elements = document.querySelectorAll(".action") , i, e;
	for( i = 0 ; i < elements.length ; i++ )
	{
	e = elements[i];
	console.log( e , ' is wired' );
	e.addEventListener( "click", this.onTestClick );
	}
	},
	onTestClick : function(e)
	{
	//console.log( e , this ,this.id );
	model.test = extend( model.tests[ this.id ].generate() , { name : this.id } );
	view.clear();
	console.log( model.test );

	}
	}.init();
	})());