traits.htm

<html>
<head>
    <title>Traits</title>
<link rel="stylesheet" type="text/css" href="breaking.css" />
<script src="include.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

   //This function, called by the XML parsing function in
   //the include file, displays a webitem node and all
   //its children
   function displayNode(node) 
   {
            var strWordsDisplay = getTextFromChildNode(node, "name");

            var collWebItems = node.getElementsByTagName('webitem');

             for (var i = 0; i < collWebItems.length; i++) 
           {
               strWordsDisplay += ", ";

              var nodeWebItem = collWebItems.item(i);

               strWordsDisplay += getTextFromChildNode(nodeWebItem, "name");
              }

            var elemWords = document.getElementById("elemWords");

            elemWords.innerHTML = strWordsDisplay;
   }

   //This gets the word web, in XML form 
   function getWords() 
   {
        doHttpRequest(httpXMLTimer, handleXMLTimerResponse, "getweb.php?returnwebtobuild=0", "GET");
   }

   //And this is the callback function which handles the XML
   function handleXMLTimerResponse()
   {
        parseXMLWithCallback(httpXMLTimer.responseXML, displayNode);
   }

   //When we return successfully from submitting traits,
   //we move on to the next page
   function handleXMLUserResponse() 
   {
       top.location = "name.htm";
   }

//Gets the traits entered and submits them
//to the PHP page
function putTraits()
{
      var elemSelfContainer = document.getElementById("idSelfContainer"); 
      var elemWorkContainer = document.getElementById("idWorkContainer"); 
      var elemPlayContainer = document.getElementById("idPlayContainer"); 

      var collSelfFields = elemSelfContainer.getElementsByTagName("input"); 
      var collWorkFields = elemWorkContainer.getElementsByTagName("input"); 
      var collPlayFields = elemPlayContainer.getElementsByTagName("input"); 

      var iValidSelfFields = 0;

      var strURL = "puttraits.php";

      var iTotalTraits = 0;

      for (var i = 0; i < collSelfFields.length; i++) 
      { 
          if (collSelfFields[i].type == "text")
          {
          var strSelfTrait = collSelfFields[i].value;

          if (strSelfTrait != "")
          {
               strURL = addURLParameter(strURL, "trait" + iTotalTraits, strSelfTrait);
               iTotalTraits ++;
          }
          }
      }

      for (var i = 0; i < collWorkFields.length; i++) 
      { 
          if (collWorkFields[i].type == "text")
          {
          var strWorkTrait = collWorkFields[i].value;

          if (strWorkTrait != "")
          {
               strURL = addURLParameter(strURL, "trait" + iTotalTraits, strWorkTrait);
               iTotalTraits ++;
          }
          }
      }

      for (var i = 0; i < collPlayFields.length; i++) 
      { 
          if (collPlayFields[i].type == "text")
          {
          var strPlayTrait = collPlayFields[i].value;

          if (strPlayTrait != "")
          {
               strURL = addURLParameter(strURL, "trait" + iTotalTraits, strPlayTrait);
               iTotalTraits ++;
          }
          }
      }

      if (iTotalTraits < 4)
      {
           alert("You should have at least four traits");
      }
      else if (iTotalTraits > 6)
      {
           alert("You shouldn't start with more than six traits");  
      }
      else
      {
           doHttpRequest(httpXMLUser, handleXMLUserResponse, strURL, "POST");
      }
      
}

var iNumFields = 3;
var iUniqueFieldId = 0;

function deleteField(strParaId)
{
   //TODO: Should these be passed as parameters instead?
    var elem = document.getElementById(strParaId);

    var elemParent = elem.parentNode;

    elemParent.removeChild(elem);

    iNumFields --;

       if (iNumFields < 6)
       {
              document.getElementById("buttonAddSelf").style.display = "block";
              document.getElementById("buttonAddWork").style.display = "block";
              document.getElementById("buttonAddPlay").style.display = "block";
       }

}

function addNewField(idParent, onkeypress)
{
     if (iNumFields < 6)
     {
       var elemContainer = document.getElementById(idParent);
       
       var elemNewSmallContainer = document.createElement("div");

       var strSmallContainerId = "idSmallContainer" + iUniqueFieldId;

       elemNewSmallContainer.id = strSmallContainerId;

       var elemNewField = document.createElement("input");

       elemNewField.onkeypress = function (e) { handleKeyPress(e, onkeypress);} ;

       var elemNewDeleteButton = document.createElement("input");

       elemNewDeleteButton.type = "button";

       elemNewDeleteButton.value = "Delete";

       elemNewDeleteButton.onclick = function (e) { deleteField(strSmallContainerId); };

       elemNewSmallContainer.appendChild(elemNewField);

       elemNewSmallContainer.appendChild(elemNewDeleteButton);

       elemContainer.appendChild(elemNewSmallContainer);

       elemNewField.focus();

       iNumFields ++;
       iUniqueFieldId ++;

       if (iNumFields == 6)
       {
              document.getElementById("buttonAddSelf").style.display = "none";
              document.getElementById("buttonAddWork").style.display = "none";
              document.getElementById("buttonAddPlay").style.display = "none";
       }
     
 
       return true;
     }
     else
     {
       return false;
     }

}

function addSelf()
{
     addNewField("idSelfContainer", addSelf);
}

function addWork()
{
     addNewField("idWorkContainer", addWork);
}

function addPlay()
{
     addNewField("idPlayContainer", addPlay);
}

</script>
</head>
<body onLoad="getWords()">
<h1>Traits</h1>
<p class="intro">The words in your web are: <i><span id="elemWords"></span></i>.</p>
<p>Use those words to suggest personality traits for your character. Enter four to six personality traits below.</p>
<h2>Self</h2>
<p>Traits about your character's nature or their home life.</p>
<div id="idSelfContainer"><input type="text" id="txtSelf1" value="" onKeyPress="handleKeyPress(event, addSelf)"/></div>
<input type="button" id="buttonAddSelf" value="Add a Self trait" onClick="addSelf()"/>
<h2>Play</h2>
<p>Traits about what your character does in their spare time.</p>
<div id="idPlayContainer"><input type="text" id="txtPlay1" value="" onKeyPress="handleKeyPress(event, addPlay)"/></div>
<input type="button" id="buttonAddPlay" value="Add a Play trait" onClick="addPlay()"/>
<h2>Work</h2>
<p>Traits about what your character does for a living.</p>
<div id="idWorkContainer"><input type="text" id="txtWork1" value="" onKeyPress="handleKeyPress(event, addWork)"/></div>
<input type="button" id="buttonAddWork" value="Add a Work trait" onClick="addWork()"/>
<p><input type="button" id="buttonSubmit" value="Enter traits" onClick="putTraits()"/></p>
</body>
</html>
</body>
</html>