Quiz: Dash Dashboards

Q: What are the two main parts of a Dash application? A) Routes and views B) Layout and callbacks C) Models and controllers D) Pages and templates

B. A Dash app consists of a layout (a tree of html and dcc components) and callbacks (reactive functions decorated with `@app.callback`).

Q: Which component is used to display a Plotly figure in Dash? A) `html.Plot` B) `dcc.Plot` C) `dcc.Graph` D) `html.Figure`

C. `dcc.Graph(id=..., figure=...)` displays a Plotly figure. The `figure` property holds the Plotly figure object.

Q: Which decorator connects a Python function to a component update? A) `@dash.callback` B) `@app.callback` C) `@component.update` D) `@layout.add`

B. `@app.callback(Output(...), Input(...))` is the standard decorator. In newer Dash versions, `@callback` (without the `app.`) also works.

Q: What is the difference between `Input` and `State` in a callback? A) `Input` triggers the callback; `State` is read but does not trigger. B) `Input` is for text; `State` is for numbers. C) They are the same thing. D) `Input` is read-only; `State` is write-only.

A. `Input` dependencies trigger the callback when they change. `State` dependencies are read when the callback fires but do not trigger it themselves. Use `State` for form patterns where you want to read values only when a button is clicked.

Q: Which property of a `dcc.Graph` contains information about clicked points? A) `clickInfo` B) `clickData` C) `onClick` D) `pointData`

B. `clickData` updates when the user clicks a point in the graph. It contains the clicked point's x, y, customdata, and other properties. Use it as a callback input to enable cross-filtering.

Q: The chapter's threshold concept is: A) Apps are scripts B) Callbacks are reactive declarations C) Dashboards are layouts D) Everything is a component

B. Dash's model is declarative: you declare which output depends on which inputs, and the framework calls your function when needed. This is different from imperative event handlers that say "do X when Y happens."

Q: Which library adds Bootstrap styling to Dash? A) `dash-css` B) `dash-bootstrap-components` C) `dash-styler` D) `dash-material`

B. `dash-bootstrap-components` (`dbc`) wraps the Bootstrap CSS framework as Dash components: `dbc.Container`, `dbc.Row`, `dbc.Col`, `dbc.Card`, etc. Install with `pip install dash-bootstrap-components`.

Q: Which component triggers a callback at regular intervals for auto-refresh? A) `dcc.Timer` B) `dcc.Interval` C) `dcc.Refresh` D) `html.Interval`

B. `dcc.Interval(id=..., interval=5000)` triggers a callback every 5000 milliseconds (5 seconds). Use for live dashboards that need automatic updates.

Q: What does `MATCH` mean in a pattern-matching callback? A) Match any value of the key B) Match the same value as the Output's corresponding key C) Match values smaller than the Output's key D) Match text patterns in strings

B. `MATCH` ties an Input to the same key as the Output, so per-component callbacks work correctly with dynamic IDs. `ALL` matches all values; `ALLSMALLER` matches values smaller than the Output's key.

Q: Why would you use a clientside callback? A) To run Python faster B) To avoid a server round-trip for simple UI logic C) To bypass security checks D) To test without a browser

B. Clientside callbacks run in the browser as JavaScript, eliminating the server round-trip for simple UI updates. Useful for frequent events (drag, hover) or simple computations that do not need Python libraries.

Quiz: Dash Dashboards

Part I: Multiple Choice (10 questions)

Q1. What are the two main parts of a Dash application?

A) Routes and views B) Layout and callbacks C) Models and controllers D) Pages and templates

Answer

**B.** A Dash app consists of a layout (a tree of html and dcc components) and callbacks (reactive functions decorated with `@app.callback`).

Q2. Which component is used to display a Plotly figure in Dash?

A) html.Plot B) dcc.Plot C) dcc.Graph D) html.Figure

Answer

**C.** `dcc.Graph(id=..., figure=...)` displays a Plotly figure. The `figure` property holds the Plotly figure object.

Q3. Which decorator connects a Python function to a component update?

A) @dash.callback B) @app.callback C) @component.update D) @layout.add

Answer

**B.** `@app.callback(Output(...), Input(...))` is the standard decorator. In newer Dash versions, `@callback` (without the `app.`) also works.

Q4. What is the difference between Input and State in a callback?

A) Input triggers the callback; State is read but does not trigger. B) Input is for text; State is for numbers. C) They are the same thing. D) Input is read-only; State is write-only.

Answer

**A.** `Input` dependencies trigger the callback when they change. `State` dependencies are read when the callback fires but do not trigger it themselves. Use `State` for form patterns where you want to read values only when a button is clicked.

Q5. Which property of a dcc.Graph contains information about clicked points?

A) clickInfo B) clickData C) onClick D) pointData

Answer

**B.** `clickData` updates when the user clicks a point in the graph. It contains the clicked point's x, y, customdata, and other properties. Use it as a callback input to enable cross-filtering.

Q6. The chapter's threshold concept is:

A) Apps are scripts B) Callbacks are reactive declarations C) Dashboards are layouts D) Everything is a component

Answer

**B.** Dash's model is declarative: you declare which output depends on which inputs, and the framework calls your function when needed. This is different from imperative event handlers that say "do X when Y happens."

Q7. Which library adds Bootstrap styling to Dash?

A) dash-css B) dash-bootstrap-components C) dash-styler D) dash-material

Answer

**B.** `dash-bootstrap-components` (`dbc`) wraps the Bootstrap CSS framework as Dash components: `dbc.Container`, `dbc.Row`, `dbc.Col`, `dbc.Card`, etc. Install with `pip install dash-bootstrap-components`.

