plaquettes v1

app/assets/javascripts/plaquettes.coffee

@@ -0,0 +1,315 @@
+#= require jquery
+#= require jquery_ujs
+#= require jquery-ui
+#= require ./shared/jquery.ui.touch-punch
+#= require ./shared/jquery-jPuzzle
+
+
+
+
+test_question = (question) ->
+  $(".info").hide()
+  $(".quizz_img").hide()
+  
+  
+  rep = question.find("input[type='radio']:checked").closest("div")
+  rep.find(".info").show()
+  rep.find(".quizz_img").show()
+  if question.find(".response input:checked")[0]
+    question.find(".success").show();
+    question.find(".fail").hide();
+    rep = true
+  else
+    question.find(".fail").show();
+    question.find(".success").hide();
+    rep =false
+  return rep
+  
+  
+      
+      
+$ ->
+
+  $("a.def").click ->
+ 
+    r = "<div class='pane_hover'><h3>"+$(this).html()+"</h3><p>"+$(this).data("def")+"</p></div>"
+      
+
+      
+    
+    $("body").append(r)
+    
+    $(".pane_hover").click ->
+      $(this).remove();
+      
+      
+  $(document).on "click", ".receptable img", ->  
+
+    r = "<div class='pane_hover'><img src='"+$(this).attr("src")+"' /><h3>"+$(this).data("legend")+"</h3></div>"
+      
+
+      
+    
+    $("body").append(r)
+    
+    $(".pane_hover").click ->
+      $(this).remove();
+
+
+  $("a.img").click ->
+ 
+    r = "<div class='pane_hover'><img src='"+$(this).data("img")+"' />"
+    
+    if ($(this).data("legend"))
+      r+= "<h3>"+$(this).data("legend")+"</h3>"
+    
+    if ($(this).data("desc"))
+      r+= "<p>"+$(this).data("desc")+"</p>"
+    r += "</div>"
+
+      
+    
+    $("body").append(r)
+    
+    $(".pane_hover").click ->
+      $(this).remove();
+  
+  $(".page").hide()
+  $(".page:first").show()
+  
+  $(".prev_slide").click ->
+  
+    $(this).closest(".page").hide()
+    $(this).closest(".page").prev(".page").show()
+
+  
+  $(".next_slide").click ->
+    
+    $(this).closest(".page").hide()
+    $(this).closest(".page").next(".page").show()
+
+      
+      
+      
+      
+      
+      
+      
+
+  $(".places_jeu").each ->
+    $(this).find(".receptable").droppable
+      tolerance: "touch"
+      accept: (e) ->
+        if e.data("rep") == $(this).data("rep")
+          true
+      drop: ( event, ui ) ->
+       
+        $( this ).append(ui.draggable)
+        ui.draggable.attr("style", "")
+        
+        if $(this).closest(".places_jeu").find(".vignettes img").size() == 0
+          $(this).closest(".places_jeu").find(".success").show()
+
+    $(this).find(".vignettes img").draggable
+      #connectWith: ".receptable"
+      tolerance: "pointer"
+      revert: "invalid"
+      
+      
+     
+
+
+
+  
+  
+ 
+
+
+  $(".quizz").each ->
+    
+    $(this).find("input").change ->
+      test_question($(this).closest(".question"))
+      
+      
+    $(this).find(".fail, .success").hide()
+    
+    $(this).find(".question").hide()
+    $(this).find(".question:first").show()
+    
+	  $(this).find(".prev").click ->
+      test_question($(this).closest(".question"))
+      $(this).closest(".question").hide()
+      $(this).closest(".question").prev(".question").show()
+    
+    $(this).find(".next").click ->
+      if test_question($(this).closest(".question")) == true
+      
+        $(this).closest(".question").fadeOut(0)
+        $(this).closest(".question").next(".question").fadeIn(0)
+      
+      
+    $(this).find(".check").click ->
+      test_question($(this).closest(".question"))
+      
+          
+        
+intialize_puzzle = () ->
+  $(".puzzle").each ->
+    archive = $(this).html()
+    $(this).find(".piece_place").droppable
+      tolerance: "touch"
+      accept: (e) ->
+        if e.data("rep") == $(this).data("rep")
+          true
+      drop: ( event, ui ) ->
+       
+        $( this ).append(ui.draggable)
+        ui.draggable.attr("style", "")
+        if $(this).closest(".puzzle").find(".pieces .piece").size() == 0
+
+          $(this).closest(".puzzle").find(".success").show()
+        $(this).draggable( 'disable' );
+        
+
+    $(this).find(".piece").draggable
+      tolerance: "pointer"
+      revert: "invalid"
+      
+    $(this).find(".reset").click ->
+      $(this).closest(".puzzle").html archive
+      $(this).closest(".puzzle").find(".success").hide()
+      intialize_puzzle()
+
+intialize_arbre = () ->
+  archive = $(".vie-arbre.story").closest(".sortable_quizz").html()
+  $(".vie-arbre.story").sortable 
+    items: 'td'
+    stop:() ->
+      
+      win = true
+      i = 0
+      $(this).find("td").each ->
+        i = i + 1
+        win = false  unless i is $(this).data("order")
+
+      if win is true
+        $(".success").show()
+        
+  $(".vie-arbre.story").closest(".sortable_quizz").find(".reset").click ->
+    $(".vie-arbre.story").closest(".sortable_quizz").html archive
+    intialize_arbre()
+    
+initialize_vie_sol = () ->
+
+  archive = $(".t_sortable").closest(".animaux_sol").html()
+  $(".t_sortable").sortable 
+    items: 'tr'
+    stop:() ->
+      
+      win = true
+      i = 0
+      $(this).find("tr").each ->
+        i = i + 1
+        win = false  unless i is $(this).data("order")
+
+      if win is true
+        $(".success").show()
+        
+  $(".t_sortable").closest(".animaux_sol").find(".reset").click ->
+    $(".t_sortable").closest(".animaux_sol").html archive
+    initialize_vie_sol()
+    
+    
+    
+
+$(document).ready ->
+  
+  intialize_arbre()
+  
+  initialize_vie_sol()
+      
+      
+      
+      
+      
+      
+      
+  
+  intialize_puzzle()
+     
+      
+      
+      
+  #$.backstretch(["/assets/plaquettes/fond.jpg"]);
+  initialize_jeu_1 = ->
+
+    $(".sortable_quizz").each ->
+      
+      element = $(this)
+
+      html = element.find(".sortable").html()
+      element.find(".sortable").sortable
+        stop: () -> 
+          win = true
+          i = 0
+          element.find("img").each ->
+            i = i + 1
+            win = false  unless i is $(this).data("order")
+
+          if win is true
+            element.find(".win").show()
+            element.find(".loose").hide()
+          
+      
+      element.find(".sortable").disableSelection()
+        
+
+      element.find(".reset").click ->
+        element.find(".sortable").html html
+        element.find(".sortable").sortable "refresh"
+        element.find(".win").hide()
+        element.find(".loose").hide()
+
+  initialize_jeu_2 = ->
+    element = $("#insectes_jeu_2")
+    html = element.find(".sortable").html()
+    element.find(".receptable").sortable
+      connectWith: ".labels,.receptable"
+      items: ".label"
+      tolerance: "pointer"
+      receive: (event, ui) ->
+        if $(this).children().length > 1
+          child = $(this).children().not(ui.item)[0]
+          element.find(".labels").append child
+
+    element.find(".receptable ul").disableSelection()
+    element.find(".labels").sortable
+      connectWith: ".receptable"
+      tolerance: "pointer"
+      items: ".label"
+      receive: (event, ui) ->
+        ui.item.attr "style", ""
+
+    element.find(".labels").disableSelection()
+    element.find(".verif").bind "click", ->
+      win = true
+      i = 0
+      element.find("img").each ->
+        i = i + 1
+        win = false  unless i is $(this).data("order")
+
+      if win is true
+        element.find(".win").show()
+        element.find(".loose").hide()
+      else
+        element.find(".win").hide()
+        element.find(".loose").show()
+
+    element.find(".reset").click ->
+      element.find(".sortable").html html
+      element.find(".sortable").sortable "refresh"
+      element.find(".win").hide()
+      element.find(".loose").hide()
+
+  initialize_jeu_1()
+  initialize_jeu_2()

app/assets/javascripts/plaquettes.js

