Sage Cell Embedding

  • danetrata

    (@danetrata)


    11 years, 2 months ago

    Hi,
    I’m having trouble getting an embedded cell on my web page.

    I’m using the
    “CSS & Javascript Toolbox”
    and this is the code.

    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="http://sagecell.sagemath.org/static/jquery.min.js"></script>
    <script src="http://sagecell.sagemath.org/embedded_sagecell.js"></script>
    <script>$(function () {
    // Make the div with id 'mycell' a Sage cell
    sagecell.makeSagecell({inputLocation:  '#mycell',
                           template:       sagecell.templates.minimal,
                           evalButtonText: 'Activate'});
    // Make *any* div with class 'compute' a Sage cell
    sagecell.makeSagecell({inputLocation: 'div.compute',
                           evalButtonText: 'Evaluate'});
    });
    </script>

      <link rel="stylesheet" type="text/css" href="https://sagecell.sagemath.org/static/sagecell_embed.css">

  </head>
  <body>
  <h2>Factorial</h2>
  Click the “Activate” button below to calculate factorials.
    <div id="mycell">
        <script type="text/x-sage">
@interact
def _(a=(1, 10)):
    print factorial(a)
        </script>
    </div>
  </body>
</html>

    This runs in an html viewer, but I don’t understand why it doesn’t in the code snippet.
    The following are some resources I’ve been using:
    1
    2
    3

Viewing 1 replies (of 1 total)
  • nimon

    (@nimon)

    10 years, 11 months ago

    Hi,

    I have just been working on the same thing! I’m not sure if you have made any progress by now but in case you haven’t, here is what I have found to work.

    Using the snippet tool, include only the lines

    <script src="https://sagecell.sagemath.org/static/jquery.min.js"></script>
<script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>
<script>sagecell.makeSagecell({"inputLocation": ".sage"});</script>
<link rel="stylesheet" type="text/css" href="https://sagecell.sagemath.org/static/sagecell_embed.css">

    Make sure that the snippet tool is set to include this in the Header of the page.

    Now make sure the snippet tool is active on the page your working on, say Sage Test. Edit the page Sage Test and in the Text part of the editor (not the Visual) try and type

    <div class="sage">
  <script type="text/x-sage">1+2</script>
</div>

    You should get a sage cell on the page Sage Test which computes 1 + 2 and gives the answer 3. I tried to combine this with a VibeTheme and it did not work, then I tried it with a simpler theme (Sumo) and it worked a charm!

    I hope this helps.

Viewing 1 replies (of 1 total)

The topic ‘Sage Cell Embedding’ is closed to new replies.