diff --git a/assets/mystyle.css b/assets/mystyle.css
new file mode 100644
index 0000000..a7ea48c
--- /dev/null
+++ b/assets/mystyle.css
@@ -0,0 +1,50 @@
+
+.my-animation-shake {
+    animation: shake 0.5s;
+  }
+  
+  @keyframes shake {
+    0% {
+      transform: translate(1px, 1px) rotate(0deg);
+    }
+  
+    10% {
+      transform: translate(-1px, -2px) rotate(-1deg);
+    }
+  
+    20% {
+      transform: translate(-3px, 0px) rotate(1deg);
+    }
+  
+    30% {
+      transform: translate(3px, 2px) rotate(0deg);
+    }
+  
+    40% {
+      transform: translate(1px, -1px) rotate(1deg);
+    }
+  
+    50% {
+      transform: translate(-1px, 2px) rotate(-1deg);
+    }
+  
+    60% {
+      transform: translate(-3px, 1px) rotate(0deg);
+    }
+  
+    70% {
+      transform: translate(3px, 1px) rotate(-1deg);
+    }
+  
+    80% {
+      transform: translate(-1px, -1px) rotate(1deg);
+    }
+  
+    90% {
+      transform: translate(1px, 2px) rotate(0deg);
+    }
+  
+    100% {
+      transform: translate(1px, -2px) rotate(-1deg);
+    }
+  }
\ No newline at end of file
diff --git a/components/Quizz/Drag.vue b/components/Quizz/Drag.vue
index 197f865..bc7c71a 100644
--- a/components/Quizz/Drag.vue
+++ b/components/Quizz/Drag.vue
@@ -1,37 +1,23 @@
 
 <template>
   <div class="transition-all duration-700" :class="{ 'opacity-0': !ready }">
-    <transition-expand :delay="300" :duration="600" :easing="'cubic-bezier(0.6, 0, 0.4, 2)'">
-      <p v-if="orientationError" class="text-center text-lg text-teal-600 transition-all">
+    <transition-expand :delay="300" :duration="600" >
+      <p v-if="orientationError" class="text-center text-lg text-teal-600">
         <Icon name="heroicons:arrow-path-rounded-square" class="inline-block w-6 h-6 mr-2" />
         {{ orientationError }}
       </p>
-      <div v-else class=" h-80 shadow-lg  max-w-full transition-all">
+      <div v-else class=" h-80 max-w-full">
         <VueDraggableNext :list="pictures" @end="handleEnd" animation="500" tag="ul"
           class="flex flex-nowrap space-x-2 mb-4">
           <transition-group>
             <li v-for="(picture, id) in pictures" :key="picture.src" class="relative" :style="basisStyle">
-              <!-- <li v-for="(picture, id) in pictures" :key="picture.src" class="relative flex items-end" :style="basisStyle"> -->
               <span v-if="picture.found"
-                class="absolute w-full h-full bg-teal-700/40 z-10 transition-all my-height grid place-content-center text-4xl border-b-2 border-yellow-300">
+                class="absolute w-full bg-teal-700/40 z-10 h-[calc(100%+110px)] grid place-content-center text-4xl border-b-2 border-yellow-300">
                 🥇
               </span>
               <UChip :color="picture.found ? 'teal' : 'gray'" :size="picture.found ? '2xl' : 'md'" class="w-full">
-                <!-- <NuxtImg v-if="true" :src="picture.src" :alt="'inconnu ' + picture.src"
-                  :class="{ 'my-error': lastError.picture === picture.src }"
-                  class="cursor-move hover:opacity-90 transition-all border-4 border-solid w-full" /> -->
-                <NuxtImg v-if="!picture.src.includes('http')" :src="picture.src" :alt="'inconnu ' + picture.src"
-                  :class="{ 'my-error': lastError.picture === picture.src }"
-                  class="cursor-move hover:opacity-90 transition-all border-4 border-solid w-full" />
-
-                <img v-else :src="picture.src" :alt="'inconnu ' + picture.src"
-                  :class="{ 'my-error': lastError.picture === picture.src }"
-                  class="cursor-move hover:opacity-90 transition-all border-4 border-solid w-full" />
-
-                <!-- component is nuxtimg if relative path, img otherwise -->
-                <!-- <component :is="picture.src.includes('http') ? 'img' : NuxtImg" :src="picture.src"
-                  :alt="'inconnu ' + picture.src" :class="{ 'my-error': lastError.picture === picture.src }"
-                  class="cursor-move hover:opacity-90 transition-all border-4 border-solid w-full" /> -->
+                <NuxtImg v-if="!picture.src.includes('http')" v-bind="imgProperties(picture.src)" />
+                <img v-else v-bind="imgProperties(picture.src)" />
               </UChip>
             </li>
           </transition-group>