Q8. Which component triggers a callback at regular intervals for auto-refresh?

A) dcc.Timer B) dcc.Interval C) dcc.Refresh D) html.Interval

Answer

**B.** `dcc.Interval(id=..., interval=5000)` triggers a callback every 5000 milliseconds (5 seconds). Use for live dashboards that need automatic updates.

Q9. What does MATCH mean in a pattern-matching callback?

A) Match any value of the key B) Match the same value as the Output's corresponding key C) Match values smaller than the Output's key D) Match text patterns in strings

Answer

**B.** `MATCH` ties an Input to the same key as the Output, so per-component callbacks work correctly with dynamic IDs. `ALL` matches all values; `ALLSMALLER` matches values smaller than the Output's key.

Q10. Why would you use a clientside callback?

A) To run Python faster B) To avoid a server round-trip for simple UI logic C) To bypass security checks D) To test without a browser

Answer

**B.** Clientside callbacks run in the browser as JavaScript, eliminating the server round-trip for simple UI updates. Useful for frequent events (drag, hover) or simple computations that do not need Python libraries.

Part II: Short Answer (10 questions)

Q11. Write a minimal Dash app with a dropdown that filters a chart.

Answer

from dash import Dash, html, dcc, Input, Output
import plotly.express as px

df = px.data.iris()
app = Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(id="species", options=df["species"].unique(), value="setosa"),
    dcc.Graph(id="chart"),
])

@app.callback(Output("chart", "figure"), Input("species", "value"))
def update(species):
    return px.scatter(df[df["species"] == species], x="sepal_length", y="sepal_width")

app.run(debug=True)

Q12. Explain the difference between Input and State with an example.

Answer

`Input` triggers the callback when the dependency changes. `State` is read but doesn't trigger. Example: a form with a text input and a submit button. You want to read the text only when the button is clicked, not on every keystroke. So: `Input("button", "n_clicks")` triggers, `State("text", "value")` is read.

Q13. Write a callback with two outputs that updates both a chart and a count label.

Answer

@app.callback(
    [Output("chart", "figure"), Output("count", "children")],
    Input("filter", "value"),
)
def update_both(filter_value):
    filtered = df[df["col"] == filter_value]
    return px.line(filtered, x="x", y="y"), f"Records: {len(filtered)}"

Q14. How do you implement cross-filtering between two Plotly charts?

Answer

Use the `clickData` or `selectedData` property of one chart as the `Input` to a callback that updates the other chart. Example: `Input("source-chart", "clickData")` reads the clicked point; the callback extracts the category or ID and filters the data for the target chart; the `Output("target-chart", "figure")` updates with the filtered version.

Q15. Write code to add a 5-second auto-refresh to a chart.

Answer

dcc.Interval(id="interval", interval=5000, n_intervals=0)

@app.callback(Output("chart", "figure"), Input("interval", "n_intervals"))
def refresh(n):
    df = fetch_latest_data()
    return px.line(df, x="time", y="value")

Q16. Describe the multi-page Dash pattern using dash.register_page.

Answer

Create a `pages/` directory next to your main `app.py`. Each `.py` file in `pages/` calls `dash.register_page(__name__, path="/path", name="Name")` to register itself as a page. The main app uses `use_pages=True`, `page_container` (to render the current page), and `page_registry` (to generate nav links).

Q17. What are pattern-matching callbacks and when are they useful?

Answer

Pattern-matching callbacks use dict-based component IDs like `{"type": "dynamic-slider", "index": i}` and can match multiple components with `ALL`, `MATCH`, or `ALLSMALLER`. Useful for dynamically-generated UIs where you don't know in advance how many components will exist — e.g., a list of cards where each has its own interactive elements.

Q18. What is the Flask server object that Dash creates, and why does it matter for deployment?

Answer

Dash creates a Flask app internally, accessible via `app.server`. For production deployment with Gunicorn or similar WSGI servers, you reference this Flask object: `gunicorn app:server`. The Flask object is what the WSGI server imports and runs.

Q19. Name three Dash pitfalls and their fixes.

Answer

(1) **Circular callbacks**: two callbacks reference each other's outputs. Fix: restructure dependencies or use `dash.no_update`. (2) **Slow callbacks blocking UI**: fix with `dcc.Loading` spinner, long callbacks for background work, or caching. (3) **No authentication by default**: add auth via reverse proxy, Flask-Login, or Dash Enterprise. (4) **Too many callbacks**: consolidate or refactor into multi-page structure. (5) **Inline styles scattered**: use external CSS or dbc.

Q20. Explain why Dash's callback model is harder to learn than Streamlit's re-run model, and why it's worth the effort for some projects.

Answer

Streamlit's model is imperative and linear: read the script top to bottom, and you know what will happen. Dash's model is declarative: you write callback functions whose execution order is determined by dependencies, not by script order. This takes more mental effort to understand and trace. But the declarative model makes complex dashboards more maintainable — you can see exactly what depends on what, add new features without breaking existing ones, and scale to enterprise-grade apps with authentication, cross-filtering, and real-time updates. For simple dashboards, Streamlit wins. For complex ones, Dash's declarative model pays for itself.

Scoring Rubric

Score	Level	Meaning
18–20	Mastery	You can build production Dash dashboards with callbacks, cross-filtering, and multi-page structure.
14–17	Proficient	You know the main APIs; review cross-filtering and pattern-matching callbacks.
10–13	Developing	You grasp the basics; re-read Sections 30.3-30.6 and work all Part B exercises.
< 10	Review	Re-read the full chapter.

Chapter 31 moves from interactive dashboards to automated reports.