APS Excellence in Physics Education Award
November 2019

Education Prize Logo
Science SPORE Prize
November 2011

NSF Logo
The Open Source Physics Project is supported by NSF DUE-0442581.

how to put images in the HTML property of a basic container panel post and replies

Return to the how to put images in the HTML property of a basic container panel thread
Login to post to this thread

What should the HTML code look like and where to I put the image files
Paul DeYoung
100 Posts

I have jpg, gif, png etc. that I want to put in the html code field of a basic container.  Mostly I want to put some equations in the displayed text without being limited by HTML restrictions on nice looking math.  

I keep getting file not found.  What should the look like and where should the images be placed for both testing (the EJSS little green arrow) and so that they export correctly.

I'm sure this is obvious to the experts however it has baffled me.

Thanks


Paul A. DeYoung

Replies to What should the HTML code look like and where to I put the image files

Re: What should the HTML code look like and where to I put the image files -
lookang Avatar
lookang
245 Posts

I normally use the HTML element
the code is need to add the greater and lesser sign
img src="./polyatomicions/Peroidic Table SEAB Screenshot 2020-08-24 at 10.08.14 PM.png" alt="Peroidic Table SEAB"width="100%" height="100%"


I also put the "Peroidic Table SEAB Screenshot 2020-08-24 at 10.08.14 PM.png" along with all other assests (.wav .mp3 etc) inside a folder called polyatomicions


you can get the scr code here
https://iwant2study.org/ospsg/index.php/interactive-resources/chemistry/03-chemistry-of-reactions/922-dotandcrossdiagram8

Attached File: Screenshot20220304at11.41.54AM.png


OSP@SG blog
OSP@SG Digital Library


Re: What should the HTML code look like and where to I put the image files -
Paul DeYoung
100 Posts
I'm sure I'm doing something wrong but I have tried all sorts of variations on what you sent with no success. What follows is the code from the HTML property field for the basic pane, the exact error message, and the code from inspecting the browser page that opens when the simulation is run. ******This is the code that is in the html field of the my narrative pane******

Three State NuclearDecay

The Two State Nuclear Decay model simulates the radioactive decay of atomic nuclei in which the parent nucleus decays into a stable state. Although the decay of the parent (radionuclide) is spontaneous and unpredictable, the probability of decay of each radionuclide is constant and is usually known.  The model displays a color-coded sample with N1 parent nuclides. Users can set the initial number N1, the lifetime (not half-life) τ1. the time interval between measurements Δt before the simulation is run. The simulation counts the number of decay events ΔN1 within Δt and stops when all nuclides are in the stable state.

 

Check boxes display a plot and a table showing the time evolution as well as the number of decay events in each Δt time interval.  The data plot allows users to compare the data generated by the random decay model with a differential equation-based model as described on the Theory page.

 

The Two State Decay model is distributed as a ready-to-run (compiled) Java archive.  Double clicking the ejs_nuclear_ThreeStateNuclearDecay.jar file will run the program if Java is installed.  Other decay models are available.  They can be found by searching the OSP Collection for radioactivity.

Credits:

The Three State Nuclear Decay model was developed by Wolfgang Christian using version 4.3.2 of the Easy Java Simulations (EJS) authoring and modeling tool. It was modified slightly by Paul A. DeYoung  You can examine and modify a compiled EJS model if you run the program by double clicking on the model's jar file.  Right-click within the running program and select "Open EJS Model" from the pop-up menu to copy the model's XML description into EJS.  You must, of course, have EJS installed on your computer.

 

Information about EJS is available at: <http://www.um.es/fem/Ejs/> and in the OSP ComPADRE collection <http://www.compadre.org/OSP/>.

Decay Theory:

If the number of nuclides is large, the upper state N1, intermediate state n2, and final state N3 populations obew the following coupled oredinary differenctial equations. τ

This is stupid.

Decay Theory

********This is the error message. Note: if I type the file name wrong, I get a file not found error so it is finding the file. If I delete the line the code is error free. I also tried a png file but same results. ******** Uncaught DOMException: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document. at Object.self.setHtml [as setter] (file:///C:/Users/demoing/Google%20Drive%20surface/JavaScript_EJS_6.0_191124/JavaScript_EJS_6.0/bin/javascript/lib/ejsS.v1.min.js:1:215856) at Object.mElement.setProperty (file:///C:/Users/demoing/Google%20Drive%20surface/JavaScript_EJS_6.0_191124/JavaScript_EJS_6.0/bin/javascript/lib/ejsS.v1.min.js:1:470412) at ThreeStateNuclearDecay_pdy10_View_0._view._reset (file:///C:/Users/demoing/Google%20Drive%20surface/EjsS_5.3/workspace/output/hope-updated-html-ejss/ThreeStateNuclearDecay/ThreeStateNuclearDecay_pdy10.xhtml:619:8) at Object._view._reset (file:///C:/Users/demoing/Google%20Drive%20surface/EjsS_5.3/workspace/output/hope-updated-html-ejss/ThreeStateNuclearDecay/ThreeStateNuclearDecay_pdy10.xhtml:417:7) at Object.self.reset [as ___reset] (file:///C:/Users/demoing/Google%20Drive%20surface/JavaScript_EJS_6.0_191124/JavaScript_EJS_6.0/bin/javascript/lib/ejsS.v1.min.js:1:480095) at Object.self.reset (file:///C:/Users/demoing/Google%20Drive%20surface/JavaScript_EJS_6.0_191124/JavaScript_EJS_6.0/bin/javascript/lib/ejsS.v1.min.js:1:456028) at _selectView (file:///C:/Users/demoing/Google%20Drive%20surface/EjsS_5.3/workspace/output/hope-updated-html-ejss/ThreeStateNuclearDecay/ThreeStateNuclearDecay_pdy10.xhtml:456:12) at new ThreeStateNuclearDecay_pdy10 (file:///C:/Users/demoing/Google%20Drive%20surface/EjsS_5.3/workspace/output/hope-updated-html-ejss/ThreeStateNuclearDecay/ThreeStateNuclearDecay_pdy10.xhtml:463:3) at file:///C:/Users/demoing/Google%20Drive%20surface/EjsS_5.3/workspace/output/hope-updated-html-ejss/ThreeStateNuclearDecay/ThreeStateNuclearDecay_pdy10.xhtml:657:21 ********This is from the webpage source found by opening the inspect tool in chrome**********

This is stupid.

Decay Theory

") // EJsS HtmlView.Simulationview: setting property 'Html' for element 'narrativePanel2'

Paul A. DeYoung


Re: What should the HTML code look like and where to I put the image files -
Wolfgang
192 Posts

Download and run the source code for the Three State Nuclear Decay example and note how the equation images files are embedded into the theory page.

https://www.compadre.org/osp/items/detail.cfm?ID=13978

If you have multiple image or resource files, it is best to put all files into a subdirectory and then import the entire resource directory into the EJS project as shown in the screenshot.

Attached File: NuclearDecayImages.jpg



OSP Projects:
Open Source Physics - EJS Modeling
Tracker
Physlet Physics
Physlet Quantum Physics
STP Book