quizz fisrt work

resources/js/views/Games/Quizz/Quizz.vue

@@ -1,11 +1,72 @@
 <template>
-    <div>
-        <h1>Quizz</h1>
+    <div class="p-2">
+        <h1 class="text-3xl text-center text-orange-900 font-bold">Quizz</h1>
+        <div v-if="!selectedQuizz" class="flex justify-center my-4">
+            <a v-for="(quizz, key) in quizzList"
+               :key="key"
+               class="btn-primary mr-1 cursor-pointer"
+               @click="selectedQuizz = key">
+               {{ key }}
+            </a>
+        </div>
+        <div v-if="!levelQuizz" class="flex justify-center mx-2">
+            <a  v-for="(level, index) in levels"
+                :key="index"
+                class="btn-primary mr-1 cursor-pointer"
+                @click="levelQuizz = level">
+                Niveau {{ level }}
+            </a>
+        </div>
+        <div v-if="selectedQuizz && levelQuizz">
+
+            <div v-if="!responses" class="flex justify-center mt-8">
+                <span class="btn cursor-pointer" @click="startQuizz">Commencer</span>
+            </div>
+            <div v-else>
+                Start
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import quizz from './quizz.json'
+
 export default {
-    name: 'Quizz'
+    name: 'Quizz',
+    data: function () {
+        return {
+            quizzList: quizz,
+            selectedQuizz: null,
+            levels: [
+                1, 2, 3, 4, 5
+            ],
+            levelQuizz: false,
+            currentQuestion: null,
+            currentResponses: null,
+            responses: null,
+        }
+    },
+    methods: {
+        startQuizz: function () {
+            console.log('start')
+            this.responses = []
+            this.selectedQuizz = this.quizzList[this.selectedQuizz]
+            this.currentQuestion = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
+            this.currentResponses = [this.currentQuestion[1]]
+
+            while (this.currentResponses.length <= (this.levelQuizz * 2 - 1)) {
+                let response = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
+                console.log(response)
+                if(!this.currentResponses.includes(response[1])) {
+                    this.currentResponses.push(response[1])
+                }
+            }
+
+            console.log(this.currentQuestion, this.currentResponses)
+
+
+        }
+    }
 }
 </script>