Code for Next prev slideup and slidedown


var active = 0;                                                                                       view domo
$('.btn').click(function() {
    var $btn = $(this);
    var $box = $('#area-wrap').find('.box'); 
    $box.eq(active).slideUp(function() {
        if ($btn.hasClass('next')) {
            if (active == $box.length - 1) {
                active = 0;
            }
            else {
                active ++;
            }
        }
        else {
            if (active == 0) {
                active = $box.length - 1;
            }
            else {
                active --;
            }
        } 
        $box.eq(active).delay(500).slideDown();
    });

});

countdown




function countdown(count, container) {     
  var $container = $(container);
  (function step() {
    $container.html(count);               
    if (count-- > 0) {                    
      setTimeout(step, 1000);              
    }
  })();                                     
}
countdown(20, '#timer');


View Domo

Crossword

HTML                          
                                                             View Domo


 var fruits = ["i", "c", "e", "n", "e", "r","f", "s", "i", "o", "n", "v", "n", "d", "a", "s", "m", "a", "n", "g","r", "o", "v", "e", "s", "e", "n", "i", "r", "g", "d", "f", "g", "d", "f", "v", "e", "e", "i", "l", "l", "e", "g","a", "l", "r", "t", "e", "i", "d", "e", "c", "o", "l", "o", "g", "y", "n"];
   
$("#btn1").live('click',function(){  
    var arrInputValues = new Array();  
      $("input[name='table']").each(function(){
           arrInputValues.push($(this).val()); 
      });
   
count=0;
for(var i=0;i<58;i++){
if(fruits[i] == arrInputValues[i]){
count++;
if(count == 58){
$('.corr').show();
}
}
else{
$('.incorr').show();
break;
}
}
 });

 


$('.hint').live('click', function() {
var fg=$(this).attr("id");
$('#'+fg).val(fruits[fg]);


});

var hint=1;
$('#hintans').live('click', function() {
if(hint == 1){
hint=2;
$('.tal').addClass("hint");
$('#hintans').css({"opacity":".5"});
}else{
hint=1;
$('.tal').removeClass("hint");
$('#hintans').css({"opacity":"1"});
}
});
var now=45;
$('#reset').live('click', function() {
$('.tal').val(null);

 
});

$(document).ready(function() {
  $('.tal').val(null);
   $(':input').autotab_magic();
});

Next prev with Drag and drop

HTML



<div class="dgdp">
<div class="dropArea">
<div class="vdrop"> </div>
<div class="vdrop"> </div>
<div class="vdrop"> </div>
<div class="vdrop"> </div>

</div>

<div class="dragArea">
<div class="vdrag ha" id="vdg1"> one1 </div>
<div class="vdrag  ha hidden" id="vdg2"> one2 </div>
<div class="vdrag ha hidden" id="vdg3"> one3 </div>
<div class="vdrag  ha hidden" id="vdg4"> one4 </div>
<div class="vdrag  ha hidden" id="vdg5"> one5 </div>
<div class="vdrag  ha hidden" id="vdg6"> one6 </div>
<div class="vdrag  ha hidden" id="vdg7"> one7 </div>
<div class="vdrag ha  hidden" id="vdg8"> one8 </div>
<div class="vdrag ha  hidden" id="vdg9"> one9 </div>
<!--<div class="vd2"><div class="vdrag" id="vdg2"> two </div> </div>
<div class="vd3"><div class="vdrag" id="vdg3"> three </div></div>
<div class="vd4"><div class="vdrag" id="vdg4"> four </div> </div>
-->
</div>
</div>
<div class="submit btn next" style=" width:100px; height:40px; border:1px solid;position:absolute; margin:300px 0 0 100px">next</div>
<div class="submit btn prev" style=" width:100px; height:40px; border:1px solid;position:absolute; margin:300px 0 0 200px"> prev</div>



JS


$(document).ready(function(){


dragDiv();
 });
function dragDiv(){

var t=setTimeout(function(){$('.vdrag').draggable({revert:true,containment:'.dgdp' }); },1000)



var t=setTimeout(function(){


$('.vdrop').each(function(){
$(this).droppable({


drop:function(event,ui){
var vdragId = $(ui.draggable).attr('id');
$(this).removeClass("ha");
$('.dragArea').hide();
$('#'+vdragId).css({'top':'0px','left':'0px','z-index':'0' });
$(this).html(ui.draggable);
$('.btn').click();
 $('.dragArea').delay(1000).fadeIn('slow');
}


});  


});

  },2000)

}


 var $box;
