Micro Application 5 : Sondagilitis avec Angular.js

Introduction sondagilitis :


Aujourd’hui, je vais créer une micro-application de sondage avec Angular.js. à tester ici Je pars de zéro.

Après une  conception sur la papier de 7 minutes, j’initialise bien toutes les données dans des tableaux en début de script, le reste vient logiquement.

J’ai décidé de récupérer les valeurs des inputs radio avec Jquery, j’aurais pu les récupérer avec Angular.

Une fois de plus, angular démontre la force du live binding avec la création d’un tableau des réponses de l’utilisateur à la volée.

J’ai tout fait en 2h00, ce qui est pas mal. Bien sur, il est possible de l’améliorer énormément, avec inclusion d’images, timer, etc …

Pour le back end, on récupère les donnnées au choix, soit au format numérique, soit au format alphabétique. Bien sur, on peut envisager des statistiques sur les données récupérées ( En graphiques, en pourcentages, en moyennes, et j’en passe … et tout cela rapidement…)

Description :


Langage : Angular.js, Html5.0, Css3.0, Jquery

Temps de réalisation : 2h00

Type : Micro-Application Front office

Back-end possible : Php, Java.

Le code :


<html lang="fr" ng-app="Sondophile">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"></script>
		<!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>
			
var myApp = angular.module('Sondophile',[]);
				
// Controleur Angular
myApp.controller('NameCtrl', function($scope) {
				
	//Initialisation des Variables
	$scope.avancee		= 0;		// Avancée du participant
	$scope.reponse		= [];		// Réponses du participant au format INDEX(Des chiffres).
	$scope.reponseAlpha	= [];		// Réponses du participant au format alphabétique. (Exemple=chat).
	$scope.questions	= [];		// Tableau des Questions à poser.
	
	
	// Questions de démonstration			
	$scope.questions.push({
		t1:		" Votre couleur préférée",
		q1: 	"Bleu",
		q2: 	"Rouge",
		q3:		"Vert",	
	});			
					
				
	$scope.questions.push({
		t1:		" Votre animal préféré",
		q1: 	"Chat",
		q2: 	"Tigre",
		q3:		"Loup",	
	});	

		
	$scope.questions.push({
		t1:		" Votre Burger préféré",
		q1: 	"Cheese",
		q2: 	"Hamburger",
		q3:		"BIg Mac",	
	});			

	
	// Debut du programme
	
	// Affiche les questions.
	$scope.litQuestion	= function(){
		$scope.t1	=	$scope.questions[$scope.avancee].t1;
		$scope.q1	=	$scope.questions[$scope.avancee].q1;
		$scope.q2	=	$scope.questions[$scope.avancee].q2;
		$scope.q3	=	$scope.questions[$scope.avancee].q3;
	};
	
	
	
	// Enregistre les réponses.
	$scope.enregistreQuestion	= function(){
		if ($scope.avancee<$scope.questions.length){
			
			// Enregistrement en RAM des valeurs numériques de la réponse de l'utilisateur
			var k = $(':radio:checked').val(); 	// Récupération de la valeur choisie par l'utilisateur.
			$scope.reponse.push({'rep':k});		// Insertion de la valeur choisie par l'utilisateur dans le tableau reponse[].
			
			// Enregistrement en RAM des valeurs Alphabétique de la réponse de l'utilisateur
			var z=$scope.t1;	
			var a=eval("$scope.q"+k);		
			$scope.reponseAlpha.push({'question':z,'reponse':a});	// Insertion de la valeur choisie par l'utilisateur dans le tableau reponseAlpha[].
			
			$scope.avancee		+= 1;		// Incrémentation de l'avancée de l'utilisateur dans le sondage.
			$scope.litQuestion();			// On passe à la nouvelle question.
			}
		
		else{
			alert('Fin du test');
		}
	};	
$scope.litQuestion();	
// Fin du Controleur Angular
});		

</script>
</head>

<body ng-controller="NameCtrl" >
	
	<div class="form">
		<img src="sondagilitis.jpg" class="logo"></img>
	</div>
	
	<div class="form">	
		<h1>{{t1}}</h1>
		<p>
		<input type="radio" name="t1" value="1" checked >
		<label for="q1">{{q1}}</label>
		</p>
		<p>
		<input type="radio" name="t1" value="2" >
		<label for="q2">{{q2}}</label>
		</p>
		<p>
		<input type="radio" name="t1" value="3" >
		<label for="q3">{{q3}}</label>
		</p>

		<button ng-click="enregistreQuestion()" class="btn" >Répondre à la question</button>
	</div>
		
	<div class="form">	
		<h1>Vos réponses</h1>
		 <table class="CSSTableGenerator">
			 <tr>
				<td>Question</td>
				<td>Réponse</td>
			</tr>
			
			<tr ng-repeat="rep in reponseAlpha">
				<td>{{rep.question}} </td>
				<td>{{rep.reponse}} </td>
			</tr>
		</table>	
	</div>
</body>

<style>

.body{
	font-family:arial;
}	
p{
	font-size:1.3em;
	margin-left:10px;
}	
h1{	
	font-size:1.4em;
	text-align: center;
	background-color:lightgrey;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}
.logo{
		-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
	position:center;
	margin-top:45px;
	margin-left:100px;
}
.form{
	margin-left:auto;
	margin-top:auto;
	margin-right:auto;
	margin-bottom:auto;
	height:260px;
	width:700px;
	background-color:ivory;
		
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	-webkit-box-shadow:inset 2px 2px 2px 2px #635453;
	box-shadow:inset 2px 2px 2px 2px #635453;
}	
.btn {
	background: #d93484;
	background-image: -webkit-linear-gradient(top, #d93484, #b82b2b);
	background-image: -moz-linear-gradient(top, #d93484, #b82b2b);
	background-image: -ms-linear-gradient(top, #d93484, #b82b2b);
	background-image: -o-linear-gradient(top, #d93484, #b82b2b);
	background-image: linear-gradient(to bottom, #d93484, #b82b2b);
	-webkit-border-radius: 13;
	-moz-border-radius: 13;
	border-radius: 13px;
	text-shadow: 5px 3px 3px #666666;
	-webkit-box-shadow: 4px 8px 11px #666666;
	-moz-box-shadow: 4px 8px 11px #666666;
	box-shadow: 4px 8px 11px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
	padding: 21px;
	border: solid #d1047f 3px;
	text-decoration: none;
	float:right;
}
.btn:hover {
	background: #fcd63c;
	background-image: -webkit-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -moz-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -ms-linear-gradient(top, #fcd63c, #cc5414);
	background-image: -o-linear-gradient(top, #fcd63c, #cc5414);
	background-image: linear-gradient(to bottom, #fcd63c, #cc5414);
	text-decoration: none;
}
.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
		-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
		-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
		-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
		-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}
.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}
.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}
.CSSTableGenerator tr:hover td{
	background-color:#cccc99;
}
.CSSTableGenerator td{
	vertical-align:middle;
		background-color:#cccccc;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}
.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}
.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
	background-color:#003366;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:10px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #003366), color-stop(1, #003f7f) );
	background:-moz-linear-gradient( center top, #003366 5%, #003f7f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#003366", endColorstr="#003f7f");	background: -o-linear-gradient(top,#003366,003f7f);
	background-color:#003366;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

</style>
</html>









Publicités