Page 1 sur 1

carte mentale en JS

Posté : 25 avr. 2021, 17:50
par litchi
Bonjour,

Je souhaite afficher une carte mentale sur une page html. Je l'ai créé avec un logiciel de carte mentale, puis enregistré en json et transformé en JS, mais je ne sais pas comment l'afficher sur ma page html.
J'ai un niveau débutant en programmation et c'est dans le cadre de mes études que je dois créer une ressource. Je vous remercie pour votre aide, voici mon code:
"
{id:"f0030949-50f5-4e6f-9862-c8058a1d0d84",title:"La relativité de mouvement :\n\nl’état de repos ou de mouvement d’un objet doit être décrit\n\npar rapport à un autre objet, c'est le référentiel.",mindmap:{root:{id:"a8796fc6-50d4-4124-8ab6-049c206afcbb",parentId:null,text:{caption:"La relativité de mouvement :\n\nl’état de repos ou de mouvement d’un objet doit être décrit\n\npar rapport à un autre objet, c'est le référentiel."},children:[{id:"dfb702b1-5be1-460f-90b8-1cdfc1016cd0",parentId:"a8796fc6-50d4-4124-8ab6-049c206afcbb",text:{caption:"l'objet est"},children:[{id:"2ed38874-147a-4a72-8e5a-f7d30e94b30d",parentId:"dfb702b1-5be1-460f-90b8-1cdfc1016cd0",text:{caption:"immobile"},children:[]},{id:"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1",parentId:"dfb702b1-5be1-460f-90b8-1cdfc1016cd0",text:{caption:"en mouvement"},children:[]}]},{id:"9872989b-d8e1-4553-b137-544256da3dc2",parentId:"a8796fc6-50d4-4124-8ab6-049c206afcbb",text:{caption:"repères dans l'espace"},children:[{id:"cce9317f-d665-48df-b2dd-b1fcd5b30821",parentId:"9872989b-d8e1-4553-b137-544256da3dc2",text:{caption:"terrestre"},children:[]},{id:"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f",parentId:"9872989b-d8e1-4553-b137-544256da3dc2",text:{caption:"héliocentrique"},children:[]},{id:"f0c5fa88-2d81-4438-a8c4-6e3faf897b52",parentId:"9872989b-d8e1-4553-b137-544256da3dc2",text:{caption:"géocentrique"},children:[]}]}]}},dates:{created:1618903957795,modified:1618904811011},dimensions:{x:16000,y:8000},autosave:false,pluginData:{style:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{font:{style:"normal",weight:"bold",fontfamily:"sans-serif",decoration:"none",size:20,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#000000"},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#7f7f7f"},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#7f7f7f"},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#7f7f7f"},"9872989b-d8e1-4553-b137-544256da3dc2":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{font:{style:"normal",weight:"normal",decoration:"none",fontfamily:"sans-serif",size:15,color:"#000000"},border:{visible:true,style:"dashed",color:"#ffa500",background:"#ffffff"},lineWidthOffset:0,branchColor:"#bcbd22"}},layout:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{offset:{x:0,y:0},foldChildren:false},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{offset:{x:646.296875,y:-9.390625},foldChildren:false},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{offset:{x:170,y:-85},foldChildren:false},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{offset:{x:156,y:42},foldChildren:false},"9872989b-d8e1-4553-b137-544256da3dc2":{offset:{x:574,y:154},foldChildren:false},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{offset:{x:270,y:-42},foldChildren:false},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{offset:{x:265,y:40},foldChildren:false},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{offset:{x:266,y:113},foldChildren:false}},image:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}},draw:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{imgData:{objects:[{type:"path",originX:"center",originY:"center",left:1080,top:268,width:0,height:0,fill:null,overlayFill:null,stroke:"rgb(0, 0, 0)",strokeWidth:5,strokeDashArray:null,scaleX:1,scaleY:1,angle:0,flipX:false,flipY:false,opacity:1,selectable:true,hasControls:true,hasBorders:true,hasRotatingPoint:true,transparentCorners:true,perPixelTargetFind:false,shadow:{color:"rgb(0, 0, 0)",blur:0,offsetX:0,offsetY:0},visible:true,path:[["M",0,0],["Q",0,0,0,0],["L",0,0]]}],background:""}},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}},attachment:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}},url:{"a8796fc6-50d4-4124-8ab6-049c206afcbb":{},"dfb702b1-5be1-460f-90b8-1cdfc1016cd0":{urls:["https://youtu.be/nnUNk8A3ozI"]},"2ed38874-147a-4a72-8e5a-f7d30e94b30d":{},"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1":{},"9872989b-d8e1-4553-b137-544256da3dc2":{urls:["https://youtu.be/nnUNk8A3ozI"]},"cce9317f-d665-48df-b2dd-b1fcd5b30821":{},"39303e5d-b0b2-4c50-aca0-f37c5e6c4f8f":{},"f0c5fa88-2d81-4438-a8c4-6e3faf897b52":{}}},cnodes:[{from:"2ed38874-147a-4a72-8e5a-f7d30e94b30d",to:"53d2eab3-4d9e-4e8b-aaea-e55f129a99c1",canvasId:1,style:"dashed",color:"#ff0000",arrow:"0"}]} "

Re: carte mentale en JS

Posté : 26 avr. 2021, 11:24
par webmaster
Bonjour,
Ce code source est l'export produit par le logiciel ? Qu'il faut afficher en mode HTML ?
Ambitieux, a moins de trouver un script capable de s'en charger.
Mais apres quelques recherches, il n'y a rien de gratuit récent.

Tu es sur de l'énoncé ?

Re: carte mentale en JS

Posté : 12 mai 2021, 18:53
par litchi
Bonjour,
Merci du temps que tu as pris pour me répondre, mais devant l'ampleur de la tâche et mon incompréhension, je renonce. Je vais plutôt faire la carte sous format image et ajouter des images cliquables qui ouvrent des vidéos dans une pop up. Ce sera davantge à ma portée je pense.
En fait, dans le cadre de mes études, je suis libre de coder comme je veux, je dois choisir l'ergonomie de la ressource en fonction de ce que je veux et ce que je peux faire.
Merci beaucoup quand même