ep-lib-ts 1.0.47 → 1.0.48

package/dist/index.d.ts

@@ -29,6 +29,7 @@ import { default as EpDescription } from './components/educationals/EpDescriptio
 import { default as EpConclusion } from './components/educationals/EpConclusion.vue';
 import { default as EpCodeblock } from './components/educationals/EpCodeblock.vue';
 import { default as EpBranchingScenario } from './components/educationals/EpBranchingScenario.vue';
+import { default as EpDocument } from './components/educationals/EpDocument.vue';
 import { default as EpAccordeon } from './components/interactions/EpAccordeon.vue';
 import { default as EpContentSlider } from './components/interactions/EpContentSlider.vue';
 import { default as EpModal } from './components/interactions/EpModal.vue';
@@ -50,9 +51,10 @@ import { default as EpVideo } from './components/medias/EpVideo.vue';
 import { default as EpVideoPanopto } from './components/medias/EpVideoPanopto.vue';
 import { default as EpWordDef } from './components/medias/EpWordDef.vue';
 import { default as EpCardLink } from './components/medias/EpCardLink.vue';
+import { default as EpHierarchy } from './components/medias/EpHierarchy.vue';
 import { default as EpAlert } from './components/signages/EpAlert.vue';
 import { default as EpHeader } from './components/signages/EpHeader.vue';
 import { default as EpQuote } from './components/signages/EpQuote.vue';
 import { default as EpSkeleton } from './components/signages/EpSkeleton.vue';
 
-export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion, EpCodeblock, EpSectionCols, EpCardLink, EpStackedList, EpHoverCard, EpBranchingScenario, EpSvgShow };
+export { EpBadge, EpBtn, EpCard, EpChip, EpDivider, EpFlex, EpIcon, EpImg, EpSection, EpSpinner, EpTable, EpBarChart, EpLineChart, EpPieChart, EpFunnelChart, EpText, EpEdu, EpReading, EpResource, EpScope, EpAccordeon, EpContentSlider, EpModal, EpQuestion, EpTabs, EpAudio, EpCarousel, EpIframe, EpKatex, EpLink, EpLinkVersion, EpSoftware, EpSvg, EpTerm, EpTimeLine, EpVideo, EpVideoPanopto, EpAlert, EpHeader, EpQuote, EpSkeleton, EpWordDef, EpSummativeTable, EpObjective, EpSpecificObjective, EpIntroduction, EpInstructions, EpDescription, EpConclusion, EpCodeblock, EpSectionCols, EpCardLink, EpStackedList, EpHoverCard, EpBranchingScenario, EpSvgShow, EpHierarchy, EpDocument };

package/dist/{prism-Cv4D8Rjm.js → prism-BvbRGWPO.js}

