Suppression du fichier d'aperçu public/preview.jpg

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);
+    }
+  }

components/Quizz/Drag.vue

@@ -1,75 +1,43 @@
 
 <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>
         </VueDraggableNext>
         <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>

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)
+```

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
+      
+
+```