<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal"> </p> <p class="MsoNormal">Fichier html final :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'> <html></p> <p class="MsoNormal" style='border:none;padding:0cm'> <head></p> <p class="MsoNormal" style='border:none;padding:0cm'><meta charset="ISO"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <title>Questionnaire interactif en jQuery</title></p> <p class="MsoNormal" style='border:none;padding:0cm'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <body></p> <p class="MsoNormal" style='border:none;padding:0cm'><div id='app'></p> <p class="MsoNormal" style='border:none;padding:0cm'> <form></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="question"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="texte"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Question 1</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> Le code jQuery s'execute :<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r1" name="q1" value='1' v-model="choix1">Dans le</p> <p class="MsoNormal" style='border:none;padding:0cm'> navigateur<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r2" name="q1" value='2' v-model="choix1">Sur le serveur ou</p> <p class="MsoNormal" style='border:none;padding:0cm'> est stocke le code<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r3" name="q1" value='3' v-model="choix1">Tantot dans le</p> <p class="MsoNormal" style='border:none;padding:0cm'> navigateur, tantot sur le serveur<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br><span class="reponse" id="reponse1" v-bind:style="{display : etat, color : couleur1}">Le code jQuery n'est</p> <p class="MsoNormal" style='border:none;padding:0cm'> autre que du JavaScript. a ce titre, il s'execute toujours sur les</p> <p class="MsoNormal" style='border:none;padding:0cm'> clients (ordinateurs, tablettes et telephones) qui font reference a</p> <p class="MsoNormal" style='border:none;padding:0cm'> ce code via une page HTML. La bonne reponse est donc la</p> <p class="MsoNormal" style='border:none;padding:0cm'> premiere.</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <img id="img1" :src="image1" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="question"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="texte"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Question 2</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> Lorsque l'on veut executer du code jQuery, attendre la</p> <p class="MsoNormal" style='border:none;padding:0cm'> disponibilite du DOM est :<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r4" name="q2" value='4' v-model="choix2">Vital<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r5" name="q2" value='5' v-model="choix2">Inutile<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r6" name="q2" value='6' v-model="choix2">Parfois important,</p> <p class="MsoNormal" style='border:none;padding:0cm'> parfois sans importance<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br><span class="reponse" id="reponse2" v-bind:style="{display : etat, color : couleur2}">Il est imperatif</p> <p class="MsoNormal" style='border:none;padding:0cm'> d'attendre la disponibilite du DOM avant d'executer du code jQuery.</p> <p class="MsoNormal" style='border:none;padding:0cm'> Sans quoi, ce code pourrait s'appliquer a un element indisponible et</p> <p class="MsoNormal" style='border:none;padding:0cm'> provoquer un comportement inattendu, voire meme un plantage du</p> <p class="MsoNormal" style='border:none;padding:0cm'> navigateur.</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <img id="img2" :src="image2" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="question"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div class="texte"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Question 3</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> Pour chainer deux methodes jQuery :<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r7" name="q3" value='7' v-model="choix3">Il faut les mettre</p> <p class="MsoNormal" style='border:none;padding:0cm'> l'une a la suite de l'autre en les separant par une virgule<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r8" name="q3" value='8' v-model="choix3">Il faut les mettre</p> <p class="MsoNormal" style='border:none;padding:0cm'> l'une a la suite de l'autre en les separant par un point decimal<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input type="radio" id="r9" name="q3" value='9' v-model="choix3">Il est impossible de</p> <p class="MsoNormal" style='border:none;padding:0cm'> chainer deux methodes jQuery<br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br><span class="reponse" id="reponse3" v-bind:style="{display : etat, color : couleur3}">L'execution d'un</p> <p class="MsoNormal" style='border:none;padding:0cm'> selecteur jQuery produit un objet jQuery sur lequel il est possible</p> <p class="MsoNormal" style='border:none;padding:0cm'> d'appliquer une methode jQuery. Cette methode produit elle-meme un</p> <p class="MsoNormal" style='border:none;padding:0cm'> objet jQuery. Il est donc possible de lui appliquer une autre</p> <p class="MsoNormal" style='border:none;padding:0cm'> methode en utilisant le caractere de liaison habituel : le point</p> <p class="MsoNormal" style='border:none;padding:0cm'> decimal.</span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> <img id="img3" :src="image3" /></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </form></p> <p class="MsoNormal" style='border:none;padding:0cm'> <button type="text" @click="tester">Tester les reponses </button></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="./app.js"></script></p> <p class="MsoNormal" style='border:none;padding:0cm'> </body></p> <p class="MsoNormal" style='border:none;padding:0cm'> </html></p> </div> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal">Script app.js final</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'>const app = Vue.createApp({</p> <p class="MsoNormal" style='border:none;padding:0cm'> data() {</p> <p class="MsoNormal" style='border:none;padding:0cm'> return {</p> <p class="MsoNormal" style='border:none;padding:0cm'> reponse1: 0,</p> <p class="MsoNormal" style='border:none;padding:0cm'> reponse2: 0,</p> <p class="MsoNormal" style='border:none;padding:0cm'> reponse3: 0,</p> <p class="MsoNormal" style='border:none;padding:0cm'> etat: 'none',</p> <p class="MsoNormal" style='border:none;padding:0cm'> choix1: '0',</p> <p class="MsoNormal" style='border:none;padding:0cm'> choix2: '0',</p> <p class="MsoNormal" style='border:none;padding:0cm'> choix3: '0',</p> <p class="MsoNormal" style='border:none;padding:0cm'> image1: './images/question.png',</p> <p class="MsoNormal" style='border:none;padding:0cm'> image2: './images/question.png',</p> <p class="MsoNormal" style='border:none;padding:0cm'> image3: './images/question.png',</p> <p class="MsoNormal" style='border:none;padding:0cm'> couleur1: 'green',</p> <p class="MsoNormal" style='border:none;padding:0cm'> couleur2: 'green',</p> <p class="MsoNormal" style='border:none;padding:0cm'> couleur3: 'green',</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> methods: {</p> <p class="MsoNormal" style='border:none;padding:0cm'> tester() {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.etat = 'block';</p> <p class="MsoNormal" style='border:none;padding:0cm'> //console.log("Choix1:" + this.choix1);</p> <p class="MsoNormal" style='border:none;padding:0cm'> if (this.choix1 == 1)</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.image1 = "./images/bon.png";</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.couleur1 = "green";</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> else</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.image1 = "./images/mauvais.png";</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.couleur1 = "red"</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> if (this.choix2 == 4)</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.image2 = "./images/bon.png";</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.couleur2 = "green";</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> else</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.image2 = "./images/mauvais.png";</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.couleur2 = "red";</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> if (this.choix3 == 8)</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.image3 = "./images/bon.png";</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.couleur3 = "green";</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> else</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.image3 = "./images/mauvais.png";</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.couleur3 = "red";</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'>});</p> <p class="MsoNormal" style='border:none;padding:0cm'>const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</p> </div> <p class="MsoNormal"> </p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor