Questionnaire One

by Nick Iaconis

HTML

<body onload="formatJS();">
    <div>
        <abbr title="Don't forget to add questions 5 & 14 as they need server side functionality for us to even really consider beginning to work on them.">Note (mainly to selves)</abbr>
        <br />
        <abbr title="The form does not seem to perform well when viewed in Internet Explorer. This will either need to be resolved or have a note added that advises users to choose a standards compliant web browser.">Note RE Browser Compatability</abbr>
    </div>
    <br />
    <hr />
    <br />
    
<div style="width:100%">
<form name="question1">
  
<!--
    <div>
        Name
        <br />
        <span style="position:relative">
            <span>
                <input id="firstName"
                    name="firstName"
                    class="userInput"
                    type="text"
                    size="22"
                    maxlength="30"
                    value=""
                    onkeydown="hideHint( this );"
                    onfocus="clearAlert( this );"
                    onblur="showHint( this ); requiredStatus( this );"
                    data-required="true"
                    />
                <span id="firstNameHint"
                    class="hintSpan"
                    onclick="focusInput( this );">
                        First
                </span>
            </span>
            <span id="firstNameAlert"
                class="alertSpan">
            </span>
        </span>
    
        
        <span style="position:relative">
            <input id="lastName"
                name="lastName"
                class="userInput"
                type="text"
                size="22"
                maxlength="30"
                value=""
                onkeydown="hideHint( this );"
                onfocus="clearAlert( this );"
                onblur="showHint( this ); requiredStatus( this );"
                />
            <span id="lastNameHint"
                class="hintSpan"
  ...

CSS

body
{
    font-family: sans-serif;
    margin: 5px;
    font-size: 14px;
    background-image: url( 'http://dl.dropbox.com/u/12891826/phase_two.png' );
    background-repeat: repeat-y;
}

abbr
{
    border-bottom: 2px dotted #666;
}

.hintSpan
{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 1px;
    color: #999;
    left: 10px;
    display: none;
}

.hintSpanDIV
{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 9px;
    color: #999;
    left: 10px;
    display: none;
}

.pocHintSpan
{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 1px;
    color: #999;
    left: 10px;
    display: block;
}

.alertSpan
{
    font-family: sans-serif;
    font-size: 10px;
    color: rgb(191, 0, 0);
    display: none;
    margin: 5px;
    margin-top: 0px;
}

.userInput
{
  -webkit-transition: translation 0.20s ease-in-out;
  -moz-transition: translation 0.20s ease-in-out;
  -ms-transition: translation 0.20s ease-in-out;
  -o-transition: transliation 0.20s ease-in-out;
    box-shadow: none;
    border: 1px solid #DDD;
    border-top: 1px solid #AAA;
}

textarea
{
    resize: none;
}

input, textarea, select
{
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
    outline: none;
    padding: 3px;
    margin: 5px;
}

input:hover, textarea:hover, select:hover
{
    border: 1px solid #777;
}

input:focus, textarea:focus, select:focus
{
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

input:disabled, textarea:disabled
{
    background-color: #FFF;
    color: #000;
}

.invalidInput
{
    border: 1px solid rgba(191, 0, 0, 1);
}

.invalidInput:hover
{
    border: 1px solid rgba(191, 0, 0, 1);
}

.pwShort
{
    background-color: rgb(191, 0, 0);
    width: 35px;
}
.pwSimple
{
    background-color: rgb(191, 0, 0);
    width:...

JavaScript

function formatJS()
{
    var all = document.getElementsByTagName( "*" );
    for( i = 0; i < all.length; i++ )
    {
        if( all[i].className.search( "hintSpan" ) != -1 )
        {
            all[i].style.display = "block";
        }
    }
}

/////////////////
// Adds HTML for extra POC input boxes
var extraPOC = 1;
function addPOC()
{
    // Set max number of allowed extra POCs
    // Currently set to 5
    if( extraPOC > 5 )
    {
        alert( "Only 5 extra POC's are allowed!" );
        return;
    }
    
    // Get old div and make a new smaller div
    var pocDiv = document.getElementById( "poc" );
    var newDiv = document.createElement( "div" );
    
    //-------------------------------------------------------
    // Create the spans to contain the text box for the title
    var titleWrapper = document.createElement('span');
    var titleSpan = document.createElement('span');
    titleSpan.setAttribute('style', 'position:relative');

    // Make the text box
    var titleInput = document.createElement( "input" );
    titleInput.setAttribute( "id", "POC" + extraPOC );
    titleInput.setAttribute( "name", "POC" + extraPOC );
    titleInput.setAttribute( "class", "userInput" );
    titleInput.setAttribute( "type", "text" );
    titleInput.setAttribute( "size", "22" );
    titleInput.setAttribute( "maxlength", "22" );
    titleInput.setAttribute( "value", "" );
    titleInput.setAttribute( "onkeydown", "hideHint( this );" );
    titleInput.setAttribute( "onfocus", "clearAlert( this );" );
    titleInput.setAttribute( "onblur", "showHint( this );" );
    titleInput.setAttribute( "data-required", "false" );
    
    // Make the hint span
    var inputHint= document.createElement( "span" );
    inputHint.setAttribute( "id", "POC" + extraPOC + "Hint" );
    inputHint.setAttribute( "class", "pocHintSpan" );
    inputHint.setAttribute( "onclick", "focusInput( this );" );
    inputHint.innerHTML = "Extra POC #" + extraPOC + " Title";
    
    // Package the...