June 13, 2021

Website New Feature

What is the new feature? We have added a feature that will allow users to create, edit and save their own mind map under each lesson page.

Basic features

• Insert topics and subtopics.

• Edit the text of topics and subtopics.

• Drag and re-position the topics and subtopics.

• Remove topics and subtopics.

• Change text and background colors.

• Change text font style and font size. 

Other features

• Arrange up and down.

• Zoom in/out and pan.

• Undo and redo.

• Layout and button presets.

• Copy, paste and clear styles.

• Add links and notes.

• Add priority and progress indicator.

• Add tags.

• Full screen, expand and selection.

Currently, we only enabled them on all lesson pages under JavaScript Developer 1 Study Guide Course as follows but we'll eventually add them on other course lesson pages as we get feedback from users about the feature:

JavaScript Developer 1 Study Guide Course Overview: https://focusonforce.com/courses/javascript-developer-1-study-guide/

Lessons:

• https://focusonforce.com/lessons/variables-types-and-collections-i/

• https://focusonforce.com/lessons/variables-types-and-collections-ii/

• https://focusonforce.com/lessons/objects-functions-and-classes-i/

• https://focusonforce.com/lessons/objects-functions-and-classes-ii/

• https://focusonforce.com/lessons/browser-and-events/

• https://focusonforce.com/lessons/debugging-and-error-handling/

• https://focusonforce.com/lessons/asynchronous-programming/

• https://focusonforce.com/lessons/server-side-javascript/

• https://focusonforce.com/lessons/testing/

The feature is located at the bottom of the lesson objectives.

How to enable on pages? This uses a custom shortcode [fof_mindmap] that shows the mind map interface.

Technical details

• Mindmap Editor - We have used Kity Mindmap Editor library which is included on a premium plugin `Leaui MindMap Editor` that we have activated. We've done some customizations to integrate it using a custom shortcode that we created.

• Dialog box - We have used jquery ui library and used the dialog box that can make a box draggable and resizable.

• Saving - We save the image tag on a text file that has filename userid-lessonid-0.txt and store it on the amazon s3 bucket fof-live.

We also added a short terms and conditions text when user hover their mouse on the "Edit Mindmap" button.

Trello Card: https://trello.com/c/fkEqucsL/612-add-a-mindmap-feature

Plugin Updates

• New Update: WooCommerce PayPal Pro v2.9.6

• New Update: Flexible Checkout Fields v3.0.10

• New Update: WooCommerce PDF Invoice v3.1.6