-
Notifications
You must be signed in to change notification settings - Fork 1
/
user-guide.html
3634 lines (2891 loc) · 260 KB
/
user-guide.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>User Guide</title>
<link href="css/user-guide.css" rel="stylesheet" />
<link href="css/main-menu.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<!-- import custom font Nunito -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
</head>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-------------------------------------------------------------------------Navigation Bar------------------------------------------------------------------------------------------>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<body>
<section>
<nav>
<ul>
<li><a href="./index.html" data-section-id="home-section"><i class="fa fa-home"></i></a></li>
<li><a href="#" data-section-id="custom-creation-section">Custom Creation</a>
<ul>
<li><a href="#" data-section-id="custom-tree-creation">Custom B-Tree Creation</a></li>
<li><a href="#" data-section-id="random-tree-creation">Random B-Tree Creation</a></li>
<li><a href="#" data-section-id="tree-creation-save-load">Save and Load a B-Tree</a></li>
<li><a href="#" data-section-id="tree-creation-questions">Questions on Created B-Tree</a></li>
</ul>
</li>
<li><a href="#" data-section-id="practice-questions-section">Practice Questions</a></li>
<li><a href="#" data-section-id="manipulation-guide-section">Manipulation Guide</a>
<ul>
<li><a href="#" data-section-id="moving-a-key">Moving a Key</a></li>
<li><a href="#" data-section-id="inserting-a-key-into-a-node">Inserting a Key into a Node</a></li>
<li><a href="#" data-section-id="removing-a-key-from-a-node">Removing a Key from a Node</a></li>
<li><a href="#" data-section-id="deleting-a-key">Deleting a Key</a></li>
<li><a href="#" data-section-id="move-an-entire-node">Moving an Entire Node</a></li>
<li><a href="#" data-section-id="establishing-a-child-node-link">Establishing a Child Node Link</a></li>
<li><a href="#" data-section-id="overwriting-a-child-node">Overwriting a Child Node</a></li>
<li><a href="#" data-section-id="splitting-the-root-node">Splitting the Root Node</a></li>
</ul>
</li>
<li><a href="#" data-section-id="tutorials-section">Tutorials</a>
<ul>
<li><a href="#" data-section-id="insertion-guide-section">B-Tree Insertion Guide </a>
<ul>
<li><a href="#" data-section-id="preemptive-splitting">Pre-emptive Splitting</a></li>
<li><a href="#" data-section-id="insert-case-1a">Case 1a</a></li>
<li><a href="#" data-section-id="insert-case-1b">Case 1b</a></li>
<li><a href="#" data-section-id="insert-case-2a">Case 2a</a></li>
<li><a href="#" data-section-id="insert-case-2b">Case 2b</a></li>
</ul>
</li>
<li><a href="#" data-section-id="deletion-guide-section">B-Tree Deletion Guide</a>
<ul>
<li><a href="#" data-section-id="preemptive-merging">Pre-emptive Merging</a></li>
<li><a href="#" data-section-id="deletion-case-1">Case 1</a></li>
<li><a href="#" data-section-id="deletion-case-2a">Case 2a</a></li>
<li><a href="#" data-section-id="deletion-case-2b">Case 2b</a></li>
<li><a href="#" data-section-id="deletion-case-2c">Case 2c</a></li>
<li><a href="#" data-section-id="deletion-case-3a">Case 3a</a></li>
<li><a href="#" data-section-id="deletion-case-3b">Case 3b</a></li>
<li><a href="#" data-section-id="deletion-case-3c">Case 3c</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" data-section-id="glossary-section">Glossary</a></li>
<li><a href="#" data-section-id="faq-section">FAQ</a></li>
<li><a href="#" data-section-id="videos-section">Videos</a></li>
</ul>
</nav>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-------------------------------------------------------------------------Custom Creation Guide------------------------------------------------------------------------------------>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="custom-creation-section" class="coloured-section">
<section class="inner-section">
<h2>Custom Creation:</h2>
<p>
This section of the User Guide will take you through the steps of creating/randomly generating your own B-Tree to practising questions on that B-Tree.
</p>
<ul>
<li>1.1) Custom B-Tree Creation</li>
<li>1.2) Random B-Tree Creation</li>
<li>1.3) Save and Load a B-Tree</li>
<li>1.4) Questions on Created B-Tree (Random or Custom)</li>
</ul>
</section>
<section class="inner-section">
<h2>B-Tree Creation</h2>
<p>When entering the Custom Tree Creation Menu you will be greeted with the following page. From here you will have all the tools you need to create your custom/randomly generated B-Tree.</p>
<img src="./assets/guide/bTreeCreation1.jpg" alt="Image 1">
<p>To navigate back to the main menu select the Back button located on the top left of the screen. The light bulb on the top left of the screen will switch the application in and out of dark mode.</p>
<img src="./assets/guide/darkMode.jpg" alt="Image 2">
<br></br>
<img src="./assets/guide/bTreeCreation2.jpg" alt="Image 3">
<p>The arrow and centre(.) buttons will move the B-Tree around within the canvas and the centre button will move it to the centre of the canvas.</p>
<img src="./assets/guide/bTreeCreation3.jpg" alt="Image 4">
<p>To get help with using the software, select the “Need Help” button and the following pop up will appear where you can view a quick guide to the software.</p>
<img src="./assets/guide/needHelp1.jpg" alt="Image 5">
<br></br>
<img src="./assets/guide/bTreeCreation4.jpg" alt="Image 6">
</section>
<section class="inner-section">
<h2>1.1) Custom B-Tree Creation</h2>
<p>To create a custom B-Tree you will use the tools in the figure below. In order to create a new B-Tree you will need to select the “Max Degree” input box and insert a numerical value between 2 and 4. Once entering the value, select the “Custom Tree” button.</p>
<img src="./assets/guide/customBTreeCreation1.jpg" alt="Image 1">
<p>After selecting the “Custom Tree” button, the canvas should allow you to insert/delete keys as seen in the figure below.</p>
<img src="./assets/guide/customBTreeCreation2.jpg" alt="Image 2">
<p>To insert keys, select the “Insert” input box and insert a numerical value and then click the “Insert” button. Once completed, you will see a key pop up in the canvas and this can be seen in the left image. After continually inserting values, you will eventually have a B-Tree that looks as you desire, this B-Tree will be restructured automatically and requires no user input to change it.</p>
<img src="./assets/guide/customBTreeCreation3.jpg" alt="Image 3">
<br></br>
<img src="./assets/guide/customBTreeCreation4.jpg" alt="Image 4">
<img src="./assets/guide/customBTreeCreation5.jpg" alt="Image 5">
<p>If you made a mistake or you would like to remove a key, you can use the delete feature. To delete keys, select the “Delete” input box and insert a numerical value (that already exists within the B-Tree) and then click the “Delete” button. Once completed, you will see the desired key removed from the B-Tree. The deletion from the B-Tree will cause it to be restructured automatically and requires no user input to change it. For example, removing 22 from the B-Tree above:</p>
<img src="./assets/guide/customBTreeCreation6.jpg" alt="Image 6">
<br></br>
<img src="./assets/guide/customBTreeCreation7.jpg" alt="Image 7">
</section>
<section class="inner-section">
<h2>1.2) Random B-Tree Creation</h2>
<p>To create a randomly generated B-Tree you will use the tools in the figure below. In order to create a new randomly generated B-Tree you will need to select the “Max Degree” input box and insert a numerical value between 2 and 4. You will need to select the “Num Keys” input box and insert a numerical value between 1 and 100.</p>
<p>To use a seed to generate your random B-Tree, you will need to select the “Seed” input box and insert a numerical and select the “Use Seed” Checkbox. Essentially all this does is create a B-Tree using a particular seed.</p>
<img src="./assets/guide/randomBTreeCreation1.jpg" alt="Image 1">
<p>Once entering the values described above, select the “Random Tree'' button. After selecting the “Random Tree” button, the canvas should allow you to insert/delete keys as seen in the figure below and it will create a randomly generated B-Tree on the canvas. After generating the random B-Tree you can use the insert and delete key functionality to further customise your randomly generated B-Tree.</p>
<img src="./assets/guide/randomBTreeCreation2.jpg" alt="Image 2">
<p>To insert keys, select the “Insert” input box and insert a numerical value and then click the “Insert” button. Once completed, you will see your key inserted into the B-Tree, the B-Tree will be restructured automatically and requires no user input to change it.</p>
<img src="./assets/guide/randomBTreeCreation3.jpg" alt="Image 3">
<br></br>
<img src="./assets/guide/randomBTreeCreation4.jpg" alt="Image 4">
<p>To delete keys, select the “Delete” input box and insert a numerical value that already exists in the B-Tree and then click the “Insert” button. Once completed, you will see your key removed from the B-Tree, the B-Tree will be restructured automatically and requires no user input to change it.</p>
<img src="./assets/guide/randomBTreeCreation5.jpg" alt="Image 5">
<br></br>
<img src="./assets/guide/randomBTreeCreation6.jpg" alt="Image 6">
</section>
<section class="inner-section">
<h2>1.3) Save and Load a B-Tree</h2>
<p>To save and load a B-Tree, you will need to use the buttons displayed below.</p>
<img src="./assets/guide/saveLoad1.jpg" alt="Image 1">
<p>To save a B-Tree that you have created, you will need to select the “Save” button. After saving the B-Tree, it will automatically download a text file to your device containing the contents used to create the B-Tree.</p>
<img src="./assets/guide/saveLoad2.jpg" alt="Image 2">
<p>To load a B-Tree you will need to select the “Load” button. After selecting the button, a pop up to your field will be displayed. From here, you can select the text file of the B-Tree you would like to load. After selectin the file and opening it, the B-Tree will be created within the canvas area.</p>
<img src="./assets/guide/saveLoad2.jpg" alt="Image 3">
</section>
<section class="inner-section">
<h2>1.4) Questions on Created B-Tree</h2>
<p>After creating/generating your custom B-Tree, you can then answer questions on it. To do this, select the “Generate Questions on Tree” button.</p>
<img src="./assets/guide/questionsBTreeCreation1.jpg" alt="Image 1">
<p>After selecting this button you will be greeted with the following screen. As soon as the screen loads, you will be prompted with a question to perform on the B-Tree. You can use sections 3 and 4 in the user guide to help you complete these operations. </p>
<img src="./assets/guide/questionsBTreeCreation2.jpg" alt="Image 2">
<p>Once you have completed the operation, select the “Check Answer” button. From here, one of two things may happen.</p>
<p>The first option is that the operation you performed may be incorrect. In this case you will be notified and you will have the chance to see the correct answer by selecting the “Show Correct Answer”.</p>
<img src="./assets/guide/inValidOperation.jpg" alt="Image 3">
<br></br>
<img src="./assets/guide/questionsBTreeCreation3.jpg" alt="Image 4">
<br></br>
<img src="./assets/guide/questionsBTreeCreation4.jpg" alt="Image 5">
<p>The second option is that the operation you performed may be correct. In this case you will be notified and then a new question will be generated and the tree will be reset back to the original one created by you.</p>
<img src="./assets/guide/validOperation.jpg" alt="Image 6">
<br></br>
<img src="./assets/guide/questionsBTreeCreation5.jpg" alt="Image 7">
<p>Note how a new question was created, from here you can perform the new question. If you get stuck during a question and would like to retry it, you can select the retry button situated at the top left of the screen.</p>
<img src="./assets/guide/retryMode.jpg" alt="Image 8">
<p>You can navigate back the custom tree creation by selecting the back button. You can also access the help menu by selecting the button as seen below.</p>
<img src="./assets/guide/backMode.jpg" alt="Image 9">
<img src="./assets/guide/needHelp1.jpg" alt="Image 10">
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------Custom B-Tree Creation---------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="custom-tree-creation" class="coloured-section">
<section class="inner-section">
<h2>Custom B-Tree Creation</h2>
<p>To create a custom B-Tree you will use the tools in the figure below. In order to create a new B-Tree you will need to select the “Max Degree” input box and insert a numerical value between 2 and 4. Once entering the value, select the “Custom Tree” button.</p>
<img src="./assets/guide/customBTreeCreation1.jpg" alt="Image 1">
<p>After selecting the “Custom Tree” button, the canvas should allow you to insert/delete keys as seen in the figure below.</p>
<img src="./assets/guide/customBTreeCreation2.jpg" alt="Image 2">
<p>To insert keys, select the “Insert” input box and insert a numerical value and then click the “Insert” button. Once completed, you will see a key pop up in the canvas and this can be seen in the left image. After continually inserting values, you will eventually have a B-Tree that looks as you desire, this B-Tree will be restructured automatically and requires no user input to change it.</p>
<img src="./assets/guide/customBTreeCreation3.jpg" alt="Image 3">
<br></br>
<img src="./assets/guide/customBTreeCreation4.jpg" alt="Image 4">
<img src="./assets/guide/customBTreeCreation5.jpg" alt="Image 5">
<p>If you made a mistake or you would like to remove a key, you can use the delete feature. To delete keys, select the “Delete” input box and insert a numerical value (that already exists within the B-Tree) and then click the “Delete” button. Once completed, you will see the desired key removed from the B-Tree. The deletion from the B-Tree will cause it to be restructured automatically and requires no user input to change it. For example, removing 22 from the B-Tree above:</p>
<img src="./assets/guide/customBTreeCreation6.jpg" alt="Image 6">
<br></br>
<img src="./assets/guide/customBTreeCreation7.jpg" alt="Image 7">
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------Random B-Tree Creation---------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="random-tree-creation" class="coloured-section">
<section class="inner-section">
<h2>Random B-Tree Creation</h2>
<p>To create a randomly generated B-Tree you will use the tools in the figure below. In order to create a new randomly generated B-Tree you will need to select the “Max Degree” input box and insert a numerical value between 2 and 4. You will need to select the “Num Keys” input box and insert a numerical value between 1 and 100.</p>
<p>To use a seed to generate your random B-Tree, you will need to select the “Seed” input box and insert a numerical and select the “Use Seed” Checkbox. Essentially all this does is create a B-Tree using a particular seed.</p>
<img src="./assets/guide/randomBTreeCreation1.jpg" alt="Image 1">
<p>Once entering the values described above, select the “Random Tree'' button. After selecting the “Random Tree” button, the canvas should allow you to insert/delete keys as seen in the figure below and it will create a randomly generated B-Tree on the canvas. After generating the random B-Tree you can use the insert and delete key functionality to further customise your randomly generated B-Tree.</p>
<img src="./assets/guide/randomBTreeCreation2.jpg" alt="Image 2">
<p>To insert keys, select the “Insert” input box and insert a numerical value and then click the “Insert” button. Once completed, you will see your key inserted into the B-Tree, the B-Tree will be restructured automatically and requires no user input to change it.</p>
<img src="./assets/guide/randomBTreeCreation3.jpg" alt="Image 3">
<br></br>
<img src="./assets/guide/randomBTreeCreation4.jpg" alt="Image 4">
<p>To delete keys, select the “Delete” input box and insert a numerical value that already exists in the B-Tree and then click the “Delete” button. Once completed, you will see your key removed from the B-Tree, the B-Tree will be restructured automatically and requires no user input to change it.</p>
<img src="./assets/guide/randomBTreeCreation5.jpg" alt="Image 5">
<br></br>
<img src="./assets/guide/randomBTreeCreation6.jpg" alt="Image 6">
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------Save and Load B-Tree----------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="tree-creation-save-load" class="coloured-section">
<section class="inner-section">
<h2>Save and Load a B-Tree</h2>
<p>To save and load a B-Tree, you will need to use the buttons displayed below.</p>
<img src="./assets/guide/saveLoad1.jpg" alt="Image 1">
<p>To save a B-Tree that you have created, you will need to select the “Save” button. After saving the B-Tree, it will automatically download a text file to your device containing the contents used to create the B-Tree.</p>
<img src="./assets/guide/saveLoad2.jpg" alt="Image 2">
<p>To load a B-Tree you will need to select the “Load” button. After selecting the button, a pop up to your field will be displayed. From here, you can select the text file of the B-Tree you would like to load. After selectin the file and opening it, the B-Tree will be created within the canvas area.</p>
<img src="./assets/guide/saveLoad2.jpg" alt="Image 3">
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------Questions on B-Trees----------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="tree-creation-questions" class="coloured-section">
<section class="inner-section">
<h2>Questions on Created B-Tree</h2>
<p>After creating/generating your custom B-Tree, you can then answer questions on it. To do this, select the “Generate Questions on Tree” button.</p>
<img src="./assets/guide/questionsBTreeCreation1.jpg" alt="Image 1">
<p>After selecting this button you will be greeted with the following screen. As soon as the screen loads, you will be prompted with a question to perform on the B-Tree. You can use sections 3 and 4 in the user guide to help you complete these operations. </p>
<img src="./assets/guide/questionsBTreeCreation2.jpg" alt="Image 2">
<p>Once you have completed the operation, select the “Check Answer” button. From here, one of two things may happen.</p>
<p>The first option is that the operation you performed may be incorrect. In this case you will be notified and you will have the chance to see the correct answer by selecting the “Show Correct Answer”.</p>
<img src="./assets/guide/inValidOperation.jpg" alt="Image 3">
<br></br>
<img src="./assets/guide/questionsBTreeCreation3.jpg" alt="Image 4">
<br></br>
<img src="./assets/guide/questionsBTreeCreation4.jpg" alt="Image 5">
<p>The second option is that the operation you performed may be correct. In this case you will be notified and then a new question will be generated and the tree will be reset back to the original one created by you.</p>
<img src="./assets/guide/validOperation.jpg" alt="Image 6">
<br></br>
<img src="./assets/guide/questionsBTreeCreation5.jpg" alt="Image 7">
<p>Note how a new question was created, from here you can perform the new question. If you get stuck during a question and would like to retry it, you can select the retry button situated at the top left of the screen.</p>
<img src="./assets/guide/retryMode.jpg" alt="Image 8">
<p>You can navigate back the custom tree creation by selecting the back button. You can also access the help menu by selecting the button as seen below.</p>
<img src="./assets/guide/backMode.jpg" alt="Image 9">
<img src="./assets/guide/needHelp1.jpg" alt="Image 10">
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-------------------------------------------------------------------------Practice Questions Guide--------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="practice-questions-section" class="coloured-section">
<section class="inner-section">
<h2>Answer Random Questions</h2>
<p>When entering the Answer Random Questions menu you will be greeted with the following page. As soon as the screen loads, you will be prompted with a question to perform on a random B-Tree. You can use sections 3 and 4 in the user guide to help you complete these operations. </p>
<img src="./assets/guide/answerBTreeQuestions1.jpg" alt="Image 1">
<p>Once you have completed the operation, select the “Check Answer” button. From here, one of two things may happen.</p>
<p>The first option is that the operation you performed may be incorrect. In this case you will be notified and you will have the chance to see the correct answer by selecting the “Show Correct Answer”.</p>
<img src="./assets/guide/inValidOperation.jpg" alt="Image 3">
<br></br>
<img src="./assets/guide/answerBTreeQuestions2.jpg" alt="Image 4">
<br></br>
<img src="./assets/guide/answerBTreeQuestions3.jpg" alt="Image 5">
<p>The second option is that the operation you performed is correct. In this case you will be notified and then a new question will be generated with a new random tree.</p>
<img src="./assets/guide/validOperation.jpg" alt="Image 6">
<br></br>
<img src="./assets/guide/answerBTreeQuestions4.jpg" alt="Image 7">
<p>Note how a new question was created, from here you can perform the new question. If you get stuck during a question and would like to retry it, you can select the retry button situated at the top left of the screen.</p>
<img src="./assets/guide/retryMode.jpg" alt="Image 8">
<p>You can navigate back the custom tree creation by selecting the back button. You can also access the help menu by selecting the button as seen below.</p>
<img src="./assets/guide/backMode.jpg" alt="Image 9">
<img src="./assets/guide/needHelp1.jpg" alt="Image 10">
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Full Manipulation Guide--------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="manipulation-guide-section" class="coloured-section">
<section class="inner-section">
<h2>Manipulations:</h2>
<p>
The tree manipulation guide is an introduction into how to manipulate the B-tree to achieve the desired answer. Every possible way to manipulate the B-Tree is listed below.
</p>
<ul>
<li>1.1) Moving a key</li>
<li>1.2) Inserting a Key into a Node</li>
<li>1.3) Removing a Key from a Node</li>
<li>1.4) Deleting a Key</li>
<li>1.5) Moving an Entire Node</li>
<li>1.6) Establishing a Child Node Link</li>
<li>1.7) Overwriting a Child Node</li>
<li>1.8) Splitting the Root node</li>
</ul>
</section>
<section class="inner-section">
<h2>1.1) Moving a Key:</h2>
<p>To move a key, follow these steps:</p>
<ol>
<li>Hover your mouse pointer over the key you want to move.</li>
<li>Left-click and hold the mouse button to select the key.</li>
<li>The colour of the key will change from light blue to a slightly darker blue to indicate that it has been selected.</li>
<li>While keeping the left mouse button pressed, drag your mouse to the desired location on the canvas.</li>
<li>Once you've reached the desired position for the key on the canvas, release the left mouse button to place it.</li>
</ol>
<div class="image-container">
<img src="./assets/mk1.jpg" alt="Image 1">
<img src="./assets/mk2.jpg" alt="Image 2">
<img src="./assets/mk3.jpg" alt="Image 3">
<img src="./assets/mk4.jpg" alt="Image 4">
</div>
</section>
<section class="inner-section">
<h2>1.2) Inserting a Key into a Node:</h2>
<p>To insert a key into a node, follow the instructions in 1.1 for selecting and moving a key. When positioning the key within the node, observe the colour change from light blue to green, signifying the key's correct placement. There are three key attachment positions within a node:</p>
<ol>
<li><strong>1.2.1. Adding to the Front of the Node:</strong>
<ul>
<li>To attach a key to the front of the node, hover the selected key so that the right half of the key overlaps with the left edge of the node.</li>
<li>The key will turn green when it's in the correct position for placement within the node.</li>
<li>Release the left mouse button to place the key at the front of the node.</li>
</ul>
<div class="image-container">
<img src="./assets/ins1.jpg" alt="Image 1">
<img src="./assets/ins2.jpg" alt="Image 2">
<img src="./assets/ins3.jpg" alt="Image 3">
</div>
</li>
<li><strong>1.2.2. Adding to the End of the Node:</strong>
<ul>
<li>To attach a key to the end of the node, hover the selected key so that the right half of the key overlaps with the left edge of the node.</li>
<li>The key will change from light blue to green to indicate it's ready for placement at the end.</li>
<li>Release the left mouse button to insert the key at the node's end.</li>
</ul>
<div class="image-container">
<img src="./assets/ins4.jpg" alt="Image 1">
<img src="./assets/ins5.jpg" alt="Image 2">
<img src="./assets/ins6.jpg" alt="Image 3">
</div>
</li>
<li><strong>1.2.3. Adding Between Other Keys Within the Node:</strong>
<ul>
<li>To attach a key between two existing keys within the node, hover your mouse over the desired location between the keys.</li>
<li>The selected key that you are dragging should be in between the keys that you want to place the selected key between.</li>
<li>As you drag the key to the space between the keys, it will change colour to green, indicating the correct position.</li>
<li>Release the left mouse button to insert the key in the desired location between the existing keys within the node.</li>
</ul>
<div class="image-container">
<img src="./assets/ins7.jpg" alt="Image 1">
<img src="./assets/ins8.jpg" alt="Image 2">
<img src="./assets/ins9.jpg" alt="Image 3">
</div>
</li>
</ol>
</section>
<section class="inner-section">
<h2>1.3) Removing a Key from a Node:</h2>
<p>To remove a key from a node, follow these steps:</p>
<ol>
<li>Locate the node containing the key you want to remove.</li>
<li>Left-click on the key you wish to remove and hold down the left mouse button.</li>
<li>While holding the left mouse button, drag the key away from the tree or node.</li>
<li>Release the left mouse button to detach the key from the node.</li>
</ol>
<div class="image-container">
<img src="./assets/rem1.jpg" alt="Image 1">
<img src="./assets/rem2.jpg" alt="Image 2">
<img src="./assets/rem3.jpg" alt="Image 3">
</div>
</section>
<section class="inner-section">
<h2>1.4) Deleting a Key:</h2>
<p>To delete a key from the tree, follow these steps:</p>
<ol>
<li>Locate the key you want to delete within the tree.</li>
<li>Left-click on the key you wish to delete and hold down the left mouse button.</li>
<li>While holding the left mouse button, drag the key to the bottom right of the canvas.</li>
<li>As you move the key to this area, an "X" symbol will appear in the bottom right corner of the canvas.</li>
<li>Release the left mouse button while the key is over the "X" symbol, the key will be red if it is in the correct range to delete.</li>
<li>The key will be deleted from the tree entirely.</li>
</ol>
<div class="image-container">
<img src="./assets/del1.jpg" alt="Image 1">
<img src="./assets/del2.jpg" alt="Image 2">
<img src="./assets/del3.jpg" alt="Image 3">
<img src="./assets/del4.jpg" alt="Image 3">
</div>
</section>
<section class="inner-section">
<h2>1.5) Moving an Entire Node:</h2>
<p>Left-clicking and dragging moves individual keys, however, there may be situations where we would like to move an entire node instead of just moving individual keys.</p>
<p>To move an entire node, follow these steps:</p>
<ol>
<li>Press the spacebar to enter “move entire node” mode.</li>
<li>You will be able to determine if you are within this mode if all of the first keys within every node, including free nodes, are colored green.</li>
<li>Select the first key within the node that you would like to move, by left-clicking the first key within the node and holding down the left mouse button.</li>
<li>Note that the only key that you can select to move an entire node is the first key within the node, and this is indicated by the green color of the first key.</li>
<li>While keeping the left mouse button pressed, drag your mouse to the desired location on the canvas.</li>
<li>Once you've reached the desired position for the node on the canvas, release the left mouse button to place it.</li>
</ol>
<div class="image-container">
<img src="./assets/mn1.jpg" alt="Image 1">
<img src="./assets/mn2.jpg" alt="Image 2">
<img src="./assets/mn3.jpg" alt="Image 3">
<img src="./assets/mn4.jpg" alt="Image 3">
</div>
</section>
<section class="inner-section">
<h2>1.6) Establishing a Child Node Link:</h2>
<p>To create a link between a child node and the tree, follow these detailed steps:</p>
<ol>
<li>Identify the node to which you want to attach a child node.</li>
<li>Determine the keys between which you intend to establish a connection. The connection's nature is influenced by its placement in relation to these keys.</li>
<li>Hover your mouse over the lower right or lower left corner of the key from which you wish to initiate the connection.</li>
<li>When positioned correctly, a small red circle will appear, signaling that you can initiate a connection from this point.</li>
<li>Left-click and hold down the mouse button to initiate the connection when you see the small red circle.</li>
<li>Drag your mouse in the direction of the node you want to connect as a child to the tree.</li>
<li>While dragging, you'll notice a yellow arrow extending from the original key location where you clicked; this arrow represents the ongoing connection process, often referred to as "connection mode."</li>
<li>Additionally, during connection mode, a small red circle will appear at the middle-top of every node that can potentially serve as a child to the original node where you initiated the connection.</li>
<li>To finalize the connection, while in connection mode, drag your mouse to the small red circle positioned at the top of the node you want to connect to.</li>
<li>Upon hovering over the small red circle, release your mouse click to establish the connection.</li>
<li>If the connection is successful, a yellow arrow will be drawn between the two nodes.</li>
</ol>
<div class="image-container">
<img src="./assets/ch1.jpg" alt="Image 1">
<img src="./assets/ch2.jpg" alt="Image 2">
<img src="./assets/ch3.jpg" alt="Image 3">
</div>
</section>
<section class="inner-section">
<h2>1.7) Overwriting a Child Node:</h2>
<p>There may be cases where a connection between a parent node and child node already exists, however, you would like to overwrite this already established connection to make a new connection between the parent node and a new child node.</p>
<p>To overwrite a child node, follow these steps:</p>
<ol>
<li>Identify the parent node with the existing child node connection you want to replace.</li>
<li>Determine the keys between which you intend to create the new connection, taking into account the adjusted relationship.</li>
<li>Hover your mouse over the bottom right or bottom left corner of the key from which you wish to initiate the new connection.</li>
<li>Once correctly positioned, a small red circle will indicate that you can initiate the connection from this location.</li>
<li>Left-click and hold down the mouse button when the small red circle is visible to start the new connection.</li>
<li>Drag your mouse towards the desired node you wish to connect as the new child node.</li>
<li>During this process, you'll observe a yellow arrow extending from the original key location where you initiated the connection, representing the ongoing "connection mode."</li>
<li>Additionally, within connection mode, a small red circle will appear at the middle-top of every node that can potentially become the new child node.</li>
<li>To complete the process, while in connection mode, guide your mouse to the small red circle positioned at the top of the node you want to connect as the new child node.</li>
<li>Upon hovering over the small red circle, release your mouse click to establish the new connection.</li>
<li>If successful, a yellow arrow will be drawn between the parent node and the new child node, effectively overwriting the previous connection.</li>
</ol>
<div class="image-container">
<img src="./assets/ov1.jpg" alt="Image 1">
<img src="./assets/ov2.jpg" alt="Image 2">
<img src="./assets/ov3.jpg" alt="Image 3">
</div>
</section>
<section class="inner-section">
<h2>1.8) Splitting the Root Node:</h2>
<p>There may be cases where you need to split the root node of the tree so that the median key of the original root becomes the single key of the new root and the keys contained in the left half of the original root become the new roots’ left child and the keys contained in the right half of the original root become the new roots’ right node.</p>
<p>Please note that functionality of splitting the node will only be available to the user if the root node has the maximum amount of keys i.e., (2t-1) keys.</p>
<p>To split the root node, follow these steps:</p>
<ol>
<li>Hover your mouse to the area slightly above the median key of the root node.</li>
<li>If the root is available to be split then a split node symbol will appear. The symbol looks like a diverging path of three yellow arrows.</li>
<li>Left click the mouse button to perform the split root function.</li>
</ol>
<div class="image-container">
<img src="./assets/spl1.jpg" alt="Image 1">
<img src="./assets/spl2.jpg" alt="Image 2">
<img src="./assets/spl3.jpg" alt="Image 3">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Moving a Key-------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="moving-a-key" class="coloured-section">
<section class="inner-section">
<h2>1.1) Moving a Key:</h2>
<p>To move a key, follow these steps:</p>
<ol>
<li>Hover your mouse pointer over the key you want to move.</li>
<li>Left-click and hold the mouse button to select the key.</li>
<li>The colour of the key will change from light blue to a slightly darker blue to indicate that it has been selected.</li>
<li>While keeping the left mouse button pressed, drag your mouse to the desired location on the canvas.</li>
<li>Once you've reached the desired position for the key on the canvas, release the left mouse button to place it.</li>
</ol>
<div class="image-container">
<img src="./assets/mk1.jpg" alt="Image 1">
<img src="./assets/mk2.jpg" alt="Image 2">
<img src="./assets/mk3.jpg" alt="Image 3">
<img src="./assets/mk4.jpg" alt="Image 4">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Inserting a key into a Node----------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="inserting-a-key-into-a-node" class="coloured-section">
<section class="inner-section">
<h2>1.2) Inserting a Key into a Node:</h2>
<p>To insert a key into a node, follow the instructions in 1.1 for selecting and moving a key. When positioning the key within the node, observe the colour change from light blue to green, signifying the key's correct placement. There are three key attachment positions within a node:</p>
<ol>
<li><strong>1.2.1. Adding to the Front of the Node:</strong>
<ul>
<li>To attach a key to the front of the node, hover the selected key so that the right half of the key overlaps with the left edge of the node.</li>
<li>The key will turn green when it's in the correct position for placement within the node.</li>
<li>Release the left mouse button to place the key at the front of the node.</li>
</ul>
</li>
<li><strong>1.2.2. Adding to the End of the Node:</strong>
<ul>
<li>To attach a key to the end of the node, hover the selected key so that the right half of the key overlaps with the left edge of the node.</li>
<li>The key will change from light blue to green to indicate it's ready for placement at the end.</li>
<li>Release the left mouse button to insert the key at the node's end.</li>
</ul>
</li>
<li><strong>1.2.3. Adding Between Other Keys Within the Node:</strong>
<ul>
<li>To attach a key between two existing keys within the node, hover your mouse over the desired location between the keys.</li>
<li>The selected key that you are dragging should be in between the keys that you want to place the selected key between.</li>
<li>As you drag the key to the space between the keys, it will change colour to green, indicating the correct position.</li>
<li>Release the left mouse button to insert the key in the desired location between the existing keys within the node.</li>
</ul>
</li>
</ol>
<div class="image-container">
<img src="./assets/ins7.jpg" alt="Image 1">
<img src="./assets/ins8.jpg" alt="Image 2">
<img src="./assets/ins9.jpg" alt="Image 3">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Removing a Key------------------------------------------------------------------------------------------------>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="removing-a-key-from-a-node" class="coloured-section">
<section class="inner-section">
<h2>1.3) Removing a Key from a Node:</h2>
<p>To remove a key from a node, follow these steps:</p>
<ol>
<li>Locate the node containing the key you want to remove.</li>
<li>Left-click on the key you wish to remove and hold down the left mouse button.</li>
<li>While holding the left mouse button, drag the key away from the tree or node.</li>
<li>Release the left mouse button to detach the key from the node.</li>
</ol>
<div class="image-container">
<img src="./assets/rem1.jpg" alt="Image 1">
<img src="./assets/rem2.jpg" alt="Image 2">
<img src="./assets/rem3.jpg" alt="Image 3">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Deleting a Key------------------------------------------------------------------------------------------------>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="deleting-a-key" class="coloured-section">
<section class="inner-section">
<h2>1.4) Deleting a Key:</h2>
<p>To delete a key from the tree, follow these steps:</p>
<ol>
<li>Locate the key you want to delete within the tree.</li>
<li>Left-click on the key you wish to delete and hold down the left mouse button.</li>
<li>While holding the left mouse button, drag the key to the bottom right of the canvas.</li>
<li>As you move the key to this area, an "X" symbol will appear in the bottom right corner of the canvas.</li>
<li>Release the left mouse button while the key is over the "X" symbol, the key will be red if it is in the correct range to delete.</li>
<li>The key will be deleted from the tree entirely.</li>
</ol>
<div class="image-container">
<img src="./assets/del1.jpg" alt="Image 1">
<img src="./assets/del2.jpg" alt="Image 2">
<img src="./assets/del3.jpg" alt="Image 3">
<img src="./assets/del4.jpg" alt="Image 3">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Move an Entire Node------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="move-an-entire-node" class="coloured-section">
<section class="inner-section">
<h2>1.5) Moving an Entire Node:</h2>
<p>Left-clicking and dragging moves individual keys, however, there may be situations where we would like to move an entire node instead of just moving individual keys.</p>
<p>To move an entire node, follow these steps:</p>
<ol>
<li>Press the spacebar to enter “move entire node” mode.</li>
<li>You will be able to determine if you are within this mode if all of the first keys within every node, including free nodes, are colored green.</li>
<li>Select the first key within the node that you would like to move, by left-clicking the first key within the node and holding down the left mouse button.</li>
<li>Note that the only key that you can select to move an entire node is the first key within the node, and this is indicated by the green color of the first key.</li>
<li>While keeping the left mouse button pressed, drag your mouse to the desired location on the canvas.</li>
<li>Once you've reached the desired position for the node on the canvas, release the left mouse button to place it.</li>
</ol>
<div class="image-container">
<img src="./assets/mn1.jpg" alt="Image 1">
<img src="./assets/mn2.jpg" alt="Image 2">
<img src="./assets/mn3.jpg" alt="Image 3">
<img src="./assets/mn4.jpg" alt="Image 3">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Make a Child Node--------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="establishing-a-child-node-link" class="coloured-section">
<section class="inner-section">
<h2>1.6) Establishing a Child Node Link:</h2>
<p>To create a link between a child node and the tree, follow these detailed steps:</p>
<ol>
<li>Identify the node to which you want to attach a child node.</li>
<li>Determine the keys between which you intend to establish a connection. The connection's nature is influenced by its placement in relation to these keys.</li>
<li>Hover your mouse over the lower right or lower left corner of the key from which you wish to initiate the connection.</li>
<li>When positioned correctly, a small red circle will appear, signaling that you can initiate a connection from this point.</li>
<li>Left-click and hold down the mouse button to initiate the connection when you see the small red circle.</li>
<li>Drag your mouse in the direction of the node you want to connect as a child to the tree.</li>
<li>While dragging, you'll notice a yellow arrow extending from the original key location where you clicked; this arrow represents the ongoing connection process, often referred to as "connection mode."</li>
<li>Additionally, during connection mode, a small red circle will appear at the middle-top of every node that can potentially serve as a child to the original node where you initiated the connection.</li>
<li>To finalize the connection, while in connection mode, drag your mouse to the small red circle positioned at the top of the node you want to connect to.</li>
<li>Upon hovering over the small red circle, release your mouse click to establish the connection.</li>
<li>If the connection is successful, a yellow arrow will be drawn between the two nodes.</li>
</ol>
<div class="image-container">
<img src="./assets/ch1.jpg" alt="Image 1">
<img src="./assets/ch2.jpg" alt="Image 2">
<img src="./assets/ch3.jpg" alt="Image 3">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-------------------------------------------------------------------Overwriting a Child Node--------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="overwriting-a-child-node" class="coloured-section">
<section class="inner-section">
<h2>1.7) Overwriting a Child Node:</h2>
<p>There may be cases where a connection between a parent node and child node already exists, however, you would like to overwrite this already established connection to make a new connection between the parent node and a new child node.</p>
<p>To overwrite a child node, follow these steps:</p>
<ol>
<li>Identify the parent node with the existing child node connection you want to replace.</li>
<li>Determine the keys between which you intend to create the new connection, taking into account the adjusted relationship.</li>
<li>Hover your mouse over the bottom right or bottom left corner of the key from which you wish to initiate the new connection.</li>
<li>Once correctly positioned, a small red circle will indicate that you can initiate the connection from this location.</li>
<li>Left-click and hold down the mouse button when the small red circle is visible to start the new connection.</li>
<li>Drag your mouse towards the desired node you wish to connect as the new child node.</li>
<li>During this process, you'll observe a yellow arrow extending from the original key location where you initiated the connection, representing the ongoing "connection mode."</li>
<li>Additionally, within connection mode, a small red circle will appear at the middle-top of every node that can potentially become the new child node.</li>
<li>To complete the process, while in connection mode, guide your mouse to the small red circle positioned at the top of the node you want to connect as the new child node.</li>
<li>Upon hovering over the small red circle, release your mouse click to establish the new connection.</li>
<li>If successful, a yellow arrow will be drawn between the parent node and the new child node, effectively overwriting the previous connection.</li>
</ol>
<div class="image-container">
<img src="./assets/ov1.jpg" alt="Image 1">
<img src="./assets/ov2.jpg" alt="Image 2">
<img src="./assets/ov3.jpg" alt="Image 3">
</div>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------Splitting a Root Node--------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="splitting-the-root-node" class="coloured-section">
<section class="inner-section">
<h2>1.8) Splitting the Root Node:</h2>
<p>There may be cases where you need to split the root node of the tree so that the median key of the original root becomes the single key of the new root and the keys contained in the left half of the original root become the new roots’ left child and the keys contained in the right half of the original root become the new roots’ right node.</p>
<p>Please note that functionality of splitting the node will only be available to the user if the root node has the maximum amount of keys i.e., (2t-1) keys.</p>
<p>To split the root node, follow these steps:</p>
<ol>
<li>Hover your mouse to the area slightly above the median key of the root node.</li>
<li>If the root is available to be split then a split node symbol will appear. The symbol looks like a diverging path of three yellow arrows.</li>
<li>Left click the mouse button to perform the split root function.</li>
</ol>
<div class="image-container">
<img src="./assets/ch1.jpg" alt="Image 1">
<img src="./assets/ch2.jpg" alt="Image 2">
<img src="./assets/ch3.jpg" alt="Image 3">
</div>
</section>
</section>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!-------------------------------------------------------------------------Tutorials Section---------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<section id="tutorials-section" class="coloured-section">
<section class="inner-section">
<h2>B-Tree Properties</h2>
<p>Before we delve into B-tree insertions with preemptive splitting, let's ensure we have a solid understanding of what a B-tree is. A B-tree is a self-balancing search tree data structure that maintains sorted data and enables efficient insertion, deletion, and search operations. It's widely used in database systems and file systems because of its balanced structure and efficient performance characteristics.</p>
<p>A B-tree of degree <b>t</b> is defined by the following properties:</p>
<ul>
<li>Every node has at most <b>2*t-1</b> keys. Ex: A tree of degree 2 has a maximum of (2*2)-1 = 3 keys for each node.</li>
<li>Every node (except the root) has at least <b>t-1</b> keys. Ex: A tree of degree 2 has a minimum of (2)-1 = 1 key for each node.</li>
<li>The root has at least <b>1</b> key.</li>
<li>All keys within a node in the tree must be sorted in <b>increasing </b> order.</li>
<li>If a node has <b>n</b> keys then that node must have <b>n+1</b> children.</li>
<li>All leaves have the same depth, ensuring balanced search operations.</li>
</ul>
</section>
<section id="insertion-guide-section" class="inner-section">
<h2> Insertion Guide:</h2>
<section class="inner-section">
<h2><b>What is Preemptive Splitting?</b></h2>
<ul>
<li>Preemptive splitting is a type of insertion method that we use for inserting into B-trees. This method ensures that insertions within a B-Tree can be done within a single traversal to the insertion point.</li>
<li>To preemptively split a B-Tree, while traversing the tree to the insertion point, we check every single node that we traverse to see if it needs to be preemptively split. This is done regardless of whether or not the insertion occurs at that node.</li>
<li>To determine if a node needs to be split, we look at the number of keys within that node. If the number of keys within that node is equal to the maximum number of allowable keys then it needs to undergo splitting.</li>
<li>To perform the split, take the median key of that node and place it into its parent node, then update the parent’s node child pointers to point to the left half of the split node and the right half of the split node in the appropriate locations.</li>
</ul>
<section class = "inner-section">
<ul>
<li> To demonstrate this: we will look at an example:</li>
<li> <b>Example: Insert 10</b></li>
<div class="image-container">
<img src="./assets/prespl1.jpg" alt="Image 2">
</div>
<li> On insertion we traverse the tree to the correct location.</li>
<div class="image-container">
<img src="./assets/prespl2.jpg" alt="Image 2">
</div>
<li> Every node that we traverse, we check if that node has the maximum amount of keys in it</li>
<li> If a node has the maximum amount of keys in it, during traversal then we split it. </li>
<li> We can see that during traversal in this example, we need to split the node with keys [13,20,28] </li>
<div class="image-container">
<img src="./assets/prespl3.jpg" alt="Image 2">
</div>
<li>To perform the split, take the median key of that node and place it into its parent node, then update the parent’s node child pointers to point to the left half of the split node and the right half of the split node in the appropriate locations.</li>
<div class="image-container">
<img src="./assets/prespl4.jpg" alt="Image 2">
<img src="./assets/prespl5.jpg" alt="Image 2">
</div>
<li> When we have successfully split the node, we can now carry on the insertion as normal by following the cases that are described in the user guide for insertion.</li>
<div class="image-container">
<img src="./assets/prespl6.jpg" alt="Image 2">
<img src="./assets/prespl7.jpg" alt="Image 2">
<img src="./assets/prespl8.jpg" alt="Image 2">
<img src="./assets/prespl9.jpg" alt="Image 2">
</div>
</ul>
</section>
<section class = "inner-section">
<ul>
<li> Please also note that pre-emptive splitting also occurs at the root node.</li>
<li> This is depicted in the example below:</li>
<li> Example: Insert 10:</li>
<div class="image-container">
<img src="./assets/prespl10.jpg" alt="Image 2">
<img src="./assets/prespl11.jpg" alt="Image 2">
<img src="./assets/prespl12.jpg" alt="Image 2">
<img src="./assets/prespl13.jpg" alt="Image 2">
</div>
<div class="image-container">
<img src="./assets/prespl14.jpg" alt="Image 2">
<img src="./assets/prespl15.jpg" alt="Image 2">
<img src="./assets/prespl16.jpg" alt="Image 2">
<img src="./assets/prespl17.jpg" alt="Image 2">
</div>
</ul>
</section>
</section>
</section>
<section class="inner-section">
<h2>Inserting into a B-Tree</h2>
<section class = "inner-section">
<h2>Cases for Insertion:</h2>