HTML with SageCellServer - Interactive Webpages

edit

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