var $btn;
 var active = 0;
$('.btn').live('click',function() {
    $btn = $(this);
    $box = $('.dragArea').find('.ha');

    $box.eq(active).slideUp(function() {
        if ($btn.hasClass('next')) {
            if (active == $box.length - 1) {
                active = 0;
            }
            else {
                active ++;
            }
        }
        else {
            if (active == 0) {
                active = $box.length - 1;
            }
            else {
                active --;
            }
        }
        $box.eq(active).delay(0).slideDown();
    });

});





CSS


#page1{
border:1px solid orange;
height:380px;
width:640px;
margin:20px auto;
}
.dragArea{
height:30px;
width:150px;
border: 1px solid ;
 overflow:hidden;

float:left;
}
.dropArea{
height:300px;
width:150px;
border: 1px solid red;
float:right;
}

.vdrag{
background:#FF9999;
height:30px;
width:100px;
text-align:center;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
cursor:pointer;
}
.vd1,.vd2,.vd3,.vd4
{
margin:10px;
border:1px solid;
height:40px; width:150px;
}
.vdrop{
border:1px solid #e4e4e4;
height:30px;
width:100px;
margin:10px;
}
.dgdp{  border: 1px solid;
    height: 410px;
    position: absolute;
    width: 540px;}







.hidden{
display:none;
}



ViewDomo





Touch code for deag and drop


var dragRevert = true;
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();





function init(){
var a=0;
$(".vdrag").each(function(){
var b=$(this).attr("id");
var c=document.getElementById(b);
a++;
c.addEventListener("touchstart",touchHandler,true);
c.addEventListener("touchmove",function(e){e.preventDefault();},true);
c.addEventListener("touchmove",touchHandler,true);
c.addEventListener("touchend",touchHandler,true);
c.addEventListener("touchcancel",touchHandler,true);
});
}

function touchHandler(a){
var b=a.changedTouches,c=b[0],d="";
switch(a.type){
case"touchstart":
d="mousedown";
break;
case"touchmove":
d="mousemove";
break;
case"touchend":
d="mouseup";
break;
default:
return
}
var e=document.createEvent("MouseEvent");
e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);
c.target.dispatchEvent(e);
}


function is_touch_device() {
 if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || (uagent.search('android') > -1) || (uagent.search('android') > -1)|| (platformAgent.search('android')>-1) || (platformAgent.search('linux')>-1)){
  return true;
 }else{
  return false;
 }
}



Drag and drop Clone Coding



function loadData(){
   
        dragRevert = true;
        CountOfAnswers1 = 0;
   
            $(".dragItem").draggable({containment: "#dragBg", helper: "clone", revert: "invalid"});

        $(".drop>div").each(function(){
            $(this).droppable({
                drop:function(event, ui){
                   
                    if($(this).html() == ""){
                         $(this).append($(ui.draggable).clone());
                        }
                }
            });
        });
       
        if(is_touch_device()){
          init();
          }
   
}

Drag and drop reset


Drag and drop reset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>edndType4</title>
<link rel="stylesheet" href="css/ednd.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/elib.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.adrag').ednd({
drag:true,
revert:"invalid",
containment:'.eContainer4',

});
$('.adrop').ednd({
drop:true,
type:'type4',


});

function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");

        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
            });
        }
    });
}

$("#undo").click(function() {
alert('in undo click');
        revertDraggable($(".adrag"));
                       
});


});
</script>

</head>

<body>

<div class="eContainer3">

<div class="dragArea">
<div class="adrag ui-widget-content" id="adg1" edragid="1"> U.S.A </div>
<div class="adrag ui-widget-content" id="adg2" edragid="2"> India</div>
<div class="adrag ui-widget-content" id="adg3" edragid="3"> Australia </div>
<div class="adrag ui-widget-content" id="adg4" edragid="4"> U.K</div>
</div>