@@ -39,37 +25,19 @@
         <ul v-auto-animate class="flex flex-nowrap space-x-2">
           <li v-for="(answer, id) in answers" :key="answer"
             class="grid place-content-center hover:opacity-90 transition-all bg-teal-900 h-20 border-4 border-teal-700 border-solid text-sm"
-            :class="{ 'my-error': lastError.answer === answer }" :data-answer="answer" :style="basisStyle">
+            :class="{ 'my-animation-shake': lastError.answer === answer }" :data-answer="answer" :style="basisStyle">
             {{ answer }}
           </li>
         </ul>
       </div>
     </transition-expand>
-    <div v-if="!ready" class="absolute inset-0 flex justify-center items-center">
-      <div class="animate-spin rounded-full h-32 w-32 border-b-2 border-teal-900"></div>
-    </div>
     <div v-if="youWin">
       <AppFires class="opacity-60" />
-      <div class="absolute inset-0 flex justify-center items-center text-black z-50">
+      <div class="absolute inset-0 flex justify-center items-center text-black z-50 text-center">
         <div class="bg-white/80 rounded-lg shadow-lg p-5 w-80 ">
-          <h3 class="text-2xl font-bold text-center">Bravo !</h3>
-          <p class="text-center m-2">Tu as reconnu tout le monde !</p>
-          <p class="text-center text-lg text-blue-600 text-bold">
-            Pour quitter le mode plein écran et continuer le jeu : appuyer sur la touche 
-            <span class="inline-flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
-              <kbd class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
-                F11
-              </kbd>
-            </span>          
-            et revenir sur l'onglet précédent.
-          </p>
-          <NuxtImg src = "/quizz/f11.png" class="text-center m-auto p-7 w-full"/>
-          <div class="flex justify-center mt-5">
-            <button @click="shuffle(answers)"
-              class="bg-teal-900 text-white px-3 py-2 rounded-lg shadow-lg hover:bg-teal-700 transition-all">
-              Rejouer
-            </button>
-          </div>
+          <span class="text-2xl font-bold m-1">Bravo !</span>
+          <p>Défi réussi !</p> <br>
+          <UButton color="primary" variant="soft" @click="shuffle(answers)">Rejouer</UButton>
         </div>
       </div>
     </div>
@@ -80,72 +48,55 @@
 
 import { ref, watchEffect, computed, onMounted } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
-// import { NuxtImg } from '@components/UI/NuxtImg'
 
+const props = defineProps<{
+  picsInit: { src: string; answer: string; }[],
+  easyMode?: boolean
+}>()
+
+const ready = ref(false)
 const screenOrientation = useScreenOrientation()
 const acceptedOrientation: OrientationType[] = ['landscape-primary', 'landscape-secondary']
 
-const ready = ref(false)
 const youWin = computed(() => pictures.value.every(picture => picture.found))
 const lastError = ref({ picture: '', answer: '' })
-
 const shuffle = (array: any[]) => array.sort(() => Math.random() - 0.5)
+const getNbFound = () => pictures.value.filter(picture => picture.found).length
+const imgProperties = (src: string) => { return {
+    src: src,
+    alt: 'inconnu ' + src,
+    class: 'cursor-move hover:opacity-90 transition-all border-4 border-solid w-full',
+}}
 
 const orientationError = computed(() => {
-  if (!ready.value)
-    return ''
-  if (!screenOrientation.isSupported.value || !screenOrientation.orientation.value)
+  if (!ready.value || !screenOrientation.isSupported.value || !screenOrientation.orientation.value)
     return ''
   if (!acceptedOrientation.includes(screenOrientation.orientation.value))
     return 'Passer en mode paysage pour commencer le jeu'
   return ''
 })
 