@@ -1,4 +1,4 @@
-import { ab as V, ac as W } from "./index-D6RVSyf7.js";
+import { ac as V, ad as W } from "./index-DeiLPw0s.js";
 function ee(S, P) {
   for (var i = 0; i < P.length; i++) {
     const g = P[i];

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}pre{white-space:break-spaces}@keyframes fade-7af6ae43{0%{opacity:0}to{opacity:1}}@keyframes scale-7af6ae43{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-7af6ae43{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-7af6ae43]{animation:fade-7af6ae43 1s}.scale[data-v-7af6ae43]{animation:scale-7af6ae43 1s}.slideY[data-v-7af6ae43]{animation:slideY-7af6ae43 1s}.path-item[data-v-7af6ae43]{position:relative}.path-item[data-v-7af6ae43]:after{content:"";position:absolute;top:50%;right:100%;width:60px;height:4px;background-color:#374151}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}
+.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}pre{white-space:break-spaces}.tree-wrapper[data-v-bc317bc6]{overflow:auto;border:1px solid #ddd}.tree-container[data-v-bc317bc6]{width:100%;overflow-x:auto}@keyframes fade-1e22db06{0%{opacity:0}to{opacity:1}}@keyframes scale-1e22db06{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-1e22db06{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-1e22db06]{animation:fade-1e22db06 1s}.scale[data-v-1e22db06]{animation:scale-1e22db06 1s}.slideY[data-v-1e22db06]{animation:slideY-1e22db06 1s}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}

package/dist/{three.module-CWLs6nMo.js → three.module-B-oqC8Xk.js}

@@ -12145,7 +12145,7 @@ class Mw extends ai {
     const t = this.geometry, e = this.pointMap, i = 1, r = 1;
     Me.projectionMatrixInverse.copy(this.camera.projectionMatrixInverse);
     const s = this.camera.coordinateSystem === Wn ? -1 : 0;
-    Be("c", e, t, Me, 0, 0, s), Be("t", e, t, Me, 0, 0, 1), Be("n1", e, t, Me, -1, -1, s), Be("n2", e, t, Me, i, -1, s), Be("n3", e, t, Me, -1, r, s), Be("n4", e, t, Me, i, r, s), Be("f1", e, t, Me, -1, -1, 1), Be("f2", e, t, Me, i, -1, 1), Be("f3", e, t, Me, -1, r, 1), Be("f4", e, t, Me, i, r, 1), Be("u1", e, t, Me, i * 0.7, r * 1.1, s), Be("u2", e, t, Me, -1 * 0.7, r * 1.1, s), Be("u3", e, t, Me, 0, r * 2, s), Be("cf1", e, t, Me, -1, 0, 1), Be("cf2", e, t, Me, i, 0, 1), Be("cf3", e, t, Me, 0, -1, 1), Be("cf4", e, t, Me, 0, r, 1), Be("cn1", e, t, Me, -1, 0, s), Be("cn2", e, t, Me, i, 0, s), Be("cn3", e, t, Me, 0, -1, s), Be("cn4", e, t, Me, 0, r, s), t.getAttribute("position").needsUpdate = !0;
+    Be("c", e, t, Me, 0, 0, s), Be("t", e, t, Me, 0, 0, 1), Be("n1", e, t, Me, -i, -r, s), Be("n2", e, t, Me, i, -r, s), Be("n3", e, t, Me, -i, r, s), Be("n4", e, t, Me, i, r, s), Be("f1", e, t, Me, -i, -r, 1), Be("f2", e, t, Me, i, -r, 1), Be("f3", e, t, Me, -i, r, 1), Be("f4", e, t, Me, i, r, 1), Be("u1", e, t, Me, i * 0.7, r * 1.1, s), Be("u2", e, t, Me, -i * 0.7, r * 1.1, s), Be("u3", e, t, Me, 0, r * 2, s), Be("cf1", e, t, Me, -i, 0, 1), Be("cf2", e, t, Me, i, 0, 1), Be("cf3", e, t, Me, 0, -r, 1), Be("cf4", e, t, Me, 0, r, 1), Be("cn1", e, t, Me, -i, 0, s), Be("cn2", e, t, Me, i, 0, s), Be("cn3", e, t, Me, 0, -r, s), Be("cn4", e, t, Me, 0, r, s), t.getAttribute("position").needsUpdate = !0;
   }
   dispose() {
     this.geometry.dispose(), this.material.dispose();

package/dist/types/Component.d.ts

@@ -8,3 +8,10 @@ export interface ContentComponents {
         [key: string]: any;
     };
 }
+export type NestedComponent = "EpSvg" | "EpImg";
+export interface NestedComponents {
+    type: NestedComponent;
+    data: {
+        [key: string]: any;
+    };
+}

package/dist/types/Hierarchy.d.ts

@@ -0,0 +1,14 @@
+import { NestedComponents } from './Component';
+
+export interface TreeNode {
+    name: string;
+    children?: TreeNode[];
+    active?: boolean;
+    text?: string;
+    component?: NestedComponents;
+}
+type TailwindShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+type TailwindColor = 'main-color' | 'primary' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+export type ColorPath = `stroke-${TailwindColor}-${TailwindShade}`;
+export type ColorRect = `fill-${TailwindColor}-${TailwindShade}`;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.47",
+  "version": "1.0.48",
   "files": [
     "dist",
     "src/components/"
@@ -28,11 +28,21 @@
   "dependencies": {
     "@lottiefiles/dotlottie-vue": "^0.5.6",
     "@mdi/js": "^7.4.47",
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-hierarchy": "^3.1.7",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-shape": "^3.1.7",
+    "@types/d3-zoom": "^3.0.8",
     "@types/three": "^0.170.0",
     "@vueuse/core": "^10.9.0",
     "@wdns/vue-code-block": "^2.3.3",
     "aframe": "^1.6.0",
     "apexcharts": "3.53.0",
+    "d3-array": "^3.2.4",
+    "d3-hierarchy": "^3.1.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0",
     "katex": "^0.16.11",
     "markdown-it": "^14.1.0",
     "postcss-cli": "^11.0.0",

package/src/components/basics/EpBtn.vue

@@ -80,7 +80,7 @@ const { disabled, prependIcon, appendIcon } = toRefs(props);
     <slot></slot> 
     <EpIcon v-if="appendIcon" :iconPath="appendIcon" :size="sizeIcon" extraClass="ml-2"></EpIcon>
   </button>
-  <a :class="`${styles} text-center inline-block`" :disabled="disabled" :href="href" target="_blank" v-else>
+  <a :class="`${styles} flex justify-center items-center`" :disabled="disabled" :href="href" target="_blank" v-else>
     <EpIcon v-if="prependIcon" :iconPath="prependIcon" :size="sizeIcon" extraClass="mr-2"></EpIcon>
     <slot></slot> 
     <EpIcon v-if="appendIcon" :iconPath="appendIcon" :size="sizeIcon" extraClass="ml-2"></EpIcon>

package/src/components/educationals/EpBranchingScenario.vue

@@ -2,10 +2,15 @@
 
 import { ref, computed } from "vue";
 import { useRenderText } from '../../composables/useRenderText';
+import type { NestedComponents } from "../../types/Component";
+import type { TreeNode, ColorPath, ColorRect } from "../../types/Hierarchy";
 import EpIcon from '../../components/basics/EpIcon.vue';
-import { mdiArrowLeft } from "@mdi/js";
-import TextImg from "../tools/TextImg.vue";
 import Details from "../tools/Details.vue";
+import EpModal from "../interactions/EpModal.vue";
+import EpHierarchy from "../medias/EpHierarchy.vue";
+import EpBtn from "../basics/EpBtn.vue";
+import { mdiArrowLeft } from "@mdi/js";
+import TextMedia from "../tools/TextMedia.vue";
 
 
 // Defining the props
@@ -13,220 +18,262 @@ import Details from "../tools/Details.vue";
 interface Option {
     name: string;
     question: string;
-    imgSrc?: string;
+    media?:NestedComponents;
     options?: Option[];
 }
 
-interface Choice {
-    question:string;
-    choice:string;
-    img?:string;
-}
-
 interface Props {
-    scenarioTitle: string;
-    scenarioImg?:string;
+    title: string;
+    media?:NestedComponents;
     initialInstruction?: string | null;
     generalFeedback?: string;
     bgColor?: string;
+
     decisionTree: {
-        rootQuestion: string;
-        imgSrc?: string;
-        options: Option[];
+        name: string;
+        question:string;
+        media?: NestedComponents;
+        options?: Option[];
     };
     transitionAnimation?: "fade" | "scale" | "slideY";
+    labelStart?:string;
+    labelFinish?:string;
+    labelYourPath?:string;
+    labelShowFullPath?:string;
+    labelClose?:string;
+    labelRestart?:string;
+    colorPath?:ColorPath;
+    colorRect?:ColorRect;
+    isCluster?:boolean
 }
 
-
 const props = withDefaults(defineProps<Props>(), {
     initialInstruction: null,
-    transitionAnimation: "fade"
+    transitionAnimation: "fade",
+    labelFinish:"Vous avez terminé le scénario!",
+    labelYourPath:"Votre parcours",
+    labelShowFullPath:"Voir le parcours au complet",
+    labelClose:"Fermer",
+    labelRestart:"Recommencer",
+    labelStart:"Commencer",
+    colorRect:'fill-main-color-400',
+    colorPath:'stroke-yellow-400'
 });
 
 
-// The necessary references to keep track of the evolution
-
-const itinerary = ref<number[]>([]);
-
-const currentSlide = ref(0);
-const currentOption = ref<null | any>(null);
+const showPath = ref(false)
+const path = ref<Option[]>([])
+const userPath = ref<TreeNode|null>(null)
+const currentOption = ref<Option | null>(null);
 
 
 // Manage the introductory part
 const isIntroductoryPart = ref(true);
 
-// Get the option from the itinerary
-const getOptionFromItinerary = (itinerary: number[]) => {
-    let option: any = props.decisionTree;
-    if (itinerary.length > 0) {
-        for (let i = 0; i < itinerary.length; i++) {
-            option = option.options[itinerary[i]];
-        }
-    }
-    return (option !== props.decisionTree)? option : null;
-};
+const start = () => {
+  isIntroductoryPart.value = false
+  currentOption.value = props.decisionTree
+}
 
 
 
 // Return function
-
 const goToPrevious = () => {
-    if(notTheEnd.value){
-        if(itinerary.value.length === 0) {
+    //if(notTheEnd.value){
+        if(path.value.length === 0) {
             isIntroductoryPart.value = true;
+            currentOption.value = null;
+            return 
         }
 
-        itinerary.value.pop();
-        currentOption.value = getOptionFromItinerary(itinerary.value);
-        currentSlide.value = itinerary.value.length;
-    }
-};
-
-// Verifying if we are at the end
-const notTheEnd = computed(() => {
-    return currentSlide.value === 0 || (currentOption.value && currentOption.value.options && currentOption.value.options.length > 0);
-});
-
+        path.value.pop();
+       // Get the previous option in the path
+        const lastOption = path.value[path.value.length - 1];
 
+        if (lastOption) {
+            currentOption.value = lastOption;
+        } else {
+            currentOption.value = props.decisionTree;
+        }
+};
 
 // Restart function
 const restart = () => {
-    currentSlide.value = 0;
+   //currentSlide.value = 0;
     currentOption.value = null;
-    itinerary.value = [];
     isIntroductoryPart.value = true;
+    path.value = []
 };
 
 
 
-// Function to get the choices made based on the itinerary
-const getChoices = (itinerary: number[]) => {
-    let choices: Choice[] = [{
-        question: props.decisionTree.rootQuestion, 
-        choice: props.decisionTree.options[itinerary[0]].name,
-        img:props.decisionTree.imgSrc
-    }];
-    let option: Option = props.decisionTree.options[itinerary[0]];
-   
-    if (itinerary.length > 1) {
-        for (let i = 1; i < itinerary.length; i++) {
-            let question: string = option.question;
-            let img:string|undefined = option.imgSrc
-            if(option.options){
-                option = option.options[itinerary[i]];
-                console.log(option)
-            }
-            choices.push({question, choice: option.name, img});
-        }
-    }
-    
-    return choices;
-};
-
+const nextSlide = (option:Option) => {
+  //currentSlide.value++
+  path.value.push(option)
+  if (option.options && option.options.length > 0) {
+    currentOption.value = option; // drill into next level
+  } else {
+    currentOption.value = null; // reached the end (leaf node)
+    userPath.value = convertOptionToTreeNode(props.decisionTree, path.value);
+  }
+}
 
 
-</script>
+//helper function
+function convertOptionToTreeNode(option: Option, path: Option[]): TreeNode {
+  const isActive = path.includes(option);
 
-<template>
-    <div>
-        <!-- The introductory part -->
-        <div v-if="isIntroductoryPart" class="mx-auto w-2/3 bg-gray-200 dark:bg-slate-800 rounded-md flex flex-col items-center justify-around p-4 fade"  :style="{ minHeight: '500px', backgroundColor: bgColor }">
-            <h1 class="font-bold text-3xl">{{ scenarioTitle }}</h1>
-
-            <TextImg v-if="initialInstruction"
-             :text="initialInstruction"
-             :src="scenarioImg"
-             :alt="`image d'introduction ${scenarioTitle}`"
-            />
-            <button class="rounded bg-primary text-white py-2 px-4 min-w-28 my-2" @click="isIntroductoryPart = false">Commencer</button>
-        </div>
+  return {
+    name: option.name,
+    text: option.question,
+    component: option.media,
+    active: isActive,
+    children: option.options?.map(child => convertOptionToTreeNode(child, path))
+  };
+}
 
 
-        <div class="m-4 mx-auto w-2/3 rounded-md flex flex-col p-4 bg-gray-200 dark:bg-slate-800" :style="{ minHeight: '500px', backgroundColor: bgColor }" v-else>
-            <!-- Return button -->
-            <div><button :class="`rounded bg-primary text-white py-2 px-4 m-2 ${transitionAnimation}`" v-if="notTheEnd" @click="goToPrevious">
-                <EpIcon :icon-path="mdiArrowLeft" size="25"></EpIcon>
-            </button></div>
+//styles computed
 
-            <!-- First question -->
-            <div :class="`flex-grow flex flex-col items-center justify-around ${transitionAnimation}`" v-if="currentSlide === 0">
-                  
-                  <TextImg
-                    :text="decisionTree.rootQuestion"
-                    :src="decisionTree.imgSrc"
-                    :alt="`image de la question ${decisionTree.rootQuestion}`"
-                  />
-               
+const gridStyle = computed(()=>{
+    if(currentOption.value && 
+    currentOption.value.options && 
+    currentOption.value.options?.length <= 2) {
+      return 'grid-cols-2'
+    }
+    return 'grid-cols-3'
+})
 
-                <div :class="`w-full justify-items-center mx-4 grid ${(decisionTree.options.length <= 2)? 'grid-cols-2' : 'grid-cols-3'}`">
+const currentLengthOptions = computed(()=> {
+    if(currentOption.value && currentOption.value.options){
+        return currentOption.value.options.length
+    }
+    return 0
+})
 
-                    <button :class="`rounded bg-primary text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (decisionTree.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in decisionTree.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
-                </div>
-            </div>
 
-            <!-- The rest of the scenario including the end-->
-            <div class="flex-grow flex" v-else>
+</script>
 
-                <!-- The current slide -->
-                <div :key="currentOption.question" :class="`flex-grow flex flex-col items-center justify-around ${transitionAnimation}`" v-if="notTheEnd">
+<template>
+  <div>
+    <div 
+      class="mx-auto w-2/3 bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col"
+      :style="{ minHeight: '500px', backgroundColor: bgColor }"
+    >
+      <!-- <div v-for="item in path" :key="item.name">
+        <span class="text-xs">{{ item.name }}</span>
+      </div> -->
+      <!-- Header (fixed at top of card) -->
+      <div>
+        <h1 class="font-bold text-3xl text-center">{{ title }}</h1>
+        <div v-if="currentOption" class="mt-2">
+          <EpBtn 
+            type="primary" 
+            rounded
+            size="small"
+            :extra-class="`${transitionAnimation}`" 
+            @click="goToPrevious"
+          >
+            <EpIcon :icon-path="mdiArrowLeft" size="25" />
+          </EpBtn>
+        </div>
+      </div>
+
+      <!-- Content Area -->
+      <div class="flex-grow flex items-center justify-center">
+        <!-- Introductory Part -->
+        <div 
+          v-if="isIntroductoryPart" 
+          class="flex flex-col items-center justify-center space-y-6"
+        >
+          <TextMedia 
+            v-if="initialInstruction && media"
+            :text="initialInstruction"
+            :media="media"
+          />
+          <EpBtn type="primary" rounded @click="start">{{labelStart}}</EpBtn>
+        </div>
 
-                     <TextImg
-                        :text="currentOption.question"
-                        :src="currentOption.imgSrc"
-                        :alt="`image de la question ${currentOption.question}`"
-                    />
-                   
-                    <div :class="`w-full justify-items-center mx-4 grid ${(currentOption.options.length <= 2)? 'grid-cols-2' : 'grid-cols-3'}`">
-                        <button :class="`rounded bg-primary text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (currentOption.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in currentOption.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
-                    </div>
+        <!-- Slides -->
+        <template v-else-if="currentOption && !isIntroductoryPart">
+          <div class="flex flex-col items-center justify-center w-full">
+            <div :class="`flex flex-col items-center justify-center ${transitionAnimation}`">
+              <TextMedia
+                :text="currentOption.question"
+                :media="currentOption.media"
+              />
+
+              <div 
+                :class="`w-full my-4 mx-4 grid gap-4 ${gridStyle}`" 
+                :style="{ placeItems: currentLengthOptions <= 4 ? 'center' : 'initial' }"
+                >
+                <template v-for="(option, index) in currentOption.options" :key="`option-${index}`">
+                    <EpBtn 
+                        rounded
+                        type="primary" 
+                        class="w-full max-w-xs text-center"
+                        @click="nextSlide(option)"
+                    >
+                        {{ option.name }}
+                    </EpBtn>
+                </template>
                 </div>
-
-                <!-- End of the scenario -->
-                <div :class="`flex-grow flex flex-col items-center ${transitionAnimation}`" v-else>
-                    <div class="flex-grow flex flex-col items-center">
-                        <h1 class="my-4 font-bold text-3xl">Vous avez terminé le scénario!</h1>
-                        
-                        <div class="grid grid-cols-2 gap-2">
-                            <div :class="[
-                                'flex flex-col items-center',
-                                generalFeedback ? 'col-span-1' : 'col-span-2'
-                                ]">
-                                <h3 class="font-bold">Voici votre parcours</h3>
-                                <div class="flex flex-col relative w-full gap-4 px-5 py-5 items-start overflow-auto border-l-4 border-gray-700" style="max-width: 600px; height: 300px;">
-                                    <!-- <div  class="path-item rounded bg-primary text-white py-2 px-4 flex flex-col items-center">
-                                        <u>{{ question.question }}</u>
-                                        <p>{{ question.choice }}</p>
-                                    </div> -->
-                                    <template v-for="(question, index) in getChoices(itinerary)" :key="`question-${index}`"> 
-                                        <div class="path-item">
-                                            <Details 
-                                            :content="question.question" 
-                                            :title="question.choice"
-                                            :img="question.img"
-                                            />
-                                        </div>
-                                    </template>
-                                   
-                                    
-                                </div>
-                            </div>
-                            <div v-if="generalFeedback" class="flex flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
-                                <h3 class="font-bold mb-3">Feedback général</h3>
-                                <div v-html="useRenderText(generalFeedback)"></div>
+            </div>
+          </div>
+        </template>
+
+        <!--show path-->
+        <div v-else>
+            
+            <!-- <template v-if="userPath">
+                <EpHierarchy :nodes="userPath"/>
+            </template> -->
+             <h3 class="text-xl text-center font-semibold">{{ labelFinish }}</h3>
+            <div class="flex gap-6 mt-3">
+             <div class="w-full">  
+                <h3 class="font-semibold mb-3">{{ labelYourPath }}</h3>
+                 <div class="overflow-auto p-2" :style="{height: '200px'}">
+                    <template v-for="(item,i) in path" :key="`user-choice-${i}`">
+                            <div class="mb-2">
+                                <Details 
+                                    :content="item.question" 
+                                    :title="item.name"
+                                    :media="item.media"
+                                />
                             </div>
-                        </div>
-                        
+                    </template>
+                 </div>
+                <div class="flex justify-center mt-2">
+                    <EpBtn type="info" rounded @click="showPath = true">{{ labelShowFullPath }}</EpBtn>
+                </div>
+                <EpModal v-if="userPath" v-model="showPath">
+                    <EpHierarchy 
+                    :nodes="userPath" 
+                    :is-cluster="props.isCluster"
+                    :color-path="props.colorPath" 
+                    :color-rect="props.colorRect"
+                    />
+                    <div class="flex justify-end">
+                        <EpBtn @click="showPath = false" type="error" outlined rounded>{{labelClose}}</EpBtn>
                     </div>
-                    <button class='rounded bg-primary text-white py-2 px-4 min-w-28 my-3 col-span-1' @click="restart">Recommencer</button>
-                </div> 
-
+                </EpModal>
+             </div>
+             <div v-if="generalFeedback" class="flex flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
+                <div v-html="useRenderText(generalFeedback)"></div>
+              </div>
             </div>
 
+            <div class="flex justify-center mt-2">
+                <EpBtn rounded type="warning" @click="restart">{{ labelRestart }}</EpBtn>
+            </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 
+
 <style scoped>
 @keyframes fade {
     0% {
@@ -275,22 +322,5 @@ const getChoices = (itinerary: number[]) => {
 
 
 
-
-
-/* Path item styling */
-.path-item {
-    position: relative;
-}
-
-.path-item::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 100%;
-    width: 60px;
-    height: 4px;
-    background-color: rgb(55, 65, 81);
-}
-
 </style>