A Sample Path

For page specific messages
For page author info



This is a path page with a path diagram.

The path page has an embedded tool - path diagram editor, which has its separate toolbar (maybe hidden - look for ยป button, above the path diagram on the left).

A path page may have additional text below the path diagram.

Exclude node summary : 

{"directedAll":false, "directedFromNow":false, "nodes" : [{"id" : 0, "x" : 193, "y" : 40, "width" : 396, "height" : 136, "txt" : "<p style="&amp;#34;text-align:" justify="">A <strong><span style="&amp;#34;color:">path diagram</span></strong> starts with a <em>non-deletable</em> <span style="&amp;#34;color:"><strong>root node</strong></span> like this one.</p> <p style="&amp;#34;text-align:" justify="">This tool can be used for drawing a <a class="&amp;#34;pop&amp;#34;" title="&amp;#34;concept" map="" href="&amp;#34;;#34;">concept map</a> (or a <span style="&amp;#34;color:"><em>topic map</em></span>). For eample, you can use it to define a <em><strong>learning path</strong></em> of recommended sequence of <span style="&amp;#34;color:"><em>inter-dependent content/topics</em></span>, or you can make a <strong>workflow</strong> for your <span style="&amp;#34;color:"><em>authoring</em></span> project.</p>"},{"id" : 2, "x" : 17, "y" : 235, "width" : 308, "height" : 200, "txt" : "<p>The WYSIWYG HTML editor lets you insert multimedia objects within a node. If the node content is bigger than the node box, scrollbar appear automatically. You may use the resizer at the right bottom of the node box if needed.</p> <p>E.g.,</p> <p><img src="&amp;#34;;#34;" alt="&amp;#34;&amp;#34;" width="&amp;#34;468&amp;#34;" height="&amp;#34;279&amp;#34;" /></p> <p>&amp;#38;nbsp;</p> <p>&amp;#38;nbsp;</p>"},{"id" : 3, "x" : 39, "y" : 476, "width" : 291, "height" : 210, "txt" : "<p>Large content or multimedia objects are not suitable for nodes. You should break content into smaller pieces and/or provide links to them here. E.g., <a class="&amp;#34;pop&amp;#34;" href="&amp;#34;;#34;">concept map</a>. Instead of text as link body, you could also use a small image like this <img style="&amp;#34;vertical-align:" middle="" margin:="" border:="" solid="" black="" src="&amp;#34;;#34;" alt="&amp;#34;&amp;#34;" width="&amp;#34;54&amp;#34;" height="&amp;#34;32&amp;#34;" /></p> <p>[Note that links inserted in a path diagram node will automatically open in a <strong>modal popup</strong> window.]</p>"},{"id" : 4, "x" : 411, "y" : 520, "width" : 450, "height" : 151, "txt" : "<p>Explore the potential of the HTML editor as much as you can. It is very powerful! You can directly type in mathematical expression in <a href="&amp;#34;../node/381&amp;#34;">LaTeX syntax</a>.</p> <p>E.g. $&amp;#92;frac{-b&amp;#92;pm&amp;#92;sqrt{b^2-4ac}}{2a}$</p> <p>[The mathematical expressions may get rendered differently for different font-sizes and for different web-browsers.]</p>"},{"id" : 5, "x" : 345, "y" : 207, "width" : 245, "height" : 292, "txt" : "<p>You can embed a youtube video in a node using the insert embedded Media button. After inserting it, you may resize the video.<iframe src="&amp;#34;;#34;" frameborder="&amp;#34;0&amp;#34;" align="&amp;#34;right&amp;#34;" width="&amp;#34;240&amp;#34;" height="&amp;#34;199&amp;#34;"></iframe></p>"},{"id" : 6, "x" : 614, "y" : 40, "width" : 268, "height" : 387, "txt" : "<p><span style="&amp;#34;color:"><strong><span style="&amp;#34;font-size:" medium="">Help</span></strong></span></p> <ul><li>Adding an <strong>isolated node</strong> is easy. Keep <strong>Control key</strong> pressed and <strong>click</strong> on <strong>empty space</strong>!</li> <li>Or, you can simply <strong>click on a link to delete it</strong> and isolate the connected node.</li> <li>A connection will not be directed unless the <strong>Draw Directed checkbox</strong> is <span style="&amp;#34;color:"><strong>checked</strong></span>, It it is checked, all subsequent connections will have <span style="&amp;#34;color:"><strong>directions</strong></span>.</li> <li><strong>Shift+left click</strong> on a link <strong>shows/hides</strong> the <strong>direction</strong>.</li> <li>A <strong>bi-directional arrow</strong> is created by drawing <strong>two overlapping links</strong> between the same connection handles, but drawn in opposite directions. <span style="&amp;#34;color:"><strong>Keep in mind</strong></span> that there are two overlapping links - the later one on top of the earlier one - in a bi-directional arrow.</li> </ul>"}], "connections" : [{"nodeA" : 0, "nodeB" : 5, "conA" : "bottom", "conB" : "top", "isDir" : false},{"nodeA" : 0, "nodeB" : 5, "conA" : "bottom", "conB" : "top", "isDir" : true},{"nodeA" : 0, "nodeB" : 2, "conA" : "bottom", "conB" : "top", "isDir" : true},{"nodeA" : 2, "nodeB" : 3, "conA" : "bottom", "conB" : "top", "isDir" : true},{"nodeA" : 3, "nodeB" : 4, "conA" : "right", "conB" : "left", "isDir" : true}]}

You can edit/modify a path diagram alone without going to page edit mode.

Expand the path editor toolbar, if hidden. Click on 'Start editor', edit the current path diagram and save. The modified path diagram in saved in your file-space. So, the current path will display your saved path diagram in it only if - you were the author of the current path page and you saved the path diagram with its old name!

To load any of the path diagrams saved in your file-space, start the editor first, click the 'Open path diagram' button and click a file name in the list loaded from your file-space.

You cannot load/modify path diagram from others' file-space. However, you can save path diagram from any published page and edit the copy saved in your file-space.