<div class="dropArea">
<div class="dp_con"><div class="adrop ui-widget-header" id="adp1" edropid="2"> </div></div>
<div class="dp_con"> Sydney<div class="adrop ui-widget-header" id="adp2" edropid="3"> </div><span class="feed_img"> </span></div>
<div class="dp_con">  London<div class="adrop ui-widget-header" id="adp3" edropid="4"> </div><span class="feed_img"> </span></div>
<div class="dp_con">  Washington DC<div class="adrop ui-widget-header" id="adp4" edropid="1"> </div><span class="feed_img"> </span></div>
</div>
<div class="eSubmit"></div>
<button id="undo" type="button">Undo</button>


</div>


</body>
</html>



JS
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
(function($){
$.fn.ednd = function(dnd){
var dnd = $.extend(eobjects,dnd);

var eobjects = {
            drag:true,
            drop:true,
            revert:true,
            containment:'cid',
            type:'type'
           
            };
           
var ed = dnd;


if(ed.drag){
if(is_touch_device()){
var a=0;
            $(this).each(function(){
                        var b=$(this).attr("id");
                        //alert(b);
                        var c=document.getElementById(b);
                        a++;
                        c.addEventListener("touchstart",touchHandler,true);
                        c.addEventListener("touchmove",function(e){e.preventDefault();},true);
                        c.addEventListener("touchmove",touchHandler,true);
                        c.addEventListener("touchend",touchHandler,true);
                        c.addEventListener("touchcancel",touchHandler,true);
            });
}
$(this).css({'cursor':'pointer'});
$(this).each(function(){

$(this).draggable({revert:ed.revert,containment:ed.containment, });

});

}

if(ed.drop){

 if(ed.type == 'type4'){
            $(this).next('.feed_img').hide();
            var that = $(this);
            var ec = 0;
            $(this).each(function(){
            $(".dp_con").droppable({
        drop: function(event, ui) {alert('in drop')
            if (!ui.draggable.data("originalPosition")) {
                ui.draggable.data("originalPosition",
                    ui.draggable.data("draggable").originalPosition);
            }
        }
    });                                         
});       

}

}

function is_touch_device() {
if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || (uagent.search('android') > -1) || (uagent.search('android') > -1)|| (platformAgent.search('android')>-1) || (platformAgent.search('linux')>-1)){
  return true;
 }else{
  return false;
 }
}


function touchHandler(a){
            var b=a.changedTouches,c=b[0],d="";
            switch(a.type){
                        case"touchstart":
                                    d="mousedown";
                                   
                                    break;
                        case"touchmove":
                                    d="mousemove";
                                    break;
                        case"touchend":
                                    d="mouseup";
                                    break;
                        default:
                                    return
            }
            var e=document.createEvent("MouseEvent");
            e.initMouseEvent(d,true,true,window,1,c.screenX,c.screenY,c.clientX,c.clientY,false,false,false,false,0,null);
            c.target.dispatchEvent(e);
}
return this;
};                      
})(jQuery);



CSS
/* ednd */

*{
margin:0;
padding:0;
}
.eContainer1,.eContainer2,.eContainer3,.eContainer4,.eContainer5{
border:2px solid #e4e4e4;
height:480px;
width:640px;
float:left;
margin:20px;
padding:10px;
}



