11521 sujets

JavaScript, DOM et API Web HTML5

Questionnaire avec bouton

Salut à tous!
Je dois réaliser un petit questionnaire avec javascript html comme suit. upload/1501679304-66850-capturedu2017-08-0116-49-09.png
Et donc j'ai un soucis sur le fait de calculer le score et envoyer sur un autre type de douleur (ici on a l'élancement) jusqu'à la fin.
Il faudra le faire avec JSON mais je bloque.
Ci-dessous mon code pour le moment
<!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" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
      <link href="style.css" rel="stylesheet" media="all" type="text/css"> 
    <title>Questionnaire</title>
   
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    
    <script language="Javascript">

    var object {
        "etape" [
                {"titre":"Elancements", 
                 "questions"[
                 "non":0,
                 "un peu":1, 
                 "moderement":2, 
                 "beaucoup":3, 
                 "extrêmement":4]
                }
                {"titre":"Pénétrante", 
                 "questions"[
                 "non":0,
                 "un peu":1, 
                 "moderement":2, 
                 "beaucoup":3, 
                 "extrêmement":4]
                }
                {"titre":"Décharges électriques", 
                 "questions"[
                 "non":0,
                 "un peu":1, 
                 "moderement":2, 
                 "beaucoup":3, 
                 "extrêmement":4]
                }
                
            ]
    }
         
        score = 0;
          
        function sc(nbr){
            score = nbr ;
            resultat();
        }
 
        function resultat() {   
            document.getElementById('score').innerHTML = 'Score :'+ score;
        }

        function Redirect() {
               window.location="index2.html?score="+score;
            }
 
    </script>
</head>
<center>
<body>
  
    
  
    <h3>Questionnaire de Saint Antoine forme abrégée</h3>
    <div id="questionnaire">
          
            Elancements <p>
     <div> <button type="button" style="width:200px" id="b0" onClick="javascript:sc(0);"/><span>non</span> </div> <br/>
       <div> <button type="button" style="width:200px" id="b1" onClick="javascript:sc(1);" /><span>un peu</span> </div> <br/>
        <div> <button type="button" style="width:200px" id="b2" onClick="javascript:sc(2);"/><span>modérement</span> </div> <br/>
        <div>   <button type="button" style="width:200px" id="b3" onClick="javascript:sc(3);" /><span>beaucoup</span> </div> <br/>
          <div>  <button type="button" style="width:200px" id="b4" onClick="javascript:sc(4);" /><span>extrêmement</span> </div> <br/>
         
    </div>
       
    <input type="button" value="suivant" onclick="Redirect();" />
    
</body>
</center>
Modérateur
Salut,

À quoi sert <fiedset>, <legend> et <input type="radio"> ? L'attribut for va t'il t'aider ? Est ce que la pseudo class (:checked) t'aidera ?
Modifié par niuxe (02 Aug 2017 - 16:39)
niuxe a écrit :
Salut,

À quoi sert &lt;fiedset&gt;, &lt;legend&gt; et &lt;input type="radio"&gt; ? Est ce que l'attribut for va t'il t'aider ? Est ce que la pseudo class (:checked) t'aidera ?


Merci pour ta réponse. Je viens d'utiliser un formulaire comme tu me l'as indiqué mais je ça ne résous toujours pas mon problème. Je sais pas comment utiliser le json avec les ancres # et faire mon questionnaire en une seule page.
Par contre je dois utiliser des simples boutons et non un bouton radio.
Aussi j'ai réfléchi à un code JSON de la sorte
{"step":{"non":0,"un peu":1,"modérement":2,"beaucoup":3, "extrêmement":4}}
Modérateur
Pour l'affichage des éléments html, tu n'as pas besoin d'avoir recours au JS ? Je ne pense pas que tu utilises NodeJS ? (quand bien même)

Suis mes bons conseils Smiley cligne . Si tu ne vois pas où je veux en venir, fait quelque chose de simple (!). Ensuite tu pourras dynamiser via un moteur de template si tu te sens capable de le faire avec underscore/loadash/mustache/handlebar/etc.. Underscore est très simple et remplit amplement cette tâche entres autres....
Modifié par niuxe (02 Aug 2017 - 17:13)
niuxe a écrit :
Pour l'affichage des éléments html, tu n'as pas besoin d'avoir recours au JS ? Je ne pense pas que tu utilises NodeJS ? (quand bien même)

Suis mes bons conseils Smiley cligne . Si tu ne vois pas où je veux en venir, fait quelque chose de simple (!). Ensuite tu pourras dynamiser via un moteur de template si tu te sens capable de le faire avec underscore/loadash/mustache/handlebar/etc.. Underscore est très simple et remplit amplement cette tâche entres autres....


Je pense que je ne me suis pas bien expliqué. En fait je dois calculer un score à la fin. Et mon environnement n'accepte que du Javascript pas de BD ni de PHP.
Ensuite sur mon image ci-haut la question était d'appuyer sur le bouton avec le niveau d'élancements. Mais il y'aura d'autres types de douleurs.
Au début j'allais le faire sur plusieurs pages html et envoyer le score à travers l'url à chaque fois mais j'aimerais l'optimiser et on m'a dit que c’était faisable avec JSON et l'ancre
Modérateur
dazageek a écrit :
Au début j'allais le faire sur plusieurs pages html et envoyer le score à travers l'url à chaque fois mais j'aimerais l'optimiser et on m'a dit que c’était faisable avec JSON et l'ancre


Tu peux le faire de plusieurs manières (sans avoir recours à une technologie serveur comme le python ou php ou etc.)

1. Fais d'abord l'intégration de toutes les parties du formulaire EN HTML seulement et sur une seul page. Smiley cligne .
2. Tu expliques avec tes mots, comment tu vois la manière de procéder suivant les étapes du code.
3. Si tu peux, essaies de commencer ton JS. Si possible sans que ce soit du Javascript intrusif/obstructif


ps : Je ne viens pratiquement plus sur Alsacreations. Pourquoi ?
- règle 5 du forum
- Je n'aime pas me prendre la tête avec des discussions débiles Smiley hum
Modifié par niuxe (02 Aug 2017 - 21:05)
Sujet clos
Aller à