Jmol-Application/C4/Editing-the-JSmol-Integrated-Web-Page/English

Title of script: Editing the JSmol Integrated Web Page

Author: Dr.Snehalatha Kaliappan, Sunil Shetye

Keywords: JSmol, web page, html page, JSmol integration to web pages, 3D molecular structures, Interactive features, 3D models of molecules, video tutorial.

Visual Cue	Narration
Slide Number 1 Title Slide	Welcome to this tutorial on Editing the JSmol Integrated Web Page.
Slide Number 2 Learning Objectives	In this tutorial, we will learn to, Edit the HTML page to add 3D models of chemical structures Add interactive radio buttons and checkboxes.
Slide Number 3 Learning Objectives	Add script commands to show animations Run the edited HTML page locally using HTTP server localhost 80.
Slide Number 4 System Requirement	Here I am using Ubuntu Linux OS version 20.04 Firefox web browser version 100.0 Apache version 2.4.41 Gedit version 3.36.2 Jmol/ Jsmol version 14.32.83
Slide Number 5 Pre-requisites	To follow this tutorial learner should be familiar with, undergraduate chemistry basic skills in using a computer using a computer terminal for typing commands. script commands in Jmol
Slide Number 6 Pre-requisites Jmol Spoken Tutorials link:\\{\color{blue} https://spoken-tutorial.org}	Please use the link given here for Spoken Tutorials in the Jmol Application series.
Slide number 7 Code Files	The input files required for this tutorial are available in the Code files link. Please download and extract the files. Make a copy of all the files and then use them for practising.
Show the Downloads folder, cursor on the downloaded Code files. Right-click on jspage.zip and choose the “Extract Here” option. Cursor on jspage folder.	I have downloaded the input file jspage. By default mine got downloaded to my Downloads folder. It is a compressed zip file. Extract the file by right-clicking and choosing the Extract Here option. You will see a folder jspage.
Right-click on the file and Select Move to.	I will move this file from the Downloads folder to the Home directory.
Show Home directory. Double-click on jspage folder. Cursor on the files. Click on the files to open the files and show the content.	I will open the jspage folder by double-clicking on it. Here you can see some files. The input HTML page, example2.html. The resources folder has .mol files for the three conformers of n-butane. These structures were drawn using Jmol and saved in .mol file format. Files folder has all the necessary files required for the HTML page.
Cursor on jmol-14.32.83 folder. Double-click on jmol-14.32.83 folder. Cursor on jsmol folder.	Here, I also have a jmol-14.32.83 folder. Inside this folder I have jsmol folder. Please see the prerequisite video on how to download Jmol.
Slide Number 8 About the Web Page	The web page we will be creating will have content on conformations of nbutane. The web page will have interactive 3D models of conformations of n-butane: anti, gauche and eclipsed
Right-click and select the text editor option.	Open example2.html file in the text editor. Windows and Mac users can choose to edit using Notepad. I will right-click and open the file in gedit.
Cursor on the text editor, example2.html file.	We will edit this document to add 3D models. I will add more interactive buttons. I will also add some script commands to animate the 3D models.
Open the resources folder and show the .mol files.	In the resources folder 3D model files of n-butane conformations are provided.
Cursor on the text editor. Cursor on lines 13 and 14.	Back to the text editor. On lines 13 and 14, edit the version and path to the JSmol.min.js file and jmol2.js file.
Cursor on line 15.	On line 15 change the Jmol version number to reflect your downloaded Jmol version.
On line 49 replace title with conformations of nbutane.	Scroll down to line 49, edit the topic name to Conformations of nbutane.
Scroll down, highlight line 54.	Scroll down, from line 54, the javascript block to include the 3D models begins.
Cursor on lines of code in Structures block.	Here, we are planning to include 3 structures. The code for 3 structures needs to be edited.
Cursor on line 58.	For structure 1, the lines of code start from line 58. The id is 1.
On line 58, Type nbutane1.mol in place of test1.mol.	On line 59, edit the name of the mol file for structure 1. We have named structure 1 as nbutane1.mol. Type nbutane1.mol in place of test1.mol.
On line 61, in load resources script, change test1.mol to nbutane1.mol.	On line 61, in load resources script, change test1.mol to nbutane1.mol.
Cursor on line 79.	Scroll down to line 79, here javascript for structure2 begins.
On line 80, in place of test2.mol, type, nbutane2.mol.	Same way as we edited previously for structure 1, we edit the name of structure 2. On line 80, in place of test2.mol, type, nbutane2.mol.
On line 82, change test2.mol to nbutane2.mol.	On line 82, again change test2.mol to nbutane2.mol.
Cursor on ine 98.	Scroll down, Similarly, javascript block for structure 3 begins from line 98.
On line 99, in place of test3.mol, type, nbutane3.mol.	On line 99, in place of test3.mol, type, nbutane3.mol.
On line 101, again change test3.mol to nbutane3.mol.	On line 101, again change test3.mol to nbutane3.mol.
Click on the 3 lines button at the top-right corner.	Save the modifications made by clicking on the 3 lines button at the top-right corner.
In the options choose Save as option . Give the file name as conformations_nbutane. Save the file in jspage folder. Click on Save button.	In the options choose Save as option . Save the file in jspage folder. Give the file name as conformations_nbutane. Click on Save button.
Scroll down. Cursor on line 118.	Now we will scroll down to stucture_content javascript block. This begins from line 118.
On line 121 type nbutane1.mol in place of test1.mol. Cursor on line 122.	Edit test 1.mol on line 121 to nbutane1.mol. Edit the text on line 122 to something related to Anti-butane.
Cursor on conformations of nbutane. document in Downloads folder. Double-click to open it.	I have opened a text document with the information for the Anti-butane. This document is provided in the Additional Reading Material as conformations of nbutane.
Copy the information for Structure 1 from conformations of nbutane. Paste the information on line 122 in the text document.	I have copied the information for Structure 1 from this document. I will paste the information on line 122 in the text file. Alternatively, you can type your own content here.
On line 127, change the name of the structure from test2.mol to nbutane2.mol.	Similarly, on line 127, change the name of the structure from test2.mol to nbutane2.mol.
On line 128, copy and paste the information for eclipsed butane from the text document.	On line 128, copy and paste the information for eclipsed-butane from the text document.
On line 133, change test3.mol to nbutane3.mol.	On line 133, change test3.mol to nbutane3.mol.
On line 134, change the text. Copy and paste the information from the document.	On line 134, change the text. You can copy and paste the information from the document.
Click on the Save button on the top-right corner.	Save the document by clicking on the Save button on the top-right corner.
Open a new window or tab in your web browser.	View this page in the browser. Open a new window or tab in your web browser. Please ensure that Apache2 is running in your system.
In the address field, type localhost\conformations_nbutane.html.	In the web address field type, localhost forward slash, followed by the name of the HTML page you have created. I will type, localhost\conformations_nbutane.html and press Enter.
Check the web page, scroll down.	Check to see if the newly added models of butane are visible on page.
Click on the radio buttons and checkboxes. Observe the result.	Click on the radio buttons and checkboxes. Check if they perform the desired function. Similarly check all the models on the page.
Cursor on the checkbox script.	Let us add one more checkbox to this page. I would like to add a checkbox to show labels for atoms.
Go to line 71, copy lines 71-72.    <script type="text/javascript">Jmol.jmolCheckbox(a_myJmol, "spin on", "spin off", "spin");</script>	Go to the javascript block for Structure1. Copy lines 71 and 72.
Copy the script on line no71 and 72.	To create a new line press Enter at the end of the script on line 72. Now in the new line, paste the copied lines.
Type, “label on” “label off” in the place of “spin on” and “spin off” on line 74.	On line 74, edit the script to label on, label off in the place of spin on and spin off. Edit the checkbox name in place of spin as label.
Click on Save. Refresh the web page and click on the label checkbox.	Save the file. Refresh the web page and check for the newly label checkbox.
Cursor on the text editor. Line 91	Now let us add an animation button to eclipsed-nbutane which is Structure2. To add a radio button, go to the radio button section for Structure2.
Line 91, “spacefill 100%” button. at the end of the script, after the square bracket type a comma. Press Enter, it takes you to the next line. On this new line type a pair of square brackets.	On line 91, at the end of the script after the square brackets type a comma. Press Enter, it takes you to the next line. On this new line type a pair of square brackets.
Type, “select connected (C1) and not (C2); rotate BRANCH {C1} {C2} 120 30”, Type, “anticlinal”	Within the square brackets, within double quotes type the following script to animate a bond rotation process. Type a comma and within double quotes type the name of the button as anticlinal. This animation will show the anticlinal conformation for eclipsed-nbutane.
Click on Save. Refresh the web page and click on the label button.	Save the file. Refresh the web page and check the newly added animation.
Cursor on the test editor.	You can modify the html page to add more models, buttons, animations and content. After modification, save the page. Refresh the web page in the browser to see the modifications.
Slide Number 9 and 10 Summary	Let's summarize, In this tutorial we have, Edited the html page to add 3D models Added interactive radio buttons and checkboxes Added script commands to show animations Ran the edited HTML page locally using HTTP server localhost 80.
Slide Number 11 Assignment slide.	As an assignment, Using the input file, example2.html, as a template: Create a JSmol integrated web page with the content of your choice. Add interactive buttons and animations.
Slide Number 12 About Spoken Tutorial Project	The video at the following link summarizes the Spoken Tutorial project. Please download and watch it.
Slide Number 13 Spoken tutorial workshops	We conduct workshops using spoken tutorials and give certificates. For more details, please contact us.
Slide Number 14 Answers for THIS Spoken Tutorial	Please post your timed queries in this forum.
Slide Number 15 Acknowledgement	The Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India
	The script for this tutorial is contributed by Snehalatha Kaliappan and Sunil Shetye. This is Madhuri Ganapathi from IIT Bombay signing off. Thank you for joining.

Contributors and Content Editors

Madhurig, Snehalathak