Support displaying external resources in flow page

course/content.py

@@ -527,6 +527,14 @@ class FlowRulesDesc(Struct):
 
 # {{{ mypy: flow
 
+class ExternalResourcesDesc(Struct):
+    def __init__(self, title: str, url: str) -> None:
+        self.title = title
+        self.url = url
+
+    title: str
+    url: str
+
 class FlowPageDesc(Struct):
     id: str
     type: str
@@ -594,13 +602,19 @@ class FlowDesc(Struct):
         A list of :ref:`pages <flow-page>`. If you specify this, a single
         :class:`FlowPageGroupDesc` will be implicitly created. Exactly one of
         :attr:`groups` or :class:`pages` must be given.
+
+    .. attribute:: external_resources
+
+        A list of :class:`ExternalResourcesDesc`. These are links to external
+        resources that are displayed on the bottom of the flow page.
     """
 
     title: str
     description: str
     rules: FlowRulesDesc
     pages: list[FlowPageDesc]
     groups: list[FlowPageGroupDesc]
+    external_resources: list[ExternalResourcesDesc]
     notify_on_submit: list[str] | None
 
 # }}}

course/flow.py

@@ -56,7 +56,7 @@
     is_expiration_mode_allowed,
     participation_permission as pperm,
 )
-from course.content import FlowPageDesc
+from course.content import FlowPageDesc, ExternalResourcesDesc
 from course.exam import get_login_exam_ticket
 from course.models import (
     Course,

course/templates/course/flow-page.html

@@ -371,6 +371,27 @@
 
   {# }}} #}
 
+  {# {{{ external resources #}
+
+  {# if flow_desc.external_resources > #}
+  <p class="d-inline-flex gap-1">
+    {% for resource_desc in flow_desc.external_resources %}
+    <button class="btn btn-primary" data-bs-toggle="collapse" role="button" aria-expanded="false"
+      href="#externalResource{{ forloop.counter }}" aria-controls="externalResource{{ forloop.counter }}">
+      {{resource_desc.title }}</button>
+    {% endfor %}
+  </p>
+
+  {% for resource_desc in flow_desc.external_resources %}
+  <div class="collapse multi-collapse" id="externalResource{{ forloop.counter }}">
+    <div class="card card-body">
+      <iframe width="100%" height="1000" src="{{resource_desc.url}}" frameborder="0" allowfullscreen>
+      </iframe>
+    </div>
+  </div>
+  {% endfor %}
+
+  {# }}} #}
   {# {{{ feedback #}
 
   {% if show_correctness and feedback %}

course/validation.py

@@ -1022,6 +1022,7 @@ def validate_flow_desc(vctx, location, flow_desc):
                 ("groups", list),
                 ("pages", list),
                 ("notify_on_submit", list),
+                ("external_resources", list),
 
                 # deprecated (moved to grading rule)
                 ("max_points", (int, float)),