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"}]} "
carte mentale en JS
Re: carte mentale en JS
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é ?
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é ?
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php
https://www.toutjavascript.com/livre/index.php
Re: carte mentale en JS
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
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