Improved various instructions

Author: lee-naish

src/algorithms/instructions/index.js

@@ -19,23 +19,25 @@ export const KEY_WORDS = [
   KEY_CODE, KEY_INSERT, KEY_PLAY, KEY_SEARCH, KEY_SORT, KEY_LOAD, KEY_INSDEL
 ];
 
+const PLAY_INSTRUCTIONS = `Click on ${KEY_PLAY} to watch the algorithm run. The speed may be adjusted using the speed slider. You can also pause, single step forwards and backwards and use the progress bar slider. The level of detail can be increased by clicking the ">" on lines of pseudocode; clicking "?" pops up an explanation for the line of code.`;
+
 const bstInstructions = [
   {
     title: 'Insert Mode', // Specify BST Insertion as Insert mode
     content: [
       `Click on ${KEY_CODE} on the right panel`,
       'Enter a list of nodes in the insert parameter.',
-      `Click on ${KEY_INSERT} to enter insert mode and load the algorithm.`,
-      `Click on ${KEY_PLAY} to watch the algorithm run.`,
+      `Click on ${KEY_INSERT} or hit return to enter insert mode and load the data.`,
+      PLAY_INSTRUCTIONS,
     ],
   },
   {
     title: 'Search Mode', // Specify BST Searching as Search mode
     content: [
       `Click on ${KEY_CODE} on the right panel`,
       'Enter a node in the search parameter.',
-      `Click on ${KEY_SEARCH} to enter search mode and load the algorithm.`,
-      `Click on ${KEY_PLAY} to watch the algorithm run.`,
+      `Click on ${KEY_SEARCH} or hit return to enter search mode and load the data.`,
+      PLAY_INSTRUCTIONS,
     ],
   },
 ];
@@ -47,8 +49,8 @@ const stringInstructions = [{
   content: [
     `Click on ${KEY_CODE} on the right panel`,
     'Enter a string to search followed by a string to search for, seperated by a comma',
-    `Click on ${KEY_FIND} to load the algorithm.`,
-    `Click on ${KEY_PLAY} to watch the algorithm run.`,
+    `Click on ${KEY_FIND} or hit return to load the data.`,
+      PLAY_INSTRUCTIONS,
   ],
 }];
 
@@ -75,10 +77,8 @@ visible`,
     Bulk insert is not animated to the same degree as single inserts; it
 allows you to pre-fill some of the table quickly.`,
 
-    `Click on ${KEY_INSDEL} (or hit return after data input) to enter Insert mode and load the algorithm.`,
-    `Click on ${KEY_PLAY} to watch the algorithm run. The speed may be
-adjusted using the speed slider. You can also pause, single step forwards and
-backwards and use the progress bar slider.`,
+    `Click on ${KEY_INSDEL} or hit return to enter Insert mode and load the data.`,
+      PLAY_INSTRUCTIONS,
     'For hashing with chaining, when a chain is not displayed completely it can be revealed by hovering the mouse over the table slot.'
     ],
   },
@@ -88,8 +88,8 @@ backwards and use the progress bar slider.`,
     'Make sure table has inserted values before searching.',
     `Click on ${KEY_CODE} on the right panel.`,
     'Enter an Integer in the Search parameter.',
-    `Click on ${KEY_SEARCH} to enter Search mode and load the algorithm.`,
-    `Click on ${KEY_PLAY} to watch the algorithm run. The speed may be adjusted using the speed slider.`,
+    `Click on ${KEY_SEARCH} or hit return to enter Search mode and load the data.`,
+      PLAY_INSTRUCTIONS,
     ],
   },
 ];
@@ -100,8 +100,8 @@ const sortInstructions = [{
   content: [
     `Click on ${KEY_CODE} on the right panel`,
     'Enter a list of numbers in the sort parameter.',
-    `Click on ${KEY_SORT} to load the algorithm.`,
-    `Click on ${KEY_PLAY} to watch the algorithm run.`,
+    `Click on ${KEY_SORT} or hit return to load the data.`,
+      PLAY_INSTRUCTIONS,
   ],
 }];
 
@@ -110,13 +110,11 @@ const graphInstructions = [
     title: 'To Run Animation',
     content: [
       `Click on ${KEY_CODE} at the top of the right-hand panel`,
-      `Either step through the algorithm (click on ${KEY_FORWARD}) or play continuously (click on ${KEY_PLAY}). Code and animation will follow in lockstep.`,
+      PLAY_INSTRUCTIONS,
       `The graph can be chosen (see below; default Graph 1 is shown initially)`,
-      `Athoer algorithm parameters can be chosen below the
+      `Other algorithm parameters can be chosen below the
 ${KEY_PROGRESS} bar; this will reset the animation to the start`,
-      `Screen layout can be altered (depending on your browser/platform):
-the left panel can be rendered invisible by clicking
-on the arrow in its middle, the right and bottom panels can be enlarged or shrunk by dragging the ellipsis ("..."), and you can zoom in/out and drag elements in the animation panel`,
+      `Screen layout can be altered (depending on your browser/platform): the right and bottom panels can be enlarged or shrunk by dragging the ellipsis ("..."), and you can zoom in/out and drag elements in the animation panel`,
     ]
   },
   {
@@ -135,12 +133,12 @@ by dragging the "..." up temporarily`,
 ];
 
 const graphInstructionsTC = [{
-  title: 'Create Graph ',
+  title: ' ',
   content: [
     `Click on ${KEY_CODE} on the right panel`,
-    'Enter a graph in the transition matrix',
-    `Click on ${KEY_LOAD} to load the algorithm.`,
-    `Click on ${KEY_PLAY} to watch the algorithm run.`,
+    'Enter a graph in the edge matrix',
+    `Click on ${KEY_LOAD} or hit return to load the data.`,
+      PLAY_INSTRUCTIONS,
     'All nodes are SELF-REACHABLE => All diagonal elements are ones and NOT allowed to be edited.',
   ],
 }];
@@ -152,7 +150,7 @@ const unionFindInstructions = [{
     `Use the panel in the lower centre of the screen to control the algorithm visualisation:`,
     `Select nodes to union by entering a list of union operations in the left input box and click ${KEY_UF_UNION}.`,
     `Click ${KEY_UF_PC_ON} or ${KEY_UF_PC_OFF} to toggle path compression.`,
-    `Click on ${KEY_PLAY}, ${KEY_PAUSE}, or the ${KEY_BACK} and ${KEY_FORWARD} arrows to watch the algorithm run.`,
+      PLAY_INSTRUCTIONS,
     `Enter a node in the right input box and click ${KEY_UF_FIND} and then ${KEY_PLAY} to search for the node's set representative.`,
   ]
 }];