You could first add the anchor links inside the blocks with something like:
<a class="block-anchor" name="topic-1" title="Topic 1">
<a class="block-anchor" name="topic-1-exerciseblock-1-1" title="Exercise 1.1">
Then create a widget with some jQuery/javascript that pulls all the anchors and lists them. Probably the easiest way to do this would be to put a shortcode in a Text Widget, eg. [block-anchor-list]
.
add_shortcode('block-anchor-list', 'block_anchor_list');
function block_anchor_list() {
add_action('wp_footer', 'block_anchor_list_jquery');
$list = "<div id='block-anchor-list'></div>";
return $list;
}
function block_anchor_list_jquery() {
?>
<script>jQuery(document).ready(function() {
listhtml="<ul class="block-anchor-list">";
jQuery('.block-anchor').each() {
hash = jQuery(this).attr('name');
anchor = jQuery(this).attr('title');
listhtml += '<li class="block-anchor-item">';
listhtml += '<a href="#'+hash+'" title="Jump to '+anchor+'.">'+anchor;
listhtml += '</a></li>';
}
listhtml += '</ul>';
jQuery('#block-anchor-list').html(listhtml);
});</script>
<?php
}
Note this solution relies on jQuery being loaded on the frontend, but could be done with vanilla javascript also.