[IPython-dev] Format of RadioButtonsWidget description and options

[Winters, Kevin D ERDC-RDE-CHL-MS]

I’ve made compilations of widgets to achieve my goals of proper layout (usually wrapped in a class). Typically this means relying on the LatexWidget to act as labels for other widgets. I’ve made some alterations to your example to showcase my formatting method. The key issue with formatting to remember is that the css must be applied after the widget is displayed. When wrapped in a class, I’ve used the main widget compilation container’s on_displayed handler to guarantee that the formatting is applied correctly.

‘’’python

from IPython.html.widgets import (RadioButtonsWidget, ContainerWidget, ButtonWidget, LatexWidget)
from IPython.display import (display, clear_output)
answers = ["a) apple", "b) banana", "c) cherry"]
question = LatexWidget(value="Q1: What is the best fruit?")
choices = RadioButtonsWidget(description="", values=answers)
button = ButtonWidget(description="Check Me")
response = LatexWidget(value="")
check = ContainerWidget(children=[button, response])
container = ContainerWidget(children=[question, choices, check])

def on_click(button):
   clear_output()
   if answers.index(choices.value_name) == 1:
       response.value = "Correct!! The best fruit is the banana"
   else:
       response.value = "Incorrect. Try running the above code to see the best fruit."

button.on_click(on_click)
display(container)

choices.set_css({'padding-left':'30px'})
response.set_css({'padding-left':'10px'})
check.remove_class('vbox')
check.add_class('hbox')
check.set_css({'align-items':'center’})
‘''

Kevin

-------------------- 
Kevin Winters
Research Hydraulic Engineer
US Army Corps of Engineers
Engineer Research and Development Center
3909 Halls Ferry Road
Vicksburg, MS 39180
601.634.2102