feat: add contextual help panels to all backoffice pages

Add a 50/50 or 66/33 split layout to every backoffice page with Dutch
instructions explaining how to use Tijd voor de Test. Content covers the
overall workflow, quiz finalize/activate flow, and both candidate
participation methods (own device vs. shared laptop).

Help text lives in dedicated partials under templates/backoffice/help/ and
is loaded via Twig include(), keeping page templates clean. All strings use
a separate 'instructions' translation domain (instructions+intl-icu.nl.xliff)
isolated from the main messages domain.

Also updates 'Finalize'-related Dutch translations to use 'Afronden' and
adds tooltips to the finalize/unfinalize buttons.

templates/backoffice/quiz/tab_candidates.html.twig

@@ -1,3 +1,5 @@
+<div class="row">
+<div class="col-xl-9 col-12">
 <div class="d-flex justify-content-between align-items-center mb-3">
     <div>
         {% set questions = quiz.questions %}
@@ -64,3 +66,8 @@
     </table>
     <button type="submit" class="btn btn-primary">{{ 'Save'|trans }}</button>
 </form>
+</div>
+<div class="col-xl-3 col-12">
+    {{ include('backoffice/help/quiz_answer_mapping.html.twig') }}
+</div>
+</div>

templates/backoffice/quiz/tab_candidates_list.html.twig

@@ -1,3 +1,5 @@
+<div class="row">
+<div class="col-md-8 col-12">
 <h4 class="mb-3">{{ 'Candidates'|trans }}</h4>
 <table class="table table-hover mb-3">
     <thead>
@@ -50,3 +52,8 @@
         {% endfor %}
     </tbody>
 </table>
+</div>
+<div class="col-md-4 col-12">
+    {{ include('backoffice/help/quiz_candidates.html.twig') }}
+</div>
+</div>

templates/backoffice/quiz/tab_overview.html.twig

@@ -22,7 +22,8 @@
     </div>
 {% endmacro %}
 
-<div data-controller="bo--quiz">
+<div class="row">
+<div class="col-md-8 col-12" data-controller="bo--quiz">
     <h4 class="mb-3">
         {{ 'Quick actions'|trans }}
         {% if quiz.isFinalized %}
@@ -56,14 +57,18 @@
         {% if not quiz.isFinalized %}
             <form action="{{ path('tvdt_backoffice_quiz_finalize', {quiz: quiz.id}) }}" method="POST">
                 <input type="hidden" name="_token" value="{{ csrf_token('finalize_quiz') }}">
-                <button type="submit" class="btn btn-success rounded-0">
+                <button type="submit" class="btn btn-success rounded-0"
+                        data-bs-toggle="tooltip"
+                        title="{{ 'Locks the quiz so it can no longer be edited and makes it ready for candidates to take.'|trans }}">
                     {{ 'Finalize'|trans }}
                 </button>
             </form>
         {% elseif not quiz.hasStartedCandidates and quiz is not same as (season.activeQuiz) %}
             <form action="{{ path('tvdt_backoffice_quiz_unfinalize', {quiz: quiz.id}) }}" method="POST">
                 <input type="hidden" name="_token" value="{{ csrf_token('unfinalize_quiz') }}">
-                <button type="submit" class="btn btn-outline-success rounded-0">
+                <button type="submit" class="btn btn-outline-success rounded-0"
+                        data-bs-toggle="tooltip"
+                        title="{{ 'Re-opens the quiz for editing. Candidates will no longer be able to take the quiz until it is finalized again.'|trans }}">
                     {{ 'Undo finalization'|trans }}
                 </button>
             </form>
@@ -138,3 +143,7 @@
         csrf_token('delete_quiz'),
     ) }}
 </div>
+<div class="col-md-4 col-12">
+    {{ include('backoffice/help/quiz_overview.html.twig') }}
+</div>
+</div>

templates/backoffice/quiz/tab_result.html.twig

@@ -1,3 +1,5 @@
+<div class="row">
+<div class="col-md-8 col-12">
 <h4 class="mb-3">{{ 'Score'|trans }}</h4>
 <div class="btn-toolbar mb-3" role="toolbar">
     <div class="btn-group me-2">
@@ -69,3 +71,8 @@
     {% endfor %}
     </tbody>
 </table>
+</div>
+<div class="col-md-4 col-12">
+    {{ include('backoffice/help/quiz_result.html.twig') }}
+</div>
+</div>