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