shanti
-
12 mars 2010 à 03:24
Alain_42
Messages postés5361Date d'inscriptiondimanche 3 février 2008StatutMembreDernière intervention13 février 2017
-
12 mars 2010 à 18:26
Bonjour,
Je suis débutante en script, je fais une page pour mon site web pour le plaisir...
J'ai élaboré un questionnaire. Selon la réponse donnée, le participant voit apparaître telle ou telle question.
Malheureusement, toutes les questions apparaissent en même temps!! Voici le script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Quel personnage des Chroniques de Sohn êtes-vous?</title>
</head>
<!-- le code java script -->
<SCRIPT language="javascript">
<!--
//cache les éléments en fonction du navigateur et de la div
function cache(nom) {
if (document.getElementById) {
document.getElementById(nom).style.display = 'none';
}
else {
if (document.layers) {
document.layers[nom].display = 'none';
}
else {
document.all[nom].style.display = 'none';
}
}
}
//Affiche les éléments en fonction du navigateur et de la div
function affiche(nom) {
if (document.getElementById) {
document.getElementById(nom).style.display = 'block';
}
else {
if (document.layers) {
document.layers[nom].display = 'block';
}
else {
document.all[nom].style.display = 'block';
}
}
}
//affiche la question suivante correspondante au choix de la 1
function afficheQuestion2(){
//on commence par cacher toutes les questions
cache('question2_');
//pour tous les choix de la question 1
for (i=0; i<2; i++){
//si une réponse est choisie
if(document.quizz.question1[i].checked){
//affiche la qestion associée
affiche('question2_'+i);
}
}
}
//affiche la question 3 suite à un choix dans une des question 2
function afficheQuestion3(){
// on commence par cacher la question 3
cache('question3_');
//pour la question 2_0
for (i=0; i<2; i++){
//si l'une des réponses est choisie
if(document.quizz.question2_0[i].checked){
//on affiche la question 3
affiche('question3_');
}
}
}
function afficheQuestion4(){
cache('question4');
//pour la question 2_1
for (i=0; i<4; i++){
//si l'une des réponses est choisie
if(document.quizz.question2_1[i].checked){
//on affiche la question 3
affiche('question4');
}
}
//pour la question 3_0
for (i=0; i<4; i++){
//si l'une des réponses est choisie
if(document.quizz.question3_0[i].checked){
//on affiche la question 4
affiche('question4');
}
}
//pour la question 3_1
for (i=0; i<3; i++){
//si l'une des réponses est choisie
if(document.quizz.question3_1[i].checked){
//on affiche la question 4
affiche('question4');
}
}
}
//affiche la question suivante correspondante au choix de la 1
function afficheQuestion5(){
//on commence par cacher toutes les questions
cache('question5_0');
cache('question5_1');
cache('question5_2');
//pour tous les choix de la question 1
for (i=0; i<3; i++){
//si une réponse est choisie
if(document.quizz.question4[i].checked){
//affiche la qestion associée
affiche('question5_'+i);
}
}
}
//affiche la question 3 suite à un choix dans une des question 2
function afficheQuestion3(){
// on commence par cacher la question 3
cache('question3');
//pour la question 2_0
for (i=0; i<4; i++){
//si l'une des réponses est choisie
if(document.quizz.question2_0[i].checked){
//on affiche la question 3
affiche('question3');
}
}
//pour la question 2_1
for (i=0; i<5; i++){
//si l'une des réponses est choisie
if(document.quizz.question2_1[i].checked){
//on affiche la question 3
affiche('question3');
}
}
//pour la question 2_2
for (i=0; i<2; i++){
//si l'une des réponses est choisie
if(document.quizz.question2_2[i].checked){
//on affiche la question 3
affiche('question3');
}
}
//pour la question 2_3
for (i=0; i<2; i++){
//si l'une des réponses est choisie
if(document.quizz.question2_3[i].checked){
//on affiche la question 3
affiche('question3');
}
}
}
//affiche la question suivante correspondante au choix de la 3
function afficheQuestion4(){
//on commence par cacher toutes les questions
cache('question4_0');
cache('question4_1');
cache('question4_2');
cache('question4_3');
//pour tous les choix de la question 1
for (i=0; i<4; i++){
//si une réponse est choisie
if(document.quizz.question3[i].checked){
//affiche la qestion associée
affiche('question4_'+i);
}
}
}
//affiche la question 5 suite à un choix dans une des question 6
function afficheQuestion6(){
// on commence par cacher la question 6
cache('question6');
//pour la question 5_0
for (i=0; i<2; i++){
//si l'une des réponses est choisie
if(document.quizz.question5_0[i].checked){
//on affiche la question 3
affiche('question6');
}
}
//pour la question 5_1
for (i=0; i<6; i++){
//si l'une des réponses est choisie
if(document.quizz.question5_1[i].checked){
//on affiche la question 3
affiche('question6');
}
}
//pour la question 5_2
for (i=0; i<4; i++){
//si l'une des réponses est choisie
if(document.quizz.question5_2[i].checked){
//on affiche la question 3
affiche('question6');
}
}
}
//affiche la question suivante correspondante au choix de la 1
function afficheQuestion7(){
//on commence par cacher toutes les questions
cache('question7_0');
cache('question7_1');
cache('question7_2');
//pour tous les choix de la question 1
for (i=0; i<3; i++){
//si une réponse est choisie
if(document.quizz.question6[i].checked){
//affiche la qestion associée
affiche('question7_'+i);
}
}
}
//affiche la question 3 suite à un choix dans une des question 2
function afficheQuestion8(){
// on commence par cacher la question 3
cache('question8');
//pour la question 7_2
for (i=0; i<2; i++){
//si l'une des réponses est choisie
if(document.quizz.question7_2[i].checked){
//on affiche la question 3
affiche('question8');
}
}
}
//-->
</SCRIPT>
<!-- puis le corps de la page -->
<body>
<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="0" height="0" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab">
<param name="src" value="web_media/yoga - relaxation - shakuhachi - the Japanese Flute (Meditation Music)(1)(1).mp3" /><embed type="application/x-mplayer2" width="0" height="0" src="web_media/yoga - relaxation - shakuhachi - the Japanese Flute (Meditation Music)(1)(1).mp3"></embed>
</object>
<!-- ... -->
<!-- ... -->
<form action="data/resulatslab.php" method="post" name="quizz" id="quizz">
<div id="question1"><p>1 Devant les obstacles de la vie, je préfère :<br />
combattre<input type="radio" value="1" name="question1" onClick="afficheQuestion2()" /><br />
m'adapter<input type="radio" value="2" name="question1" onClick="afficheQuestion2()" /><br />
</p></div>
<div id="question2_0"><p>2_0Pour résoudre des problèmes, rien ne vaut :<br />
de l'énergie<input type="radio" value="3" name="question2_0" onClick="afficheQuestion3()" /><br />
de la réflexion<input type="radio" value="4" name="question2_0" onClick="afficheQuestion3()" /><br />
</p></div>
<div id="question3_0"><p>3_0Lorsque j’exprime de la colère :<br />
c'est en réponse de celle de l'autre<input type="radio" value="5" name="question3_0" onClick="afficheQuestion4()" /><br />
c'est justifié<input type="radio" value="6" name="question3_0" onClick="afficheQuestion4()" /><br />
je vois rouge<input type="radio" value="7" name="question3_0" onClick="afficheQuestion4()" /><br />
pas question de s'excuser<input type="radio" value="8" name="question3_0" onClick="afficheQuestion4()" /><br />
</p></div>
<div id="question3_1"><p>3_1Dans une dispute :<br />
je tourne les arguments de l'autre à mon avantage>input type="radio" value="9" name="question3_1" onClick="afficheQuestion4()" /><br />
je me rallie à la cause du groupe<input type="radio" value="10" name="question3_1" onClick="afficheQuestion4()" /><br />
je rallie les autres à ma cause<input type="radio" value="11" name="question3_1" onClick="afficheQuestion4()" />
</p></div>
<div id="question2_1"><p>2_1Dans un conflit avec une autre personne :<br />
je comprend tout à fait la position de l'autre<input type="radio" value="12" name="question2_1" onClick="afficheQuestion4()" /><br />
je trouve les arguments pour gagner mon point<input type="radio" value="13" name="question2_1" onClick="afficheQuestion4()" /><br />
j'essaie de calmer le jeu<input type="radio" value="14" name="question2_1" onClick="afficheQuestion4()" /><br />
je prends du recul pour être objectif,objective<input type="radio" value="15" name="question2_1" onClick="afficheQuestion4()" /><br />
je porte attention aux enjeux plus globaux<input type="radio" value="16" name="question2_1" onClick="afficheQuestion4()" />
</p></div>
<div id="question4"><p>4Dans ma vie, je travaille beaucoup :<br />
sur moi-même<input type="radio" value="17" name="question4" onClick="afficheQuestion5()" /><br />
sur l'autre<input type="radio" value="18" name="question4" onClick="afficheQuestion5()" /><br />
pour ma communauté<input type="radio" value="19" name="question4" onClick="afficheQuestion5()" /><br />
</p></div>
<div id="question5_0"><p>5_0Je suis plus fort sur :<br />
la persévérance<input type="radio" value="20" name="question5_0" onClick="afficheQuestion6()" /><br />
le sens du concret<input type="radio" value="21" name="question5_0" onClick="afficheQuestion6()" /><br />
</p></div>
<div id="question5_1"><p>5_1Avec l'autre, je prévilégie :<br />
d`être totalement présent, présente<input type="radio" value="22" name="question5_1" onClick="afficheQuestion6()" /><br />
de lui refléter ce qu'il, elle est réellement<input type="radio" value="23" name="question5_1" onClick="afficheQuestion6()" /><br />
d'être attentionné, attentionnée<input type="radio" value="24" name="question5_1" onClick="afficheQuestion6()" /><br />
d'être tendre<input type="radio" value="25" name="question5_1" onClick="afficheQuestion6()" /><br />
d'être juste<input type="radio" value="26" name="question5_1" onClick="afficheQuestion6()" /><br />
de le deviner<input type="radio" value="27" name="question5_1" onClick="afficheQuestion6()" />
</p></div>
<div id="question5_2"><p>5_2J'aide ma communauté :<br />
en me préoccupant de tous et chacun<input type="radio" value="28" name="question5_2" onClick="afficheQuestion6()" /><br />
en défendant les intérêts communs<input type="radio" value="29" name="question5_2" onClick="afficheQuestion6()" /><br />
en sachant prendre des décisions au nom de tous<input type="radio" value="30" name="question5_2" onClick="afficheQuestion6()" /><br />
en participant à ses traditions<input type="radio" value="31" name="question5_2" onClick="afficheQuestion6()" />
</p></div>
<div id="question6"><p>6Dans ma vie, ma priorité se trouve à être :<br />
moi-même<input type="radio" value="32" name="question6" onClick="afficheQuestion7()" /><br />
les êtres qui me sont chers<input type="radio" value="33" name="question6" onClick="afficheQuestion7()" /><br />
ma communauté<input type="radio" value="34" name="question6" onClick="afficheQuestion7()" />
</p></div>
<div id="question7_1"><p>7_1Le plus beau cadeau à faire à ceux qu'on aime est :<br />
savoir se sacrifier pour eux<input type="radio" value="37" name="question87_1" /><br />
savoir leur être fidèle<input type="radio" value="38" name="question7_1/><br />
savoir être attentionné, attentionnée envers eux<input type="radio" value="39" name="question7_1" /><br /><p>
<button type="submit" name="resultats"><img src="web_images/dragon.jpg" height="100" width="100" alt="resultats" /></button>
</p></div>
<div id="question7_2"><p>7_2Une vie en société harmonieuse exige :<br />
de la discipline<input type="radio" value="40" name="question7_2" onClick="afficheQuestion8()" /><br />
la liberté d'expression<input type="radio" value="41" name="question7_2" /><br />
</p></div>
<div id="question8"><p>8Diriger un peuple, c'est :<br />
se sentir responsable de tous et chacun<input type="radio" value="42" name="question8" /><br />
le libérer de ceux qui l'oppressent<input type="radio" value="43" name="question8" /><br />
s'appuyer sur l'Histoire et les traditions<input type="radio" value="44" name="question8" /><br />
se dévouer pour lui<input type="radio" value="45" name="question8" /><br />
exercer un leadership fort<input type="radio" value="46" name="question8" /><br />
lui faire honneur<input type="radio" value="47" name="question8" /><p>
<button type="submit" name="resultats"><img src="web_images/dragon.jpg" height="100" width="100" alt="resultats" /></button>
</p></div>
</form>
<!-- ... -->
<!-- ... -->
<script language="JavaScript">
<!--
//pour que les fonctions s'initialise et comme rien ne sera choisi les div ne s'afficheront pas
afficheQuestion2();
afficheQuestion3();
afficheQuestion4();
afficheQuestion5();
afficheQuestion6();
afficheQuestion7();
afficheQuestion8();
afficheQuestion9();
J ai moi meme essayé une fois de faire un QCM en javascript lors de mon diplome pour un projet
Mais j ai du abandonné, c etait trop compliqué. J ai perdu 2mois a essayé de le faire. j en avais trop marre et aucune reference sur le web à ce sujet au niveau des QCM en javascript
Donc si ça te prend la tete, moi je te conseille de pas le faire, ça te fera gagné du temps
Alain_42
Messages postés5361Date d'inscriptiondimanche 3 février 2008StatutMembreDernière intervention13 février 2017894 12 mars 2010 à 18:26
et en procédant comme ça:
les aiguillages se font lors de l'appel de la fonction a chaque bouton radio
et au départ en CSS on cache toutes les questions >1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Quel personnage des Chroniques de Sohn êtes-vous?</title>
</head>
<!-- le code java script -->
<script type="text/javascript" language="javascript">
<!--
function masquer_afficher(calque,action){
if(action=="afficher"){
if (document.getElementById)
document.getElementById(calque).style.visibility="visible";
if (document.all && !document.getElementById)
document.all[calque].style.display="none";
if (document.layers)
document.layers[calque].visibility="visible";
}else if(action="masquer"){
if (document.getElementById)
document.getElementById(calque).style.visibility="hidden";
if (document.all && !document.getElementById)
document.all[calque].style.display="block";
if (document.layers)
document.layers[calque].visibility="hidden";
}
}
//-->
</script>
<style type="text/css">
.questions_suivantes{
display:none;
}
</style>
</head>
<!-- puis le corps de la page -->
<body>
<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="0" height="0" codebase="http://activex.microsoft.com/">
<param name="src" value="web_media/yoga - relaxation - shakuhachi - the Japanese Flute (Meditation Music)(1)(1).mp3" /><embed type="application/x-mplayer2" width="0" height="0" src="web_media/yoga - relaxation - shakuhachi - the Japanese Flute (Meditation Music)(1)(1).mp3"></embed>
</object>
<!-- ... -->
<!-- ... -->
<form action="data/resulatslab.php" method="post" name="quizz" id="quizz">
<div id="question1"><p>1 Devant les obstacles de la vie, je préfère :<br />
combattre<input type="radio" value="1" name="question1" onClick="masquer_afficher('question2_0','afficher');" /><br />
m'adapter<input type="radio" value="2" name="question1" onClick="masquer_afficher('question2_0','afficher');" /><br />
</p></div>
<div id="question2_0" class="questions_suivantes"><p>2_0Pour résoudre des problèmes, rien ne vaut :<br />
de l'énergie<input type="radio" value="3" name="question2_0" onClick="masquer_afficher('question3_0','afficher');" /><br />
de la réflexion<input type="radio" value="4" name="question2_0" onClick="masquer_afficher('questions3_0','afficher');" /><br />
</p></div>
<div id="question3_0" class="questions_suivantes"><p>3_0Lorsque j’exprime de la colère :<br />
c'est en réponse de celle de l'autre<input type="radio" value="5" name="question3_0" onClick="masquer_afficher('question4','afficher');" /><br />
c'est justifié<input type="radio" value="6" name="question3_0" onClick="masquer_afficher('question4','afficher');" /><br />
je vois rouge<input type="radio" value="7" name="question3_0" onClick="masquer_afficher('question4','afficher');" /><br />
pas question de s'excuser<input type="radio" value="8" name="question3_0" onClick="masquer_afficher('question4','afficher');" /><br />
</p></div>
<div id="question3_1" class="questions_suivantes"><p>3_1Dans une dispute :<br />
je tourne les arguments de l'autre à mon avantage>input type="radio" value="9" name="question3_1" onClick="afficheQuestion4()" /><br />
je me rallie à la cause du groupe<input type="radio" value="10" name="question3_1" onClick="afficheQuestion4()" /><br />
je rallie les autres à ma cause<input type="radio" value="11" name="question3_1" onClick="afficheQuestion4()" />
</p></div>
etc....
</body>
</html>