@@ -1,135 +0,0 @@
-//= require jquery
-//= require jquery_ujs
-//= require jquery-ui
-
-
-
-
-
-$(document).ready(function(){
-
-	function initialize_jeu_1(){
-		var element = $("#insectes_jeu_1")
-	
-		var html = element.find(".sortable").html();
-
-		element.find(".sortable").sortable();
-		element.find(".sortable").disableSelection();
-	
-		element.find(".verif").bind("click", function(){
-
-			var win = true;
-			
-			var i = 0;
-			
-			element.find("img").each(function(){
-				i = i+1;
-				if(i != $(this).data("order")){
-					win = false;
-				}
-	
-				
-			
-			});
-			if(win == true){
-			element.find(".win").show();
-			element.find(".loose").hide();
-			}else{
-			element.find(".win").hide();
-			element.find(".loose").show();
-			}
-		});
-	
-	
-	
-		element.find(".reset").click(function(){
-			element.find(".sortable").html(html);
-			element.find(".sortable").sortable("refresh");
-			element.find(".win").hide();
-			element.find(".loose").hide();
-		
-		});
-	
-	}
-	
-	
-	function initialize_jeu_2(){
-		var element = $("#insectes_jeu_2")
-	
-		var html = element.find(".sortable").html();
-
-
-		element.find(".receptable").sortable({
-			connectWith: '.labels,.receptable',
-			items: '.label',
-			tolerance:"pointer",
-			receive: function(event, ui) {
-			            
-			            if ($(this).children().length > 1) {
-			              	var child = $(this).children().not(ui.item)[0]
-						
-						   element.find(".labels").append(child);
-			 
-			            }
-			      }
-		});
-		element.find(".receptable ul").disableSelection();
-		
-		element.find(".labels").sortable({
-			connectWith: '.receptable',
-			tolerance:"pointer",
-			items: '.label',
-			receive: function(event, ui){ui.item.attr('style','');}
-			
-			
-			
-		});
-		element.find(".labels").disableSelection();
-	
-		element.find(".verif").bind("click", function(){
-
-			var win = true;
-			
-			var i = 0;
-			
-			element.find("img").each(function(){
-				i = i+1;
-				if(i != $(this).data("order")){
-					win = false;
-				}
-	
-				
-			
-			});
-			if(win == true){
-			element.find(".win").show();
-			element.find(".loose").hide();
-			}else{
-			element.find(".win").hide();
-			element.find(".loose").show();
-			}
-		});
-	
-	
-	
-		element.find(".reset").click(function(){
-			element.find(".sortable").html(html);
-			element.find(".sortable").sortable("refresh");
-			element.find(".win").hide();
-			element.find(".loose").hide();
-		
-		});
-	
-	}
-	
-	initialize_jeu_1();
-	initialize_jeu_2();
-	
-	
-	
-
-});
-
-
-
-

app/assets/javascripts/shared/jquery-jPuzzle.js

@@ -0,0 +1,383 @@
+/*jPuzzle
+jQuery plugin (http://jquery.com/)
+jQuery => Copyright 2010, John Resig
+jPuzzle => Copyright 2010, Adrien Guéret
+Dual licensed under the MIT or GPL Version 2 licenses.
+http://jquery.org/license
+Last update: 26/07/2011*/
+(function($)
+{
+	$.fn.jPuzzle=function(options)
+	{
+		var defaults=
+		{
+			'rows': 5,
+			'columns': 5,
+			'help': true,
+			'fixed': true,
+			'showHelpButton': true,
+			'textPlayButton': 'Jouer !',
+			'textHelpButtonShow': "Voir l'image finale",
+			'textHelpButtonHide': "Cacher l'image finale",
+			'onstart': null,
+			'onend': null
+		};
+		
+		var parameters=$.extend(defaults,options);
+		
+		parameters.rows=Math.max(1,parameters.rows);
+		parameters.columns=Math.max(1,parameters.columns);
+		
+		//Format time in seconds to HH"MM'SS
+		function formatTime(s)
+		{
+			s=parseInt(s,10);
+			
+			var h=Math.floor(s/3600);
+			s-=h*3600;
+			var formatTime=(h>9?h:'0'+h)+'"';
+			
+			var m=Math.floor(s/60);
+			s-=m*60;
+			formatTime+=(m>9?m:'0'+m)+'\'';
+			
+			return formatTime+((s>9?s:'0'+s));
+		}
+		
+		//Function waiting for the loading of the image
+		function loading()
+		{
+			if($(this).is('img'))
+			{
+				//If the image is not loaded, we have to wait for it
+				if(this.complete)
+				{
+					init($(this));
+				}
+				else
+				{
+					$(this).load(function()
+					{
+						init($(this));
+					});
+				}
+			}
+		}
+		
+		function init(obj)
+		{
+			//We store the image dimensions...
+			var width=obj.width();
+			var height=obj.height();
+			
+			//... and the source of the image
+			var src=obj.attr('src');
+			
+			//We calculate the pieces dimensions
+			var pieceWidth=width/parameters.columns;
+			var pieceHeight=height/parameters.rows;
+			
+			//And the height of the box containing all the pieces
+			var sizeBox=pieceHeight>height/2?pieceHeight:height/2;
+			
+			//The main container
+			var game=$('<span></span>').css(
+			{
+				//'width': width+'px',
+				'display': 'inline-block',
+				'position': 'relative'
+			}).addClass('jPuzzle-game').insertAfter(obj);
+			
+			//The tag containing the puzzle
+			var puzzle=$('<span></span>').css(
+			{
+				'width': width+'px',
+				'height': height+'px',
+				'display': 'inline-block',
+				'position': 'relative'
+			}).addClass('jPuzzle-container').appendTo(game);
+			
+			//The tag displaying the image as a background
+			var image=$('<span></span>').css(
+			{
+				'width': width+'px',
+				'height': height+'px',
+				'opacity': 1,
+				'background-image': 'url("'+src+'")',
+				'display': 'inline-block'
+			}).addClass('jPuzzle-image').appendTo(puzzle);
+			
+			//Box where the pieces will be generated
+			var box=$('<span></span>').css(
+			{
+				//'width': width+'px',
+				'minHeight': sizeBox+'px',
+				'display': 'inline-block',
+				'position': 'absolute',
+        "bottom":"-170px",
+        "left":"100px"
+			}).addClass('jPuzzle-box').droppable(
+			{
+				'accept': '.jPuzzle-piece',
+				'addClasses': false,
+				'drop': function(event,ui)
+				{
+					var piece=ui.draggable;
+					var lastLocation=$.data(piece[0],'lastLocation');
+					if(lastLocation[0]!=this)
+					{
+						/* If the piece comes from a puzzle location,
+						we have to adjust its position */
+						piece.appendTo($(this));
+						piece.css(
+						{
+							'left': '+='+lastLocation.position().left,
+							'top':(piece.position().top+lastLocation.position().top-puzzle.outerHeight())+'px'
+						});
+						$.data(piece[0],'lastLocation',$(this));
+					}
+				}
+			}).hide().insertAfter(puzzle);
+			
+			//Foot bar
+			var infos=$('<span></span>').css(
+			{
+				'width': width+'px',
+				'display': 'inline-block'
+			}).addClass('jPuzzle-infos').insertAfter(box);
+			
+			//The data-time attribute will contain the elapsed time
+			var infosTime=$('<span></span>').addClass('jPuzzle-time').attr('data-time',0).hide().appendTo(infos);
+			
+			var playButton=$('<input type="button" class="btn"  />').val(parameters.textPlayButton).addClass('jPuzzle-playButton').click(function()
+			{
+				startGame();
+				$(this).hide();
+			}).appendTo(infos);
+			
+			if(parameters.showHelpButton)
+			{
+				var helpButton=$('<input type="button" class="btn"  />').val(parameters.textHelpButtonShow).addClass('jPuzzle-helpButton').toggle(function()
+				{
+					//The final image is not displayed, we show it!
+					$(this).val(parameters.textHelpButtonHide).attr('disabled',true);
+					image.animate(
+					{
+						'opacity': 1
+					},'slow',function()
+					{
+						helpButton.removeAttr('disabled');
+					});
+					
+					//We hide the pieces of the puzzle to avoid the cheating
+					$('.jPuzzle-piece').hide();
+				},function()
+				{
+					//The final image is displayed, we hide it!
+					$(this).val(parameters.textHelpButtonShow).attr('disabled',true);
+					
+					image.animate(
+					{
+						'opacity': (parameters.help?0.1:0)
+					},'slow',function()
+					{
+						helpButton.removeAttr('disabled');
+					});
+					
+					$('.jPuzzle-piece').show();
+				}).hide().appendTo(infos);
+			}
+			
+			//And we remove the initial image!
+			obj.remove();
+			
+			var timer;
+			function startGame()
+			{
+				if(parameters.onstart)
+				{
+					parameters.onstart(game);
+				}
+				
+				box.show();
+				infosTime.show();
+				infosTime.text('00"00\'00');
+				
+				if(parameters.showHelpButton)
+				{
+					helpButton.show();
+				}
+				
+				image.animate(
+				{
+					'opacity': (parameters.help?0.1:0)
+				},'slow');
+				
+				for(var i=0;i<parameters.rows;i++)
+				{
+					for(var j=0;j<parameters.columns;j++)
+					{
+						var maxX=width-pieceWidth;
+						var maxY=sizeBox-pieceHeight;
+						
+						var piece=$('<span></span>').addClass('jPuzzle-piece')
+						.attr('data-num',i+'_'+j).css(
+						{
+							'width': pieceWidth+'px',
+							'height': pieceHeight+'px',
+							'display': 'block',
+							'left': Math.floor((Math.random()*(maxX+1)))+'px',
+							'top': Math.floor((Math.random()*(maxY+1)))+'px',
+							'z-index': Math.floor((Math.random()*(10))+1),
+							'background-image': 'url("'+src+'")',
+							'cursor': 'move',
+							'background-position': (-j*pieceWidth)+'px '+(-i*pieceHeight)+'px',
+							'position': 'absolute'
+						}).draggable(
+						{
+							'start': function(event,ui)
+							{
+								/* If the piece is already on its
+								good location, we stop the dragging */
+								if($.data(this,'ok') && parameters.fixed)
+								{
+									return false;
+								}
+								
+								//Otherwise, we put the piece in front of the others
+								var zIndex=0;
+								game.find('.jPuzzle-piece').each(function()
+								{
+									var x=parseInt($(this).css('z-index'));
+									zIndex=Math.max(x,zIndex);
+								});				
+								$(this).css('z-index',zIndex+1);
+							},
+							'revert': 'invalid',
+							'containment': game
+						}).appendTo(box);
+						
+						$.data(piece[0],'ok',false);
+						$.data(piece[0],'lastLocation',box);
+						
+						var location=$('<span></span>').addClass('jPuzzle-location')
+						.attr('data-num',i+'_'+j).css(
+						{
+							'width': pieceWidth+'px',
+							'height': pieceHeight+'px',
+							'left': j*pieceWidth+'px',
+							'top': i*pieceHeight+'px',
+							'display': 'block',
+							'position': 'absolute'
+						}).droppable(
+						{
+							'accept': function(ui)
+							{
+								/* We accept only puzzle pieces, and only if the location is empty
+								We also check if the piece and the location are in the same puzzle game */
+								return (ui.hasClass('jPuzzle-piece') && $(this).is(':empty') && $(this).parents('.jPuzzle-game')[0]==ui.parents('.jPuzzle-game')[0]);
+							},
+							'addClasses': false,
+							'hoverClass': 'jPuzzle-location-hover',
+							'drop': function(event,ui)
+							{
+								var obj=$(this);
+													
+								ui.draggable.appendTo(obj);
+								$.data(ui.draggable[0],'lastLocation',obj);
+														
+								ui.draggable.css(
+								{
+									'left': '0px',
+									'top': '0px'
+								});
+								
+								/* If piece and location have the same data-num attribute,
+								then the piece is correctly placed !*/
+								$.data(ui.draggable[0],'ok',false);
+								if(obj.attr('data-num')==ui.draggable.attr('data-num'))
+								{
+									$.data(ui.draggable[0],'ok',true);
+									
+									/* If we can't remove a piece which is correctly
+									placed, we can apply a small effect on it*/
+									if(parameters.fixed)
+									{
+										/* We modify the cursor to indicate
+										the piece is not longer draggable */
+										ui.draggable.css('cursor','default');
+										
+										/* This span will add a "flash
+										effect" on the piece */
+										$('<span></span>').css(
+										{
+											'position': 'absolute',
+											'left': '0px',
+											'top': '0px',
+											'display':'block',
+											'width': '100%',
+											'height': '100%',
+											'background-color': '#fff'
+										}).appendTo(ui.draggable)
+										.fadeOut(2000,function()
+										{
+											$(this).remove();
+										});
+									}
+									
+									//The player has correctly placed one piece: what about the others?
+									var total=0;
+									game.find('.jPuzzle-piece').each(function()
+									{
+										if(!$.data(this,'ok'))
+										{
+											return false;
+										}
+										total++;
+									});
+									if(total==parameters.rows*parameters.columns)
+									{
+										endGame();
+									}
+								}
+							}
+						}).appendTo(puzzle);
+					}
+				}
+				
+				timer=setInterval(function()
+				{
+					infosTime.attr('data-time',parseInt(infosTime.attr('data-time'),10)+1);
+					infosTime.text(formatTime(infosTime.attr('data-time')));
+				},1000);
+			}
+			
+			function endGame()
+			{
+				//We stop the timer
+				clearInterval(timer);
+				var time=parseInt(infosTime.attr('data-time'),10);
+					
+				//We set the puzzle to its initial state
+				box.hide();
+				game.find('.jPuzzle-piece,.jPuzzle-location').remove();
+				image.css('opacity','1');
+				if(parameters.showHelpButton)
+				{
+					helpButton.hide();
+				}
+				infosTime.hide().attr('data-time',0);
+				playButton.show();
+				
+				//We eventually call a function defined by the user
+				if(parameters.onend)
+				{
+					//We send to this function three useful variables
+					parameters.onend(game,time,formatTime(time));
+				}
+			}
+		}
+		
+		return this.each(loading);
+	};
+})(jQuery);

app/assets/javascripts/shared/jquery.backstretch.js

@@ -0,0 +1,364 @@
+/*
+ * Backstretch
+ * http://srobbin.com/jquery-plugins/backstretch/
+ *
+ * Copyright (c) 2012 Scott Robbin
+ * Licensed under the MIT license.
+ */
+
+;(function ($, window, undefined) {
+  'use strict';
+
+  /* PLUGIN DEFINITION
+   * ========================= */
+
+  $.fn.backstretch = function (images, options) {
+    // We need at least one image
+    if (images === undefined || images.length === 0) {
+      $.error("No images were supplied for Backstretch");
+    }
+
+    /*
+     * Scroll the page one pixel to get the right window height on iOS
+     * Pretty harmless for everyone else
+    */
+    if ($(window).scrollTop() === 0 ) {
+      window.scrollTo(0, 0);
+    }
+
+    return this.each(function () {
+      var $this = $(this)
+        , obj = $this.data('backstretch');
+
+      // If we've already attached Backstretch to this element, remove the old instance.
+      if (obj) {
+        // Merge the old options with the new
+        options = $.extend(obj.options, options);
+
+        // Remove the old instance
+        obj.destroy(true);
+      }
+
+      obj = new Backstretch(this, images, options);
+      $this.data('backstretch', obj);
+    });
+  };
+
+  // If no element is supplied, we'll attach to body
+  $.backstretch = function (images, options) {
+    // Return the instance
+    return $('body')
+            .backstretch(images, options)
+            .data('backstretch');
+  };
+
+  // Custom selector
+  $.expr[':'].backstretch = function(elem) {
+    return $(elem).data('backstretch') !== undefined;
+  };
+
+  /* DEFAULTS
+   * ========================= */
+
+  $.fn.backstretch.defaults = {
+      centeredX: true   // Should we center the image on the X axis?
+    , centeredY: true   // Should we center the image on the Y axis?
+    , duration: 5000    // Amount of time in between slides (if slideshow)
+    , fade: 0           // Speed of fade transition between slides
+  };
+
+  /* STYLES
+   * 
+   * Baked-in styles that we'll apply to our elements.
+   * In an effort to keep the plugin simple, these are not exposed as options.
+   * That said, anyone can override these in their own stylesheet.
+   * ========================= */
+  var styles = {
+      wrap: {
+          left: 0
+        , top: 0
+        , overflow: 'hidden'
+        , margin: 0
+        , padding: 0
+        , height: '100%'
+        , width: '100%'
+        , zIndex: -999999
+      }
+    , img: {
+          position: 'absolute'
+        , display: 'none'
+        , margin: 0
+        , padding: 0
+        , border: 'none'
+        , width: 'auto'
+        , height: 'auto'
+        , maxWidth: 'none'
+        , zIndex: -999999
+      }
+  };
+
+  /* CLASS DEFINITION
+   * ========================= */
+  var Backstretch = function (container, images, options) {
+    this.options = $.extend({}, $.fn.backstretch.defaults, options || {});
+
+    /* In its simplest form, we allow Backstretch to be called on an image path.
+     * e.g. $.backstretch('/path/to/image.jpg')
+     * So, we need to turn this back into an array.
+     */
+    this.images = $.isArray(images) ? images : [images];
+
+    // Preload images
+    $.each(this.images, function () {
+      $('<img />')[0].src = this;
+    });    
+
+    // Convenience reference to know if the container is body.
+    this.isBody = container === document.body;
+
+    /* We're keeping track of a few different elements
+     *
+     * Container: the element that Backstretch was called on.
+     * Wrap: a DIV that we place the image into, so we can hide the overflow.
+     * Root: Convenience reference to help calculate the correct height.
+     */
+    this.$container = $(container);
+    this.$root = this.isBody ? supportsFixedPosition ? $(window) : $(document) : this.$container;
+
+    // Don't create a new wrap if one already exists (from a previous instance of Backstretch)
+    var $existing = this.$container.children(".backstretch").first();
+    this.$wrap = $existing.length ? $existing : $('<div class="backstretch"></div>').css(styles.wrap).appendTo(this.$container);
+
+    // Non-body elements need some style adjustments
+    if (!this.isBody) {
+      // If the container is statically positioned, we need to make it relative,
+      // and if no zIndex is defined, we should set it to zero.
+      var position = this.$container.css('position')
+        , zIndex = this.$container.css('zIndex');
+
+      this.$container.css({
+          position: position === 'static' ? 'relative' : position
+        , zIndex: zIndex === 'auto' ? 0 : zIndex
+        , background: 'none'
+      });
+      
+      // Needs a higher z-index
+      this.$wrap.css({zIndex: -999998});
+    }
+
+    // Fixed or absolute positioning?
+    this.$wrap.css({
+      position: this.isBody && supportsFixedPosition ? 'fixed' : 'absolute'
+    });
+
+    // Set the first image
+    this.index = 0;
+    this.show(this.index);
+
+    // Listen for resize
+    $(window).on('resize.backstretch', $.proxy(this.resize, this))
+             .on('orientationchange.backstretch', $.proxy(function () {
+                // Need to do this in order to get the right window height
+                if (this.isBody && window.pageYOffset === 0) {
+                  window.scrollTo(0, 1);
+                  this.resize();
+                }
+             }, this));
+  };
+
+  /* PUBLIC METHODS
+   * ========================= */
+  Backstretch.prototype = {
+      resize: function () {
+        try {
+          var bgCSS = {left: 0, top: 0}
+            , rootWidth = this.isBody ? this.$root.width() : this.$root.innerWidth()
+            , bgWidth = rootWidth
+            , rootHeight = this.isBody ? ( window.innerHeight ? window.innerHeight : this.$root.height() ) : this.$root.innerHeight()
+            , bgHeight = bgWidth / this.$img.data('ratio')
+            , bgOffset;
+
+            // Make adjustments based on image ratio
+            if (bgHeight >= rootHeight) {
+                bgOffset = (bgHeight - rootHeight) / 2;
+                if(this.options.centeredY) {
+                  bgCSS.top = '-' + bgOffset + 'px';
+                }
+            } else {
+                bgHeight = rootHeight;
+                bgWidth = bgHeight * this.$img.data('ratio');
+                bgOffset = (bgWidth - rootWidth) / 2;
+                if(this.options.centeredX) {
+                  bgCSS.left = '-' + bgOffset + 'px';
+                }
+            }
+
+            this.$wrap.css({width: rootWidth, height: rootHeight})
+                      .find('img:not(.deleteable)').css({width: bgWidth, height: bgHeight}).css(bgCSS);
+        } catch(err) {
+            // IE7 seems to trigger resize before the image is loaded.
+            // This try/catch block is a hack to let it fail gracefully.
+        }
+
+        return this;
+      }
+
+      // Show the slide at a certain position
+    , show: function (index) {
+        // Validate index
+        if (Math.abs(index) > this.images.length - 1) {
+          return;
+        } else {
+          this.index = index;
+        }
+
+        // Vars
+        var self = this
+          , oldImage = self.$wrap.find('img').addClass('deleteable')
+          , evt = $.Event('backstretch.show', {
+              relatedTarget: self.$container[0]
+            });
+
+        // Pause the slideshow
+        clearInterval(self.interval);
+
+        // New image
+        self.$img = $('<img />')
+                      .css(styles.img)
+                      .bind('load', function (e) {
+                        var imgWidth = this.width || $(e.target).width()
+                          , imgHeight = this.height || $(e.target).height();
+                        
+                        // Save the ratio
+                        $(this).data('ratio', imgWidth / imgHeight);
+
+                        // Show the image, then delete the old one
+                        // "speed" option has been deprecated, but we want backwards compatibilty
+                        $(this).fadeIn(self.options.speed || self.options.fade, function () {
+                          oldImage.remove();
+
+                          // Resume the slideshow
+                          if (!self.paused) {
+                            self.cycle();
+                          }
+
+                          // Trigger the event
+                          self.$container.trigger(evt, self);
+                        });
+
+                        // Resize
+                        self.resize();
+                      })
+                      .appendTo(self.$wrap);
+
+        // Hack for IE img onload event
+        self.$img.attr('src', self.images[index]);
+        return self;
+      }
+
+    , next: function () {
+        // Next slide
+        return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
+      }
+
+    , prev: function () {
+        // Previous slide
+        return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1);
+      }
+
+    , pause: function () {
+        // Pause the slideshow
+        this.paused = true;
+        return this;
+      }
+
+    , resume: function () {
+        // Resume the slideshow
+        this.paused = false;
+        this.next();
+        return this;
+      }
+
+    , cycle: function () {
+        // Start/resume the slideshow
+        if(this.images.length > 1) {
+          // Clear the interval, just in case
+          clearInterval(this.interval);
+
+          this.interval = setInterval($.proxy(function () {
+            // Check for paused slideshow
+            if (!this.paused) {
+              this.next();
+            }
+          }, this), this.options.duration);
+        }
+        return this;
+      }
+
+    , destroy: function (preserveBackground) {
+        // Stop the resize events
+        $(window).off('resize.backstretch orientationchange.backstretch');
+
+        // Clear the interval
+        clearInterval(this.interval);
+
+        // Remove Backstretch
+        if(!preserveBackground) {
+          this.$wrap.remove();          
+        }
+        this.$container.removeData('backstretch');
+      }
+  };
+
+  /* SUPPORTS FIXED POSITION?
+   *
+   * Based on code from jQuery Mobile 1.1.0
+   * http://jquerymobile.com/
+   *
+   * In a nutshell, we need to figure out if fixed positioning is supported.
+   * Unfortunately, this is very difficult to do on iOS, and usually involves
+   * injecting content, scrolling the page, etc.. It's ugly.
+   * jQuery Mobile uses this workaround. It's not ideal, but works.
+   *
+   * Modified to detect IE6
+   * ========================= */
+
+  var supportsFixedPosition = (function () {
+    var ua = navigator.userAgent
+      , platform = navigator.platform
+        // Rendering engine is Webkit, and capture major version
+      , wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ )
+      , wkversion = !!wkmatch && wkmatch[ 1 ]
+      , ffmatch = ua.match( /Fennec\/([0-9]+)/ )
+      , ffversion = !!ffmatch && ffmatch[ 1 ]
+      , operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ )
+      , omversion = !!operammobilematch && operammobilematch[ 1 ]
+      , iematch = ua.match( /MSIE ([0-9]+)/ )
+      , ieversion = !!iematch && iematch[ 1 ];
+
+    return !(
+      // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
+      ((platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1  || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534) ||
+      
+      // Opera Mini
+      (window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]") ||
+      (operammobilematch && omversion < 7458) ||
+      
+      //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
+      (ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533) ||
+      
+      // Firefox Mobile before 6.0 -
+      (ffversion && ffversion < 6) ||
+      
+      // WebOS less than 3
+      ("palmGetResource" in window && wkversion && wkversion < 534) ||
+      
+      // MeeGo
+      (ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1) ||
+      
+      // IE6
+      (ieversion && ieversion <= 6)
+    );
+  }());
+
+}(jQuery, window));

