Button to copy SageMath cell to clipboard

asked 2019-08-31 20:37:06 +0100

holistone
163 ●1 ●5 ●20

updated 2019-09-01 19:23:23 +0100

I will be using a link to a simple SageMathCell html page during Canvas quizzes in an online Discrete Math course. I would like to provide an additional "copy" button on the SageCell page that would allow the student to copy both their code and evaluated output into a textbox in a different browser window.

I realize it is now possible to separately cut and past the code and the output into a different textbox, but I would like to keep it as simple as possible. Any suggestions for the additional html that would add the button are appreciated.

To be more specific, I realize I could create an html button using:

<button onclick="myCopySageInOut()">Copy Sage Cell</button>

and I would need JavaScript code for the myCopySageInOut() function that would copy the input box text, append the output text and place in the clipboard. This is when I could use an example of the JavaScript code.

edit retag flag offensive close merge delete

Comments

Do you mean a HTML page with an embedded SageMathCell?

rburing ( 2019-09-01 14:24:38 +0100 )edit

Yes. A simple html page.

holistone ( 2019-09-01 16:38:03 +0100 )edit

I just tried to make this, but it's complicated. The output can contain LaTeX, images, etc. I can post a script that works only with text output (and ignores all other output), if you're interested.

rburing ( 2019-09-01 23:33:33 +0100 )edit

Yes, please post. Any starting point would be help and I am only interested in the text. The assignments will be simple code with simple text output.

holistone ( 2019-09-02 01:34:12 +0100 )edit

add a comment

2 Answers

Sort by » oldest newest most voted

answered 2019-09-02 12:15:18 +0100

rburing

10899 ●4 ●79 ●217 https://www.rburing.nl/

For a proper solution you should contact the developers of the SageMathCell.

Here is a hack that seems to work with text:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>SageMathCell</title>
    <script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>
    <script>
function add_copy_button() {
        var eval_button = $('#mysagecell').find('.sagecell_evalButton');
        console.log(eval_button.text());
        var copy_button = $('<button class="ui-button ui-corner-all ui-widget">Copy input and output</button>');
        copy_button.click(function() {
            console.log('hello');
            var input_lines = $('#mysagecell .sagecell_input pre')
            var output_lines = $('#mysagecell .sagecell_output pre')
            var input = $.map(input_lines, function(element) { return $(element).text() }).join('\n');
            var output = $.map(output_lines, function(element) { return $(element).text() }).join('\n');
            $('#clipboard').val('Input:\n\n' + input + '\n\nOutput:\n\n' + output);
            $('#clipboard').show();
            $('#clipboard').select();
            document.execCommand('copy');
            $('#clipboard').hide();
        });
        eval_button.after(copy_button);
}
$(document).ready(function() {
        $('#clipboard').hide();
        sagecell.makeSagecell({inputLocation: '#mysagecell',
                           evalButtonText: 'Evaluate'});
        var buttonExists = setInterval(function() {
           if ($('#mysagecell .sagecell_evalButton').length) {
              add_copy_button();
              clearInterval(buttonExists);
           }
        }, 100);
    });
    </script>
</head>
<body>

<h2>Your own computations</h2>
Type your own Sage computation below and click “Evaluate”.
<div id="mysagecell"><script type="text/x-sage">print next_prime(7)
print next_prime(11)
print next_prime(13)</script></div>
<textarea id="clipboard"></textarea>
  </body>
</html>

edit flag offensive delete link

Comments

That's an excellent starting point. Just a few minor modifications. Many thanks.

holistone ( 2019-09-03 05:38:52 +0100 )edit

add a comment

answered 2019-09-01 13:21:44 +0100

Emmanuel Charpentier
7744 ●6 ●50 ●153

What's wrong with the "Share" button ?

edit flag offensive delete link

Comments

The "Share" button creates a link to another html page which contains the code and the output and yet another "Share" button, and so on.

I want to be able, in a single step, to copy both the code and the output into the clipboard so it can be pasted into a simple text box in another html page.

holistone ( 2019-09-01 16:43:12 +0100 )edit

add a comment

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Button to copy SageMath cell to clipboard

Comments

2 Answers

Comments

Comments

Your Answer

Question Tools

Stats

Related questions

Button to copy SageMath cell to clipboard edit

Comments

2 Answers

Comments

Comments

Your Answer

Question Tools

Stats

Related questions

Button to copy SageMath cell to clipboard