web20opensource/testSuperHerojs11.js

## testing.html
<!DOCTYPE html>
<html>
<head>
    <script src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat-yc.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="testSuperHerojs11.js"></script>
    <style>
        .highlight2{
            background-color: #abcdef;
        }
    </style>
    <title></title>
</head>
<body>
    <fieldset id="fieldset_Q7" style="visibility: visible;">
    <table cellspacing="0" summary="Answers of Q7. Column number 1">
    <thead class="confirmit-hidden">
        <tr><th></th><th></th></tr></thead>
    <tbody>
    <tr>
        <td class="input"><input type="text" value="" id="Q7" class="Q7" name="Q7" tabindex="1" size="3"></td>
    </tr>
    </tbody>
    </table>
    </fieldset>
    <p>Passages of this article were inspired by <cite>The Complete Manual
        of Typography</cite><mark> by James Felici.</mark></p>

</body>
</html>

## testSuperHerojs11.js
/**
 * Created with JetBrains WebStorm.
 * User: mario.ruiz
 * Date: 05/09/13
 * Time: 15:31
 * To change this template use File | Settings | File Templates.
 */
window.addEvent('domready', function() {

    jQuery.noConflict();
    /*validation*/
    var validation = function (){
         val = $(this).value;
         if ( isNaN(val) || val>100|| val<0 )
            alert('messageError');
    };

    var autopunch = function(){

    }

    /*checked or not*/
    var isChecked = function(){

        var e = $(this).getAttribute('id');

        if (e==='inputCheckBox'){
            if ( $(this).checked ){
                $('Q7').removeAttribute('disabled');
                $('labelCheckBoxId').style.color = 'black';
            }
            else{
                $('Q7').setAttribute('disabled','true');
                $('labelCheckBoxId').style.color = 'white';
            }
        }
        else{
            console.log($(this).style.color);
            if ( $(this).style.color === 'white' ){
                $('Q7').removeAttribute('disabled');
                $('labelCheckBoxId').style.color = 'black';
                $('inputCheckBox').checked = true;
            }else{
                $('Q7').setAttribute('disabled','true');
                $('labelCheckBoxId').style.color = 'white';
                $('inputCheckBox').checked = false;
            }

        }

    };

    /*set style*/
    $$('.Q7').set({
            value: '2',
            maxLength: 3,
            alt: 'this is foo',
            //Class is a reserved word in JS,
            //so we must use quotes
            'class': 'highlight2',
            //In addition to standard attributes, you can also
            //use set for some special attributes defined by
            //MooTools
            styles: {
                border: '1px solid blue',
                marginTop: '10px'
            }
    });

    $('Q7').addEvent('keyup',validation );


    /*Insert tag*/
    var table = $('fieldset_Q7').getElements('table');
    var row = table[0].rows[1];
    var tdCell = row.insertCell(0);
    $(tdCell).innerHTML = "Input: ";


    /*Insert header*/
    var row = table[0].insertRow(1);
    row.insertCell(0);
    var cell=row.insertCell(1);
    cell.innerHTML="<b>Your Answer</b>";


    /*create checkbox*/
    var inputCheckBox = new Element('input', {
        'id': 'inputCheckBox',
        'class': '',
        'type':'checkBox',
        'checked': 'checked',
        'html': '',
        'styles': {
            'background': 'black',
            'color': 'white'
        }
    });

    $$('.input').adopt(inputCheckBox);

    $('inputCheckBox').addEvent('click',isChecked);

    var labelCheckBox = new Element('label', {
        'id': 'labelCheckBoxId',
        'html' : "Don't know" ,
        'styles': {
            'background': 'white',
            'color': 'black'
        }
    });

    $$('.input').adopt(labelCheckBox);

    $('labelCheckBoxId').addEvent('click',isChecked );

    $('inputCheckBox').checked = true;


/*
});


/*Simple Function Invocation*/
/*
function hello(x){
    console.log("Hello " + x);
}

test( "deepEqual test", function() {
    equal( hello("stupid world!"), hello.call(window,"stupid world!"), "Two objects can be the same in value" );
});*/
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat-yc.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="testSuperHerojs11.js"></script>
	<style>
	.highlight2{
	background-color: #abcdef;
	}
	</style>
	<title></title>
	</head>
	<body>
	<fieldset id="fieldset_Q7" style="visibility: visible;">
	<table cellspacing="0" summary="Answers of Q7. Column number 1">
	<thead class="confirmit-hidden">
	<tr><th></th><th></th></tr></thead>
	<tbody>
	<tr>
	<td class="input"><input type="text" value="" id="Q7" class="Q7" name="Q7" tabindex="1" size="3"></td>
	</tr>
	</tbody>
	</table>
	</fieldset>
	<p>Passages of this article were inspired by <cite>The Complete Manual
	of Typography</cite><mark> by James Felici.</mark></p>

	</body>
	</html>
	/**
	* Created with JetBrains WebStorm.
	* User: mario.ruiz
	* Date: 05/09/13
	* Time: 15:31
	* To change this template use File \| Settings \| File Templates.
	*/
	window.addEvent('domready', function() {

	jQuery.noConflict();
	/validation/
	var validation = function (){
	val = $(this).value;
	if ( isNaN(val) \|\| val>100\|\| val<0 )
	alert('messageError');
	};

	var autopunch = function(){

	}

	/checked or not/
	var isChecked = function(){

	var e = $(this).getAttribute('id');

	if (e==='inputCheckBox'){
	if ( $(this).checked ){
	$('Q7').removeAttribute('disabled');
	$('labelCheckBoxId').style.color = 'black';
	}
	else{
	$('Q7').setAttribute('disabled','true');
	$('labelCheckBoxId').style.color = 'white';
	}
	}
	else{
	console.log($(this).style.color);
	if ( $(this).style.color === 'white' ){
	$('Q7').removeAttribute('disabled');
	$('labelCheckBoxId').style.color = 'black';
	$('inputCheckBox').checked = true;
	}else{
	$('Q7').setAttribute('disabled','true');
	$('labelCheckBoxId').style.color = 'white';
	$('inputCheckBox').checked = false;
	}

	}

	};

	/set style/
	$$('.Q7').set({
	value: '2',
	maxLength: 3,
	alt: 'this is foo',
	//Class is a reserved word in JS,
	//so we must use quotes
	'class': 'highlight2',
	//In addition to standard attributes, you can also
	//use set for some special attributes defined by
	//MooTools
	styles: {
	border: '1px solid blue',
	marginTop: '10px'
	}
	});

	$('Q7').addEvent('keyup',validation );


	/Insert tag/
	var table = $('fieldset_Q7').getElements('table');
	var row = table[0].rows[1];
	var tdCell = row.insertCell(0);
	$(tdCell).innerHTML = "Input: ";


	/Insert header/
	var row = table[0].insertRow(1);
	row.insertCell(0);
	var cell=row.insertCell(1);
	cell.innerHTML="<b>Your Answer</b>";


	/create checkbox/
	var inputCheckBox = new Element('input', {
	'id': 'inputCheckBox',
	'class': '',
	'type':'checkBox',
	'checked': 'checked',
	'html': '',
	'styles': {
	'background': 'black',
	'color': 'white'
	}
	});

	$$('.input').adopt(inputCheckBox);

	$('inputCheckBox').addEvent('click',isChecked);

	var labelCheckBox = new Element('label', {
	'id': 'labelCheckBoxId',
	'html' : "Don't know" ,
	'styles': {
	'background': 'white',
	'color': 'black'
	}
	});

	$$('.input').adopt(labelCheckBox);

	$('labelCheckBoxId').addEvent('click',isChecked );

	$('inputCheckBox').checked = true;




	/*
	});












































	/Simple Function Invocation/
	/*
	function hello(x){
	console.log("Hello " + x);
	}

	test( "deepEqual test", function() {
	equal( hello("stupid world!"), hello.call(window,"stupid world!"), "Two objects can be the same in value" );
	});*/