Here is a version with the final text at the end of the quizz.
https://jsfiddle.net/dfwpq1vy/2/
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://vuejs.org/js/vue.js"></script>
<title>Jeux JS QUIZZ</title>
</head>
<body>
<div id="app">
<h1>{{ quiz.title }}</h1>
<!-- index is used to check with current question index -->
<div v-for="(question, index) in quiz.questions">
<!-- Hide all questions, show only the one with index === to current question index -->
<div v-show="index === questionIndex">
<span class="step">
Question N°{{ index }}
</span>
<span class="total">
total :{{ score() }}
</span>
<h2>{{ question.text }}</h2>
<ol>
<li v-for="response in question.responses">
<label>
<!-- The radio button has three new directives -->
<!-- v-bind:value sets "value" to "true" if the response is correct -->
<!-- v-bind:name sets "name" to question index to group answers by question -->
<!-- v-model creates binding with userResponses -->
<input type="radio"
v-bind:value="response.correct"
v-bind:name="index"
v-model="userResponses[index]"> {{response.text}}
</label>
</li>
</ol>
<button v-on:click="next">
next
</button>
</div>
</div>
<div v-show="questionIndex === quiz.questions.length">
<h2>
Quiz finished
</h2>
<p>
Total score: {{ score() }} / {{ quiz.questions.length }}
</p>
<p>
{{ showtxtend() }}
</p>
</div>
</div>
</body>
</html>
JAVASCRIPT
// Create a quiz object with a title and two questions.
// A question has one or more answer, and one or more is valid.
var quiz = {
title: 'Quiz Jeux Simplon JS',
questions: [
{
text: "Informatique, web et numérique : est-ce la même chose ? (10 points)",
responses: [
{text: 'Oui',
value: "0" },
{text: 'Non', correct: true,
value: "10" },
]
}, {
text: "Que veut dire HTML ? (20 points)",
responses: [
{text: 'Un logiciel (High Term Mixed Logiweb)',
value: "0" },
{text: 'Un langage (HyperText Markup Language)', correct: true,
value: "20" },
{text: 'Un langage (High Term Middle Language)',
value: "0" },
]
},
{
text: "Parmi la liste suivante, lequel n'est pas un navigateur web ? (30 points)",
responses: [
{text: 'Google', correct: true,
value: "30" },
{text: 'Opéra',
value: "0" },
{text: 'Netscape',
value: "0" },
]
},
{
text: "Que veut dire margin 10 px ? (40 points)",
responses: [
{text: 'Le bloc HTML a une bordure extérieure de 10 pixel',
value: "0" },
{text: 'Le bloc HTML a une bordure intérieure de 10 pixel',
value: "0" },
{text: 'Le bloc HTML a un espacement extérieur de 10 pixel', correct: true,
value: "40" },
{text: 'Le bloc HTML a un espacement intérieur de 10 pixel',
value: "0" },
]
}
]
}
;
var app = new Vue({
el: '#app',
data: {
quiz: quiz,
txtend: 'txtend',
// Store current question index
questionIndex: 0,
// An array initialized with "false" values for each question
// It means: "did the user answered correctly to the question n?" "no".
userResponses: Array(quiz.questions.length).fill(false)
},
// The view will trigger these methods on click
methods: {
// Go to next question
next: function() {
this.questionIndex++;
console.log(this.userResponses);
},
showtxtend: function() {
var txt;
var score_ = this.userResponses.filter(function(val) { return val }).length
if (score_ >= 4) {
txt = "Vous êtes niveau avancé, je code ! "
}
else if (score_ <=2 ) {
txt = "Vous êtes niveau intermédiaire, j'approfondis !"
}
else if (score_ <= 1) {
txt = "Vous êtes niveau débutant, je découvre !"
}
return txt ;
},
// Return "true" count in userResponses
score: function() {
return this.userResponses.filter(function(val) { return val }).length;
}
},
// test //
});