World Adoption & Usage using NTNUJAVA Forum applets by allowing easy embedding?

[lookang]

World Adoption & Usage using NTNUJAVA Forum applets by allowing easy embedding?

Hi Prof!

i look at http://phet.colorado.edu/en/simulation/pendulum-lab

PhET which i am a big fan of their research and simulations as well, i noticed they do a pretty good job at out reaching to schools students and teachers.

perhaps NTNUJAVA forum can adopt this similar approach? by allowing

screenshot


Embed a running copy of this simulation

the codes are:

Code:

<iframe src="http://phet.colorado.edu/sims/pendulum-lab/pendulum-lab_en.html" width="800" height="600"></iframe>

hint text: Use this HTML to embed a running copy of this simulation. You can change the width and height of the embedded simulation by changing the "width" and "height" attributes in the HTML.

Embed an image that will launch the simulation when clicked
the codes are:

Code:

<div style="position: relative; width: 300px; height: 200px;"><a href="http://phet.colorado.edu/sims/pendulum-lab/pendulum-lab_en.html" style="text-decoration: none;" rel="external"><img src="http://phet.colorado.edu/sims/pendulum-lab/pendulum-lab-screenshot.png" alt="Pendulum Lab" style="border: none;" width="300" height="200"/><div style="position: absolute; width: 200px; height: 80px; left: 50px; top: 60px; background-color: #FFF; opacity: 0.6; filter: alpha(opacity = 60);"></div><table style="position: absolute; width: 200px; height: 80px; left: 50px; top: 60px;"><tr><td style="text-align: center; color: #000; font-size: 24px; font-family: Arial,sans-serif;">Click to Run</td></tr></table></a></div>

Use this HTML code to display a screenshot with the words "Click to Run". which NTNU JAVA forum also has a thumbnail in the first post of most the topics.

Hopefully the outcomes can be
more teachers can embed NTNU JAVA forum applets in their blogs, googlesites, wiki pages etc to engage their students.
students can also embed NTNU JAVA forum applets as artifacts of their learning journey.

I see this ease of embedding like in YouTube as a suitable step towards the philosophical goal of NTNUJAVA and people like yourself which is to help more people learn physics!

for your consideration

[Fu-Kwun Hwang]

I added Embed button for each message.
User can click the button and it will display html code to show that message inside a single iframe.

I also added an Embed button for uploaded EJS simulation.
User can click the button and it will display html code to show that applet only.

Let me know if this is what you need!

[lookang]

I added Embed button for each message.
User can click the button and it will display html code to show that message inside a single iframe.

probably not unnecessary

I also added an Embed button for uploaded EJS simulation.
User can click the button and it will display html code to show that applet only.

this is excellent!

Let me know if this is what you need!

do you have this too

Code:

<div style="position: relative; width: 300px; height: 200px;"><a href="http://phet.colorado.edu/sims/pendulum-lab/pendulum-lab_en.html" style="text-decoration: none;" rel="external"><img src="http://phet.colorado.edu/sims/pendulum-lab/pendulum-lab-screenshot.png" alt="Pendulum Lab" style="border: none;" width="300" height="200"/><div style="position: absolute; width: 200px; height: 80px; left: 50px; top: 60px; background-color: #FFF; opacity: 0.6; filter: alpha(opacity = 60);"></div><table style="position: absolute; width: 200px; height: 80px; left: 50px; top: 60px;"><tr><td style="text-align: center; color: #000; font-size: 24px; font-family: Arial,sans-serif;">Click to Run</td></tr></table></a></div>

this rationale for this is in low bandwidth cases, only the picture is loaded, if "click on to run" applet to load the full screen version for example http://www.phy.ntnu.edu.tw/ntnujava/htmltag.php?code=users.br.ahmed.users_ntnu_fkh_pendulumperiodangle_pkg.users_ntnu_fkh_pendulumperiodangleApplet.class&name=users_ntnu_fkh_pendulumperiodangle&muid=37048 . U recently added the full screen applet which is super awesome!.
for your consideration

[Fu-Kwun Hwang]

User will get the same result if "Full Screen applet" link was clicked.

Do you mean: instead of showing applet as part of forum message, only display "click to run" button to wait for user action, then display applet in a popup window?

[lookang]

User will get the same result if "Full Screen applet" link was clicked.

Do you mean: instead of showing applet as part of forum message, only display "click to run" button to wait for user action, then display applet in a popup window?

My suggestion is 2 options/ways to embed applets
One is the usual iframe which just implemented
The other is a picture after click is a pop up window of the full screen applet. Check out the Phet simulations like the image above the second option
Thanks !

[Fu-Kwun Hwang]

What you need required there is a picture exists for each simulation and a static html page for each simulation (popuped html page).
That is how it was done at PHeT webb site.

What about adding a html code for user to add link which will popup a window  which will contain only the simulation (this will require a php code to generate dynamic html page).

[lookang]

Let's try what you suggest.
The key is must be easy to copy and paste for teachers and students.
 

[Fu-Kwun Hwang]

I just added another html code which can be copied to display a link labeled as "run simulation".
A window will be popuped to display the simulation when the link is clicked.

[ahmedelshfie]

Good idea, i like embed code help users to use more offline applets.