Javascript de questionnaire

hgv85 -  
 hgv85 -
Bonjour,
Voilà quelques temps que j'ai trouvé ce script. Malheureusement, malgré tous mes essais, je n'arrive pas à le faire fonctionner sur Firefox. Il s'agit d'un script permettant aux internautes, en l'occurrence mes élèves, de répondre à un questionnaire. Puis en cliquant sur Valider, cela génère une nouvelle fenêtre html. Les élèves peuvent ainsi enregistrer leur fichier au format txt ; puis me l'envoyer à l'occasion pour correction. Je l'ai utilisé avec succès il y a quelques années. Mais désormais, dans la plupart des établissements, IE est banni au profit des produits de Mozilla... Si quelqu'un à une solution pour améliorer le script ou une idée de remplacement. Merci beaucoup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 5.50.4807.2300" name=GENERATOR><X-SAS-WINDOW RIGHT="698"
LEFT="106" BOTTOM="579" TOP="55"><title>modele_questionnaire</title></HEAD>
<BODY text=#000000 vLink=#FFFFFF link=#CC66CC bgColor=#FFFFFF>
<FORM name=reponses action="" method=post>
<H3 align="center">
<SCRIPT language=JavaScript><!--
// hide

var browser = navigator.appName;
var version = navigator.appVersion.charAt(0);

// Ecriture des questions et des resultats de l eleve

function fini() {

var pre_a = document.reponses.pres_a.value

var com_1 = document.reponses.comp_1.value


var com_4 = document.reponses.comp_4.value
var com_5 = document.reponses.comp_5.value

var exp_a = document.reponses.expl_a.value
var exp_b = document.reponses.expl_b.value
var exp_c = document.reponses.expl_c.value
var exp_d = document.reponses.expl_d.value

var conc = document.reponses.concl.value


var arepondu = "<HTML>"
arepondu = "<HEAD>"
arepondu += "<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>"
arepondu += "<title>Modèle de questionnaire</title><base target='_parent'></head>"

arepondu +="<H2>Réponse du questionnaire" + "<BR>"

arepondu += "<B>Date:</B> " + com_1 + "<BR>"

arepondu += "<B>Elève 1:</B> " + com_4 + "<BR>"
arepondu += "<B>Elève 2:</B> " + com_5 + "<BR>"

arepondu += "<H3>Réponse à la Q1</H3>" + pre_a + "<BR>"


arepondu += "<H3>Réponse à la Q2</H3>" + exp_a + "<BR>"
arepondu += "<H3>Réponse à la Q3</H3>" + exp_b + "<BR>"
arepondu += "<H3>Réponse à la Q4</H3>" + exp_c + "<BR>"
arepondu += "<H3>Réponse à la Q5</H3>" + exp_d + "<BR>"

arepondu += "<H3>Réponse à la Q6</H2>" + conc + "<BR>"

arepondu += "</BODY>"
arepondu += "</HTML>"

document.reponses.result.value = arepondu

//===============================================
// pour IE4

if(browser == "Microsoft Internet Explorer" && version >= 4) {

window.name = "novlfenetre"
novlfenetre = window.open("", "REPONSES", "menubar=yes, scrollbars=yes");
novlfenetre.document.open("text/html; charset=iso-8859-1");
novlfenetre.document.write(arepondu);
}

}
// --></SCRIPT>
<font color="#000000" size="+5">Modèle </font>
<FONT color=#000000 size="+5"> de questionnaire </FONT></H3>
<P align="center"> </P>