-const getNbFound = () => pictures.value.filter(picture => picture.found).length
-
-onMounted(() => {
+onMounted(async () => {
   shuffle(pictures.value)
   ready.value = true
-  setTimeout(() => {
-    let nbFound = 2
-    while (nbFound > 1) {
-      shuffle(answers.value)
-      checkAnswer()
-      nbFound = getNbFound()
-    } 
-  }
-  , 500);
+  await new Promise(resolve => setTimeout(resolve, 500))
+  let nbFound = 2
+  while (nbFound > 1) {
+    shuffle(answers.value)
+    checkAnswer()
+    nbFound = getNbFound()
+  } 
 });
 
-// reset last error each time its value is not empty to trigger the animation
-watchEffect(async () => {
-  if (lastError.value.picture || lastError.value.answer) {
-    await new Promise(resolve => setTimeout(resolve, 300))
-    lastError.value = { picture: '', answer: '' }
-  }
-})
-
 const handleEnd = (e: any) => {
   const chosenAnswer = answers.value[e.newIndex]
   const chosenPicture = pictures.value[e.newIndex]
   if (chosenAnswer !== chosenPicture.answer)
     lastError.value.answer = chosenAnswer
-
 }
 
-// watchEffect(() => {
-//   pictures.value = [pic, ...pictures.value.filter(picture => picture.src !== selectedPicture.value)]
-//     answers.value = [selectedAnswer.value, ...answers.value.filter(answer => answer !== selectedAnswer.value)]
-// })
-
-const props = defineProps<{
-  picsInit: { src: string; answer: string; }[],
-  easyMode?: boolean
-}>()
-
 const pictures = ref(props.picsInit.map(picture => ({ ...picture, found: false })))
 const answers = ref(props.picsInit.map(picture => picture.answer))
-
 const basisStyle = { 'flex-basis': `${100 / answers.value.length}%` }
 
 const checkAnswer = () => {
@@ -155,16 +106,16 @@ const checkAnswer = () => {
   }
 }
 
-// trie à gauche toutes les images trouvées
-const sortFound = () => {
-  // const found = pictures.value.filter(picture => picture.found)
-  // const notFound = pictures.value.filter(picture => !picture.found)
-  // pictures.value = [...found, ...notFound]
-  // pictures.value = pictures.value.sort((a, b) => a.found ? -1 : 1)
+
+const resetLastError =  async () => {
+  if (lastError.value.picture || lastError.value.answer) {
+    await new Promise(resolve => setTimeout(resolve, 300))
+    lastError.value = { picture: '', answer: '' }
+  }
 }
 
 watchEffect(() => checkAnswer())
-watchEffect(() => props.easyMode && sortFound())
+watchEffect(() => resetLastError())   // reset last error each time its value is not empty to trigger the animation
 
 </script>
 
@@ -174,58 +125,8 @@ watchEffect(() => props.easyMode && sortFound())
 }
 </style>
 
-<style scoped lang="scss">
-.my-height {
-  height: calc(100% + 110px);
-}
-
-.my-error {
-  animation: shake 0.5s;
-}
-
-@keyframes shake {
-  0% {
-    transform: translate(1px, 1px) rotate(0deg);
-  }
-
-  10% {
-    transform: translate(-1px, -2px) rotate(-1deg);
-  }
-
-  20% {
-    transform: translate(-3px, 0px) rotate(1deg);
-  }
-
-  30% {
-    transform: translate(3px, 2px) rotate(0deg);
-  }
-
-  40% {
-    transform: translate(1px, -1px) rotate(1deg);
-  }
-
-  50% {
-    transform: translate(-1px, 2px) rotate(-1deg);
-  }
-
-  60% {
-    transform: translate(-3px, 1px) rotate(0deg);
-  }
+<style scoped >
 
-  70% {
-    transform: translate(3px, 1px) rotate(-1deg);
-  }
-
-  80% {
-    transform: translate(-1px, -1px) rotate(1deg);
-  }
+  @import url("~/assets/mystyle.css");
 
-  90% {
-    transform: translate(1px, 2px) rotate(0deg);
-  }
-
-  100% {
-    transform: translate(1px, -2px) rotate(-1deg);
-  }
-}
 </style>
\ No newline at end of file
diff --git a/content/quizz/beatles.md b/content/quizz/beatles.md
new file mode 100644
index 0000000..19d5734
--- /dev/null
+++ b/content/quizz/beatles.md
@@ -0,0 +1,40 @@
+---
+name : "beatles"
+title : "Quizz - Beatles"
+description : "Remettez les images de chaque Album au dessus du bon titre de chanson ! "
+nbPics : 7
+answerLabel : "trackListLabel"
+---
+
+
+```sparql
+# Albums et titres associés
+SELECT ?trackListLabel ?trackList 
+(SAMPLE(?albumLabel) AS ?albumLabels) 
+(SAMPLE(?img) AS ?image) (SAMPLE(?musicBrainz) AS ?musicBrainzFirst) 
+(MD5(CONCAT(STR(?trackList), STR(RAND()))) AS ?random) 
+WHERE {
+  ?album wdt:P31 wd:Q482994;
+    wdt:P1476 ?titre;
+    wdt:P175 ?musicien;
+    wdt:P658 ?trackList.
+  wd:P436 wdt:P1630 ?formatterurl.
+  ?album wdt:P436 ?musicBrainz.
+  BIND(IRI(REPLACE(?musicBrainz, "^(.+)$", ?formatterurl)) AS ?musicBrainzUrl)
+  BIND(CONCAT("http://coverartarchive.org/release-group/", ?musicBrainz, "") AS ?p)
+  BIND(CONCAT(?p, "/front", "") AS ?img)
+  FILTER(?musicien IN(wd:Q1299))
+  FILTER(?album IN(wd:Q199585, wd:Q173643, wd:Q60676411, wd:Q185121, wd:Q169226))
+  ?article schema:about ?album;
+    schema:inLanguage "fr";
+    schema:isPartOf <https://fr.wikipedia.org/>.
+  SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
+  SERVICE wikibase:label {
+    bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
+    ?trackList rdfs:label ?trackListLabel.
+    ?album rdfs:label ?albumLabel.
+  }
+}
+GROUP BY ?trackListLabel ?random ?trackList
+ORDER BY (?random)
+```
\ No newline at end of file
diff --git a/content/quizz/drapeaux.md b/content/quizz/drapeaux.md
new file mode 100644
index 0000000..f858d22
--- /dev/null
+++ b/content/quizz/drapeaux.md
@@ -0,0 +1,26 @@
+---
+name : "drapeaux"
+title : "Quizz - Drapeaux"
+quizzTemplate : "choice"
+description :  ""
+nbPics : 12
+answerLabel : "countryLabel"
+imageLabel : "flag"
+---
+
+
+```sparql
+
+select ?flag ?countryLabel ?image
+(MD5(CONCAT(str(?flag),str(RAND()))) as ?random)
+where{
+
+  ?country wdt:P31 wd:Q3624078;
+        wdt:P41 ?flag
+  SERVICE wikibase:label { bd:serviceParam wikibase:language "fr" . }
+
+  }
+order by ?random
+      
+
+```
diff --git a/content/quizz/oscar.md b/content/quizz/oscar.md
new file mode 100644
index 0000000..c1fbccb
--- /dev/null
+++ b/content/quizz/oscar.md
@@ -0,0 +1,35 @@
+---
+name : "oscar"
+title : "Quizz - actrices ayant reçu un oscar "
+description : "Remettez les images au dessus du bon nom ! "
+nbPics : 10
+---
+
+```sparql
+#defaultView:ImageGrid
+SELECT  ?date 
+(MD5(CONCAT(str(?artiste),str(RAND()))) as ?random)
+(SAMPLE(?image) AS ?image) 
+(GROUP_CONCAT(DISTINCT ?artisteLabel; SEPARATOR = " | ") AS ?artisteLabels) 
+(GROUP_CONCAT(DISTINCT ?recompenseLabel; SEPARATOR = " | ") AS ?recompenseLabels) 
+WHERE {
+?artiste wdt:P31 wd:Q5;
+        wdt:P166 ?recompense;
+        wdt:P27 wd:Q30;
+        
+    wdt:P18 ?image;
+    wdt:P569 ?date.
+
+filter(?recompense in (wd:Q103618)).
+
+SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
+SERVICE wikibase:label {
+    bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
+    ?artiste rdfs:label ?artisteLabel.
+    ?recompense rdfs:label ?recompenseLabel.
+}
+}
+GROUP BY ?random ?date ?artiste 
+ORDER BY ?random
+
+```
\ No newline at end of file
diff --git a/content/quizz/renaissance.md b/content/quizz/renaissance.md
new file mode 100644
index 0000000..b8c7af7
--- /dev/null
+++ b/content/quizz/renaissance.md
@@ -0,0 +1,46 @@
+---
+name : "renaissance"
+title : "Quizz - Peintures de la renaissance"
+quizzTemplate : "choice"
+description :  ""
+nbPics : 15
+image : "quizz-renaissance.png"
+---
+
+
+```sparql
+
+#  +800 résultats
+# doublons : plusieurs images, plusieurs auteurs
+# - sample img -> 848 résultats
+# - concat auteurs -> 819
+# données manquantes : 
+#  - auteurs inconnus (tête de méduse )
+
+#defaultView:ImageGrid
+#             wdt:P347 ?idJoconde.        # 80 oeuvres sur +800
+#             wdt:P973 ?descriptionUrl.   # 590
+SELECT ?peintureLabel ?mouvementLabel ?peinture ?article
+(MD5(CONCAT(str(?peinture),str(RAND()))) as ?random)
+(SAMPLE(?image) AS ?image) 
+(GROUP_CONCAT(DISTINCT ?artisteLabel; SEPARATOR = " | ") AS ?artisteLabels) WHERE {
+  ?peinture wdt:P31 wd:Q3305213;
+    wdt:P135 ?mouvement;
+    wdt:P18 ?image;
+    wdt:P170 ?artiste.
+  ?mouvement (wdt:P31|wdt:P361) wd:Q4692.
+
+?article schema:about ?peinture;
+  schema:inLanguage "fr";
+  schema:isPartOf <https://fr.wikipedia.org/>.
+
+  SERVICE wikibase:label { bd:serviceParam wikibase:language "fr,en". }
+  SERVICE wikibase:label {
+    bd:serviceParam wikibase:language "fr,en".
+    ?artiste rdfs:label ?artisteLabel.
+  }
+}
+GROUP BY ?peintureLabel ?mouvementLabel ?peinture ?article
+ORDER BY ?random
+
+```
diff --git a/content/quizz/swift.md b/content/quizz/swift.md
new file mode 100644
index 0000000..8e455fd
--- /dev/null
+++ b/content/quizz/swift.md
@@ -0,0 +1,51 @@
+---
+name : "swift"
+title : "Quizz - Taylor Swift"
+description : "Remettez les images de chaque Album au dessus du bon titre de chanson ! "
+nbPics : 7
+answerLabel : "trackListLabel"
+---
+
+```sparql
+
+    #  Albums et titres associés
+      SELECT ?albumLabel ?album ?image ?trackListLabel 
+      (MD5(CONCAT(str(?trackList),str(RAND()))) as ?random)
+      WHERE {
+        ?album wdt:P31 wd:Q482994;
+              wdt:P1476 ?titre ;
+              wdt:P175 ?musicien ;
+              wdt:P658 ?trackList.
+        
+        OPTIONAL{
+              ?album wdt:P18 ?albumImage.     
+          }
+      
+          OPTIONAL{
+              ?album wdt:P154 ?logoImage.
+          }
+        
+        filter ((?image != '' || ?logoImage != ''))
+        filter(?musicien in (wd:Q26876))
+        
+      #   // sépcifique
+            filter (!( ?album in ( wd:Q858750, wd:Q37814092, wd:Q845783))) 
+        
+        BIND (
+        COALESCE(
+          ?albumImage,
+          ?logoImage
+        ) AS ?image
+      )
+                
+        SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
+          SERVICE wikibase:label {
+          bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
+          ?trackList rdfs:label ?trackListLabel.
+      #       ?album rdfs:label ?albumLabel.
+        }
+      }
+      # GROUP BY  ?albumLabel ?album ?image ?trackListLabel 
+      ORDER BY ?random
+
+```
\ No newline at end of file
diff --git a/pages/quizz/[name].vue b/pages/quizz/[name].vue
index c2c605b..aa54128 100644
--- a/pages/quizz/[name].vue
+++ b/pages/quizz/[name].vue
@@ -1,15 +1,13 @@
 <template>
   <main class="min-h-screen">
-    <AppHeader class="mb-6 text-center" :title="pageInfos.title" :description="pageInfos.description" />
-    <!-- use v-bind instead -->
+    <AppHeader class="mb-6 text-center" :title="quizzContent.title" :description="quizzContent.description" />
     <QuizzRandomSparql 
-      :quizzTemplate="pageInfos.quizzTemplate"
       :data-name = "name"
-      :nbPics="pageInfos.nbPics" 
-      :sparqlQuery="pageInfos.sparqlQuery" 
-      :imageLabel = "pageInfos.imageLabel" 
-      :answerLabel="pageInfos.answerLabel"/>
-
+      :nbPics="quizzContent.nbPics" 
+      :quizzTemplate="quizzContent.quizzTemplate"
+      :sparqlQuery="sparqlRequest" 
+      :imageLabel = "quizzContent.imageLabel" 
+      :answerLabel="quizzContent.answerLabel"/>
   </main>
 </template>
 
@@ -17,252 +15,23 @@
 
 const route = useRoute()
 const { name } = route.params
-
-const pageInfos = reactive({
-  quizzTemplate: 'drag',
-  sparqlQuery: '',
-  nbPics: 0,
-  answerLabel: null,
-  imageLabel: null,
-  title: '',
-  description: '',
-  ogImage: '',
-  ogUrl: '',
-  ogType: '',
-  ogTitle: '',
-  ogDescription: '',
-  robots: '',
-})
-
-switch(name){
-  case 'oscar':
-    pageInfos.title = "Quizz - actrices ayant reçu un oscar "
-    pageInfos.description = "Remettez les images au dessus du bon nom ! "
-    pageInfos.nbPics = 10
-    pageInfos.sparqlQuery = `
-      #defaultView:ImageGrid
-      SELECT  ?date 
-      (MD5(CONCAT(str(?artiste),str(RAND()))) as ?random)
-      (SAMPLE(?image) AS ?image) 
-      (GROUP_CONCAT(DISTINCT ?artisteLabel; SEPARATOR = " | ") AS ?artisteLabels) 
-      (GROUP_CONCAT(DISTINCT ?recompenseLabel; SEPARATOR = " | ") AS ?recompenseLabels) 
-      WHERE {
-        ?artiste wdt:P31 wd:Q5;
-                wdt:P166 ?recompense;
-                wdt:P27 wd:Q30;
-                
-          wdt:P18 ?image;
-          wdt:P569 ?date.
-        
-        filter(?recompense in (wd:Q103618)).
-
-        SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
-        SERVICE wikibase:label {
-          bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
-          ?artiste rdfs:label ?artisteLabel.
-          ?recompense rdfs:label ?recompenseLabel.
-        }
-      }
-      GROUP BY ?random ?date ?artiste 
-      ORDER BY ?random
-      `;
-    break;
-
-    case 'drapeaux' : 
-    pageInfos.quizzTemplate = 'choice'
-    pageInfos.title = "Quizz - Drapeaux";
-    pageInfos.description =  "";
-    pageInfos.nbPics = 12
-pageInfos.answerLabel = "countryLabel";
-pageInfos.imageLabel = "flag";
-    pageInfos.sparqlQuery = `
-    select ?flag ?countryLabel ?image
-(MD5(CONCAT(str(?flag),str(RAND()))) as ?random)
-where{
-
-  ?country wdt:P31 wd:Q3624078;
-        wdt:P41 ?flag
-  SERVICE wikibase:label { bd:serviceParam wikibase:language "fr" . }
-
-  }
-order by ?random
-      `;
-      break;
-
-
-
-    case 'arts-choice' : 
-    pageInfos.quizzTemplate = 'choice'
-    pageInfos.title = "Quizz - Peintures de la renaissance";
-    pageInfos.description =  "";
-    pageInfos.nbPics = 15
-    pageInfos.sparqlQuery = `
-      #  +800 résultats
-      # doublons : plusieurs images, plusieurs auteurs
-      # - sample img -> 848 résultats
-      # - concat auteurs -> 819
-      # données manquantes : 
-      #  - auteurs inconnus (tête de méduse )
-
-      #defaultView:ImageGrid
-      #             wdt:P347 ?idJoconde.        # 80 oeuvres sur +800
-      #             wdt:P973 ?descriptionUrl.   # 590
-      SELECT ?peintureLabel ?mouvementLabel ?peinture ?article
-      (MD5(CONCAT(str(?peinture),str(RAND()))) as ?random)
-      (SAMPLE(?image) AS ?image) 
-      (GROUP_CONCAT(DISTINCT ?artisteLabel; SEPARATOR = " | ") AS ?artisteLabels) WHERE {
-        ?peinture wdt:P31 wd:Q3305213;
-          wdt:P135 ?mouvement;
-          wdt:P18 ?image;
-          wdt:P170 ?artiste.
-        ?mouvement (wdt:P31|wdt:P361) wd:Q4692.
-
-?article schema:about ?peinture;
-        schema:inLanguage "fr";
-        schema:isPartOf <https://fr.wikipedia.org/>.
-
-        SERVICE wikibase:label { bd:serviceParam wikibase:language "fr,en". }
-        SERVICE wikibase:label {
-          bd:serviceParam wikibase:language "fr,en".
-          ?artiste rdfs:label ?artisteLabel.
-        }
-      }
-      GROUP BY ?peintureLabel ?mouvementLabel ?peinture ?article
-      ORDER BY ?random
-      `;
-      break;
-
-    case 'arts' : 
-    pageInfos.title = "Quizz - Peintures de la renaissance";
-    pageInfos.description =  "Trouvez l'auteur de chaque oeuvre en remettant les images au dessus du bon peintre";
-    pageInfos.nbPics = 6
-    pageInfos.sparqlQuery = `
-      #  +800 résultats
-      # doublons : plusieurs images, plusieurs auteurs
-      # - sample img -> 848 résultats
-      # - concat auteurs -> 819
-      # données manquantes : 
-      #  - auteurs inconnus (tête de méduse )
-
-      #defaultView:ImageGrid
-      #             wdt:P347 ?idJoconde.        # 80 oeuvres sur +800
-      #             wdt:P973 ?descriptionUrl.   # 590
-      SELECT ?peintureLabel ?mouvementLabel ?peinture 
-      (MD5(CONCAT(str(?peinture),str(RAND()))) as ?random)
-      (SAMPLE(?image) AS ?image) 
-      (GROUP_CONCAT(DISTINCT ?artisteLabel; SEPARATOR = " | ") AS ?artisteLabels) WHERE {
-        ?peinture wdt:P31 wd:Q3305213;
-          wdt:P135 ?mouvement;
-          wdt:P18 ?image;
-          wdt:P170 ?artiste.
-        ?mouvement (wdt:P31|wdt:P361) wd:Q4692.
-        SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
-        SERVICE wikibase:label {
-          bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
-          ?artiste rdfs:label ?artisteLabel.
-        }
-      }
-      GROUP BY ?peintureLabel ?mouvementLabel ?peinture
-      ORDER BY ?random
-      `;
-      break;
-
-    case 'swift' :  // Taylor Swift - 8 pics - images des albums à associer aux bonnes chansons
-    pageInfos.title = "Quizz - Taylor Swift";
-    pageInfos.description =  "Remettez les images de chaque Album au dessus du bon titre de chanson ! ";
-    pageInfos.nbPics = 7
-    pageInfos.answerLabel = 'trackListLabel'
-    pageInfos.sparqlQuery = `
-    #  Albums et titres associés
-      SELECT ?albumLabel ?album ?image ?trackListLabel 
-      (MD5(CONCAT(str(?trackList),str(RAND()))) as ?random)
-      WHERE {
-        ?album wdt:P31 wd:Q482994;
-              wdt:P1476 ?titre ;
-              wdt:P175 ?musicien ;
-              wdt:P658 ?trackList.
-        
-        OPTIONAL{
-              ?album wdt:P18 ?albumImage.     
-          }
-      
-          OPTIONAL{
-              ?album wdt:P154 ?logoImage.
-          }
-        
-        filter ((?image != '' || ?logoImage != ''))
-        filter(?musicien in (wd:Q26876))
-        
-      #   // sépcifique
-            filter (!( ?album in ( wd:Q858750, wd:Q37814092, wd:Q845783))) 
-        
-        BIND (
-        COALESCE(
-          ?albumImage,
-          ?logoImage
-        ) AS ?image
-      )
-                
-        SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
-          SERVICE wikibase:label {
-          bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
-          ?trackList rdfs:label ?trackListLabel.
-      #       ?album rdfs:label ?albumLabel.
-        }
-      }
-      # GROUP BY  ?albumLabel ?album ?image ?trackListLabel 
-      ORDER BY ?random
-    `;
-    break;
-
-    case 'beatles' :  // Beatles - utilisation de musicbrainz et coverartarchive pour les images 
-    pageInfos.title = "Quizz - The Beatles";
-    pageInfos.description =  "Remettez les images de chaque Album au dessus du bon titre de chanson ! ";
-    pageInfos.nbPics = 7
-    pageInfos.answerLabel = 'trackListLabel'
-    pageInfos.sparqlQuery = `
-    # Albums et titres associés
-    SELECT ?trackListLabel ?trackList 
-    (SAMPLE(?albumLabel) AS ?albumLabels) 
-    (SAMPLE(?img) AS ?image) (SAMPLE(?musicBrainz) AS ?musicBrainzFirst) 
-    (MD5(CONCAT(STR(?trackList), STR(RAND()))) AS ?random) 
-    WHERE {
-      ?album wdt:P31 wd:Q482994;
-        wdt:P1476 ?titre;
-        wdt:P175 ?musicien;
-        wdt:P658 ?trackList.
-      wd:P436 wdt:P1630 ?formatterurl.
-      ?album wdt:P436 ?musicBrainz.
-      BIND(IRI(REPLACE(?musicBrainz, "^(.+)$", ?formatterurl)) AS ?musicBrainzUrl)
-      BIND(CONCAT("http://coverartarchive.org/release-group/", ?musicBrainz, "") AS ?p)
-      BIND(CONCAT(?p, "/front", "") AS ?img)
-      FILTER(?musicien IN(wd:Q1299))
-      FILTER(?album IN(wd:Q199585, wd:Q173643, wd:Q60676411, wd:Q185121, wd:Q169226))
-      ?article schema:about ?album;
-        schema:inLanguage "fr";
-        schema:isPartOf <https://fr.wikipedia.org/>.
-      SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
-      SERVICE wikibase:label {
-        bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en".
-        ?trackList rdfs:label ?trackListLabel.
-        ?album rdfs:label ?albumLabel.
-      }
-    }
-    GROUP BY ?trackListLabel ?random ?trackList
-    ORDER BY (?random)
-    `;
-    break;
-}
-
+const { data: quizzContent } = await useAsyncData("quizzContent", () =>
+  queryContent("/quizz/" + name).findOne()
+);
+const sparqlRequest = quizzContent.value.body.children[0].props.code
+const baseUrl = "https://dev-lab-one.vercel.app" + route.fullPath.split(name)[0]
+const img =  quizzContent.value.image ?? "quizz-sparql.png" 
+const defaultDescription = "Quizz dynamique généré avec Wikidata"
+console.log("img",baseUrl  + img, 'url', baseUrl + name)
 
 useSeoMeta({
-  title: pageInfos.title,
-  description: pageInfos.description,
+  title: quizzContent.title, 
+  description: quizzContent.description ?? defaultDescription,
 
-  ogImage: "https://dev-lab-one.vercel.app/quizz/quizz-sparql.png",
-  ogUrl: "https://dev-lab-one.vercel.app/quizz/" + name,
-  ogTitle: pageInfos.title,
-  ogDescription: pageInfos.description,
+  ogImage: baseUrl + img,
+  ogUrl: baseUrl + name,
+  ogTitle: quizzContent.title,
+  ogDescription: quizzContent.description,
 });
 
 
@@ -270,7 +39,7 @@ useSeoMeta({
 
 <style lang="scss" >
 
-[data-name="swift"]  {
+[data-name="swift"], [data-name="beatles"]  {
 
   li:has(img) div {
     background: aliceblue;
diff --git a/public/preview.jpg b/public/preview.jpg
deleted file mode 100644
index 3e51791..0000000
Binary files a/public/preview.jpg and /dev/null differ
diff --git a/public/quizz/quizz-renaissance.png b/public/quizz/quizz-renaissance.png
new file mode 100644
index 0000000..36e6fb4
Binary files /dev/null and b/public/quizz/quizz-renaissance.png differ