Ipywidget radio button widget not rendering LaTeX on reload

[Trevor-Dartmouth]

I am currently making a multiple choice quiz in Jupyter Notebook using radio buttons for the answers from the latest release of ipywidgets. The quiz renders LaTeX as expected on the first render (when the code block is first run). However upon subsequent renders the LaTeX in the answers does not render appropriately while the question (Label widget) renders LaTeX just fine.

In order to get the LaTeX in the answers to render I either have to restart the kernel and restart the web page and run the code block again or (and interestingly) hit the run button (ctrl + enter) of the code block twice very fast to get the LaTeX to properly load.

Additionally, when I click on any of the radio button options the LaTeX of the answer options is converted back into plain text no matter which way I get the LaTeX to previously render.

Any help on resolving this issue would be much appreciated! Thank you!

[Trevor-Dartmouth]

Any resolutions/insights on this issue yet?

[vidartf]

Do you have some example code that could be copy-pasted into a notebook to replicate this issue?

[Trevor-Dartmouth]

Hi @vidartf

Here is the code I am using to create the multiple choice quiz with some hard coded strings.

from ipywidgets  import Layout, RadioButtons, Label, Output, VBox, Button
import ipywidgets as widgets
from IPython.display import display, HTML, clear_output, Markdown, Math, Latex

### Styles 
no_trunc = {'description_width': '1000px !important'}
quiz_layout = Layout(
    display='flex',
    justify_content='space-between',
    align_items='stretch',
    flex_flow='column',
    width='100%',
    height='100%',
)

title_layout = Layout(
    align_self='center',
    margin='0 0 0 0',
    display='flex',
    justify_content='center',
    align_items='center',
    width='100%',
    height='100%',
)

widget_layout = Layout(
    display='flex',
    margin='16 0 16 0',
    justify_content='space-between',
    align_items='stretch',
    flex_flow='column',
    border='2px solid black',
    width='100%',
    height='100%',
)

question_layout = Layout(
    align_self='center',
    display='flex',
    justify_content='center',
    align_items='center',
    width='100%',
    height='100%',
)

buttons_layout = Layout(
    display='flex',
    flex_flow='column',
    justify_content='space-between',
    align_items='flex-start',
    width='100%',
    height='100%',
    min_height="10em"
)

submit_layout = Layout(
    margin= '.5em 0px 0px .25em',
    height='2.5em',
    width='10em',
    text_align= 'center',
)
result_layout = Layout(

)

### End of Styles

### Start of Quiz Logic

correct_answer_index = 1

buttons = RadioButtons(
    options = [('$a= 5 + 3i$', 0), ('$b = 1 -6i$', 1)],
    style= no_trunc
)

question = Label(value='Let $a= 5 + 3i$, and $b = 1 -6i$. What is $a+b$')

feedback_out = Output()

def check_selection(b):
    a = int(buttons.value)
    if a==correct_answer_index:
        result = "<b><font color='green'>Correct!</b>"
    else:
        result = "<b><font color='red'>Incorrect</b>"
    with feedback_out:
        clear_output()
        display(widgets.HTML(
            value=result,
            layout= result_layout
        ))

    return

check = Button(
    description="Check Answer",
    button_style='info',
    layout= submit_layout
)
check.on_click(check_selection)
display(VBox(children=[question, buttons, check, feedback_out]))

Thank you!

[vidartf]

I'm not able to get the LaTeX to render at all for the options. Looking at the code, it doesn't seem like typesetting is supported for the radio labels at the moment. That it works from time to time, is probably a glitch (some other code is typesetting it). If you want typesetting for the labels, you can probably turn this issue into a feature request for that.

[parmentelat]

I'd like to +1
I've been trying to create this sort of quizzes with code fragments as the options, and have been failing so far due to this limitation IIUC

EDIT/PS: having reread a little more carefully, I realize that I might be off topic; so let me clarify, to avoid confusion, that I'm trying to inject HTML code as part of the options, so that what I'm trying to do looks like this

r = RadioButtons(
    options=[ipywidgets.HTML(value="<b>a</b>") ,'b','c'],
    description='radiobuttons')
r

but I'm getting this; what's the right way to do this ?

also I'm using ipywidgets version 7.4.2

[parmentelat]

A small follow-up; first off I am observing the same behaviour observed with 7.5.1

I am trying to create multiple-choice tests; traditionally there are 2 kinds of these, one where it is advertised that exactly one answer is correct, one where this info is not exposed so students need to tick all the answers they deem correct

former calls for RadioButtons; latter seems to call for something like the following

it feels odd that the former does not allow for html (unless I am missing something), while the latter does; is there a way around this ?

[vidartf]

Xref #2636.