quizz fisrt work

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

@@ -1,11 +1,72 @@
 <template>
-    <div>
+    <div class="p-2">
-        <h1>Quizz</h1>
+        <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>

resources/js/views/Games/Quizz/quizz.json

@@ -0,0 +1,21 @@
+{
+    "Départements" : [
+        ["Ain", 1],
+        ["Aisne", 2],
+        ["Allier", 3],
+        ["Alpes-de-Haute-Provence", 4],
+        ["Hautes-Alpes", 5],
+        ["Alpes-Maritimes", 6],
+        ["Ardèche", 7],
+        ["Ardennes", 8],
+        ["Ariège", 9],
+        ["Aube", 10],
+        ["Aude", 11],
+        ["Aveyron", 12],
+        ["Orne", 61],
+        ["Paris", 75]
+    ],
+    "Pays" : [
+        "ail", "amarante", "arachide", "artichaud", "asperge", "aubergine", "basilic", "betterave", "blette", "brocoli", "carotte", "chou", "ciboulette", "concombre", "courge", "courgette", "citrouille", "cresson", "echalote", "endive", "epinard", "fenouil", "flageolet", "gingembre", "haricot", "igname", "jacque", "laitue", "lentille", "marron", "navet", "oignon", "ortie", "oseille", "panais", "patisson", "persil", "piment", "pissenlit", "poireaux", "poivron", "potiron", "potimarron", "radis", "roquette", "scorsonere", "soja", "tomate"
+    ]
+}