.drag{
background:orange;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

.drop{
border:1px solid red;
height:20px;
width:90px;
margin:5px;
}
.vdrop{
border:1px solid red;
height:20px;
width:90px;
margin:5px;
text-align:center;
}
.dragArea{
float:left;
border:1px solid;
}
.dropArea{
float:right;
}

.vdrag{
background:blue;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
}


.vdrop{
border:1px solid maroon;
height:20px;
width:90px;
margin:5px;
}


.adrag{
background:#A41730;
height:20px;
width:90px;
border:1px dotted #e4e4e4;
margin:5px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
}


.adrop{
border:1px solid maroon;
height:20px;
width:90px;
margin:5px;
text-align:center;
float:left;
}

.eSubmit{
background:url(../images/submit_old.png)no-repeat;
height:55px;
width:128px;
margin:230px 0 0 240px;
cursor:default;
opacity:0.4;
}
.dp_con{
height:50px;
width:300px;
border:1px solid;
}
.feed_pop{
float:left;
height:126px;
width:300px;
background:url(../images/popup.png)no-repeat;
position:absolute;
margin:295px 0 0 35px;
display:none;
text-align:center;
line-height:120px;
}
.eclose{
float:right;
cursor:pointer;
display:none;
}
.feed_correct{
float:left;
height:35px;
width:32px;
background:url(../images/feed_r.png) no-repeat;
}

.feed_wrong{
float:left;
height:35px;
width:32px;
background:url(../images/feed_w.png) no-repeat;
}

canvas Undo Redo Examples


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body onload="InitThis();">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="canvasdraw.js"></script>
    <div align="center">
        <canvas id="myCanvas" width="500" height="200" style="border:2px solid black"></canvas>
        <br /><br />
        <button onclick="javascript:drawImage();return false;">Clear Area</button>
        Line width : <select id="selWidth">
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="7">7</option>
            <option value="9" selected="selected">9</option>
            <option value="11">11</option>
        </select>
        Color : <select id="selColor">
            <option value="black">black</option>
            <option value="blue" selected="selected">blue</option>
            <option value="red">red</option>
            <option value="green">green</option>
            <option value="yellow">yellow</option>
            <option value="gray">gray</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="javascript:cUndo();return false;">Undo</button>
        <button onclick="javascript:cRedo();return false;">Redo</button>
    </div>
</body>
</html>





JS CODE

// by Chtiwi Malek ===> CODICODE.COM

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
    ctx = document.getElementById('myCanvas').getContext("2d");
    $('#myCanvas').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#myCanvas').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#myCanvas').mouseup(function (e) {
        if (mousePressed) {
            mousePressed = false;
            cPush();
        }
    });

    $('#myCanvas').mouseleave(function (e) {
        if (mousePressed) {
            mousePressed = false;
            cPush();
        }
    });
    drawImage();
}

function drawImage() {
    var image = new Image();
    image.src = 'trace.png';
    $(image).load(function () {
        ctx.drawImage(image, 0, 0, 500, 200);
        cPush();
    });   
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = $('#selColor').val();
        ctx.lineWidth = $('#selWidth').val();
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x;
    lastY = y;
}

var cPushArray = new Array();
var cStep = -1;

function cPush() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(document.getElementById('myCanvas').toDataURL());
    document.title = cStep + ":" + cPushArray.length;
}
function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
        document.title = cStep + ":" + cPushArray.length;
    }
}
function cRedo() {
    if (cStep < cPushArray.length-1) {
        cStep++;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
        document.title = cStep + ":" + cPushArray.length;
    }
}

Jquery for XML load with Next prev

// common variable
var pageTab = 0;
var nav = 0;
var page;
var tab;
var xmldoc;
var testChance = 0;
var active = true;
var box;
// define
var submitActive = false;
var optIndex;
var $this;
var temp = "";
var audNav = 0;
var audScroll = 0;
var audName = [];
var audNext = true;
var audPrev = true;
var nextAnim;
var nextAnimflag = 0;
var footerTxt = "Introduction";
var nxt = 1;

var nextAnim = 0;

var storeAns;
var ansRight = 0;
// init
var ansWrong = 0;
// init
var solutionNav = 1;
var eventdata;
var uagent = navigator.userAgent.toLowerCase();
var platformAgent = navigator.platform.toLowerCase();
var timer;

var prev_ena = false;
var next_ena = true;
var audio_ena = true;

var audioFlag = false;
var nextAnim = 0;

var t1;
var t2;
var t3;
var t4;
var t5;
var t6;
var t7;
var t8;

var gameAud = document.getElementById('gameAud');

$(document).ready(function() {

    if (navigator.platform == 'iPad' || uagent.search('android') > -1) {
        eventdata = 'touchstart';
    } else {
        eventdata = 'click';
    }
    $("#page").show();
    //  page shown
    //xmlLoad();// load xml document;
    if (navigator.platform == 'iPad') {
        //loadAud();
    }

    $('#header_bg ul li').live(eventdata, function() {
        pageTab = $("#header_bg ul li").index(this);
        updateHeaderAndFootBg(pageTab);
        page = tab[pageTab].getElementsByTagName("section");
        nav = 0;
        loadContent(pageTab);
    });

    $("#prev").live(eventdata, function() {
        if (prev_ena) {
            prevPage();
            updateContent();
            prevupdatenav1();
            prevupdatenav();
            //pagenavtabUpdate();
            if (pageTab == 0) {
                $('#pagination li:eq(0)').show();
            }
            $('.topStrip1,.main_page').hide();
            $('#topic').hide();
        }
    });

    $("#next,.nextAnim").live(eventdata, function() {
        if (next_ena) {
            enablePrev();
            nextPage();
            updateContent();
            nextupdatenav();
            $('#topic').hide();
        }

    });

    $("#pagination li").live(eventdata, function() {
        nav = $("#pagination li").index(this);
        pageContent(nav);
        prevupdatenav();
        prevupdatenav1();
        nextupdatenav();

    });

    var gpLength = $('#pagination li').length;
    //alert(gpLength);
    if (gpLength > 10) {
        $('#pagination li:gt(9)').hide();
    }

    $('#pageText,.topStrip').live(eventdata, function() {
        $('#topic').hide();
    })
});