<div align="center">
<TABLE height=100 border=0>
<TBODY>
<TR>
<TD width=71 height=25>
<P>Date</P></TD>
<TD width="416" height=25>
<P><INPUT size=60 name=comp_1> </P></TD></TR>
<TR>
<TD width=71 height=25>
<P>Elève 1 </P></TD>
<TD height=25>
<P><INPUT name=comp_4 size="60"> </P></TD></TR>
<TR>
<TD width=71 height=23>
<P>Elève 2</P></TD>
<TD height=23>
<P><INPUT size=60 name=comp_5> </P></TD></TR></TBODY>
</TABLE>
</P>
</div>
<p align="center">Q1 - Texte Q1 ? </p>
<P align="center">
<textarea name=pres_a rows=9 cols=70></textarea>
</P>
<H4 align="center"> 
<SCRIPT language=JavaScript></SCRIPT>
<P align="center">Q2 - Texte Q2 ? </P>
<P align="center"><TEXTAREA name=expl_a rows=9 cols=70></TEXTAREA>
</P>
<P align="center"><br>
<br>
Q3 - Texte Q3 ? </P>
<P align="center"><TEXTAREA name=expl_b rows=9 cols=70></TEXTAREA>
</P>
<P align="center"> </P>
<P align="center">Q4 - Texte Q4 ?
<P align="center"><TEXTAREA name=expl_c rows=9 cols=70></TEXTAREA>
</P>
<P align="center"> </P>
<P align="center">Q5 - Texte Q5 ?
<P align="center"><TEXTAREA name=expl_d rows=9 cols=70></TEXTAREA>
</P>
<P align="center"> </P>
<p align="center">Q6 - Texte Q6 ? </p>
<P align="center"><TEXTAREA name=concl rows=9 cols=70></TEXTAREA>
</P>
<P align="center"> </P>
<P align="center">

<div align="center">
<TABLE cellPadding=0 bgColor=#FFFFFF border=1>
<TBODY>
<TR>
<TD width="162">
<P><INPUT onclick=fini() type=button value="Valider vos réponses" name=bt_fini>
</P></TD>
<TD width="99"><input type="reset" name="Submit" value="Réinitialiser"></TD>
</TR></TBODY>
</TABLE>
<TABLE bgColor=#c0c0c0 border=6>
<TBODY>
<TR>
<TD align=middle height=13>
<P> AFFICHAGE DE VOS REPONSES :</TD></TR>
<TR>
<TD align=middle>
<P align="center">
<TEXTAREA name=result rows=8 cols=58></TEXTAREA>
</TD></TR></TBODY>
</TABLE>
</P>
<ADDRESS>
</ADDRESS>
</div>
</FORM>
<div align="center">
</BODY>
</HTML>

4 réponses

Réponse 1 / 4
PhP Messages postés 1770 Date d'inscription   Statut Membre Dernière intervention   606
 
Bsr

Un prof qui prend soin de ses élèves comme c'est gentil ;-)

Bon ton code t'en fais ce que tu veux mais c'est plus trop ça D'Oh !

A la place tu peux utiliser cet exemple (qui demanderait à être améliorer un minimum)

Il se compose de 2 pages html à copier sous le même répertoire.

La page questionnaire.htm : 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Questionnaire</title>
<style>

*
{
	font-size : 12pt;
	font-family : arial;
}


.titre
{
	font-size : 20pt;
	font-weight : bold;
	text-align : center;
}


.question
{
	font-weight: bold;
	background: #0000B0;
	color: #FFFFFF;	
	border-style : solid;
	border-width : 1px;
	border-color : #0000c0;
}
</style>

<script language="JavaScript">
<!--
function adapte(txt)
{
	txt = txt.replace(/[<]/gi,"<");	
	txt = txt.replace(/[>]/gi,">");		
	txt = txt.replace(/[\n]/gi,"<br />");		
	return txt
}


var questions = new Array();
questions[0]="Trouve la réponse à la question n°1";
questions[1]="Cette question n°2 est plus difficile";
questions[2]="La question qui \"tue\" !";
// Les autres questions ici


