How to convert a formula into MathML for use in a web page

I've spent hours online looking for a solution, and been down too many weird alley ways...

Lets say I have a formula: x^2 + 3x + 32

I want to randomly choose to replace a part of the formula with a text box (I can do this)

x^2 + [textbox]x +32

And then display the result nicely formatted for input by the student. (I can't do this)

I have looked at MathJax and MathML and I think that If i can get the result into mathml format including the textbox I'm sorted. I can already display formulas nicely using MathJax.

What Doesnt work:

Find and replace on the resulting formula with a text box (replacing the number)
Find and replace on the resulting formula with a text box (adding annotation tags)

Both approches I have tried mess up the spacing / clip the textbox so it is unusable. I think the only way is to generate the MathML with the textbox already included, instead of trying to add it afterwards.

But I don't know how? Anyone can suggest a way to generate mathml with textbox for use in mathjax?

Here is my failed attempt so far:

<script type="math/mml" id="scriptTag">
  <math>
    <mfrac>
      <msqrt>
        <mn>
          <semantics>
            <annotation-xml encoding='application/xhtml+xml'>
              <input xmlns='http://www.w3.org/1999/xhtml' type='text' size='4' />
            </annotation-xml>
          </semantics>
       </mn>
     </msqrt>
     <mn> 3 </mn>
    </mfrac>
  </math>
</script>

I can create the basic (no textbox) mathml using this guide: http://www.xmlmind.com/tutorials/MathML/

Solution

I think modern browsers allow some mixing of HTML elements and MathML elements in HTML5:

<div>
<h2>Example 2</h2>
<div>
<math>
  <mrow>
    <mn><input type="text" size="4"></mn>
    <mo>*</mo>
    <mi>x</mi>
  </mrow>
</math>
</div>
</div>

<div>
<h2>Example 2</h2>
<div>
<math>
  <mrow>
    <mn><input type="text" size="4"></mn>
    <mo>*</mo>
    <mi>x</mi>
  </mrow>
</math>
</div>
</div>

Here is a superscript example, with Firefox that input box appears:

<div>
<h2>Example msup</h2>
<div>
<math>
  <mrow>
    <msup>
      <mn>2</mn>
      <mn><input type="text" size="4"></mn>
    </msup>
  </mrow>
</math>
</div>
</div>

<div>
<h2>Example msup</h2>
<div>
<math>
  <mrow>
    <msup>
      <mn>2</mn>
      <mn><input type="text" size="4"></mn>
    </msup>
  </mrow>
</math>
</div>
</div>