function nextupdatenav() {
    if (nav > 9) {
        $('#pagination li:gt(19)').hide();
    }
    if (nav > 19) {
        $('#pagination li:lt(20)').hide();
        $('#pagination li:gt(19)').show();
    }
}

function prevupdatenav() {
    if (nav < 20 && nav > 10) {
        $('#pagination li:lt(9)').hide();
        $('#pagination li:gt(9)').show();
        $('#pagination li:gt(19)').hide();
    }

}

function prevupdatenav1() {
    if (nav < 10) {
        $('#pagination li:gt(9)').hide();
        $('#pagination li:gt(19)').hide();
        $('#pagination li:lt(9)').show();
    }
}


$('#footlist').live('click', function() {
    $('#topic,#cont').show();
});

function updateContent() {
    displayState();
    updateNav(nav);
    pageContent(nav);
}

function updateNav(state) {
    nxt = state;
    //spanText.innerHTML = state;
    footerTxt = $('#topic li').eq(nxt - 1).html();
    //updateFooter(footerTxt);
    displayState();
}

function updateFooter(txt) {
    $('#footlist').html(txt);
}


$('#topic li').live('click', function() {
    pageTab = $("#topic li").index(this);
    page = tab[pageTab].getElementsByTagName("section");
    nav = 0;
    loadContent(pageTab);
    for ( i = 0; i <= page.length - 1; i++) {
        var count = $(".tcount").html(page.length);
    }
    $('.topStrip1,.main_page').hide();
    $('#topic').hide();
});

function updateHeaderAndFootBg(pageTab) {
    for (var i = 0; i <= $('#header_bg ul li').length - 1; i++) {
        var inactive_menu = 'menu_bg_' + i;
        var inactive_menu_normal = 'menu_normal_' + i;
        var inactive_foot = 'foot_bg_' + i;
        $('.' + inactive_menu).hide();
        $('.' + inactive_menu_normal).show();
        $('.' + inactive_foot).hide();
    };
    var menuBg = 'menu_bg_' + pageTab;
    var menu_normal = 'menu_normal_' + pageTab;
    var foot_bg = 'foot_bg_' + pageTab;
    $('.' + menuBg).show();
    $('.' + foot_bg).show();
    $('.' + menu_normal).hide();
}

function xmlLoad() {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
    }

    xmlhttp.open('GET', 'main.xml', false);
    xmlhttp.send();
    xmldoc = xmlhttp.responseXML;
    tab = xmldoc.getElementsByTagName("tab");
    loadContent(tab);
}

function loadContent() {
   
    page = tab[pageTab].getElementsByTagName('section');
   
    $("#pagination li").remove();
    for ( i = 0; i <= page.length - 1; i++) {
        $("#pagination").append("<li>" + eval(i + 1) + "</li>");
        var count = $(".tcount").html(page.length);
    }
    updateHeaderAndFootBg(pageTab);
    pageContent(nav);
}
alert(page);
function prevPage() {// previous
    if (nav <= 0 && pageTab <= 0) {// section first
        nav = 0;
    } else {
        if (nav <= 0) {
            pageTab--;
            page = tab[pageTab].getElementsByTagName("section");
            nav = page.length - 1;
            // start from end
            audNav = 0;
            $(".count").html(nav + 1);
            loadContent();
        } else {
            nav--;
            if (nav < 10) {
                $('#pagination li:lt(10)').show();
                $('#pagination li:gt(9)').hide();
            }
            pageContent(nav);
        }
    }
}

