anchor.diff:  		this.syncPlayerToTextBoxes(player);
   	}
   	void syncPlayerToDropDowns(player){
  -		//TODO is setting the val enough for a drop down???  what if it doesn't match the thing?
  -		querySelector("#classNameID" +player.id).val(player.class_name);
  -		querySelector("#aspectID" +player.id).val(player.aspect);
  -		querySelector("#hairTypeID" +player.id).val(player.hair);
  -		querySelector("#hairColorID" +player.id).val(player.hairColor);
  +    (querySelector("#classNameID" +player.id) as SelectElement).value = (player.class_name);
  +    (querySelector("#aspectID" +player.id)as SelectElement).value = (player.aspect);
  +    (querySelector("#hairTypeID" +player.id)as SelectElement).value = (player.hair);
  +    (querySelector("#hairColorID" +player.id)as SelectElement).value = (player.hairColor);
   		String troll = "Human";
   		if(player.isTroll) troll = "Troll";
  -		querySelector("#speciesID" +player.id).val(troll);
  -		querySelector("#leftHornID" +player.id).val(player.leftHorn);
  -		querySelector("#rightHornID" +player.id).val(player.rightHorn);
  -		querySelector("#bloodColorID" +player.id).val(player.bloodColor);
  -		querySelector("#bloodColorID" +player.id).css("background-color", player.bloodColor);
  -		querySelector("#favoriteNumberID" +player.id).val(player.quirk.favoriteNumber);
  -		querySelector("#moonID" +player.id).val(player.moon);
  -		querySelector("#moonID" +player.id).css("background-color", moonToColor(player.moon));
  +    (querySelector("#speciesID" +player.id)as SelectElement).value = (troll);
  +    (querySelector("#leftHornID" +player.id)as SelectElement).value = (player.leftHorn);
  +    (querySelector("#rightHornID" +player.id)as SelectElement).value = (player.rightHorn);
  +    (querySelector("#bloodColorID" +player.id)as SelectElement).value = (player.bloodColor);
  +    (querySelector("#bloodColorID" +player.id)as SelectElement).style.backgroundColor = player.bloodColor;
  +    (querySelector("#favoriteNumberID" +player.id)as SelectElement).value = (player.quirk.favoriteNumber);
  +    (querySelector("#moonID" +player.id)as SelectElement).value = (player.moon);
  +    querySelector("#moonID" +player.id).style.backgroundColor = moonToColor(player.moon);
   	}
   	void syncPlayerToCheckBoxes(player){
   		//.prop('checked', true);
  -		querySelector("#grimDark"+player.id).prop('checked',player.grimDark);
  -	  querySelector("#isDreamSelf"+player.id).prop('checked',player.isDreamSelf);
  -		querySelector("#godTier"+player.id).prop('checked',player.godTier);
  -		querySelector("#godDestiny"+player.id).prop('checked',player.godDestiny);
  -		querySelector("#murderMode"+player.id).prop('checked',player.murderMode);
  -		querySelector("#leftMurderMode"+player.id).prop('checked',player.leftMurderMode);
  -		querySelector("#dead"+player.id).prop('checked',player.dead);
  -		querySelector("#robot"+player.id).prop('checked',player.robot);
  +    (querySelector("#grimDark"+player.id) as CheckboxInputElement).checked = player.grimDark;
  +    (querySelector("#isDreamSelf"+player.id)as CheckboxInputElement).checked =player.isDreamSelf;
  +    (querySelector("#godTier"+player.id)as CheckboxInputElement).checked =player.godTier;
  +    (querySelector("#godDestiny"+player.id)as CheckboxInputElement).checked =player.godDestiny;
  +    (querySelector("#murderMode"+player.id)as CheckboxInputElement).checked =player.murderMode;
  +    (querySelector("#leftMurderMode"+player.id)as CheckboxInputElement).checked =player.leftMurderMode;
  +    (querySelector("#dead"+player.id)as CheckboxInputElement).checked =player.dead;
  +    (querySelector("#robot"+player.id)as CheckboxInputElement).checked =player.robot;
   	}
   	void syncPlayerToTextBoxes(player){
  -		querySelector("#interestCategory1" +player.id).val(player.interest1Category);
  -		querySelector("#interestCategory2" +player.id).val(player.interest2Category);
  -		querySelector("#interest1" +player.id).val(player.interest1);
  -		querySelector("#interest2" +player.id).val(player.interest2);
  -		querySelector("#chatHandle"+player.id).val(player.chatHandle);
  -	}
  -	dynamic drawDropDowns(player){
  -		String str = "<div id = 'dropDowns" + player.id + "' class='optionBox'>";
  +    (querySelector("#interestCategory1" +player.id) as InputElement).value = (player.interest1Category);
  +    (querySelector("#interestCategory2" +player.id) as InputElement).value = (player.interest2Category);
  +    (querySelector("#interest1" +player.id) as InputElement).value = (player.interest1);
  +    (querySelector("#interest2" +player.id) as InputElement).value = (player.interest2);
  +    (querySelector("#chatHandle"+player.id) as InputElement).value = (player.chatHandle);
  +	}
  +	dynamic drawDropDowns(Player player){
  +		String str = "<div id = 'dropDowns${player.id}' class='optionBox'>";
   		str += "<div>" + (this.drawOneClassDropDown(player));
   		str += (" of ");
   		str+= (this.drawOneAspectDropDown(player)) + "</div>";
  
positive.code: import "../SBURBSim.dart";
  import 'dart:html';
  //need to render all players
  class CharacterCreatorHelper {
  	List<Player> players;
  	num player_index = 0; //how i draw 12 players at a time.
  	//have css for each sprite template.  sprite template is 400 x 300, fit 3 on a line?
  	//max of 4 lines?
  
  	CharacterCreatorHelper(this.players) {}
  
  	void drawAllPlayers(){
  		bloodColors.add("#ff0000"); //for humans
  		for(num i = 0; i<this.players.length; i++){
  			this.drawSinglePlayer(this.players[i]);
  		}
  	}
  	void draw12PlayerSummaries(){
  		var start = this.player_index;
  		var num_at_a_time= 12;
  		for(var i = start; i<start+num_at_a_time; i++){
  
  			if(this.players.length > i){
  				//print("i is: " + i);
  
negative.code: 
  
  	}
  	dynamic drawHelpText(Player player){
  		String str = "<div id = 'helpText${player.id}' class ='helpText'>...</div>";
  
  		return str;
  	}
  	dynamic drawDataBoxNoButtons(Player player){
  		String str = "<div id = 'dataBox${player.id}'>";
  		str += "<button class = 'charCreatorButton' id = 'copyButton${player.id}'> Copy To ClipBoard</button>  </div>";
  		str += "<textarea class = 'dataInputSmall' id='dataBoxDiv${player.id}'> </textarea>";
  		str += "</div>";
  		return str;
  	}
  	dynamic drawDataBox(Player player){
  		String str = "<div id = 'dataBox${player.id}' class='optionBox'>";
  		str += "<textarea class = 'dataInput' id='dataBoxDiv${player.id}'> </textarea>";
  		str += "<div><button class = 'charCreatorButton' id = 'loadButton${player.id}'>Load From Text</button>";
  		str += "<button class = 'charCreatorButton' id = 'copyButton${player.id}'> Copy To ClipBoard</button>  </div>";
  		str += "</div>";
  		return str;
  	}
  	void redrawSinglePlayer(player){
  		  player.renderSelf();
  			String divId = "canvas" + player.id;
  			//divId = divId.replaceAll(new RegExp(r"""\s+""", multiLine:true), ''); //TODO what is going on here?
  			var canvas =querySelector("#"+divId);
  			drawSolidBG(canvas, "#ffffff");
  			drawSinglePlayer(canvas, player);
  			this.createSummaryOnCanvas(player);
  			this.writePlayerToDataBox(player);
  			this.syncPlayerToFields(player);
  	}
  
  	String generateHelpText(topic, specific){
  		if(topic == "Class") return this.generateClassHelp(topic, specific);
  		if(topic == "Aspect") return this.generateAspectHelp(topic, specific);
  