<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg-flat.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title>XHTML template: MathML, SVG, JavaScript, iframe, CSS</title>	
	<meta name="generator" content="BBEdit 9.2" />
	
	<style type="text/css">
	table {border: 1px solid; width: 100%; border-collapse:collapse}
	td {border: 1px solid; padding: 10px; text-align: center}
	</style>
	
</head>

     
<body style="background: #CCCC99">

<h1>Template for XHTML + MathML + SVG<br />
&#160;&#160; + JavaScript + iframe + CSS</h1>

<p>In July 2009, I again spent days seeing if I would be able to upgrade my web site to make it available to a wider browser
audience, by re-writing all my code in XHTML.<br />
<br />
Unfortunately, as this test page illustrates, I am still unable to do what I need to do in any environment other than PC + Internet Explorer + MathPlayer.<br />
<br />
So... the good news is that I won't be spending hundreds of hours converting my code to XHTML.<br />
This way, I'll have lots more time to devote to learning how to write math apps for the iPod Touch/iPhone.<br />
<br />
The bad news is that my site will remain fully functional only to those people using a PC, with Internet
Explorer as the browser, and with MathPlayer installed.<br />
On the newer MACS, my site is fully functional in "PC-mode," providing again that you use Internet Explorer and have
downloaded MathPlayer.<br />
(Since I'm now primarily a MAC-user, I have to go into "PC-mode" to use my own web site!)<br />
<br />
Sorry, everyone.  Again, I've tried.<br />
If anyone reading this page has ideas about overcoming the difficulties illustrated in this test document,<br />
then I'd be very appreciative if you'd contact me with your insights.  Thanks!
</p>

<p>
Reference for the DTD (<b>D</b>ocument <b>T</b>ype <b>D</b>efinition) used in this file:<br /> 
<a href="http://www.w3.org/TR/XHTMLplusMathMLplusSVG/#howto-xhtml">http://www.w3.org/TR/XHTMLplusMathMLplusSVG/#howto-xhtml</a>
</p>

<p>When you save the file, the file extension must be ".xml";<br />
this is an e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage document.</p>

<p>This file has been validated:<br />
XHTML: <a href="http://validator.w3.org/">http://validator.w3.org/</a><br />
CSS: <a href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator</a></p>

<h2>MathML (Math Markup Language)</h2>

<p>This is an IMAGE of the "horizontal fraction" that
you will see below, if MathML is displaying properly: &#160;&#160; 
<img src="graphics/sample_MathML.png" alt="a horizontal fraction" width="51" height="60" style="vertical-align: middle" /> 
</p>

<p>MathML: &#160;&#160; 
    <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
    <mstyle displaystyle="true">
      <mfrac>
        <mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow>
        <mrow><mi>x</mi><mo>+</mo><mn>2</mn></mrow>
      </mfrac>
      </mstyle>
     </mrow>
     </math>
     </p>
  <h2>SVG (Scalable Vector Graphics)</h2>
  
  <p>This is an IMAGE of the circle that
you will see below, if SVG is displaying properly: &#160;&#160; 
<img src="graphics/circle_image.png" alt="a circle" width="133" height="129" style="vertical-align: middle" /> 
</p>
<p>SVG:</p>

    <svg:svg version="1.1"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="140" height="160">
      <svg:circle cx="70" cy="70" r="50" style="stroke: black; fill: none"/>
    </svg:svg>
 
 <h2>IFRAME WITH DYNAMIC TEXT CONTAINING HTML CODE,<br />
 USING JAVASCRIPT (NO MathML)</h2>
 
 <p>The &lt;iframe&gt; tag does not validate, but it works as indicated in the chart below.</p>
 
 <form id="theform" action = "" >
<p>Click on "new problem" to get started!<br />
 <input type="button" id="newprobbutton" value="new problem" onclick="newprobs()" /><br /><br />
 Simplify:<br />
 <iframe id="put_problem_here" width="35%" height="80" marginheight="2" marginwidth="4" style="background: white">Your browser does not support inline frames.</iframe><br /><br />
Put your answer here:<br />
<input type="text" id="ans" size="20" onblur="check()" /><br /><br />
Click here or press "tab" to check your answer:<br />
<input type="text" id="putans" size="50" /></p>
 </form>
       
    
   <!-- &#10003; = Unicode checkmark
          &#160; = Unicode non-breaking space
   -->
   
  <table>
  <tr align="center"><td>July<br />2009</td><td>MathML?</td><td>SVG?</td>
  <td>iframe with dynamic text containing HTML code, using JavaScript<br />(no MathML)</td><td>NOTES</td></tr>
  
  <tr><td>Firefox (on MAC)<br />(Version 3.5)</td><td>&#10003;</td><td>&#10003;</td><td>NO:<br />
  Text inside HTML tags is completely ignored.
  </td><td>&#160;</td></tr>
  
  <tr><td>Internet Explorer<br />(Version 6.0, implemented on the MAC with VMWare Fusion)</td><td>NO</td><td>NO</td><td>NO</td>
  <td style="text-align: left">As a LOCAL file on my machine:<br />
  MathML works, but not SVG;<br />
  Unicode checkmark does not display;<br />
  iframe with dynamic text containing HTML code, using JavaScript, works.<br /><br />However, once I uploaded to my web server
  and tried to access the file, it wouldn't display at all.  I got the following error:<br />
  "The XML page cannot be displayed. Cannot view XML input using style sheet.<br />
The character '&gt;' was expected.<br />
Error processing resource 'http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg-flat.dtd..."  
  </td></tr>
  
  <tr><td>Opera (on MAC)<br />(Version 9.64)</td><td>NO</td><td>&#10003;</td><td>NO:<br />
  Text inside HTML tags appears, but HTML formatting is not applied.</td><td>&#160;</td></tr>
  
  <tr><td>Safari (on MAC)<br />(Version 4.0.1)</td><td>NO</td><td>&#10003;</td><td>NO:<br />
  Text inside HTML tags is completely ignored.</td><td>&#160;</td></tr>
  
  <tr><td>Firefox (on PC)<br />
  (Version 3.5)</td><td>&#10003;</td><td>&#10003;</td><td>NO:<br />
  Text inside HTML tags is completely ignored.</td><td>&#160;</td></tr>
  
  <tr><td>Internet Explorer (on PC)<br />
  (Version 8.0)</td><td>NO</td><td>NO</td><td>NO</td><td style="text-align: left">File would not display at all. I got
  the following error:<br />
  "Cannot view XML input using XSL style sheet.<br />
  Use of default namespace declaration attribute in DTD not supported."</td></tr>
  
  <tr><td>Chrome (on PC)<br />
  (Version 2.0)</td><td>NO</td><td>&#10003;</td><td>NO:<br />
  Text inside HTML tags is completely ignored.</td><td>&#160;</td></tr>
  </table>
  
<script type="text/javascript">

  
var testHTML = "There should be three words below, which appear in a big, bold typeface:<br /><big><b>BIG and BOLD</b></big>";

var myiFrame = self.document.getElementById("put_problem_here");
var doc = myiFrame.contentDocument;

if ( doc==undefined || doc==null ) {
doc = myiFrame.contentWindow.document;
} 

doc.open();
doc.write(testHTML);
doc.close();

function rand(a,b) {
// randomly selects an integer between integers  a  and  b
c = Math.floor((b+1-a)*Math.random() + a); 
return c;
}

function newprobs() {
self.document.getElementById('ans').value = "";
self.document.getElementById('putans').value = "";
operation();
self.document.getElementById('ans').focus();
}

function check() {
var x1 = self.document.getElementById('ans').value;
if (x1 == answer) {
self.document.getElementById('putans').value = "Correct!";
self.document.getElementById('newprobbutton').focus(); 
}
else {
     self.document.getElementById('putans').value = "Sorry. The correct answer is "+answer; 
}
	 self.document.getElementById('newprobbutton').focus(); 
}

function operation () {
exp1 = rand(0,5);
exp2 = rand(0,5);
string = exp1 + " + " + exp2 + " = ";
answer = exp1 + exp2;
self.put_problem_here.document.open();
self.put_problem_here.document.write(string);
self.put_problem_here.document.close();
}

 </script>
 
    
    
</body>
</html>