function nextPage() {// next
    if (nav >= page.length - 1 && pageTab >= tab.length - 1) {// section end
        nav = page.length - 1;
    } else {
        if (nav >= page.length - 1) {
            nav = 0;
            // start from begining
            //disablePrev();
            pageTab++;
            loadContent();
        } else {
            nav++;
            if (nav > 9) {
                $('#pagination li:lt(10)').hide();
                $('#pagination li:gt(9)').show();
            }

            $(".count").html(nav + 1);

            pageContent(nav);
        }
    }
}

function displayState() {
    enablePrev();
    enableNext();
    if (pageTab == 4 && nav == 19) {
        disableNext();
    }

}

function showEndText() {
    $('#pageText,#pagination').hide();
    $("#feedback, #hidebg").hide();
    $("#finished").show();
    disableButtons();
}

function disableButtons() {
    disablePrev();
    disableNext();
    disableAudio();
}

function enableButtons() {
    enablePrev();
    enableNext();
    enableAudio();
}

function disablePrev() {
    $('#prev').removeClass('prev_ena').addClass('prev_dis');
    prev_ena = false;
}

function enablePrev() {
    $('#prev').removeClass('prev_dis').addClass('prev_ena');
    prev_ena = true;
}

function disableNext() {
    $('#next').removeClass('next_ena').addClass('next_dis');
    next_ena = false;
}

function enableNext() {
    $('#next').removeClass('next_dis').addClass('next_ena');
    next_ena = true;
}

function disableAudio() {
    $('#play').css({
        'opacity' : '0.4',
        'cursor' : 'default'
    });
    audio_ena = false;
}

function enableAudio() {
    $('#play').css({
        'opacity' : '1',
        'cursor' : 'pointer'
    });
    audio_ena = true;
}

function pageContent(nav) {
    $(".count").html(nav + 1);
    // Content
    $("#pagination li").css({
        'background' : 'url("images/pageing_bg.png") no-repeat scroll 0 -1px transparent',
        'width' : '20px',
        'height' : '20px',
        'color' : '#000'
    });
    $("#pagination li:eq(" + nav + ")").css({
        'background' : 'url("images/pageing_bg.png") no-repeat scroll 0 -21px transparent',
        'width' : '20px',
        'height' : '20px',
        'color' : '#fff'
    });
    $("#feedback,#hidebg").empty().hide();
    $('#pageText,#pagination').show();
    enableButtons();
    displayState();
    $("#pageText").empty();
    // clear the container;
    stopNextAnimation();
    clearInterval(nextAnim);
    if (pageTab == 0 && nav == 0) {
        disablePrev();

    }
    prevupdatenav();
    prevupdatenav1();
    nextupdatenav();

    testChance = 0;
    audNav = 0;
    // audio play init
    clearTimeout(timer);
    flagInput = 0;

    active = true;
    submitActive = false;
    // deactivate submit button loads
    isDragDropTried5 = 0;
    audioFlag = true;
    //  03/05/12
    contentEmbed();

    if (page[nav].hasAttributeNS('', "interaction")) {// check for the interaction
        $(".test li").prepend("<input type='radio' name='r1'/>");
    }
    var audPath = page[nav].getElementsByTagName('audio')[0].getAttribute('path');
    // store audio path
    if (audPath == 'noAudio') {
        gameAudioStop();
        disableAudio();
    } else {
        enableAudio();
        audioPlay(uagent);
    }
}

function contentEmbed() {
    contentArray = page[nav].getElementsByTagName('details')[0].childNodes;
    for ( i = 0; i <= contentArray.length - 1; i++) {
        if (contentArray[i].nodeType == 1) {
            serializerText(contentArray[i], box = "#pageText");
        }
    }
}

function serializerText(serialStr, box) {// Embed the relative Content
    pageStr = (new XMLSerializer()).serializeToString(serialStr);
    $(box).append(pageStr);
}

function checkAns(index, nav, $this) {// Activity
    if (submitActive) {
        storeAns = page[nav].getAttribute('answer');

        if (page[nav].getAttribute('chance') == 'yes') {
            testChance++;
            switch (testChance) {// single choice chance
                case 1:
                    if (index + 1 == storeAns) {
                        $(".test li").eq(index).attr('class', 'right');
                        embedFeed( xmlFeedTag = 'postive_feedback');
                        $("#done").hide();
                        testChance = 0;
                        nextAnimation();
                    } else {
                        embedFeed( xmlFeedTag = 'negative_feedback');
                    }
                    break;
                case 2:
                    if (index + 1 == storeAns) {
                        $(".test li").eq(index).attr('class', 'right');
                        embedFeed( xmlFeedTag = 'postive_feedback');

                    } else {
                        $(".test li").eq(storeAns - 1).attr('class', 'right');
                        // Right Answer
                        embedFeed( xmlFeedTag = 'postive_comments');
                    }
                    testChance = 0;
                    $("#done").hide();
                    nextAnimation();
                    break;
            }
        } else {
            /*True or false Script*/
        }
    }
}

function embedFeed(xmlFeedTag) {// feedback content embed
    $("#feedback,#hidebg").empty().hide();

    feedArray = page[nav].getElementsByTagName(xmlFeedTag)[0].childNodes;
    for ( i = 0; i <= feedArray.length - 1; i++) {
        if (feedArray[i].nodeType == 1) {
            serializerText(feedArray[i], box = "#feedback");
        }
    }

    timer = setTimeout(function() {
        $("#feedback,#hidebg").show();
        clearTimeout(timer);
    }, 500);
}

function audioPlay(uagent) {
    audPath = page[nav].getElementsByTagName('audio')[0].getAttribute('path');
    // store audio path

    if (audPath.indexOf(",") > 0) {
        var audPathStr = audPath.split(',');
        // store audio path in voiceText wise
        audFile = audPathStr[audNav];
    } else {
        audFile = audPath;
    }

    if (navigator.platform == 'iPad') {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.mp3',
            type : 'audio/mpeg'
        });
        loadAud();
    } else if (uagent.search('android') > -1 || uagent.search('android') > -1 || platformAgent.search('android') > -1 || platformAgent.search('linux') > -1) {
        if ($.browser.version > 534) {
            $('#gameAud').attr({
                src : 'audio/' + audFile + '.mp3',
                type : 'audio/mp3'
            });
            loadAudAndroid();
            // playAud();
        } else {
            var audioNamePath = 'audio/' + audFile + '.mp3';
            var audioElement = document.getElementById('gameAud');
            audioElement.setAttribute('src', audioNamePath);
            audioElement.load();
            audioElement.addEventListener("load", function() {
                audioElement.play();
                audStarted();
            }, true);
        }
    } else if (uagent.search('firefox') > -1) {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.ogg',
            type : 'audio/ogg'
        });
        loadAud();
    } else {
        $('#gameAud').attr({
            src : 'audio/' + audFile + '.mp3',
            type : 'audio/mpeg'
        });
        loadAud();
    }
    $("#audStop").attr({
        src : 'images/pause_01.png'
    });
}

function loadAud() {

    gameAud.load();
    gameAud.play();
    audStarted();
}

function playAud() {
    gameAud.play();
    audStarted();
}

function loadAudAndroid() {
    gameAud.load();
    t = setTimeout(function() {
        audStarted();
    }, 1000);
}

// audio stop
$("#audStop").toggle(function() {
    if (audio_ena) {
        $(this).attr({
            src : 'images/play_01.png'
        });
        gameAudioStop();
    }
}, function() {
    if (audio_ena) {
        $(this).attr({
            src : 'images/pause_01.png'
        });
        playAud();
    }
});

function gameAudioStop() {
    gameAud.pause();
}

window.onload = function() {
    gameAud.addEventListener('ended', audEnded, false);
    // bind audio ended
    gameAud.addEventListener('playing', audStarted, false);
}
setInterval(function() {
    if (gameAud.ended == true) {
        audEnded();
    }
}, 500);


function audioNext() {
    enableAudio();
    var audPathStr = audPath.split(',');
    if (audPath.indexOf(",") > 0 && audPathStr.length > 1) {
        if (audNav < audPathStr.length - 1) {
            audNav++;
            audioPlay(uagent);
        }
    }
}

function clearTimer() {
    clearTimeout(t1);
    clearTimeout(t2);
    clearTimeout(t3);
    clearTimeout(t4);
    clearTimeout(t5);
    clearTimeout(t6);
    clearTimeout(t7);
    clearTimeout(t8);
}

function nextAnimation() {
    $('.nextAnim').show();
}

function stopNextAnimation() {
    $('.nextAnim').hide();
}