app/assets/javascripts/shared/jquery.ui.touch-punch.js

@@ -0,0 +1,160 @@
+/*!
+ * jQuery UI Touch Punch 0.2.2
+ *
+ * Copyright 2011, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+(function ($) {
+
+  // Detect touch support
+  $.support.touch = 'ontouchend' in document;
+
+  // Ignore browsers without touch support
+  if (!$.support.touch) {
+    return;
+  }
+
+  var mouseProto = $.ui.mouse.prototype,
+      _mouseInit = mouseProto._mouseInit,
+      touchHandled;
+
+  /**
+   * Simulate a mouse event based on a corresponding touch event
+   * @param {Object} event A touch event
+   * @param {String} simulatedType The corresponding mouse event
+   */
+  function simulateMouseEvent (event, simulatedType) {
+
+    // Ignore multi-touch events
+    if (event.originalEvent.touches.length > 1) {
+      return;
+    }
+
+    event.preventDefault();
+
+    var touch = event.originalEvent.changedTouches[0],
+        simulatedEvent = document.createEvent('MouseEvents');
+    
+    // Initialize the simulated mouse event using the touch event's coordinates
+    simulatedEvent.initMouseEvent(
+      simulatedType,    // type
+      true,             // bubbles                    
+      true,             // cancelable                 
+      window,           // view                       
+      1,                // detail                     
+      touch.screenX,    // screenX                    
+      touch.screenY,    // screenY                    
+      touch.clientX,    // clientX                    
+      touch.clientY,    // clientY                    
+      false,            // ctrlKey                    
+      false,            // altKey                     
+      false,            // shiftKey                   
+      false,            // metaKey                    
+      0,                // button                     
+      null              // relatedTarget              
+    );
+
+    // Dispatch the simulated event to the target element
+    event.target.dispatchEvent(simulatedEvent);
+  }
+
+  /**
+   * Handle the jQuery UI widget's touchstart events
+   * @param {Object} event The widget element's touchstart event
+   */
+  mouseProto._touchStart = function (event) {
+
+    var self = this;
+
+    // Ignore the event if another widget is already being handled
+    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
+      return;
+    }
+
+    // Set the flag to prevent other widgets from inheriting the touch event
+    touchHandled = true;
+
+    // Track movement to determine if interaction was a click
+    self._touchMoved = false;
+
+    // Simulate the mouseover event
+    simulateMouseEvent(event, 'mouseover');
+
+    // Simulate the mousemove event
+    simulateMouseEvent(event, 'mousemove');
+
+    // Simulate the mousedown event
+    simulateMouseEvent(event, 'mousedown');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchmove events
+   * @param {Object} event The document's touchmove event
+   */
+  mouseProto._touchMove = function (event) {
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Interaction was not a click
+    this._touchMoved = true;
+
+    // Simulate the mousemove event
+    simulateMouseEvent(event, 'mousemove');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchend events
+   * @param {Object} event The document's touchend event
+   */
+  mouseProto._touchEnd = function (event) {
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Simulate the mouseup event
+    simulateMouseEvent(event, 'mouseup');
+
+    // Simulate the mouseout event
+    simulateMouseEvent(event, 'mouseout');
+
+    // If the touch interaction did not move, it should trigger a click
+    if (!this._touchMoved) {
+
+      // Simulate the click event
+      simulateMouseEvent(event, 'click');
+    }
+
+    // Unset the flag to allow other widgets to inherit the touch event
+    touchHandled = false;
+  };
+
+  /**
+   * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
+   * This method extends the widget with bound touch event handlers that
+   * translate touch events to mouse events and pass them to the widget's
+   * original mouse event handling methods.
+   */
+  mouseProto._mouseInit = function () {
+    
+    var self = this;
+
+    // Delegate the touch handlers to the widget's element
+    self.element
+      .bind('touchstart', $.proxy(self, '_touchStart'))
+      .bind('touchmove', $.proxy(self, '_touchMove'))
+      .bind('touchend', $.proxy(self, '_touchEnd'));
+
+    // Call the original $.ui.mouse init method
+    _mouseInit.call(self);
+  };
+
+})(jQuery);

app/assets/stylesheets/admin.css.less

@@ -1,3 +1,4 @@
+@import "./vendor/framework/variables.less";
 @import "./vendor/framework/bootstrap.less";
 @import "./vendor/fontawesome/font-awesome";
 

app/assets/stylesheets/plaquettes.css.less