function generer_questionnaire()
{
	var elt = document.getElementById("questionnaire");
	var data = "<table border='0'>";
	
	for(var i=0; i< questions.length; i++)
	{
		data += "<tr class=\"question\">";
		data += "<td>";
		data += "Question n°"+(i+1)+" : "+adapte(questions[i]);
		data += "</td>"
		data += "</tr>";
		
		
		data += "<tr>";
		data += "<td>";
		data += "<textarea id=\"reponse_"+i+"\" rows=9 cols=70=70></textarea><br/>&nbsp";
		data += "</td>"
		data += "</tr>";
	}	
	data += "</table>";
	
	
	elt.innerHTML=data;
}

function valider_questionnaire()
{
	var novlfenetre = window.open("reponses.htm", "REPONSES", "menubar=yes, scrollbars=yes"); 
}
//-->
</script>
</head>
<body onload="generer_questionnaire()">
<p class="titre">Modèle de questionnaire</p> 
<form action="" method="post">
<table align="center">
<tr>
<td>Date</td>
<td><input type="text" value="" size="60" id="date"></td>
</tr>
<tr>
<td>Elève 1</td>
<td><input type="text" value="" size="60" id="eleve1"></td>
</tr>
<tr>
<td>Elève 2</td>
<td><input type="text" value="" size="60" id="eleve2"></td>
</tr>
<tr><td colspan="2">
<div id="questionnaire">
</div>
</td></tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Valider vos réponses" onclick="valider_questionnaire()">
<input type="reset" value="Réinitialiser">
</td>
</tr>
</table>
</form>
</body>
</html>


Note combien il est facile d'ajouter des nouvelles questions dans mon ex , le formulaire étant généré dynamiquement par la fonction generer_questionnaire()

Il te suffit de modifier questions[xx]="Intitulé de la question";

Heu Elève1, Elève2 ???? ce ne serait pas plutôt Nom & Prénom ? Ah les mystères de l'éducation nationale ... lol


La page reponses.htm (aucun accent please :-) 


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Réponses au questionnaire</title>
<style>

*
{
	font-size : 12pt;
	font-family : arial;
}


.titre
{
	font-size : 20pt;
	font-weight : bold;
	text-align : center;
}


.question
{
	font-weight: bold;
	background: #0000B0;
	color: #FFFFFF;	
	border-style : solid;
	border-width : 1px;
	border-color : #0000c0;
}
</style>

<script language="JavaScript">
<!--
function adapte(txt)
{
	txt = txt.replace(/[<]/gi,"<");	
	txt = txt.replace(/[>]/gi,">");		
	txt = txt.replace(/[\n]/gi,"<br />");	
	return txt
}



function load()
{
	var elt = document.getElementById("reponses");
	var parentDoc = window.opener.document;
	
	document.getElementById("date").innerHTML=adapte(parentDoc.getElementById('date').value);
	document.getElementById("eleve1").innerHTML=adapte(parentDoc.getElementById('eleve1').value);
	document.getElementById("eleve2").innerHTML=adapte(parentDoc.getElementById('eleve2').value);
 
	var data = "<table border='0'>";
	
	for(var i=0; i< window.opener.questions.length; i++)
	{
		data += "<tr class=\"question\">";
		data += "<td>";
		data += "Réponse n°"+(i+1)+" - La question était : "+adapte(window.opener.questions[i]);
		data += "</td>"
		data += "</tr>";	
		
		data += "<tr class=\"reponse\">";
		data += "<td>";
		data += adapte(parentDoc.getElementById("reponse_"+i).value);
		data += "<br/>&nbsp;</td>"
		data += "</tr>";			
	}	
	data += "</table>";  
	elt.innerHTML=data;  
}
//-->
</script>
</head>
<body onload="load()">
<p class="titre">Réponses au questionnaire</p> 
<table>
<tr>
<td width="70px">Date :</td>
<td id="date"></td>
</tr>
<tr>
<td>Elève 1 :</td>
<td id="eleve1"></td>
</tr>
<tr>
<td>Elève 2 :</td>
<td id="eleve2"></td>
</tr>
<tr><td colspan="2">
<div id="reponses">
</div>
</td></tr>
</table>
</body>
</html>


