Black Lives Matter. Please consider donating to Black Girls Code today.

Interactive RadioItems

Hi all,

I’m currently trying to make Interactive RadioButtons.
By clicking “up” or “down”, I want the selected question to move in those directions.
In order to avoid interference between the buttons (i.e. when the n_clicks are greater than 0, the questions won’t move since both are greater than zero), I’d like to reset the buttons after each click.
However, I can’t seem to be able to do that through callbacks (I get the “Error loading dependencies” messages).

Does anyone have any suggestions regarding how to solve this issue?

Thanks in advance,

Fred

Code:

from dash.dependencies import Input, Output, State
import dash
import dash_core_components as dcc
import dash_html_components as html

################

Gen Function

################

def findi(options, val):
print(options)
print(val)
for i in range(len(options)):
if list(options[i].values())[1] == val:
return i

##################

App Definition

##################

app = dash.Dash()
app.scripts.config.serve_locally = True
app.config[‘suppress_callback_exceptions’]=False

app.css.append_css({‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’})

app.layout = html.Div([
html.H4(‘Change Question Order’),
dcc.RadioItems(
id = ‘radio1’,
options=[
{‘label’: ‘Question 1’, ‘value’: ‘Q1’},
{‘label’: ‘Question 2’, ‘value’: ‘Q2’},
{‘label’: ‘Question 3’, ‘value’: ‘Q3’},
{‘label’: ‘Question 4’, ‘value’: ‘Q4’},
{‘label’: ‘question 5’, ‘value’: ‘Q5’}
],
value=‘Q1’
),
html.Br(),
html.Button(‘Up’, id=‘button5’, n_clicks = 0),
html.Button(‘Down’, id=‘button6’, n_clicks = 0)
])

##################

App Callback

##################

@app.callback(Output(‘radio1’, ‘options’),
[Input(‘button5’, ‘n_clicks’),
Input(‘button6’, ‘n_clicks’)],
[State(‘radio1’, ‘value’),
State(‘radio1’, ‘options’)])

def changeorder(but5,but6,val,opt):
print(“up = {0}, down = {1}”.format(but5,but6))
ind = findi(opt, val)
if but5 > 0:
if ind >= 1:
x = opt[ind - 1]; opt[ind - 1] = opt[ind]; opt[ind] = x
if but6 > 0:
if ind <= (len(opt) -2):
x = opt[ind + 1]; opt[ind + 1] = opt[ind]; opt[ind] = x
return opt

@app.callback(Output(‘button6’, ‘n_clicks’),
[Input(‘button6’, ‘n_clicks’)])
def resetbut6(but6):
if but6 > 0:
return 0

@app.callback(Output(‘button5’, ‘n_clicks’),
[Input(‘button5’, ‘n_clicks’)])
def resetbut5(but5):
if but5 > 0:
return 0

#####################

On-Load Directive

#####################

if name == ‘main’:
app.run_server(debug=True)