@@ -0,0 +1,493 @@
+
+@import "./vendor/framework/variables2.less";
+@import "./vendor/framework/bootstrap.less";
+@import "./vendor/fontawesome/font-awesome";
+
+
+.pane_hover{
+
+position:absolute;
+z-index:2000;
+top:0;
+left:0;
+right:0;
+bottom:0;
+background:rgba(250,250,250,0.95);
+text-align:center;
+img{
+max-width:90%;
+margin-top:30px;
+max-height:600px;
+
+}
+
+h3{
+font-size:1.8em;
+
+}
+
+p{
+font-size:1.5em;
+}
+}
+
+
+
+.prev_slide,.next_slide{
+
+color:white;
+font-size:30px;
+padding:10px 20px;
+background:rgba(0,0,0,0.9);
+position:absolute;
+bottom:10px;
+cursor:pointer;
+text-align:right;
+
+
+}
+
+.next_slide{
+
+border-radius:30px 0px 0px 0px;
+bottom:0px;
+right:0px;
+
+}
+
+.prev_slide{
+border-radius:0px 30px 0px 0px;
+text-align:left;
+bottom:0px;
+left:0px;
+
+}
+
+
+.places_jeu{
+position:relative;
+
+.success{
+color:green;
+text-align:center;
+display:none;
+
+}
+  .img{
+    position:relative;
+  
+  .receptable{
+  position:absolute;
+  width:40px;
+  height:40px;
+  border-radius:50%;
+  background:rgb(230, 230, 230);
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 5px rgba(0,0,0,.5);
+  border:2px solid rgba(82,82,82,1);
+  text-align:center;
+  
+  img{
+  max-width:140px;
+  max-height:140px;
+  position:relative;
+  box-shadow:0 1px 5px rgba(0,0,0,.5);
+  box-sizing:border-box;
+  border:4px solid white;
+  top:-100%;
+  left:-100%;
+  
+
+
+  
+  
+  }
+  
+  }
+  
+    }
+  .vignettes{
+  position:absolute;
+  right:1em;
+  width:450px;
+  top:1em;
+  height:100px;
+  
+  img{
+  height:93px;
+  }
+  }
+  
+
+}
+.jPuzzle-time{
+display:none !important;
+
+}
+#results
+{
+	
+	text-align: center;
+
+
+
+  margin-top:3em;
+  color:green;
+}
+
+p, h2
+{
+	text-align: center;
+}
+
+
+.content{
+
+padding:1em;
+
+}
+
+.quizz{
+.quizz_answer{
+margin:1em 0;
+
+}
+label{
+
+
+}
+input[type="radio"] {
+   position:absolute;
+   opacity: 0;
+   -moz-opacity: 0;
+   -webkit-opacity: 0;
+   -o-opacity: 0;
+}
+input[type="radio"] + label {
+   position:relative;
+   padding: 0 0 0 25px;
+   font-size: 20px;
+   line-height: 20px;
+}
+input[type="radio"] + label:before {
+   content:"";
+   display:block;
+   position:absolute;
+   top:2px;
+   height: 20px;
+   width: 20px;
+   background: white;
+   border: 1px solid gray;
+   box-shadow: inset 0px 0px 0px 2px white;
+   -webkit-box-shadow: inset 0px 0px 0px 2px white;
+   -moz-box-shadow: inset 0px 0px 0px 2px white;
+   -o-box-shadow: inset 0px 0px 0px 2px white;
+
+   border-radius: 50%;
+}
+input[type="radio"]:checked + label:before {
+   background: rgba(74,129,233,1);
+}
+
+
+.question {
+p{
+text-align:left;
+}
+*{
+font-size:1.2em !important;
+}
+
+h3{
+font-size:1.7em !important;
+line-height:1.3em;
+margin-bottom:0.7em;
+}
+}
+.check_place{
+text-align:center;
+position:absolute;
+bottom:1em;
+left:0px;
+right:0px;
+}
+border: 1px solid white;
+min-height:600px;
+padding:1em;
+padding-right:2em;
+position:relative;
+margin:auto;
+
+.quizz_ill{
+  position:absolute;top:20px;max-width:470px;right:-530px;background: rgba(250,250,250,0.8);
+  padding:10px;
+  img{
+  max-height:500px;
+  }
+}
+
+
+.quizz_img{
+  position:absolute;top:20px;max-width:470px;right:-530px;background: rgba(250,250,250,0.8);
+  padding:10px;
+  img{
+  max-height:500px;
+  }
+}
+
+
+.prev{
+background:rgba(52,52,52,1) !important;
+color:white !important;
+position:absolute;
+bottom:1em;
+left:1em;
+height:50px;
+font-size:35px !important;
+padding-top:10px;
+border-radius:50%;
+text-align:center;
+width:50px;
+box-sizing:border-box;
+}
+
+.next{
+background:rgba(52,52,52,1) !important;
+color:white !important;
+height:50px;
+font-size:35px !important;
+padding-top:10px;
+
+text-align:center;
+width:50px;
+box-sizing:border-box;
+position:absolute;
+bottom:1em;
+right:1em;
+
+border-radius:50%;
+}
+
+.info{
+display:none;
+color:red;
+
+}
+
+.response{
+
+.info{
+color:green;
+}
+}
+
+.success, .fail{
+position:absolute;
+bottom:4em;
+text-align:center;
+left:1em;
+right:1em;
+}
+.success{
+color:green;
+
+}
+
+.fail{
+color:red;
+}
+
+}
+
+.page{
+
+
+
+position:absolute;
+top:0;
+left:0;
+bottom:0px;
+right:0px;
+box-shadow:0 0 5px rgba(0,0,0,0.5);
+background:white;
+
+//width:1024px;
+//height:768px;
+
+
+}
+label{
+display:inline;
+}
+#overlay{
+cursor:pointer;
+
+}
+.navbar{
+
+.pull-right{
+margin-right:5px;
+}
+a{
+color:white !important;
+&:hover{
+text-decoration:none !important;
+}
+}
+}
+#logos{
+margin:30px;
+margin-top:10px;
+border-radius:5px;
+
+
+}
+.nav-stacked {
+margin:30px;
+a{
+background:white;
+
+}
+
+}
+ .header{
+ padding:10px;
+
+ a{
+ display:inline-block;
+ padding:5px;
+ text-decoration:none;
+ }
+ }
+ 
+ 
+
+ #main{
+ font-size:130%;
+ .btn{
+ font-family:"Comic sans ms"
+ }
+ 
+ .content{
+
+ }
+
+ margin:auto;
+ a{
+ color: #5890CD;
+ text-decoration:none;
+ 
+ &:hover{
+ text-decoration:underline;
+ }
+ }
+ table{
+ border-collapse:collapse;
+ td{
+ min-width:60px;
+ 
+ 
+ }
+ td, th{
+ border: 1px solid #c9c9c9;
+ padding:5px;
+ text-align:left;
+ }
+ }
+ 
+ }
+ body{
+ font-family: "Helvetica", "Verdana";
+ font-weight:100;
+ line-height:2.5em;
+ color:#303030;
+ padding:0px;
+ margin:0px;
+ font-size:12px;
+ 
+h3{
+ 
+ font-family:Futura;
+ font-size:18px;}
+ 
+ h1{
+ 
+ font-family:"Architects Daughter";
+ color:rgba(0,0,0,0.9);
+ font-size:27px;
+ font-weight:100;
+ 
+ }
+ }
+
+ #footer{
+ 
+ }
+
+#insectes_jeu_2{
+	.labels{
+		min-height:100px;
+	
+		.label{
+			background:#555555;
+			display:inline-block;
+			margin-left:5px;
+			margin-bottom:5px;
+			padding:0.5em 1em;
+			color:white;
+			border-radius:1.2em;
+
+			
+
+		}
+
+	}
+	.image{
+		float:left;
+		width:300px;
+		height:200px;
+		padding:0em;
+		padding-bottom:2em !important;
+
+
+		img{
+			max-width:100%;
+			max-height:100%;
+		}
+		position:relative;
+		text-align:center;
+		padding-bottom:1em;
+		
+		.receptable{
+			border:1px solid black;
+
+			.label{
+				text-align:center;
+				position:absolute;
+				padding-bottom:0.5em;
+				bottom:0px;
+				left:0px;
+				right:0px;
+			}
+
+			position:absolute;
+			top:0px;
+			bottom:0px;
+			left:0px;
+			right:0px;
+
+		}
+	}
+
+}
+#logos{
+text-align:center;
+background:white;
+padding:0.5em 0;
+img{
+max-height:120px;
+max-width:220px;
+margin:0px 1em;
+}
+
+}
+ 

app/assets/stylesheets/plaquettes.css.scss

@@ -1,109 +0,0 @@
-/*
-
- *= require_self
- 
- */
- 
- h3{
- margin-top:6em;
- border-bottom:1px dotted #b0cf81;
- padding-bottom:0.2em;
- 
- }
- #main{
- padding:1em;
-max-width:1024px;
- margin:auto;
- a{
- color: #5890CD;
- text-decoration:none;
- 
- &:hover{
- text-decoration:underline;
- }
- }
- table{
- border-collapse:collapse;
- td{
- min-width:60px;
- 
- 
- }
- td, th{
- border: 1px solid #c9c9c9;
- padding:5px;
- text-align:left;
- }
- }
- 
- }
- body{
- font-family: "Lucida Grande", "Verdana";
-
- color:#303030;
- padding:0px;
- margin:0px;
- }
-
- #footer{
- 
- }
-
-#insectes_jeu_2{
-	.labels{
-		min-height:100px;
-	
-		.label{
-			background:#555555;
-			display:inline-block;
-			margin-left:5px;
-			margin-bottom:5px;
-			padding:0.5em 1em;
-			color:white;
-			border-radius:1.2em;
-
-			
-
-		}
-
-	}
-	.image{
-		float:left;
-		width:300px;
-		height:200px;
-		padding:0em;
-		padding-bottom:2em !important;
-
-
-		img{
-			max-width:100%;
-			max-height:100%;
-		}
-		position:relative;
-		text-align:center;
-		padding-bottom:1em;
-		
-		.receptable{
-			border:1px solid black;
-
-			.label{
-				text-align:center;
-				position:absolute;
-				padding-bottom:0.5em;
-				bottom:0px;
-				left:0px;
-				right:0px;
-			}
-
-			position:absolute;
-			top:0px;
-			bottom:0px;
-			left:0px;
-			right:0px;
-
-		}
-	}
-
-}
-
- 

