sphinx-exercise icon indicating copy to clipboard operation
sphinx-exercise copied to clipboard

FEAT: Add solution_after_exercise style option and improve dropdown UX

Open mmcky opened this issue 1 month ago • 1 comments

Add style_solution_after_exercise config option and improve dropdown UX

Summary

This PR adds two requested features to improve the styling and usability of solution directives, particularly for projects like QuantEcon lectures where solutions immediately follow exercises.

Changes

1. New Configuration Option: style_solution_after_exercise

Adds a new configuration option style_solution_after_exercise (default: False) that can be enabled in conf.py:

style_solution_after_exercise = True

Purpose: When enabled, this removes hyperlinks from solution titles while keeping the exercise reference text.

Before (default behavior with hyperlink):

Solution to Exercise 1 (Factorial Function)  [← clickable link]

After (with style_solution_after_exercise = True):

Solution to Exercise 1 (Factorial Function)  [← plain text, no link]

This is particularly useful when solutions follow exercises directly in the content, as it reduces confusion when users click on the dropdown to show the solution.

2. Improved Dropdown Button Text

Modified CSS to customize the dropdown toggle button text for a cleaner UI:

  • Changed "Click to show""Show"
  • Changed "Click to hide""Hide"

This applies to both exercise and solution directives when using the dropdown class from sphinx-togglebutton.

Implementation Details

  • Modified Files:

    • sphinx_exercise/__init__.py - Registered new config option
    • sphinx_exercise/post_transforms.py - Added conditional logic to remove hyperlinks
    • sphinx_exercise/assets/html/exercise.css - CSS customization for dropdown buttons
    • docs/source/syntax.md - Documentation for both features
  • New Files:

    • tests/test_style_solution_after_exercise.py - Comprehensive test coverage

Features

Backward compatible - Default behavior unchanged (opt-in configuration)
Well-tested - 3 new tests, all 113 tests pass
Properly handles:

  • Numbered and unnumbered exercises
  • Exercises with and without titles
  • Math expressions in titles (ensures MathJax is loaded)

Testing

All tests pass:

================================== 113 passed, 1 warning in 35.95s ==================================

New tests verify:

  • Solutions without hyperlinks when style_solution_after_exercise=True
  • Solutions with hyperlinks when style_solution_after_exercise=False (default)
  • Both numbered and unnumbered exercises

Usage Example

Configuration (conf.py):

extensions = [
    "sphinx_exercise",
    "sphinx_togglebutton",  # for dropdown functionality
]

# Enable new styling for solutions that follow exercises
style_solution_after_exercise = True

Content:

:::{exercise} Factorial Function
:label: ex-factorial

Write a function to calculate the factorial of a number.
:::

:::{solution} ex-factorial
:class: dropdown

Here's the solution...
:::

With style_solution_after_exercise = True, the solution title displays plain text without a hyperlink, and the dropdown button shows "Show" instead of "Click to show".

Documentation

  • Updated docs/source/syntax.md with full documentation
  • Includes configuration examples for both Sphinx and Jupyter Book projects
  • Documents the dropdown button text customization

Related Issues

Addresses user request for QuantEcon lectures where solutions follow exercises, reducing confusion with clickable links when using the dropdown class.

mmcky avatar Nov 03 '25 05:11 mmcky

  • [x] testing completed on real world lecture repository https://github.com/QuantEcon/lecture-python.myst/pull/670

mmcky avatar Nov 05 '25 03:11 mmcky