Ask Your Question
1

HTML with SageCellServer - Interactive Webpages

asked 2015-12-07 15:30:35 -0500

NoviceMS gravatar image

Hi,

I have put together an interact using HTML-characters to display chess pieces, which display perfectly fine in the notebook. When I use the interact in a html-file (to make it available on an interactive website) via the SageCellServer, however HTML is not displayed as expected.

Moreover the buttons on the selector list look differently (different size, shape and color) as in the notebook. Is there a way to display the interact on a website just as it would appear in the notebook?

Another probably related question: Can I influence how buttons and lists appear in an interact by pre-formatting them? For example in my interact the 32 buttons for question 2 are wrapped around due to the page-width limit and then are displayed as two rows of different length. I would like to display those 32 buttons in two (or four shorter) rows of equal length. Is there a way to fine tune this? (I looked at the interact and found something about "canvas", but not sure how to properly use this in an interact.)

Is there any other way to formatting the input part of an interact?

Here is a http://www.dim.uchile.cl/~mschraudner/files/Screenshot.png (link) to a screenshot of how things look in the notebook.

Here is the http://www.dim.uchile.cl/~mschraudner/files/Zeros.html (.html-file) I am using website and here is a http://www.dim.uchile.cl/~mschraudner/files/Screenshot2.png (link) to a screenshot of the badly-formatted output I get.

Thanks in advance for any hints or ideas. Best Michael

Here is my (shortened) code for the interact:


L1=["","","","","","","","","",""]
L2=["a1","a3","a5","a7","b2","b4","b6","b8","c1","c3","c5","c7","d2","d4","d6","d8","e1","e3","e5","e7", "f2","f4","f6","f8","g1","g3","g5","g7","h2","h4","h6","h8"]
L3=["Yes (Sí)","No (No)"]

@interact
def ChessCoords(Q1=selector(L1,buttons=True,label="Question 1:   g4 "), Q2=selector(L2,width=4,buttons=True,label="Question 2:   "), Q3=selector(L3,width=15,buttons=True,label="Question 3:        ")):
  if L1.index(Q1)==0 and L2.index(Q2)==0 and L3.index(Q3)==0:
    pretty_print(html("")) 
    pretty_print(html("To compute final coordinates, select your answers."))
  else:
    pass
 
edit retag flag offensive close merge delete

1 answer

Sort by » oldest newest most voted
1

answered 2017-02-18 18:50:47 -0500

It doesn't appear to be possible as of early 2017 to use HTML in SageMathCell interacts. I think this is because the software used to display code (CodeMirror) is automatically escaping the characters <, > and & that are needed to tell the browser to render content as HTML.

You can however get this to work by using Unicode characters, making sure to preface the strings with u. The number of rows of buttons for L2 is controlled by the nrows option. The width option appears to be ignored by SageMathCell. I've also formatted the labels to all selectors using LaTeX, since that forces them to stay on one line.

Here's some modified code:

L1=[u"♕",u"♖",u"♗",u"♘",u"♙",u"♛",u"♜",u"♝",u"♞",u"♟"]
L2=["a1","a3","a5","a7","b2","b4","b6","b8","c1","c3","c5","c7","d2","d4","d6","d8","e1","e3","e5","e7", "f2","f4","f6","f8","g1","g3","g5","g7","h2","h4","h6","h8"]
L3=[u"Yes (Sí)","No (No)"]

@interact
def ChessCoords(Q1=selector(L1,buttons=True,label="$\\text{Question 1:} \\; \\text{g4}$"),
                Q2=selector(L2,buttons=True,label=u"$\\text{Question 2:} \\; ♗ \\,$",nrows=4),
                Q3=selector(L3,buttons=True,label="$\\text{Question 3:} \\;\\;\\;\\;$")):
  if L1.index(Q1)==0 and L2.index(Q2)==0 and L3.index(Q3)==0:
    pretty_print(html("")) 
    pretty_print(html("To compute final coordinates, select your answers."))
  else:
    pass

and here's how it looks in action.

edit flag offensive delete link more

Your Answer

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

Add Answer

Question Tools

1 follower

Stats

Asked: 2015-12-07 15:11:25 -0500

Seen: 139 times

Last updated: Feb 18