la page qui affiche le résultat dynamiquement : rien à modifier quel que soit le nombre de questions.
Toute l'astuce consiste à faire dialoguer la fenêtre enfant avec sa fenêtre parent en utilisant la propriété opener : évidemment faut savoir quelle existe 

la fonction adapte() remplace les sauts de ligne par l'équivalent HTML à savoir <br /> et
 inversement les codes de balisage éventuels réservés pour le code HTML à savoir < et > 
respectivement par &lt ; et &gt ;


Enfin évidemment ça fonctionne sous IE et FF
0
Réponse 2 / 4
PhP Messages postés 1770 Date d'inscription   Statut Membre Dernière intervention   606
 
Ha évidemment le forum s'emmèle les crayons avec ma fonction adapte()

A la place de 

function adapte(txt)
{
	txt = txt.replace(/[<]/gi,"<");	
	txt = txt.replace(/[>]/gi,">");		
	txt = txt.replace(/[\n]/gi,"<br />");	
	return txt
}


il faut lire 

function adapte(txt)
{
	txt = txt.replace(/[<]/gi,"&lg[Point-virgule]");	
	txt = txt.replace(/[>]/gi,"&gt[Point-virgule]");		
	txt = txt.replace(/[\n]/gi,"<br />");	
	return txt
}


[Point-virgule] étant à remplacer par un véritable point-virgule donc ;
0
hgv85
 
Salut Php, merci de ton aide mais, ça ne fonctionne pas... J'ai suivi tes conseils et copier/coller ton script en veillant bien à corriger la fonction comme dans ton 2nd message. Qu'est qui ne fonctionne pas ? Merci.
0
Réponse 3 / 4
PhP Messages postés 1770 Date d'inscription   Statut Membre Dernière intervention   606
 
Bsr

Encore ce forum qui a modifié mon code j'ignore pourquoi !

Voici un lien direct ou tu peux télécharger les sources (au format zip)

http://www.nobodysperfect.freesurf.fr/ccm/qr.zip


A tester
0
hgv85
 
Merci Php. ça marche super. Par contre si je peux me permettre de te casser encore un peu les pieds : connaitrais-tu un système pour qu'il n'y ait qu'un seul fichier et non 2 ? Merci encore.
0
Réponse 4 / 4
PhP Messages postés 1770 Date d'inscription   Statut Membre Dernière intervention   606
 
Bonjour

C'est toujours possible mais ca ferme bcp de possibilité pour la page "réponses" (pratiquement impossible d'utiliser les styles, le contenu doit êter chargé dynamqiement) en plus c'est pas simple et les navigateurs n'apprécient pas trop qu'on modifie le code de leur page alors que la page n'est pas encore complètement chargée ! En effet lorsqu'on écrit

1) novlfenetre = window.open("", "REPONSES", "menubar=yes, scrollbars=yes");
2) novlfenetre.document.open("text/html; charset=iso-8859-1");

1 : demande au navigateur d'ouvrir une nouvelle fenêtre
2 : on essaie d'écrire dedans or rien n'indique que le fenêtre précédemment ouverte a fini de se charger donc 1 fois sur 2 ça plante

Maintenant voici un code qui peut marcher mais personnellement je ne l'utiliserai pas en explotation si j'avais une application web à maintenir : à toi de voir

L'idéal pour n'avoir qu'une page serait d'utiliser du PHP mais là c'est peut être se compliquer la vie pour rien ..

Ex 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Questionnaire</title>
<style>

*
{
	font-size : 12pt;
	font-family : arial;
}


.titre
{
	font-size : 20pt;
	font-weight : bold;
	text-align : center;
}


.question
{
	font-weight: bold;
	background: #0000B0;
	color: #FFFFFF;	
	border-style : solid;
	border-width : 1px;
	border-color : #0000c0;
}
</style>

<script language="JavaScript">
<!--
function adapte(txt)
{
	txt = txt.replace(/[<]/gi,"<");	
	txt = txt.replace(/[>]/gi,">");		
	txt = txt.replace(/[\n]/gi,"<br/>");		
	return txt
}