app/assets/stylesheets/vendor/framework/bootstrap.less

@@ -9,7 +9,7 @@
  */
 
 // Core variables and mixins
-@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+//@import "variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "mixins.less";
 
 // CSS Reset
@@ -66,4 +66,4 @@
 
 @import "slider.less";
 
-@import "responsive.less";
+

app/assets/stylesheets/vendor/framework/responsive.less

@@ -18,7 +18,7 @@
 // -------------------------
 // Required since we compile the responsive stuff separately
 
-@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+//@import "variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "mixins.less";
 
 

app/assets/stylesheets/vendor/framework/variables2.less

@@ -0,0 +1,301 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+@black:                 #000;
+@grayDarker:            #222;
+@grayDark:              #333;
+@gray:                  #555;
+@grayLight:             #999;
+@grayLighter:           #eee;
+@white:                 #fff;
+
+
+// Accent colors
+// -------------------------
+@blue:                  #049cdb;
+@blueDark:              #0064cd;
+@green:                 #46a546;
+@red:                   #9d261d;
+@yellow:                #ffc40d;
+@orange:                #f89406;
+@pink:                  #c3325f;
+@purple:                #7a43b6;
+
+
+// Scaffolding
+// -------------------------
+@bodyBackground:        @white;
+@textColor:             @grayDark;
+
+
+// Links
+// -------------------------
+@linkColor:             #08c;
+@linkColorHover:        darken(@linkColor, 15%);
+
+
+// Typography
+// -------------------------
+@sansFontFamily:        "Architects Daughter", Helvetica, Arial, sans-serif;
+@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+
+@baseFontSize:          14px;
+@baseFontFamily:        @sansFontFamily;
+@baseLineHeight:        20px;
+@altFontFamily:         @serifFontFamily;
+
+@headingsFontFamily:    "Stylograph";  // empty to use BS default, @baseFontFamily
+@headingsFontWeight:    normal;    // instead of browser default, bold
+@headingsColor:         inherit; // empty to use BS default, @textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
+@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
+@fontSizeMini:          @baseFontSize * 0.75; // ~11px
+
+@paddingLarge:          11px 19px; // 44px
+@paddingSmall:          2px 10px;  // 26px
+@paddingMini:           0 6px;   // 22px
+
+@baseBorderRadius:      4px;
+@borderRadiusLarge:     6px;
+@borderRadiusSmall:     3px;
+
+
+// Tables
+// -------------------------
+@tableBackground:                   transparent; // overall background-color
+@tableBackgroundAccent:             #f9f9f9; // for striping
+@tableBackgroundHover:              #f5f5f5; // for hover
+@tableBorder:                       #ddd; // table and cell border
+
+// Buttons
+// -------------------------
+@btnBackground:                     @white;
+@btnBackgroundHighlight:            darken(@white, 10%);
+@btnBorder:                         #ccc;
+
+@btnPrimaryBackground:              @linkColor;
+@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
+
+@btnInfoBackground:                 #5bc0de;
+@btnInfoBackgroundHighlight:        #2f96b4;
+
+@btnSuccessBackground:              #62c462;
+@btnSuccessBackgroundHighlight:     #51a351;
+
+@btnWarningBackground:              lighten(@orange, 15%);
+@btnWarningBackgroundHighlight:     @orange;
+
+@btnDangerBackground:               #ee5f5b;
+@btnDangerBackgroundHighlight:      #bd362f;
+
+@btnInverseBackground:              #444;
+@btnInverseBackgroundHighlight:     @grayDarker;
+
+
+// Forms
+// -------------------------
+@inputBackground:               @white;
+@inputBorder:                   #ccc;
+@inputBorderRadius:             @baseBorderRadius;
+@inputDisabledBackground:       @grayLighter;
+@formActionsBackground:         #f5f5f5;
+@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+@dropdownBackground:            @white;
+@dropdownBorder:                rgba(0,0,0,.2);
+@dropdownDividerTop:            #e5e5e5;
+@dropdownDividerBottom:         @white;
+
+@dropdownLinkColor:             @grayDark;
+@dropdownLinkColorHover:        @white;
+@dropdownLinkColorActive:       @white;
+
+@dropdownLinkBackgroundActive:  @linkColor;
+@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+@zindexDropdown:          1000;
+@zindexPopover:           1010;
+@zindexTooltip:           1030;
+@zindexFixedNavbar:       1030;
+@zindexModalBackdrop:     1040;
+@zindexModal:             1050;
+
+
+// Sprite icons path
+// -------------------------
+@iconSpritePath:          "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
+
+
+// Input placeholder text color
+// -------------------------
+@placeholderText:         @grayLight;
+
+
+// Hr border color
+// -------------------------
+@hrBorder:                @grayLighter;
+
+
+// Horizontal forms & lists
+// -------------------------
+@horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+@wellBackground:                  #f5f5f5;
+
+
+// Navbar
+// -------------------------
+@navbarCollapseWidth:             979px;
+@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
+
+@navbarHeight:                    40px;
+@navbarBackgroundHighlight:       #ffffff;
+@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
+@navbarBorder:                    darken(@navbarBackground, 12%);
+
+@navbarText:                      #777;
+@navbarLinkColor:                 #777;
+@navbarLinkColorHover:            @grayDark;
+@navbarLinkColorActive:           @gray;
+@navbarLinkBackgroundHover:       transparent;
+@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
+
+@navbarBrandColor:                @navbarLinkColor;
+
+// Inverted navbar
+@navbarInverseBackground:                #111111;
+@navbarInverseBackgroundHighlight:       #222222;
+@navbarInverseBorder:                    #252525;
+
+@navbarInverseText:                      @grayLight;
+@navbarInverseLinkColor:                 @grayLight;
+@navbarInverseLinkColorHover:            @white;
+@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
+@navbarInverseLinkBackgroundHover:       transparent;
+@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
+
+@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
+@navbarInverseSearchBackgroundFocus:     @white;
+@navbarInverseSearchBorder:              @navbarInverseBackground;
+@navbarInverseSearchPlaceholderColor:    #ccc;
+
+@navbarInverseBrandColor:                @navbarInverseLinkColor;
+
+
+// Pagination
+// -------------------------
+@paginationBackground:                #fff;
+@paginationBorder:                    #ddd;
+@paginationActiveBackground:          #f5f5f5;
+
+
+// Hero unit
+// -------------------------
+@heroUnitBackground:              @grayLighter;
+@heroUnitHeadingColor:            inherit;
+@heroUnitLeadColor:               inherit;
+
+
+// Form states and alerts
+// -------------------------
+@warningText:             #c09853;
+@warningBackground:       #fcf8e3;
+@warningBorder:           darken(spin(@warningBackground, -10), 3%);
+
+@errorText:               #b94a48;
+@errorBackground:         #f2dede;
+@errorBorder:             darken(spin(@errorBackground, -10), 3%);
+
+@successText:             #468847;
+@successBackground:       #dff0d8;
+@successBorder:           darken(spin(@successBackground, -10), 5%);
+
+@infoText:                #3a87ad;
+@infoBackground:          #d9edf7;
+@infoBorder:              darken(spin(@infoBackground, -10), 7%);
+
+
+// Tooltips and popovers
+// -------------------------
+@tooltipColor:            #fff;
+@tooltipBackground:       #000;
+@tooltipArrowWidth:       5px;
+@tooltipArrowColor:       @tooltipBackground;
+
+@popoverBackground:       #fff;
+@popoverArrowWidth:       10px;
+@popoverArrowColor:       #fff;
+@popoverTitleBackground:  darken(@popoverBackground, 3%);
+
+// Special enhancement for popovers
+@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
+@popoverArrowOuterColor:  rgba(0,0,0,.25);
+
+
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+@gridColumns:             12;
+@gridColumnWidth:         60px;
+@gridGutterWidth:         20px;
+@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// 1200px min
+@gridColumnWidth1200:     70px;
+@gridGutterWidth1200:     30px;
+@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
+
+// 768px-979px
+@gridColumnWidth768:      42px;
+@gridGutterWidth768:      20px;
+@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+@fluidGridColumnWidth:    percentage(@gridColumnWidth/@gridRowWidth);
+@fluidGridGutterWidth:    percentage(@gridGutterWidth/@gridRowWidth);
+
+// 1200px min
+@fluidGridColumnWidth1200:     percentage(@gridColumnWidth1200/@gridRowWidth1200);
+@fluidGridGutterWidth1200:     percentage(@gridGutterWidth1200/@gridRowWidth1200);
+
+// 768px-979px
+@fluidGridColumnWidth768:      percentage(@gridColumnWidth768/@gridRowWidth768);
+@fluidGridGutterWidth768:      percentage(@gridGutterWidth768/@gridRowWidth768);

app/controllers/plaquettes_controller.rb

@@ -6,8 +6,13 @@ class PlaquettesController < ApplicationController
 
   def show
 
+    respond_to do |format|
+      format.js {
+        
+      }
+      format.html {render :template => "plaquettes/"+params[:slug].to_s}
+    end
     
-    render :template => "plaquettes/"+params[:slug].to_s
 
   end
 end

app/helpers/plaquettes_helper.rb

@@ -16,4 +16,57 @@ module PlaquettesHelper
     raw("<div class='label' data-nbr='#{nbr}'>#{label}</div>")
     
   end
