A voir également:
- Javascript de questionnaire
- Telecharger javascript - Télécharger - Langages
- Javascript est activé mais ne fonctionne pas ✓ - Forum Réseaux sociaux
- Comment répondre à un questionnaire envoyé par mail - Forum Word
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Node.js javascript runtime virus ✓ - Forum Virus
4 réponses
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
20 mai 2008 à 00:25
20 mai 2008 à 00:25
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 :
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 :-)
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
Enfin évidemment ça fonctionne sous IE et FF
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/> ";
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/> </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 < ; et > ;
Enfin évidemment ça fonctionne sous IE et FF
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
20 mai 2008 à 00:42
20 mai 2008 à 00:42
Ha évidemment le forum s'emmèle les crayons avec ma fonction adapte()
A la place de
il faut lire
[Point-virgule] étant à remplacer par un véritable point-virgule donc ;
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,">[Point-virgule]");
txt = txt.replace(/[\n]/gi,"<br />");
return txt
}
[Point-virgule] étant à remplacer par un véritable point-virgule donc ;
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
20 mai 2008 à 21:00
20 mai 2008 à 21:00
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
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
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
22 mai 2008 à 11:34
22 mai 2008 à 11:34
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
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/> ";
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/> </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>