I have been working a lot with Wolfram CDF and I am excited by the release of Mathematica 9 and the ease in creating and deploying CDF files. One of the best uses it to create interactive manipulations for my students to use.
I like to embed these in my school Google sites. However, this has proven to be quite difficult since Google sites do not allow Javascripts that create scripts (the CDF embed script that I talk about here: Wolfram CDF embedding ).
Hence, we need to resort to using the iframe gadget to refer to a different page that has the CDF embedded.
In my previous post on CDF embedding, I talk about how I host my CDF files in the Public folder on Dropbox. I then use the Javascript script to embed my CDF in my blogger page. This does a great job of hosting my interactive CDF file.
Now, I need to embed this blogger page on my Google site. However, I don't want to use the whole webpage in my iframe since it will require too much scrolling to find exactly what I want.
So the method I use is to create a target location right above my CDF file in the blogger page. I accomplish this by using the ID anchor in the HTML code on my blogger page.
For example, right above the CDF embed script on the html, I add the code:
<br id="MyBreakName" />
Then, I add the CDF embed script:
<script src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js" type="text/javascript">
</script>
<script type="text/javascript">
var cdf = new cdfplugin();
cdf.embed('TheWebsiteThatHostsMyCDFdocument', 400, 800);
</script>
So overall that snippet of code looks like this for my Plot Points CDF:
<br id="cdfFile" />
Plot:<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<script src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js" type="text/javascript"></script>
<script type="text/javascript">
var cdf = new cdfplugin();
cdf.embed('http://dl.dropbox.com/u/30779938/WolframCDFfiles/PlotPointManipulateOnlyGraph.cdf', 443, 489);
</script>
Now, it will create an anchor for me to jump to and gives a link to directly jump there.
The link is whatever the blogger URL is to get to that page with an #anchorName appended on the end.
So in my Plot Points CDF example, the blogger site is:
http://mathtechtips.blogspot.sg/2012/12/blog-post.html
Now, I created an anchor right above the Plot Point CDF on this page and called the anchor "cdfFile". To link directly to this point in my page, I use the link:
http://mathtechtips.blogspot.sg/2012/12/blog-post.html#cdfFile
This is the link I will reference in my iframe URL in the Google gadget that I use on my school Google Site.
To do this, I find the place in my Google Sites that I want to enter the CDF file and Insert->... More gadgets...
This will put the Google Gadget (in my case the iframe box, pointing to my blogger page with the CDF file) in your Google Sites page.
I like to embed these in my school Google sites. However, this has proven to be quite difficult since Google sites do not allow Javascripts that create scripts (the CDF embed script that I talk about here: Wolfram CDF embedding ).
Hence, we need to resort to using the iframe gadget to refer to a different page that has the CDF embedded.
In my previous post on CDF embedding, I talk about how I host my CDF files in the Public folder on Dropbox. I then use the Javascript script to embed my CDF in my blogger page. This does a great job of hosting my interactive CDF file.
Now, I need to embed this blogger page on my Google site. However, I don't want to use the whole webpage in my iframe since it will require too much scrolling to find exactly what I want.
So the method I use is to create a target location right above my CDF file in the blogger page. I accomplish this by using the ID anchor in the HTML code on my blogger page.
For example, right above the CDF embed script on the html, I add the code:
<br id="MyBreakName" />
Then, I add the CDF embed script:
<script src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js" type="text/javascript">
</script>
<script type="text/javascript">
var cdf = new cdfplugin();
cdf.embed('TheWebsiteThatHostsMyCDFdocument', 400, 800);
</script>
So overall that snippet of code looks like this for my Plot Points CDF:
<br id="cdfFile" />
Plot:<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<script src="http://www.wolfram.com/cdf-player/plugin/v2.1/cdfplugin.js" type="text/javascript"></script>
<script type="text/javascript">
var cdf = new cdfplugin();
cdf.embed('http://dl.dropbox.com/u/30779938/WolframCDFfiles/PlotPointManipulateOnlyGraph.cdf', 443, 489);
</script>
Now, it will create an anchor for me to jump to and gives a link to directly jump there.
The link is whatever the blogger URL is to get to that page with an #anchorName appended on the end.
So in my Plot Points CDF example, the blogger site is:
http://mathtechtips.blogspot.sg/2012/12/blog-post.html
Now, I created an anchor right above the Plot Point CDF on this page and called the anchor "cdfFile". To link directly to this point in my page, I use the link:
http://mathtechtips.blogspot.sg/2012/12/blog-post.html#cdfFile
This is the link I will reference in my iframe URL in the Google gadget that I use on my school Google Site.
To do this, I find the place in my Google Sites that I want to enter the CDF file and Insert->... More gadgets...
from there, choose iFrame:
and put the anchored URL link in the box, in this example:
http://mathtechtips.blogspot.sg/2012/12/blog-post.html#cdfFileThis will put the Google Gadget (in my case the iframe box, pointing to my blogger page with the CDF file) in your Google Sites page.
Once I hit the SAVE button at the top, I will see the finished product on my Google Sites page:
This is the best way that I have found to embed my CDF deployments in a Google EDU site. Please comment if you have some suggestions on how to improve it!