+  
+  def quizz(questions, success, concl)
+    num = rand(10000000)
+    r = ""
+    i=0
+    questions.each do |question|
+      i += 1
+      r+= quizz_question(i, question[0], question[1], question[2], questions.size, question, num)
+      
+    end
+    
+    r+= raw "<div class='question'>"
+    r+= raw content_tag("h3", success)
+    r+= raw content_tag("p", concl)
+    r+=raw content_tag( "div", "<", :class => " prev btn")
+      
+    r+= raw "</div>"
+    raw r
+  end
+  
+  def quizz_question(question_id, title, answers, response, tot, value, num)
+    content_tag "div", :class => "question" do 
+      r = ""
+      r+=raw content_tag("h3", raw(title))
+      r+=raw(content_tag("div",image_tag(value[3])+(content_tag("p", value[4]) if value[4] ).to_s, :class => "quizz_ill")) if value[3]
+      i = 0
+      answers.each do |answer|
+        i+= 1
+        r+=raw quizz_answer(question_id, answer, (true if response.to_i == i), num)
+      end
+      #r += content_tag "div", "bravo", :class => "success"
+      #r += content_tag "div", "erreur", :class => "fail"
+
+      
+      
+
+        #r += content_tag("div", content_tag("div", "corriger", :class => "btn btn-primary check"), :class => "check_place")
+        
+        if question_id > 1
+          r += content_tag "div", "<", :class => " prev btn"
+        end
+      if question_id < tot+1
+        r += content_tag "div", ">", :class => " next btn"
+      end
+      
+      raw r
+  end
+  end
+  def quizz_answer(question_id, value, response=false, num=1)
+    response = true if value[4] == true
+    raw(content_tag("div",raw(radio_button("quizz_#{num}", "question_#{question_id}", value[0].to_slug)+label("quizz_#{num}", "question_#{question_id}_#{value[0].to_slug}", " #{value[0]} ")+raw(content_tag("span",(response ? "Vrai"+(","if value[1]).to_s+" " : "Faux"+(","if value[1]).to_s+" ")+value[1].to_s, :class => "info")))+raw((content_tag("div",image_tag(value[2])+(content_tag("p", value[3]) if value[3] ).to_s, :class => "quizz_img") if value[2])), :class => "quizz_answer "+("response" if response).to_s))
+  end
+  
 end

app/views/layouts/plaquettes.html.haml

@@ -7,10 +7,14 @@
     = csrf_meta_tags
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta charset="utf-8">
-
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    = stylesheet_link_tag '/fonts/Stylograph/stylesheet.css' 
   %body
     
     
+
+    #overlay
+      = yield :overlay
     #main=yield
     
     

app/views/plaquettes copy/accueil.html.haml

@@ -0,0 +1,25 @@
+.page#acceuil
+  .content
+    %p Entre Dauphiné et Savoie, entre les contreforts de la Chartreuse et le lac de Paladru, le château de Longpra, écrin de verdure dans la vallée de l’Ainan, témoigne de sept cents ans d’histoire d’un terroir.
+    %p Le Château de Longpra, classé monument historique, est  en relation étroite avec le paysage environnant et représente un patrimoine architectural et naturel exceptionnel.
+
+    %p Dans le cadre du programme leader du Pays Voironnais, le Château de Longpra a demandé à l’association Le Pic Vert d’effectuer un inventaire de la faune et de la flore du parc et des alentours. Grâce à cet inventaire, 197 espèces végétales, 49 espèces d’oiseaux et 17 espèces de mammifères (dont 2 espèces de chauves –souris) ont été découvertes. 
+    %p Le Pic Vert a proposé au Château la mise en place d’un « hôtel » à insectes et un film sur la faune et la flore du Château à été produit.
+    %br
+    %p Ce document pédagogique vous permettra d’en savoir plus sur la biodiversité au Château de Longpra.
+    %br
+    %p Partez à la découverte de la faune et de la flore du Château à travers les thèmes suivants :
+
+
+
+
+  =link_to "La faune liée aux bâtiments", "/plaquettes/faune-batiments.html", :remote => true, :class => "btn btn-primary"
+  =link_to "Les vieux arbres du parc", "/plaquettes/arbres-parc.html", :remote => true, :class => "btn"
+  =link_to "Les insectes", "/plaquettes/insectes.html", :remote => true, :class => "btn"
+  =link_to "Le jardin du Château et le compost", "/plaquettes/jardins.html", :remote => true, :class => "btn"
+
+  #logos
+    =image_tag "plaquettes/logos/logo_pic_vert.png"
+    =image_tag "plaquettes/logos/logo_feader.jpg"
+    =image_tag "plaquettes/logos/logo_leader.jpg"
+    =image_tag "plaquettes/logos/logo_CAPV.jpg"

app/views/plaquettes copy/arbres-parc.html.haml

@@ -0,0 +1,22 @@
+.navbar.navbar-inverse.navbar-fixed-top
+  .navbar-inner{:style => "border-radius:0px;"}
+    .pull-right=link_to i(:"caret-left", :icon => false)+" Retour", "/plaquettes/accueil.html", :class => "btn btn-inverse", :remote => true
+
+
+.content  
+
+  %h1 Les vieux arbres du parc
+
+
+  %p Le parc du Château de Longpra possède quantité d’arbres remarquables, principalement  des tilleuls et des marronniers bi-centenaires.
+  %p A l’aspect irrégulier avec des creux ou des bourrelets, ils servent de gîte et de couvert pour de nombreux petits animaux. Un arbre peut accueillir un très grand nombre d’êtres vivants à tous les stades de sa vie, même mort. Un arbre mort tombé au sol va pourrir lentement. Des insectes viennent pondre à l’intérieur et leurs larves vont consommer du bois mort. 
+
+  %br
+  %p Le lierre, plante ligneuse grimpante est présente dans le parc du château. Cette plante est considérée à tort comme un parasite qui épuise et tue les arbres. Mais le lierre utilise simplement les arbres comme support pour chercher la lumière. La croissance décalée du lierre en fait un allié pour de nombreux animaux. En effet les abeilles et autre pollinisateurs profitent de ces fleurs en automne et les oiseaux et autres rongeurs se nourrissent de ses fruits durant tout l’hiver.
+
+%ul{:class => "nav nav-tabs nav-stacked"}
+  %li=link_to "Les vieux arbres : HLM de biodiversité ","puzzle-puceron", :remote => true
+  %li=link_to "La vie d’un arbre", "histoire-pollinisation.html", :remote => true
+  %li=link_to "Quiz", "quizz-arbres.html", :remote => true
+
+

app/views/plaquettes copy/faune-batiments.html.haml

@@ -0,0 +1,20 @@
+.page#faune-batiments
+  .content  
+    %h1 La faune liée aux bâtiments
+    %p Les bâtiments qui composent le château de Longpra, de style dauphinois, sont entourés d’un écrin de verdure. Cet ensemble est un espace pour la préservation de nombreux animaux qui trouvent en ces lieux accueillants une zone idéale pour se nourrir et se reproduire.
+    %p Comme vous l’avez vu dans le film de nombreuses espèces animales sont présentes au Château.
+    %p Parmi celles-ci, les chauves-souris. Le Château de Longpra accueille une colonie importante de petits Rhinolophes, qui trouve refuge dans les combles des dépendances.
+    %p La bergeronnette grise, facilement observable chasse sur les toits et allées du parc.
+    %p Le merle noir fait son nid dans les buissons et rosiers du parc.
+    %p Le faucon crécerelle niche dans les grands arbres, mais aussi dans les bâtiments tel que les granges. En 2012 un couple a niché près de l’entrée du château au sommet d’un arbre.
+    %p La chouette effraie visite régulièrement les dépendances du Château. On trouve parfois ses pelotes de réjections, contenant des restes de ses proies (os, poils…).
+    %p 
+      Le 
+      %strong moineau domestique
+      fait son nid dans les trous des murs et murets.
+    =image_tag "plaquettes/chauve-souri.jpg", :style => "height:500px;display:block;margin:auto;"
+
+  %ul{:class => "nav nav-tabs nav-stacked"}
+    %li=link_to "Puzzle d’une chauve-souris","puzzle-chauve-souris.html", :remote => true
+    %li=link_to "Où se cache les animaux au Château de Longpra", "animaux-longpra.html", :remote => true
+    %li=link_to "Quiz", "quizz-batiments.html", :remote => true

app/views/plaquettes copy/histoire-pollinisation.html.haml

@@ -0,0 +1,20 @@
+
+
+#insectes_jeu_1
+  %h2 Jeu 1
+  
+  .response{:style => "height:2em;"}
+    .win{:style => "display:none;"}
+      %p Bravo ! Tu as gagné, tu peux tirer les cheveux à l'animatrice !
+    .loose{:style => "display:none;"}
+      %p Perdu, tu dois donner 10€ à l'animatrice, c'est la vie !
+  %button.verif.btn.btn-primary Vérifier
+  %button.reset.btn Remettre à zero
+  .sortable{:style => "height:200px;"}
+    
+    =jeux_sortable_img("insectes_jeu_1", 4)
+    =jeux_sortable_img("insectes_jeu_1", 3)
+    
+    =jeux_sortable_img("insectes_jeu_1", 2)
+    =jeux_sortable_img("insectes_jeu_1", 5)
+    =jeux_sortable_img("insectes_jeu_1", 1)

app/views/plaquettes copy/index.html.haml

@@ -0,0 +1,10 @@
+
+.page#index{:style => "background:url('/assets/plaquettes/fond.jpg'); background-size:contain;"}
+  =image_tag "plaquettes/logos/logo_longpra.png", :style => "width:500px;margin:auto;padding-top:1em;display:block;"
+  %h1{:style => "text-align:center;color:white;font-size:4em;margin-top:2em;font-weight:normal;"} Plaquette pédagogique.
+  
+=render :template => "plaquettes/accueil"
+=render :template => "plaquettes/faune-batiments"
+
+
+