var questions = new Array();
questions[0]="Trouve la réponse à la question n°1";
questions[1]="Cette question n°2 est plus difficile";
questions[2]="La question qui \"tue\" !";
// Les autres questions ici


function generer_questionnaire()
{
	var elt = document.getElementById("questionnaire");
	var data = "<table border='0'>";
	
	for(var i=0; i< questions.length; i++)
	{
		data += "<tr class=\"question\">";
		data += "<td>";
		data += "Question n°"+(i+1)+" : "+adapte(questions[i]);
		data += "</td>"
		data += "</tr>";
		
		
		data += "<tr>";
		data += "<td>";
		data += "<textarea id=\"reponse_"+i+"\" rows=9 cols=70=70></textarea><br/>&nbsp";
		data += "</td>"
		data += "</tr>";
	}	
	data += "</table>";
	
	
	elt.innerHTML=data;
}

function generer_reponses()
{ 
	var data="<p style=\"font-size : 20pt; font-weight : bold;\">Réponses au questionnaire</p>";
	
	data += "<table border='0' style=\"font-family: arial\">";

	data += "<tr width=\"70px\">";
	data += "<td>";
	data += "Date";
	data += "</td>"
	data += "<td>";
	data += adapte(document.getElementById("date").value);
	data += "</td>"
	data += "</tr>";	
	
	data += "<tr>";
	data += "<td>";
	data += "Elève 1";
	data += "</td>"	
	data += "<td>";
	data += adapte(document.getElementById("eleve1").value);
	data += "</td>"
	data += "</tr>";	
	
	data += "<tr>";
	data += "<td>";
	data += "Elève 2";
	data += "</td>"	
	data += "<td>";
	data += adapte(document.getElementById("eleve2").value);
	data += "</td>"
	data += "</tr>";
	
	
	for(var i=0; i< questions.length; i++)
	{
		data += "<tr style=\"font-weight: bold;	background: #0000B0; color: #FFFFFF;\">";
		data += "<td colspan=2>";
		data += "Réponse n°"+(i+1)+" - La question était : "+adapte(questions[i]);
		data += "</td>"
		data += "</tr>";	
		
		data += "<tr class=\"reponse\">";
		data += "<td colspan=2>";
		data += adapte(document.getElementById("reponse_"+i).value);
		data += "<br/>&nbsp;</td>"
		data += "</tr>";			
	}	
	data += "</table>";  
		
	var elt = repwnd.document.getElementsByTagName("body")[0];
	elt.innerHTML=data;  
}


var repwnd=null;
function valider_questionnaire()
{
    if (repwnd != null) repwnd.close();
	repwnd = window.open("about:blank","_blank","menubar=yes, scrollbars=yes"); 
	
	// Si on tente d'écrire tout de suite dans la nouvelle fenêtre c'est merdique
	setTimeout("generer_reponses()",500);	
}
//-->
</script>
</head>
<body onload="generer_questionnaire()">
<p class="titre">Modèle de questionnaire</p> 
<form action="" method="post">
<table align="center">
<tr>
<td>Date</td>
<td><input type="text" value="" size="60" id="date"></td>
</tr>
<tr>
<td>Elève 1</td>
<td><input type="text" value="" size="60" id="eleve1"></td>
</tr>
<tr>
<td>Elève 2</td>
<td><input type="text" value="" size="60" id="eleve2"></td>
</tr>
<tr><td colspan="2">
<div id="questionnaire">
</div>
</td></tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Valider vos réponses" onclick="valider_questionnaire()">
<input type="reset" value="Réinitialiser">
</td>
</tr>
</table>
</form>
</body>
</html>
0
hgv85
 
Ca ne marche pas. Mais c'est pas grave tu m'as déjà bien aidé. Merci pour tout.
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Bonjour ! Comment faire un dépouillement sur excel ?
Antsampifaliana -
Raymond PENTIER -

4 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses