LOL Energy Diagram: Documenting the Journey of Adding a New Energy Transfer using EJSS

Currently, there are only 4 types of energy transfer into and out of the system:
→    Propagation of Waves, Mechanical, Heat, and Electrical.

To add a new energy transfer, 3 main sections require attention:

1. Energy transfer in the O diagram (Interactive portion)
   
   
   
   
   
2. Legend for transfer (for user's understanding)
   
   
3. Check 3 and 4 (which edit the answer key for transferable energy)
   
   
   
   

Legend: 

    - To take note

    - Action box in pictures

    - Example

Let's go through the STEPS for implementing a New Energy Transfer, through an example of having a chemical transfer:

SECTION 1: O diagram

#1) Add sub-variables ("Chemically") into the variables, under the tab "Var Table"
        - transIN, transOUT, transIN2, and transOUT2

        - Added " , "Chemically" "

#2) Add comments and give an imaginary variable for better understanding in the future

        - updateTransIN, updateTransOUT, updateTransIN2, and updateTransOUT2

        - commented " 5 is "Chemically" "

        

#3) Under tab "draw_O", add in the file directory ("./Settings/Chemically.png") to the image variable,             imgIN.

    In this example, the image we are using is this ⮷

#4) Refer to HtmlView on the 4 ComboBoxes. 

#5) Refer to "OnChange", and add the required code to link their ID

        In this example, 

            - energyTypeIN added " if (option == "Chemically"){updateTransIN = 5); " 

            - energyTypeIN2 added " if (option == "Chemically"){updateTransIN2 = 5); " 

            - energyTypeOUT added " if (option == "Chemically"){updateTransOUT = 5); " 

            - energyTypeOUT2 added " if (option == "Chemically"){updateTransOUT2 = 5); "

#6) Current progress of the simulation should look like this now

SECTION 2: Legend for Transfer

#7) Under HtmlView / ... / transfer panel, copy & paste any of the labels & rename it to "chemically"

#8) Under "chemically" properties, edit the Text, ImageUrl, and Tooltip to the desired case.
Ensure that the dimension of the PNG is approximately 130 for consistency.

        In this example:

            - Text rewritten as "Chemically"

            - ImageUrl rewritten as "./Settings/Chemically.png"

            - Tooltip rewritten as "Chemically"

#9) The current progress of the simulation should look like this now

SECTION 3: Check 3 and Check 4

#10) Add comments and give an imaginary variable ("chemically") for better understanding in the future

        - check3aEnergy, check3bEnergy, check4aEnergy, and check4bEnergy

        - commented " "chemically" " → let's call this imagineryVar in this documentation for better understanding later on! 

#11) Under HtmlView / ... / answersTOEDIT panel, copy & paste any of the RadioButton underneath & rename it to a relevant name "isChemical__"

        In this example, the 4th RadioButton is copied and pasted underneath itself

#12) In each of the properties for the (isChemical_) RadioButton, edit the Checked, Text, Disables and OnCheckOn.

        In this example,

            - Checked: "chemically" is used (imagineryVar )

            - Text: "Chemically" is used

            - Disabled: "chemically" is used (imagineryVar )

            - OnCheckOn: "chemically" is used (imagineryVar )

SECTION 3A: Solution to Check 3 answer key feature

#13) Refer to Custom / answerAssistants, scroll to the function check3assistant(), and add the code at where it is shown in the picture:

        In this example, the following codes are added:

            - ||     (updateTransIN == 5 && check3aEnergy == "chemically")

            - else if (updateTransIN2 == 5 && check3bEnergy == "chemically"){return true}

            - ||    (updateTransIN2 == 5 && check3aEnergy == "chemically")

            - else if (updateTransIN == 5 && check3bEnergy == "chemically"){return true}

        Take note that the 2nd green part is actually using the imagineryVar 

#14) Scroll further down but still within function check3assistant(), and add the code at where it is shown in the picture:

        In this example, the following codes are added:

            - if (updateTransIN == 5 && check3aEnergy == "chemically"){return true}

            - if (updateTransIN2 == 5 && check3aEnergy == "chemically"){return true}

            - if (updateTransIN == 5 && updateTransIN2 == 5 && check3aEnergy == "chemically"){return true}

        Take note that the 2nd green part is actually using the imagineryVar 

SECTION 3B: Solution to Check 4 answer key feature

#15) Refer to Custom / check4assistant, for the function check4assistant(), and add the code at where it is shown in the picture:

        In this example, the following codes are added:

            - ||     (updateTransOUT == 5 && check4aEnergy == "chemically")

            - else if (updateTransOUT2 == 5 && check4bEnergy == "chemically"){return true}

            - ||    (updateTransOUT2 == 5 && check4aEnergy == "chemically")

            - else if (updateTransOUT == 5 && check4bEnergy == "chemically"){return true}

        Take note that the 2nd green part is actually using the imagineryVar 

#16) Scroll further down but still within function check4assistant(), and add the code at where it is shown in the picture:

        In this example, the following codes are added:

            - if (updateTransOUT == 5 && check4aEnergy == "chemically"){return true}

            - if (updateTransOUT2 == 5 && check4aEnergy == "chemically"){return true}

            - if (updateTransOUT == 5 && updateTransOUT2 == 5 && check4aEnergy == "chemically"){return true}

        Take note that the 2nd green part is actually using the imagineryVar 

#17) The resulting simulation should look like this and work as intended.

#18) Test the simulation and make sure it truly works as intended. 

Further development of this project can simplify the imagineryVar into a variable...

- End -