app/views/plaquettes copy/insectes.html.haml

@@ -0,0 +1,58 @@
+.navbar.navbar-inverse.navbar-fixed-top
+  .navbar-inner{:style => "border-radius:0px;"}
+    .pull-right=link_to i(:"caret-left", :icon => false)+" Retour", "/plaquettes/accueil.html", :class => "btn btn-inverse", :remote => true
+
+
+.content  
+
+
+  %h1 Le mur à insectes du Château de Longpra
+
+  %p Fabriqué principalement avec des matériaux naturels, le « mur à insectes » du Château de Longpra abrite un grand nombre de petites bêtes, principalement des insectes pollinisateurs.
+
+  %p La plupart des abeilles sauvages (90%) à l’inverse des abeilles domestiques ne vivent pas en groupe. Elles ne fabriquent pas de miel, mai un mélange de nectar et de pollen nécessaire à l’alimentation de leur larve.
+  %p Les insectes pollinisateurs comme les abeilles sauvages sont en voie de disparition. Ce déclin est dû à la raréfaction des abris et de la nourriture dont elles dépendent. 
+  %p Il est possible, en construisant des petites abris, d’améliorer leurs conditions de vie.
+
+  %p D’autres insectes comme par exemple les coccinelles sont des grands prédateurs de pucerons. Chaque larve de coccinelle peut ingérer près de 600 pucerons jusqu’à sa vie adulte durant laquelle elle en consomme plusieurs milliers. Il est très facile de fabriquer seul un abri à coccinelles à l’aide de quelques matériaux.
+
+%ul{:class => "nav nav-tabs nav-stacked"}
+  %li=link_to "Puzzle d’un puceron","puzzle-puceron", :remote => true
+  %li=link_to "l’histoire de la pollinisation", "histoire-pollinisation.html", :remote => true
+  %li=link_to "Les insectes qui trouvent refuge dans le mur à insectes","refuge-mur", :remote => true
+  %li=link_to "Quiz", "quizz-insecte.html", :remote => true
+
+  <!---
+  
+  #insectes_jeu_2
+  
+    %h2 Jeu 2
+    .labels
+      =jeux_receptable_label("Guêpe", 1)
+      =jeux_receptable_label("Ornithorynque bleu", 2)
+      =jeux_receptable_label("Moucheron funanbule", 3)
+      =jeux_receptable_label("Sarkoglyphte à tête bruni", 4)
+      =jeux_receptable_label("Fourmillier brun", 5)
+      =jeux_receptable_label("Pitbull musqué", 6)
+    
+    %p{:style => "clear:both;"}
+    %div.images
+      =jeux_receptable_element("insectes_jeu_2", 1)
+      =jeux_receptable_element("insectes_jeu_2", 2)
+      =jeux_receptable_element("insectes_jeu_2", 3)
+      =jeux_receptable_element("insectes_jeu_2", 4)
+
+      =jeux_receptable_element("insectes_jeu_2", 5)
+      =jeux_receptable_element("insectes_jeu_2", 6)
+  
+  
+  
+  
+  
+  %p{:style => "clear:both;"}
+  %br
+  %br
+  %br
+  %br
+  %br
+  ="-->"

app/views/plaquettes copy/jardins.html.haml

@@ -0,0 +1,27 @@
+.navbar.navbar-inverse.navbar-fixed-top
+  .navbar-inner{:style => "border-radius:0px;"}
+    .pull-right=link_to i(:"caret-left", :icon => false)+" Retour", "/plaquettes/accueil.html", :class => "btn btn-inverse", :remote => true
+
+
+.content  
+
+
+  %h1 Un jardin et son compost
+
+  %p Tout ce qui meurt, plantes et animaux, sur et dans le sol, finit par y être incorporé. 
+  %p Les végétaux morts sont décomposés sur le sol par des insectes, des invertébrés et des champignons. Petit à petit ils retournent dans le sol en l’enrichissant en humus indispensable à la croissance des végétaux.
+
+  %p Dans le jardin du Château de Longpra, la décomposition des plantes mortes ne se fait pas à même le sol mais dans un composteur.
+
+  %p Toutes les matières ne mettent pas le même temps pour se décomposer, par exemple une feuille ou un fruit mettra en moyenne quelques mois, tandis que des os d’animaux disparaîtront en plusieurs années. Il en va de même pour les déchets : un mouchoir aura totalement disparu en quelques mois tandis qu’un chewing-gum mettra environ 5 ans et un sac plastique entre 100 et 1000 ans.
+
+  %p Les plantes mortes peuvent encore être utiles. Par exemple, dans un jardin, un tas de feuilles mortes constituent un gîte très accueillant pour des petits mammifères sauvages (hérisson, mulot, campagnol) et des insectes (coccinelles en hiver).
+
+
+
+%ul{:class => "nav nav-tabs nav-stacked"}
+  %li=link_to "La décomposition d’une feuille de hêtre","puzzle-puceron", :remote => true
+  %li=link_to "Le rôle des « petites bêtes » dans la décomposition", "histoire-pollinisation.html", :remote => true
+  %li=link_to "Quiz", "quizz-jardin.html", :remote => true
+
+

app/views/plaquettes copy/quizz-arbres.html.haml

@@ -0,0 +1,12 @@
+.navbar.navbar-inverse.navbar-fixed-top
+  .navbar-inner{:style => "border-radius:0px;"}
+    .pull-right=link_to i(:"caret-left", :icon => false)+" Retour", "/plaquettes/arbres-parc.html", :class => "btn btn-inverse", :remote => true
+
+
+.content  
+
+  %h1 Quizz arbres
+
+  .quizz
+  =quizz [["Laquelle de ces plantes n’est pas un arbre ?", ["le lierre", "le sapin", "le chêne"], 1],["Faut-il couper les arbres morts ?", ["Oui", "Non"], 2],["Quel arbre ne trouve-t’ont pas au Château de Longpra", ["le chêne", "le palmier", "le sapin"], 2],["Quel oiseau fait son nid dans un trou d’arbre", ["le héron cendré ", "la buse variable", "le pic épeiche "], 3],["Le lierre est-il une plante parasite ?", ["Oui", "Non"], 2]]
+

app/views/plaquettes copy/quizz-batiments.html.haml

@@ -0,0 +1,12 @@
+.navbar.navbar-inverse.navbar-fixed-top
+  .navbar-inner{:style => "border-radius:0px;"}
+    .pull-right=link_to i(:"caret-left", :icon => false)+" Retour", "/plaquettes/faune-batiments.html", :class => "btn btn-inverse", :remote => true
+
+
+.content  
+
+  %h1 Quizz faune des bâtiments 
+
+  .quizz
+  =quizz [["un Murin de Daubenton (espèce de chauve-souris) mange combien de moustique en un été ?", ["60", "60 000", "6 millions"], 2],["quel animal est la proie de la chouette effraie ?", ["le campagnol", "le renard", "le moineau"], 1],["le lézard appartient  à la famille des ... ?", ["amphibiens", "mammifères", "reptiles"], 3],["en hiver ou trouve t’ont les petits rhinolophes au château de Longpra ?", ["dans le grenier", "dans la cave", "dans les vieux arbres "], 2],["comment appelle t’on les oiseaux qui vivent la nuit comme le blaireau ou la chouette", ["noctambules", "nocturnes", "nuisibles"],2]]
+

app/views/plaquettes copy/quizz-insecte.html.haml

@@ -0,0 +1,11 @@
+.navbar.navbar-inverse.navbar-fixed-top
+  .navbar-inner{:style => "border-radius:0px;"}
+    .pull-right=link_to i(:"caret-left", :icon => false)+" Retour", "/plaquettes/insectes.html", :class => "btn btn-inverse", :remote => true
+
+
+.content  
+  %h1 Quizz
+
+  .quizz
+  =quizz [["Quel insecte saute, vole, stridule, et ressemble au criquet ?", ["La mouche", "La sauterelle", "Le papillon"], 2],["Est-ce que les abeilles sauvages font du miel ?", ["Oui", "Non"], 2],["Comment les sauterelles chantent-elles ?", ["Avec leur voix", "En frottant leurs ailes", "En frottant leurs pattes arrière "], 2],["Comment s’appelle la nourriture préférée des papillons ?", ["Le nectar ", "La nectarine", "Le délice "], 1],["Quel insecte mange des pucerons ?", ["Le chrysope", "la mouche", "la coccinelle"],1]]
+

app/views/plaquettes copy/quizz-jardin.html.haml

@@ -0,0 +1,12 @@
+.navbar.navbar-inverse.navbar-fixed-top
+  .navbar-inner{:style => "border-radius:0px;"}
+    .pull-right=link_to i(:"caret-left", :icon => false)+" Retour", "/plaquettes/jardins.html", :class => "btn btn-inverse", :remote => true
+
+
+.content  
+
+  %h1 quizz jardin et compost
+
+  .quizz
+  =quizz [["le hérisson passe l’hiver", ["dans la cave du château", "sous un tas de bois", "sous un tas de feuille morte"], 1],["un jardin fleurit attirent les insectes", ["pollinisateurs", "carnivores", "colorés"], 2],["qu’elle petite bête ne participe pas à la décomposition de la matière organique", ["le cloporte", "la coccinelle", "la fourme"], 2],["le bousier porte son nom à cause", ["de sa couleur ", "de sa nourriture", "de sa forme "], 3],["pour sa croissance une plante à besoin de terre de soleil et :", ["d’engrais", "d’eau", "de sucre"], 2]]
+

app/views/plaquettes copy/show.js.erb

@@ -0,0 +1 @@
+$("#main").html("<%= escape_javascript(render(:template => "plaquettes/"+params[:slug].to_s)) %>");