<!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>
<title>TABELA_ATIVIDADE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="blocos.css" rel="stylesheet" type="text/css" />
<link href="atividade.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">


    $(document).ready(function() {
		

        $(".item").draggable({
            revert: true            
        });

        $("#item1").droppable({
			axis: "x",
			accept: "#i1",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item1").append(html);
            }
        });

        $("#item2").droppable({
            axis: "x",
			accept: "#i2",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
				var html = '<div class="item icart">'+item+'</div>';
                $("#item2").append(html);
			}
        }); 
		
        $("#item3").droppable({
            axis: "x",
			accept: "#i3",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item3").append(html);
 	           }
        }); 

        $("#item4").droppable({
            axis: "x",
			accept: "#i4",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item4").append(html);
 	           }
        }); 

        $("#item5").droppable({
            axis: "x",
			accept: "#i5",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item5").append(html);
 	           }
        });

        $("#item6").droppable({
			axis: "x",
			accept: "#i6",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item6").append(html);
            }
        });

        $("#item7").droppable({
            axis: "x",
			accept: "#i7",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
				var html = '<div class="item icart">'+item+'</div>';
                $("#item7").append(html);
			}
        }); 
		
        $("#item8").droppable({
            axis: "x",
			accept: "#i8",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item8").append(html);
 	           }
        }); 

        $("#item9").droppable({
            axis: "x",
			accept: "#i9",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item9").append(html);
 	           }
        }); 

        $("#item10").droppable({
            axis: "x",
			accept: "#i10",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item10").append(html);
 	           }
        });
		
		$("#item11").droppable({
            axis: "x",
			accept: "#i11",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#item11").append(html);
 	           }
        });



   var y_fixo = $("#item_container").offset().top;
   
   $(window).scroll(function () {
        $("#item_container").animate({
            top: y_fixo+$(document).scrollTop()+"px"
            },{duration:500,queue:false}
        );
    });


    });

    function remove(el) {
        $(el).hide();
        $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
        $(el).parent().parent().fadeOut('1000');
        setTimeout(function() {
            $(el).parent().parent().remove();
            // collapse cart items
            if (total_items > 3) {
                $("#cart_items").animate({width: "-=120"}, 'slow');
            }
        }, 1100);

    }
	
</script>
</head>
<body>
<div id="texto_apresentacao">
  <p>Nessa atividade, voc&ecirc; ser&aacute; desafiado a elaborar um Mapa Conceitual que agrega e inter-relaciona os conceitos trabalhados nesse m&oacute;dulo at&eacute; o momento. Para realizar a atividade, voc&ecirc; deve arrastar os conceitos presentes na lateral, de forma a preencher as lacunas do mapa. As lacunas ser&atilde;o preenchidas em caso de acerto. Boa Sorte!</p>
</div>
<div id="atividade">
	<div id="atividade-01"><img src="images/atividade_01.jpg" width="820" height="137" alt=""></div>
	<div id="atividade-02"><img src="images/atividade_02.jpg" width="31" height="633" alt=""></div>
	<div id="atividade-03"><div id="item1" class="back"></div></div>
	<div id="atividade-04"><img src="images/atividade_04.jpg" width="703" height="154" alt=""></div>
	<div id="atividade-05"><img src="images/atividade_05.jpg" width="86" height="57" alt=""></div>
	<div id="atividade-06"><div id="item2" class="back"></div></div>
	<div id="atividade-07"><img src="images/atividade_07.jpg" width="86" height="258" alt=""></div>
	<div id="atividade-08"><img src="images/atividade_08.jpg" width="307" height="216" alt=""></div>
	<div id="atividade-09"><div id="item7" class="back"></div></div>
	<div id="atividade-10"><img src="images/atividade_10.jpg" width="300" height="216" alt=""></div>
	<div id="atividade-11"><img src="images/atividade_11.jpg" width="96" height="79" alt=""></div>
	<div id="atividade-12"><div id="item8" class="back"></div></div>
	<div id="atividade-13"><img src="images/atividade_13.jpg" width="96" height="66" alt=""></div>
	<div id="atividade-14"><img src="images/atividade_14.jpg" width="1" height="263" alt=""></div>
	<div id="atividade-15"><div id="item3" class="back"></div></div>
	<div id="atividade-16"><img src="images/atividade_16.jpg" width="232" height="229" alt=""></div>
	<div id="atividade-17"><div id="item9" class="back"></div></div>
	<div id="atividade-18"><img src="images/atividade_18.jpg" width="315" height="116" alt=""></div>
	<div id="atividade-19"><img src="images/atividade_19.jpg" width="98" height="194" alt=""></div>
	<div id="atividade-20"><img src="images/atividade_20.jpg" width="143" height="81" alt=""></div>
	<div id="atividade-21"><div id="item10" class="back"></div></div>
	<div id="atividade-22"><img src="images/atividade_22.jpg" width="187" height="147" alt=""></div>
	<div id="atividade-23"><div id="item11" class="back"></div></div>
	<div id="atividade-24"><img src="images/atividade_24.jpg" width="34" height="147" alt=""></div>
	<div id="atividade-25"><img src="images/atividade_25.jpg" width="143" height="80" alt=""></div>
	<div id="atividade-26"><img src="images/atividade_26.jpg" width="94" height="114" alt=""></div>
	<div id="atividade-27"><img src="images/atividade_27.jpg" width="61" height="34" alt=""></div>
	<div id="atividade-28"><div id="item4" class="back"></div></div>
	<div id="atividade-29"><img src="images/atividade_29.jpg" width="17" height="34" alt=""></div>
	<div id="atividade-30"><div id="item5" class="back"></div></div>
	<div id="atividade-31"><img src="images/atividade_31.jpg" width="17" height="34" alt=""></div>
	<div id="atividade-32"><div id="item6" class="back"></div></div>
	<div id="atividade-33"><img src="images/atividade_33.jpg" width="92" height="34" alt=""></div>
	<div id="atividade-34"><img src="images/atividade_34.jpg" width="820" height="80" alt=""></div>
</div>
<div id="item_container">
    <div class="item" id="i1"><img src="img/img_menu_01.png"/></div>
    <div class="item" id="i2"><img src="img/img_menu_02.png"/></div>
    <div class="item" id="i8"><img src="img/img_menu_03.png"/></div>
    <div class="item" id="i9"><img src="img/img_menu_04.png"/></div>
    <div class="item" id="i3"><img src="img/img_menu_05.png"/></div>
    <div class="item" id="i11"><img src="img/img_menu_06.png"/></div>
    <div class="item" id="i6"><img src="img/img_menu_07.png"/></div>
    <div class="item" id="i4"><img src="img/img_menu_08.png"/></div>
    <div class="item" id="i7"><img src="img/img_menu_09.png"/></div>
    <div class="item" id="i10"><img src="img/img_menu_10.png"/></div>
    <div class="item" id="i5"><img src="img/img_menu_11.png"/></div>
    <div class="item"><a href="index.html" target="_parent"><img src="img/reiniciar.png" /></a></div>
    <div class="clear"></div>
</div>
<div id="texto_final">
  <p>Voltando &agrave; nossa proposta de um projeto pol&iacute;tico-pedag&oacute;gico cr&iacute;tico, encerramos esta se&ccedil;&atilde;o reafirmando a essencialidade de seu aspecto
&eacute;tico. Como dito por Paulo Freire, &ldquo;a necess&aacute;ria promo&ccedil;&atilde;o da ingenuidade &agrave; criticidade n&atilde;o pode ou n&atilde;o deve ser feita &agrave; dist&acirc;ncia de uma rigorosa forma&ccedil;&atilde;o &eacute;tica ao lado sempre da est&eacute;tica. Dec&ecirc;ncia e boniteza de m&atilde;os dadas&rdquo; (FREIRE, 1996:34).</p>
</div>
</body>
</html>